Designing a landing page in Sketch - Tutorial
Вставка
- Опубліковано 10 лис 2017
- An in-depth tutorial of how I design a landing page in Sketch! You'll learn basic web design techniques and process, as well as some tips and tricks for using Sketch efficiently.
If you're new to Sketch, check out my 101 video first to get familiar with it: • Introduction to Sketch...
Sketch is a brilliant tool for web design, and it's what I use on a daily basis for designing websites and landing pages. What else would you like to learn about it from me? I stuck with the basic functionality in this video since we were covering the design of a whole web page, but perhaps in a future video I could share a more detailed look at working with vector shapes and designing for mobile?
This video was voted on and created thanks to the wonderful people who have joined my Patreon! If you'd like to download the file I created in this video, just sign up at the $10 or higher tier and you'll instantly get access to it along with a bunch of other assets: / charlimarie
// MORE USEFUL VIDEOS
Color palettes management: • Colour palette managem...
Exporting assets for web: • Exporting design asset...
**
Sign up to be notified when my font is finished! charlimarie.com/font
**
-----------------------------------------------
// ENJOY MY VIDEOS?
My videos no longer have pre-roll ads because I think ads are annoying. That means you don't have to sit through ads, and it also means I don't earn anything from the content I put on UA-cam. If you want to support me and my channel the best thing you can do is join my Patreon!
You'll get tons of extra content and ways to learn, like behind-the-scenes process info, downloadable assets or even a monthly group Google Hangout! Choose your tier and sign up here:
/ charlimarie
-----------------------------------------------
// ABOUT ME
Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting design videos every Saturday about tools, projects, and concepts and vlogs every Tuesday about my life as a designer. Please subscribe and say hi in the comments so we can be friends :)
-----------------------------------------------
// MORE
Blog: www.charlimarie.com
Online apparel store: linernotekids.com/
Design portfolio: charlimarie.com/portfolio
Podcast: designlife.fm
// SOCIAL
Twitter: / charliprangley
Instagram: / charliprangley
Facebook: / charlimarietv
Snapchat: charlimarietv
My sister SmayJay's channel: / frangisamme
-----------------------------------------------
// MUSIC & TECH
Music: UA-cam Audio Library
My gorgeous intro animation was created by hand lettering animator Austin Saylor, you should hire him to do yours too: www.austinsaylor.com/
THIS WAS SO USEFUL.
I'm new to design, but I pick things up pretty quickly and thought this was the perfect amount of time to get me started. You're a fantastic teacher!
Absolutely fantastic first intro to sketch for me, someone coming from Photoshop and HTML. Thank you so much.
Love the tips along the way in this tutorial, thanks for sharing.
Thanks for the tutorial. I just started using Sketch and it's great. I love it.
This is sooo cool to see you work both on paper and in Sketch!
I haven't designed a website in ages but this really made me wanna do it again. And also, it's so funny to know you're working on a font right now bc, what a timing, my boyfriend is currently doing the same 😅🙈
Thanks for sharing!
Thank you Charli, really useful stuff, i'll love to see your future videos on sketch designing more websites / apps and how you deal with developers as well (handing out the design). Thanks again!
this was a super helpful tutorial, Charli! thank you! i'd love to see even more videos on Sketch!
This is a top-notch tutorial Charli! There's so much I like about this tutorial - your tone of voice, the pace, the visuals... The list goes on! Thank you so much for filming, editing and uploading. You are a champ.
+The How to How-To thank you for this wonderful feedback!! It truly does mean a lot to hear something like this when you’ve spent so long working on a video. You’ve brightened my Monday :)
Nice tutorial, I also use sketch to design but I find it difficult to explain and teach newbies how to design.
Your video definitely is a must watch for people new to UI design.
Thanks a lot!!!
Hi Charli, I recently found you searching design podcasts and now that I've found your YT channel, I feel like I've struck gold! Thank you so much for putting in the time to make these videos for us, it is really SO appreciated. I'm a self-taught designer trying to figure out how to start doing design work on the side of my "day" job. You inspire me so much
+jojessica I’m so pleased you found my channel! Happy to have you here and let me know if there’s anything in particular you’d like to see a video about that could help you.
This was very useful, it's amazing how you completed a decent landing page in under 20 minutes. Kudos, keep them sketch tutorials coming please. In the future tutorials it would be useful to know how to export those assets for front end developers. Thanks
+eCoderIE I definitely have a video about how to work with developers on my list. I’ll make sure I move it up a few spots!! Thanks for watching :)
That was a really tut charli, learned so much, thank you, i have subscribed and awaiting more tuts but will check out your other stuff also. Your a class act... cheers :)
Sooooooo Cooooool video charlie!
Soo informative!
I actually just stumbled across this channel while trying to get a base overview for Sketch, and it's amazing - this video in particular is really useful. Thanks!
You’re so welcome!
LOVED this tutorial video, Charli! I've been getting more and more into designing for the web so it's really helpful to see how it's done by other designers. Looking forward to more of these tutorials :)
+Monica Galvan so glad you enjoyed it Monica!
This is awesome. I've learnt so much!
I love this tutorial, it's so simple but I picked up a lot of new tips and techniques.
Thanks!
+Lucija Cetin glad to hear it!
Youre such a blessing! Im getting a mac tomorrow and downloading sketch. Im a newbie to BOTH.
Great tutorial! Lot's of cool tips I didn't know about with Sketch. I love the idea of doing the wireframe first, then what I usually do is duplicate that before creating the high fidelity mockup. Because I usually do a few versions of a design (love options and can't commit!)
Your tuts are awesome, I learned a lot from you
Thanks a lot =D
Thank you! Your content is great and I do have interest to learn more about designing icons and responsively for mobile. Have a great day there, sis! ^^
Amazing way to help for the beginners. i am new to sketch, i am really happy to see more videos Thanks !!!
Awesome Tutorial Charli! This would be a great series you could start :) from web to mobile app design
Amazing - thank you! Subscribed!
thank you so much for this video, can’t wait for the responsive web design 👍🏼
+Sophie Mohammad yay I’m glad you’re interested in seeing that!
i really enjoy the video.
might want to take lessons from you.
keep it up
Awesome tutorial. I learned a lot from this tutorial and can wait to practice making landing pages. Have a great weekend!
+Stephanie Noel glad to hear it Stephanie! Hope you have a great weekend too :)
Superior vid! Thx!
Thanks for the Grid Settings!
Love your channel!! Subscribed! :)
+Lorelai G thank you! Welcome :)
love your tutorials!!
+Ellie thank you Ellie!!
Hey, it was a helpful tutorial
and i I love your hair color.. ;)
Just a suggestion from my side.... your exposure setting for this video is better as compared to other videos that i had seen! Loved your content. It is really helping me to get into this career option. Thank you for such a nice information.
I just changed my major to user experience design and I am lost when it comes to where to start and what to start making. Your videos are definitely helping me out!! :) Thank You!
glad they're helping! don't worry, we all start somewhere :)
Very good video, looking forward to seeing you do more Sketch / Web design tutorials :).
It is good that you also cover the initial process before moving over to doing things in Sketch. Personally before doing the wireframes with pen and paper I first do an outline (like a table of contents of sorts) for the different blocks and sections (and their content) of the page. I find it really helps when it comes to then doing the pen/paper wireframes and when you eventually move into Sketch you have a much more clearer idea of what you'll be doing along with the copy that you'll be needing.
In any case, enjoying your channel, keep up the good videos :)
Sounds super smart! I wanted to make sure I included that because I didn't want people watching and thinking that Sketch is the right place to start a web design. I believe you need to have done some brainstorming on the structure first! Glad you do too :)
Kind of love the title "Kickfilp" for that font
+Charlie B thanks! It feels right for now but will decide properly once the font is finished :)
Amazing video! Thank you! 1000 Thumbs up! :)
I really appreciate everything you upload, an awesome influence in the design world.
(I know this was a fast demo but that orphan on your last purchase box was eating away at me 😇 ) Looking forward to Kickflip and future endeavors!
haha don't worry this was just placeholder text!
You’re amazing!!!
So helpful thank you :)
This was extremely useful. Thank you so much
+Stefani Micevska you’re so welcome!
I really like your awesome videos = )
Yes more sketch ui/ux design videos please.
Love this!
+Jes Dolliver thanks Jes!
You Are Awesome CharliMarie 💗
Sooo cool mam.Thank u
Since moving to sketch it's been my go to tool for design.
+Max Weir it’s great right!
More of this please!
Don't now why but this made Sketch seem a lot more usable and less scary, even though I know you did Sketch 101.
Great tutorial!
+Hey Lauryn that’s great to hear! Perhaps cos in this one you were able to see it in use in an actual project?
CharliMarieTV Good point. A real application makes it so much easier to understand.
yes! please more on sketch.
I can teach you Sketch ! I love sharing my passion and help
"Share your knowledge with someone, will create you communication with withsome" :)
Thanks for the video, even though i've used sketch for a year now, learn a couple tips, IMHO Sketch is way better for digital design
that's cool !
Hello! I'm very new to Sketch but love your videos so far. How do you get the columns showing up with the even white space on the sides? I have the same dimensions as you but my columns stick to one side so it's uneven, even if I widen the box up
Heyyy Charlie! Thanks for the awesome tutorial. I am teaching myself Sketch and I am very veryy new to this environment. Can you plz tell me how to access the right panel option where you got access to the web?
hello,
how do I apply this helpful icon bar on the right by the inspector? Is it a plugin?
thanks for help!
Can you please do a video about the meaning of those grids!! Thank you!
Nice Video. What you could say about bootstrap grid is that its a responsive layout. The columns can adapt to different view ports, so mobile phones and tablets.
loved your video... how to add this invision plugin?
Congratulation.... i liked it
Hi would you say having a product video review is good to have on the optin page in order to get emails?
Hi Charli Marie do you recommend using Sketch to wireframe a design for a website (that need development as well) also for a beginner ?
Awesome and wonder how can i link the CTA form to the landing Page.
Can you go through a tutorial on how you have set up your tools and why?? Making things easy to use is so important :)
Hi, great Video. Do you design with a default width of 1440 or why did you use this width? Will the image be stretched on the whole screen for larger screens like 1920 px?
Awesome tutorial, what do you think about Adobe XD?
Hi, Marie!
Very good content! As a beginner UX-er that's useful for me.
However, I do wanted to ask you how to activate the "fill content" bar from the right side of the sketch layout (The one from the Content Generator Plugin)? I installed the plugin and can't find the option for the bar. Thank you and as a cinematographer, if I can help you with any tips, let me know :)
Zeplin is a really great tool to export the CSS! :)
Please help ? what is the canvas size for Web Design ? Is it the width is 1280 ?
nice video
Heyy awesome tutorial, i cant wait to buy my pc and make great things like u, btw, can u make a video coding this landing page? Thx, love u :)
Won't lie, I second this! It would be interesting to see you code it with your new skills, especially since you'll probably be using this for your font anyway. :)
+Marcos Antonio I was thinking of building this landing page in Webflow and filming that! Would that be interesting to you?
CharliMarieTV yes ofc haha.
That would be very helpful, thx :)
I was going to ask the same thing :) great video would love to know the next step of creating the code and then implementing the page as a live site.
But Sketch won't work on a PC; only in Mac!
Any chance you could make a video on how to design fonts? I think it would be a really interesting video. Love your channel btw:)
I'm still learning the process myself, but yes for sure in the future I will share what I've learned! In the meantime check out Teela Cunningham's channel 'Every Tuesday' It's her font-making course that I'm currently working through!
I see you have Anima Launchpad installed for sketch. I’d love to see a video about that.
Hey Charli, awesome tutorial, I really like your personality that you bring to your videos. It makes then very fun and engaging to watch. I know you mentioned at the end about doing more responsive videos but off camera when your designing this page for real would you normally start off by designing a mobile and tablet versions? If so what dimensions do you use to set up your mobile and tablet versions?
+MrConway007 nope I know you’re supposed to start by designing the mobile version but I never do. Whoops. After i design the desktop layout (or sometimes simultaneously if there’s something I think will be tricky) I alter my design for tablet and mobile screen sizes. (Just using the standard artboards in sketch)
CharliMarieTV ah ok investing. As a fellow web designer myself I think I've read one to many theories that that stated "thall shall must design mobile first" that I've been scared to do otherwise! Haha. Interesting to hear you work in reverse to mobile. I'm guessing that's because most of the layout shift decisions will be on wider screens where as tablet and mobile will be predominantly stacked.
Yeah there is a lot of value in designing mobile first because it forces you to be succinct with your UX and refine your design, and for that reason I'm always thinking about mobile when I design any screen size. But the majority of our site traffic is on desktop so I start with that!
thank you! It was a great video. However, just a stupid question, why I can't find "content" session on my sketch, could anyone tell me where can I find it?
Hi CharliMarie, your tutorial is awesome. But I want to ask how to open the small window (the place you typed "nounproject" keyword) in 15:34 and in 15:50 of this video?
Please show me. Thank you so much!
I love your channel and I learned a lot about Sketch, but I can't find on any tutorial how to set paddings between elements (text, images, etc). I am creating a Pillar Page and coming from Adobe I am dying on aligning and separating everything evenly :(
Very nice tutorial, Congrats. But I've been pissed because I may not find the plugin of that right bar which contains customs text and searching internet photos, my Sketch doesn't have it!...how may get it?
It’s called Craft! It’s a free plugin made by Invision
Cheers, I get it!
Hey, I'm learning the craft of web design while going through a recruitment process, and your videos have been very helpful. I do have a question though. Would the mock-up you created be something that you would show to potential employers or clients, or is it just something you would use as a first draft before creating the "real" mock-up to show them?
In this video i only showed putting together one artboard, but in a real project i would for sure be trying out multiple ideas and refining before settling on a final design. But you can for sure show them a static mockup like this if that's what you mean! I export my flat designs and share them using Invision.
Awesome tutorial. do you know any sketch like tool for windows.
+Shashikant Shinde I hear good things about Adobe XD!
hi charlie I have to ask as web designer myself im in a constant struggle of which is the BEST software to use to build/design a website. I see yours is sketch but not sure if this is your main one.
Have you ever tried other competitors like
* Everweb
* Rapidweaver
* Sandvox
* Arcsoft
* Html egg pro
* Pinegrow
* Dreamweaver
* Sparkle
To name a few..have you ever tried any of these?
What makes sketch different?
Is sketch wordpress friendly?
Does sketch have plugins?
Is it cms friendly?
On an average how long does it takes you to build a whole site?
Do you create icons and logos? If so it illustrator you use?
Sorry for so many questions but I really admire you as a designer
Thanks
This was a great tutorial. I tried to replicate the tutorial in Adobe XD and it is not as intuitive or easy. I still can't seem to color the mask in Adobe XD. I will probably just buy Sketch.
Is this a mock-up or can you make this go live as a site? I’m completely new to sketch I don’t understand what the limit is
+Sean Paints you might have commented this before you got to it but I explained this in the video. Sketch is a design tool not a website builder, so you’ll need to them work with a website building tool, or a developer to get the site live.
thanks! how did you add custom fonts to sketchapp?
you just need to install them on your computer and they'll be accessible in Sketch! :)
hey! Dope video Charli, just a question. You have Anima's Launchpad installed, isnt that plugin supposed to help you export the html and css and allow you to make an actual website? In the video you said you couldnt really export the html and build the website fully on sketch so I got confused
I don’t really use that plugin sorry! I installed it for its responsive design features, had no idea it would do an ‘export to code’. I would be very skeptical of the quality of the code it puts out however so just be careful!
@@charlimarieTV never tried it, I just saw it there on the video so I searched it and they claim you can export it to html, but yeah, you would probably only tweak it confortably back in sketch again with the plugin
Can you export the files to make the website or is this just for layout purposes? For example can you export html/css/js files from your design?
Nope it’s for designing websites (or any digital graphics) not building them in code!
CharliMarieTV gotcha! But as you mentioned in your previous video you can save the assets like images correct? Looking forward to your next video
Super helpful video CharliMarie
How can I buy the font
Hi Charli. I'm following the front end developer path at Treehouse, and while I understand the importance of wireframing a website before coding it I still can't understand the importance of designing it first in tools like sketch instead of diving straight in to the code. Can you explain what kind of advantages this approach gives? Also I hear a lot of 'Mobile first' design pattern and in Sketch it seems you have to re-design your website for every media breakpoint you want to target. What am I missing? What's the point of using this tool instead of writing HTML and CSS? I hope to read your opinion ☺️ PS: I found your channel last week and I watched a lot of your videos, your contents and your character are great, keep up the good work!
I think I need to do a video on this as a lot of people seem to be confused about what design is! Good design involves iteration and feedback rounds and trying multiple ideas before you start coding. It’s much quicker to try out multiple ideas for arranging information in a mock-up before coding it. It’s so much faster to rearrange items on a sketch page than it is to restructure the whole code of a page. The design you see in this video desperately needs improving! This is the first idea and with more iterations it will be much better. If I went ahead and coded the first idea, the design of the site would not be as good. Simple as that!
CharliMarieTV I'll be the first to watch it when you'll do it. Anyway your explanation made me understand better the design process. Would be awesome if you make a course for UX and UI web design
Charlie, could you please write what is the visible height of the screen. Making a landing page for desktop hd I don't really understand where the hero slide should end and where the next one start
the visible eight will change depending on the screen your user is browsing on, the height of their browser window... so many factors! so there isn't one set height. I hope that makes sense.
many people use vertical guide systems for text contents, aren't you suing them? what's your take on them?
hi @Charlie You use pen tablet in this tutorial?
nope! Just my Macbook.
How can I make the page longer?
For website design should I get familiar with sketch or photoshop?
Whatever you prefer! I personally like Sketch best for web design.
What about making pages that have more complex overlaps, transitions, fades etc. Would you still use sketch for that?
Sketch isn’t a code tool. So you can’t make transitions with it. For prototyping I’d use Webflow!
Whoops! Should have been more clear, I meant visual transitions between page sections. Would you ever revert back to photoshop if it were a design that was more visually complex?
Could you link me to an example of what you mean by a visual transition? Ever since I switched to Sketch I never needed to design a website in photoshop again. I use photoshop purely for image editing now.
Crazy eights!!!
you know it!
想问一下 web设计 原则是什么比如你接到一个 网页设计需求 先怎么做 怎么构思 怎么选择 颜色 字体板式等等。。。
Anyone know of any other software's I can use that are "like" sketch? I have a PC
Wait a month or two for this www.invisionapp.com/studio It will be free for both Windows and Mac. it is labelled as a all-in-one solution. Aside from basic static design, you will be able to create animated prototypes with it. Or you can try Adobe XD, but I prefer Sketch, and Sketch is the main reason I switched from windows to mac.
You could also check out the website designer.io
Adobe XD is a sketch knock off! Looks almost the same
The place where I get stuck the most is once I have designed in Sketch, how do I publish it into an actual live site. Been on Wordpress (Divi theme) but painfull to replicate what I have in Sketch. Will give a shot to Webflow too. Any ideas?
Sketch is a design tool not a development tool so you’ll always have to either code the site or build it using a tool like Webflow after I’m afraid!
Try using RapidUI, it can take PSD and Sketch files and make a website.
+spiritcore1 cool tip!
and after deigning the page, you have to code it to make it look like it? wouldn't be better just code it from the beginning?
I’m going to do a video expanding on this, but the design process is all about iteration. I wouldn’t build the landing page you see in this video, I would keep working on it and trying different ideas to improve the UI/UX. the design phase is where you figure out what the best solution is. And then you build the one you end up on.