Building a single-page site in Webflow - Episode 2 of Designing a Website

Рет қаралды 106,827

6 жыл бұрын

In this episode I'm tackling the design and build of an 'MVP' single page site for my personal website (meaning, the minimum viable product to get the job done). Hope you enjoy seeing the process! Please remember to subscribe bit.ly/1aE5UOT
** Try Webflow out for yourself: charli.link/webflow **
Challenge yourself to build a single page website like mine in Webflow to practice! (Go ahead and copy the design if you want, just choose your own fonts and colors!) And BTW, that link is an affiliate link meaning if you like the tool and decide to pay for a plan I will get a small kickback, at no additional cost to you! It's a great way to support my channel :)
Next up in the series will be wireframing for the full site! Hope you're looking forward to it as much as I am. The full series is here: • Designing and building...
Please remember to click subscribe if you'd like to see more of my videos.
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I posting videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.
💬 Twitter: / charliprangley
📷 Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Nancy Palm nancypalm.com & Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

Пікірлер: 166

@jenniferl.1511 6 жыл бұрын

Love this series!! So helpful for beginners :) Please keep this series going. Thank you for your efforts and great quality explanations!

@charlimarieTV 6 жыл бұрын

So glad you think it’s helpful! Will definitely keep it going :)

@smellybum7 6 жыл бұрын

Awesome stuff Charli! I think your walk through tutorials are really effective. Keep it up kiwi

@scoobatman 6 жыл бұрын

this is smart and refreshing for someone tackling building and run a page for the first time.

@suehanen6775 5 жыл бұрын

You have come up with a great idea for new designers, keep the episodes coming.

@evykramer 6 жыл бұрын

This is a great video. I can't wait to see more.

@sanchezisfine 4 жыл бұрын

I like the fact that you don't have much experience with Webflow because it gives me the feeling of "if you can do it, then I can do it too!". Thanks for this series, will watch til the end.

@meligatt 6 жыл бұрын

Keep up the good content, Charli!..don't pay attention to people being picky about what's code and what's not code. Your tutorial about webflow was that: How to use this tool, not to get philosophical about code. I know this tools can help many people who doesn't have the time to learn in depth html css js on creating their content online. Of course it has pros and cons, and yes, personally I would prefer to code it from the scratch because that's my job, but I love that people can create their own websites to share what they do with the world.

@MartinHeyamBieleckiBigArt 6 жыл бұрын

Hey! Philosophy is good - especially about the code. The problem is with an ignorance which may appear during a philosophical deliberation. Lack of time doesn't mean that you can't get good at coding - right?

@noufb375 6 жыл бұрын

I saw your website last night and I’m in love with how simple and elegant it is

@charlimarieTV 6 жыл бұрын

Thank you so much!

@toniconn9688 6 жыл бұрын

The SVGOMG site is wonderful! Thank you for sharing!

@deannabarlow22 6 жыл бұрын

Love this web series Charli! Always look forward to your videos :)

@charlimarieTV 6 жыл бұрын

Thank you Deanna! Always appreciate your support :)

@thedigitalnoodle4021 3 жыл бұрын

These are awesome Charli. I’ll be going through your vids.

@daniwaters3687 6 жыл бұрын

Yasss!! Been looking for videos like this. Thank you! When’s the next one out? :D

@baderelhayah7961 5 жыл бұрын

I don't know how you do it but you have the best voice quality in your videos 0 noise, anyway good job with the website mockup.

@skeeterbrookscreationsllc2106 5 жыл бұрын

Wish you could have slowed the part where you speeded through but, I enjoyed it and it sure helped me to give thought to what I need to do.

@grantsenior9226 6 жыл бұрын

Thanks Charli, super helpful !!

@paddybreslin8510 6 жыл бұрын

Hi great videos, I started with Webflow a few years ago. Am currently rebuilding my site, now I've a better understanding of how the coding works. Was a bit frustrating coming from design tools, but once we understand the structure of pages it all makes sense. My tip is to create a test page, where you can try elements without interrupting your main site. P

@natasharedmane 6 жыл бұрын

Please do more videos about your design process, they're so good!

@agadiri1974 5 жыл бұрын

@rccowboys 4 жыл бұрын

wow your hair changed! I like it, very nice! btw great video series!

@dfinkdesign917 5 жыл бұрын

For icons, it's a ton easier to upload an icon font like font awesome or any other icon font. Then you can change the color easily using text attributes without having to add code. I do hope Webflow incorporates icons into the designer very soon.

@shruthibaskar1647 6 жыл бұрын

Really useful video! Thank you so much for sharing your knowledge with us(especially for those who cannot afford expensive courses). What you're doing here is amazing! Pease, don't listen to trolls.

@charlimarieTV 6 жыл бұрын

Thanks so much for watching, and for your support!

@derekshort Жыл бұрын

Charli, you’re gorgeous! 😮 I love your hair and lipstick.

@joaovitorassis4347 5 жыл бұрын

Hi, Marie. I really enjoy your content! Keep up the good work. Thanks!

@charlimarieTV 5 жыл бұрын

Thanks! My name is Charli though jsyk :) I appreciate you watching!

@joaovitorassis4347 5 жыл бұрын

Oh, sorry, Charli! Now I got it hahah

@medomiller4386 5 жыл бұрын

I love your video tutorial.keep on the good job

@charlimarieTV 5 жыл бұрын

Thank you!

@rahuldeniz1972 5 жыл бұрын

Today I got to know I am a very good designer thanks dear for your awesome videos

@jamesm6918 6 жыл бұрын

I've been using Adobe Muse for the past 6 years, and Adobe have just decided to pull the plug on it. I'm excited to expand my skills and master Webflow now :) Hopefully the team at Webflow don't decide to bin that too in the near future!

@charlimarieTV 6 жыл бұрын

I don’t think they will! They’ve raised a lot of money and have a lot of respect in the tech community. Adobe muse was notorious for producing bloated code, whereas Webflow is really clean. You’re gonna love it!! Might be a learning curve at first, but it will be worth it :)

@bowsim 6 жыл бұрын

This was so dope

@charlimarieTV 6 жыл бұрын

Glad you enjoyed it!

@ishankansal6991 4 жыл бұрын

beautiful...

@RobertLoyale 4 жыл бұрын

Everyone has a different process to creating web pages. I remember watching this a few years ago.

@bangunaplikasi8986 5 жыл бұрын

nice tutorial :)

@iwonazarobkiewicz3391 5 жыл бұрын

It's Minimal VARIABLE Product ;) I love your channel, btw! xxx

@jovaniharrington1161 5 жыл бұрын

en.wikipedia.org/wiki/Minimum_viable_product

@AS-ld5mz 4 жыл бұрын

HI, can I ask what software you using for research and notes? is cool you can have vids and all. Thanks

@carlos.arenas 6 жыл бұрын

I love your videos

@charlimarieTV 6 жыл бұрын

Thank you Carlos!

@imeldabaco2582 3 жыл бұрын

most likely my website is gonna look like this coz i love your choice of colors, fonts and all 😅 your an inspiration.. thank you, your explanations are so clear and simple for us asians.. i hope your not a racist though 😁

@loungeblogger 6 жыл бұрын

what's the difference between a container and a div and when should I use which?

@jbquigley2010 4 жыл бұрын

Your videos are super helpful. I was gonna ask how to import Figma designs into Webflow but then I found your video on that lol

@charlimarieTV 4 жыл бұрын

haha glad you found it!

@tomislavnikic2146 6 жыл бұрын

This looks awesome! Is the MVP always meant to be used only as a placeholder until the final solution is done?

@charlimarieTV 6 жыл бұрын

Yup!

@muralidharan2044 5 жыл бұрын

hi can i design in webflow and export the codes to different hosting partner. what is the price i have to pay? to design and export code

@amandahilleary2581 5 жыл бұрын

I can't find your blog, is it available or work in progress??

@anirudhbbalotiaa 5 жыл бұрын

Thanks, curious what is the learning curve for Webflow, from the video above seems fairly high? Looking to rebuild my current wordpress (divi theme) to something more easy to use.

@charlimarieTV 5 жыл бұрын

Give it a try! I think you’ll be pleasantly surprised :)

@valton47 5 жыл бұрын

Charli clearly knows her 'stuff'. And she also is very engaging too. Bubbly, effervescent and fun. The issue for me isn't about Charli's knowledge, skill or experience; my issue is the speed at which all of this happens. I suppose the first thing to do when making 'training' videos of this type is to decide on the 'target' audience; i.e. is this for beginners, intermediate or advanced users?

@charlimarieTV 5 жыл бұрын

Hi Tony! This particular series isn’t completely intended to be a tutorial or step by step instructions to create a website. It’s a look at my process and how I personally approach the task (and all the little tasks within it!). So beginners who have never designed a website before may very well find this hard to follow, you’re right. Thank you for your kind words though!

@jhersonmedina721 6 жыл бұрын

i would like some tips to design a functional website about sport events. It's a proyect from high school. it has different users like trainer, admin and normal user, it allows schedule trainings, receive documentation on pdf and shows past, actual and future events. Help pls!! I'd like your opinions

@michaelmadayag1650 3 жыл бұрын

what software did you use before you create your single webpage in webflow

@erichepperledesigns 5 жыл бұрын

Nice #timelapse Charli. What program(s) did you use for this process before you discovered webflow?

@charlimarieTV 5 жыл бұрын

before Webflow i would just code it! :) Once I had a squarespace site too, when i just needed a basic portfolio.

@Tmonsterism 5 жыл бұрын

Good video - I don't think you said - What program did you do your roughs in at the beginning? I don't recognize it....

@charlimarieTV 5 жыл бұрын

Sketch! :)

@lisaha6745 3 жыл бұрын

what did you use to build your logo name?

@sultanbtc7749 4 жыл бұрын

which camera are you use for facecam

@antoniorollandeyves6852 2 жыл бұрын

Hey ! What's the name of this app that you create design pls ?

@scallymuffin 5 жыл бұрын

Great video. Thanks. How did you get your logo to be animated? Is that code?

@agadiri1974 5 жыл бұрын

hello Julia

@tantamoto2210 4 жыл бұрын

You can animate SVG file like you are writing it by hand with css. If you want the code, just text here and I will help.

@joyceshiau898 4 жыл бұрын

Hello Charli very like how you share your experience on your design. I am wondering which program when you are design your draft in the very beginning in your video? It looks very cool and convenient to design for the draft. ------ subscribed !! thank you

@charlimarieTV 4 жыл бұрын

In this video i'm using a tool called Sketch, but I've since switched to a tool called Figma which does a similar thing but better, and is free! bit.ly/figma-charli

@joyceshiau898 4 жыл бұрын

@@charlimarieTV thank you for responding. I feel I learn a lots on your videos. I will keep supporting you.

@ChapmanJill 6 жыл бұрын

I love the simplicity of the new website. My one issue would be that on my mobile the gradient doesn't scroll with the content or scale to fit the page so halfway down the page there's a line where the background jumps from pink back to purple. Is that fixable?

@ChapmanJill 6 жыл бұрын

I meant to also say thank you for the video. It's really interesting to see new tools for design x

@charlimarieTV 6 жыл бұрын

Good note!! Will ask the Webflow team about that

@ChapmanJill 6 жыл бұрын

CharliMarieTV I hope you get an answer. I was hoping to do something similar on a site I'm working on

@poyuanla 6 жыл бұрын

The pink color is not easy to see. Might be better to add a bit more pink color on the right bottom of the gradient?

@LuisGarcia-um4ix 3 жыл бұрын

How much was webflow and do they provide tutorials?

@gaynorskinner6108 Жыл бұрын

Vidéo 1 was so Easy to understand and this one is so difficult! Very technical .using code etc. Acronyms everywhere! I’ll have to go back to Using templates.

@yassineah9874 4 жыл бұрын

I am learning to code and i am wordring if can code the page if you can share the resource please specialy the logo is webflow good for beggerners who want to make the staffs online life portfolio

@MohammedRaad 5 жыл бұрын

What is the name of the program you are using to design?

@justkailash 5 жыл бұрын

Hi Charli, can you tell me what is the hourly rates are available in UK? (for website Designer (UI/UX)

@charlimarieTV 5 жыл бұрын

I’m afraid I’m not really sure! I don’t work on an hourly rate and I don’t really know what the norm is for freelance work here. I would say though that In London you could charge more than elsewhere in the country.

@justkailash 5 жыл бұрын

@@charlimarieTV no problem . . and yeah i also dont prefer hourly bases but some client forced to do that . . any ways .. i am looking forward to see more tutorial about Web UI/UX . . or may be you have it already which i did see yet . . thank you :)

@gittaramania5463 6 жыл бұрын

NOTIFICATION SQUAD HERE

@charlimarieTV 6 жыл бұрын

woot woot!

@gittaramania5463 6 жыл бұрын

oh my god i just wanted to say that your channel is really helpful and inspiring 💛 luv yaa

@charlimarieTV 6 жыл бұрын

Thank you so much!! Hearing that really inspires me to keep on going :)

@PremJay 5 жыл бұрын

good

@vasimshaikh8950 5 жыл бұрын

in which software are you are making wireframe?

@armandsalle8447 5 жыл бұрын

It's look like Sketch

@TheSupreme1 5 жыл бұрын

can you please put all these videos in a separate playlist?

@charlimarieTV 5 жыл бұрын

They are already! Check out my ‘Designing a website’ playlist: kzfaq.info/sun/PLrJQSKQvgHS6BCO8nZScJ9iw7Ukjv4f9C

@muralidharan2044 5 жыл бұрын

what is the software you are using at 1:21

@MegaMatt3 4 жыл бұрын

That's most likely Figma or Sketch

@Stupidcatshow 6 жыл бұрын

The social icons at the bottom wrap on my iPhone 8 Plus.

@charlimarieTV 6 жыл бұрын

Yup they wrap when they don’t fit on one line!

@Stupidcatshow 6 жыл бұрын

CharliMarieTV ok. It’s just you decided to shrink the text for mobile for some implied UX reason and yet you decide to allow the icons wrap rather than re-work them for usability and aesthetics. Keep in mind Google’s rank engine hits us for improper spacing between icons as well. I love your videos.

@charlimarieTV 6 жыл бұрын

Shrinking the icons makes them harder to tap on a touchscreen. So actually keeping them the same size is the best thing for usability.

@charlimarieTV 6 жыл бұрын

Also I shrunk the text on mobile for basic typographic sense. Reading one or two words per line is a broken reading experience. 5-8 words per line is ideal. Make the text a little smaller on a thinner screen to better fit this ideal reading length. Aka: user experience.

@ea-jv3zw 6 жыл бұрын

hey, are you not using Squarespace anymore?

@charlimarieTV 6 жыл бұрын

I haven’t used squarespace for my own personal site for many years! I still highly recommend it for creating portfolios though, especially if you’re not a web designer!

@ea-jv3zw 6 жыл бұрын

ahh damn, I'm a ui designer and I'm using it for my first ever portfolio. but when I learn more on how to code ill transition to webflow :) . your site looks really good!

@charlimarieTV 6 жыл бұрын

Squarespace is a great choice to create your first portfolio for sure!

@Stupidcatshow 6 жыл бұрын

Do you think making text smaller on mobile is the best experience when visitors will be seeing it on a smaller display to begin with? Doesn’t seem to be the best user experience choice.

@charlimarieTV 6 жыл бұрын

If words are being broken in two because they heading text is too large for them to fit on one line, isn’t that a worse experience?

@charlimarieTV 6 жыл бұрын

What I mean is, it’s all relative!

@veganbed 6 жыл бұрын

Going off Charli’s comment about relativity, mobile users are often holding their devices much closer to their faces than desktop users, so text can get smaller. Using the same size type as desktop layouts for mobile would be a little much.

@Stupidcatshow 6 жыл бұрын

Alissa O. Cool. However, some people are farsighted and others, with age, require them to put their devices further away from their faces. When this occurs, a larger font on smaller device displays makes much more sense. 16px is the recommend minimum font size for all displays, while The Godfather of the modern web, Jeffrey Zeldman, uses 22px for body copy in some instances. In addition, it is important to recognize that Google’s ranking of sites includes satisfaction of the user. These user signals help determine how helpful the content is, including how usable it is - font size also included. Arbitrary sizing for the sake of “look” is not designing for experience. I am simply suggesting some pattern in which to design. CharliMarie is a great aesthetic designer. No question. However, I would say her videos in this series lack the science of experience.

@charlimarieTV 6 жыл бұрын

Dude theres literally only been two videos in this series. One planning what pages I need and one designing a single page MVP. You haven't even SEEN me get into proper design work yet, but way to make assumptions. I love how you assume I don't know any of what you posted already and think I'm some sort of idiot who thinks text on mobile should be unreadable but 'look pretty'. Take your mansplaining elsewhere.

@mohik3953 3 жыл бұрын

Do anyone know which font-family she have used for her name?

@charlimarieTV 3 жыл бұрын

Do you mean my logo? It’s hand lettered, not a font I’m afraid!

@mohik3953 3 жыл бұрын

@@charlimarieTV ohh Got It... I have thought it was a font 😅 Btw it's looking cool for your name...

@isystemzi6268 5 жыл бұрын

So web flow is only for single page sites?

@charlimarieTV 5 жыл бұрын

Definitely not! I’m sorry if this video gave you that impression. I’m building my full website on Webflow, but starting with a single page.

@isystemzi6268 5 жыл бұрын

Ok thank you.

@deej3827 5 жыл бұрын

What a nerd. I love it.

@hfortenberry 6 жыл бұрын

You said you are out of London but I swear you sound like an Aussie!

@charlimarieTV 6 жыл бұрын

I’m from New Zealand!

@hfortenberry 6 жыл бұрын

Doh! Sorry, I was so close! I always confuse Aussie and Kiwi accents.

@ijeawereudom4168 6 жыл бұрын

hope you can remove the webflow favicon on your website

@dfinkdesign917 5 жыл бұрын

You can in the dashboard. You can also change the icon for mobile devices if you add the site as a home screen shortcut icon. Pretty cool stuff!

@himanshumishra2284 6 жыл бұрын

really cool , m new to learn the process , ny tips?

@MinimaLune 6 жыл бұрын

Why didn't you use Mackaw?

@charlimarieTV 6 жыл бұрын

Webflow produces great quality code and I really like using it :)

@nicolevella6701 6 жыл бұрын

I thought Mackaw wasn’t being actively developed anymore?

@jeanwangg 6 жыл бұрын

maybe width: "0" for those lines of the social icons?

@charlimarieTV 6 жыл бұрын

It’s a bottom border rather than a separate line so width: 0 would have made the whole div 0 width. I think border-width is a thing tho!? I could have used that!

@none1615 6 жыл бұрын

Totally irrelevant .. but please.. Can you please send me the model name of your glass ?

@charlimarieTV 6 жыл бұрын

They’re from Ace & Tate and the model name is George. They don’t make them anymore but they have lots of other nice ones!

@lunaticz0r 2 жыл бұрын

dang was hoping some more in depth (as you put it yourself in video 1) on the ideation, concepting phases before jumping into a web builder like this....you said you were able to go more in depth by making multiple videos but here you are saying 'well i pretty much had an idea of how I wanted it' without talking about it at all....such a shame!! :(

@charlimarieTV 2 жыл бұрын

check out my design livestream replays for the most in-depth look into my design process that i could possibly offer! you'll see me work in real time on design projects :) there's a playlist on my channel of them!

@prepre73 6 жыл бұрын

Interesting that you chose to use a vanilla SVG an not build and icon font as it would be much easier to manipulate through css probably a web flow thing? *Note I need to remember not to comment before I have watched the whole video* 😑

@charlimarieTV 6 жыл бұрын

Haha yup it was best for using with Webflow! I quite like icomoon for making icon fonts otherwise though :)

@azariahsilas1360 3 жыл бұрын

Who else thought of, most valued player when she said "mvp" ?

@mikexue5104 5 жыл бұрын

where is the episode 3?

@NourWael 4 жыл бұрын

why not use Adobe XD ??🤔

@elvysscotti2 5 жыл бұрын

Your hair is different from the first video

@charlimarieTV 5 жыл бұрын

haha yep i change it alot

@elvysscotti2 5 жыл бұрын

Haha that's cool. Great videos. Thank's for sharing.

@mr5almawali607 6 жыл бұрын

🌷😘

@charlimarieTV 6 жыл бұрын

😁

@techtipsuk 6 жыл бұрын

Get coding it, Webflow isn't proper web design! Infuriated me when I tried it. That page is so simple to do anyway. Like web design for the intellectually challenged. Everything has to be dumbed down these days. The colours shouldn't be in the SVG code. This will make them go black then you can change with CSS using the fill property. That's my issue with apps like this, you don't learn concepts properly. FlexBox for example isn't a framework. Can't believe you had to resort to writing CSS just to format those links pretty lame. I'd put a link to Visual Studio Code as well as Webflow 😁

@charlimarieTV 6 жыл бұрын

A few things: firstly, coding isn’t web design. Coding is web development and that’s a whole different skill set. Secondly, are you calling me intellectually challenged? Because I use Webflow... Like I said, you still have to understand the basics of HTML and CSS to use Webflow it just makes a lot of things easier. So much nicer to click a button than constantly have to google that css tricks flexbox cheat sheet to know what to do! Yes the tool is missing some features, but I firmly believe in the company and that they’re changing what ‘coding’ means. I’m building my whole final site in Webflow using their CMS and very happy with my choice! :)

@VishnuPadmanabhan 6 жыл бұрын

Thanks for posting the video Charli. There are many tools and many ways of doing things. In the end, if they let you earn a paycheck or invoice your client, you are successful. There are no "dumb" tools only the right tools for the job and that right tool varies from person to person. Thanks for being so positive and inspiring and also sharing your knowledge. There are many who learn and possibly make a living out of what they learned from your videos. Keep up the good work.

@charlimarieTV 6 жыл бұрын

Thank you Vishnu! Very well said :) glad you enjoyed the video!

@Stupidcatshow 6 жыл бұрын

CharliMarieTV but for those interested in ensuring an adherence to search optimization requirements, will Webflow provide the best possible construct for that purpose?

@CristianNebunu 6 жыл бұрын

This video could mean the world for a beginner. Coding can be a daunting thing to start learning. Showing that it isn't so, is of great value to someone getting started. I can't even begin to imagine where his arrogance is coming from. Clients, most of the time won't care what you used to make the site, as long as it got done. Keep up the good work, and try to ignore the haters.