Building a single-page site in Webflow - Episode 2 of Designing a Website
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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/we... **
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.charlima...
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/ne...
Buy my hand written font, Grayscale: charlimarie.co...
Book a mentoring session with me: charli.link/me...
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketin...
--------------------------------
// 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.co...
💻 Software I use:
Webflow (no-code website builder)*: charli.link/we...
Premiere Pro (video editing)*: charli.link/pr...
Adobe Audition (audio recording)*: charli.link/au...
After Effects (intro animation)*: charli.link/af...
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/ph...
ConvertKit (marketing platform): charli.link/tr...
Riverside (podcast interview recording)*: charli.link/ri...
Music in this video from Epidemic Sound*: charli.link/ep...
Video captions by Rev (very cost effective service! I recommend)*: charli.link/vi...
Intro & end card animation by Austin Saylor: www.austinsaylo...
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 ⭐️
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.
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?
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.
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.
I saw your website last night and I’m in love with how simple and elegant it is
Thank you so much!
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.
Please do more videos about your design process, they're so good!
:)
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!
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 :)
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.
Love this series!! So helpful for beginners :) Please keep this series going. Thank you for your efforts and great quality explanations!
So glad you think it’s helpful! Will definitely keep it going :)
this is smart and refreshing for someone tackling building and run a page for the first time.
Charli, you’re gorgeous! 😮 I love your hair and lipstick.
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
Awesome stuff Charli! I think your walk through tutorials are really effective. Keep it up kiwi
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.
Thanks so much for watching, and for your support!
The SVGOMG site is wonderful! Thank you for sharing!
These are awesome Charli. I’ll be going through your vids.
You have come up with a great idea for new designers, keep the episodes coming.
Love this web series Charli! Always look forward to your videos :)
Thank you Deanna! Always appreciate your support :)
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?
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!
Yasss!! Been looking for videos like this. Thank you! When’s the next one out? :D
This is a great video. I can't wait to see more.
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 😁
Today I got to know I am a very good designer thanks dear for your awesome videos
It's Minimal VARIABLE Product ;) I love your channel, btw! xxx
en.wikipedia.org/wiki/Minimum_viable_product
Hi, Marie. I really enjoy your content! Keep up the good work. Thanks!
Thanks! My name is Charli though jsyk :) I appreciate you watching!
Oh, sorry, Charli! Now I got it hahah
Thanks Charli, super helpful !!
beautiful...
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.
wow your hair changed! I like it, very nice! btw great video series!
I love your video tutorial.keep on the good job
Thank you!
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
haha glad you found it!
Everyone has a different process to creating web pages. I remember watching this a few years ago.
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.
Give it a try! I think you’ll be pleasantly surprised :)
Great video. Thanks. How did you get your logo to be animated? Is that code?
hello Julia
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.
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?
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
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
@@charlimarieTV thank you for responding. I feel I learn a lots on your videos. I will keep supporting you.
This was so dope
Glad you enjoyed it!
what's the difference between a container and a div and when should I use which?
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
HI, can I ask what software you using for research and notes? is cool you can have vids and all. Thanks
Good video - I don't think you said - What program did you do your roughs in at the beginning? I don't recognize it....
Sketch! :)
What is the name of the program you are using to design?
This looks awesome! Is the MVP always meant to be used only as a placeholder until the final solution is done?
Yup!
what software did you use before you create your single webpage in webflow
Nice #timelapse Charli. What program(s) did you use for this process before you discovered webflow?
before Webflow i would just code it! :) Once I had a squarespace site too, when i just needed a basic portfolio.
The social icons at the bottom wrap on my iPhone 8 Plus.
Yup they wrap when they don’t fit on one line!
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.
Shrinking the icons makes them harder to tap on a touchscreen. So actually keeping them the same size is the best thing for usability.
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.
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
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
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?
I meant to also say thank you for the video. It's really interesting to see new tools for design x
Good note!! Will ask the Webflow team about that
CharliMarieTV I hope you get an answer. I was hoping to do something similar on a site I'm working on
Hey ! What's the name of this app that you create design pls ?
nice tutorial :)
How much was webflow and do they provide tutorials?
can you please put all these videos in a separate playlist?
They are already! Check out my ‘Designing a website’ playlist: th-cam.com/play/PLrJQSKQvgHS6BCO8nZScJ9iw7Ukjv4f9C.html
hope you can remove the webflow favicon on your website
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!
what did you use to build your logo name?
which camera are you use for facecam
I love your videos
Thank you Carlos!
I can't find your blog, is it available or work in progress??
good
Hi Charli,
can you tell me what is the hourly rates are available in UK? (for website Designer (UI/UX)
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.
@@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 :)
What a nerd. I love it.
You said you are out of London but I swear you sound like an Aussie!
I’m from New Zealand!
Doh! Sorry, I was so close! I always confuse Aussie and Kiwi accents.
in which software are you are making wireframe?
It's look like Sketch
really cool , m new to learn the process , ny tips?
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.
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?
What I mean is, it’s all relative!
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.
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.
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.
Do anyone know which font-family she have used for her name?
Do you mean my logo? It’s hand lettered, not a font I’m afraid!
@@charlimarieTV ohh Got It... I have thought it was a font 😅
Btw it's looking cool for your name...
what is the software you are using at 1:21
That's most likely Figma or Sketch
hey, are you not using Squarespace anymore?
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!
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!
Squarespace is a great choice to create your first portfolio for sure!
NOTIFICATION SQUAD HERE
woot woot!
oh my god i just wanted to say that your channel is really helpful and inspiring 💛 luv yaa
Thank you so much!! Hearing that really inspires me to keep on going :)
Totally irrelevant .. but please.. Can you please send me the model name of your glass ?
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!
So web flow is only for single page sites?
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.
Ok thank you.
why not use Adobe XD ??🤔
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!! :(
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!
maybe width: "0" for those lines of the social icons?
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!
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* 😑
Haha yup it was best for using with Webflow! I quite like icomoon for making icon fonts otherwise though :)
where is the episode 3?
Why didn't you use Mackaw?
Webflow produces great quality code and I really like using it :)
I thought Mackaw wasn’t being actively developed anymore?
Who else thought of, most valued player when she said "mvp" ?
Your hair is different from the first video
haha yep i change it alot
Haha that's cool. Great videos. Thank's for sharing.
🌷😘
😁
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 😁
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! :)
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.
Thank you Vishnu! Very well said :) glad you enjoyed the video!
CharliMarieTV but for those interested in ensuring an adherence to search optimization requirements, will Webflow provide the best possible construct for that purpose?
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.