Introduction to Sketch for web design - 101 software tutorial | CharliMarieTV
Вставка
- Опубліковано 5 лип 2024
- A 101 introduction tutorial to the Mac software Sketch for designing websites. Please remember to subscribe bit.ly/1aE5UOT
When I switched from using Photoshop to design websites to using Sketch, I had a colleague walk me through the basics and it was a HUGE help with the learning the curve, so that's what I'm trying to do for you in this video! I hope this walkthrough, showing you the most important basic features of Sketch that I use when designing websites, comes in handy and helps you get up and running if you're a beginner.
This is my first software tutorial, so please let me know what you think of it in the comments!
// LINKS
Download Sketch: www.sketchapp.com/
Bootstrap: getbootstrap.com/
Sketch toolbox: sketchtoolbox.com/
Content Generator plugin: github.com/timuric/Content-ge...
Wireframing tutorial video: • How to wireframe a web...
Web design resources video: • Essential Web Design R...
-----------------------------------------------
// 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 order something from my online store! I make t-shirts and printed products and you're bound to find something you like :)
Check it out at: linernotekids.storenvy.com
-----------------------------------------------
// ABOUT ME
Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting videos every Saturday about design, fashion/beauty and DIYs and vlogs every Tuesday here on CharliMarieTV. 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: ua-cam.com/channels/HwfF.html...
This is the perfect tutorial. Not only are you showing us the tools of the program but you're also showing them off within the context of how we'd be using them. Showing not telling. Thank you!!!!!!
Oh, it's fantastic to see this, great job on the tutorial! I would definitely be interested in seeing more tutorial videos from you, pixel-perfect icons sounds great! I think you've definitely got space to expand your niche on YT continuing into web design, since the quality of your videos is high and your style is very clear, concise, and easy to follow.
+Sacha (sashyenka) thank you Sacha I was s bit nervous about it cos it's different for me, so I'm pleased you enjoyed it!! Definitely keen to do more now :)
You make harder things simpler with your explanations! Thank you charlie!
Agreed
Thank you for the walk-through and some really great tips! This really helped with rethinking/refining my personal design process.
Thanks Charli. Easy, step-by-steps. I'll give it a try.
Great job and thank you very much for it! Probably one of the best tutorials I've ever seen about this kind of software, so complete and useful :D Keep doing this, please! :)
+Carmen M so glad you liked it Carmen!! I'm thinking about more little software bits I can do in the future :)
Love the whole tutorial style of this! Really helpful and interesting :)
+Lucia Montes thanks Lu!
Thank you Charlie!!! I just downloaded the content generator and it's awesome!! I'm studying UX design after doing a coding bootcamp. I really appreciate all the content you create. And your accent is lovely!!!
Thanks for such a great tutorial! I've been debating switching from Photoshop to Sketch but was worried about slowing down my workflow as well. You made it look easy.
Great tutorial and quickly showing so much of the capability in Sketch. Thanks
you're welcome!
this was so incredibly valuable. you rock charli
I just downloaded sketch and this is the perfect primer on using it, wonderful job! The bit about the keyboard shortcuts-THANK YOU. Such a simple thing, but that was the thing I was immediately getting frustrated with as a Photoshop user. I look forward to watching more of your videos as I get deeper into using Sketch. Cheers
Great content and presentation. I'm finally getting on the bandwagon after working solely in Photoshop for years and your Adobe references were very helpful.
Thanks, Charlie! I've been using Sketch for a couple months now but definitely learned some things from watching this. PS I've been binge watching your videos tonight, keep up the incredible work!
thanks so much Emma! That makes me so happy to hear :)
You are just amazing! Thank you so much for sharing your knowledge! Keep it up!
Charli! This is amazing I wish I had known about this eons ago. Like you I've down wireframing in either Photoshop or Illustrator but neither was very satisfying. Complements on the tutorial as well, well edited with helpful content. Needless to say I've subscribed to your channel. Look forward to seeing more of your work and Thank you!
Trying my hand at web design and this was the perfect kick start, thanks!
This is the most useful Sketch tutorial I found on UA-cam. Great work! I especially enjoyed the introduction to Artboards and the content generator plugin.
thank you Portia! I'm so glad it was useful :)
Been using Sketch for several months now but still learned a couple things! Thank you!
glad I could help :)
Quick, concise, informative. Great simple overview from startup to export. Great job! (2 thumbs up!!)
thank you Gary! I'm glad you enjoyed it :)
Thank for making this video 😀❤️looks like a really quick and easy program for wire frames and mock ups👍🏽👍🏽👍🏽
Love you ❤️❤️❤️❤️❤️
+Revolutions88 it is for sure! Thanks for watching ☺️☺️☺️
Just stumbled upon your channel - I'm a designer from Sydney! Your tutorials are awesome! Can't wait to watch more!
Amy E can you give me some advice on starting out on web design please it's a career change due to an accident that left me unable to do heavy work like outside jobs etc.
nice and smart tutorial ! is that the flow u improve make the tutorial very comprehensive ....I love it !
Will download Trial of Sketch later today and give it a whirl. Many thanks for your post.
Thank you, thank you, thank you. Your content is amazing and you are a great teacher! This is going to help make my transition into web design SO much easier and more enjoyable :)
You helped me a lot! Thanks!
Thank you my dear. You make it look so easy . Cheers
I am blown away by Sketch. I'm so late to discover this. Great tutorial. Much more easier and faster workflow than photoshop.
Thanks for putting this together! I've been thinking about purchasing a Sketch license for myself, but wanted to see the interface in use first. I love the idea of designing desktop and mobile simultaneously; I can't tell you how many times I've designed one or the other in isolation only to run into design problems later.
Super Helpful!!! Thanks so much
This was very useful, thanks!
Thanks for sharing! I find this really helpful for learning sketch from a Adobe users perspective.
glad you found it useful!
Loving your vids. Life, fun, teaching and just all kinds of creative. Oh, also, really enjoying the podcast.
Yes on the icon
+Franco Herrera thank you so much! Glad you're enjoying my content :)
Great Video! Glad to see more people using Sketch!
+Adam Rasheed hopefully this video will help get more people on board! :)
Wow, that sound effect from 0:08 is so amazing.
You're amazing! Thank you so much for great tutorials
you're so welcome!
During my senior year we have to design a portfolio website and Im definitely going to use this thanks to you!
+Monika Glowacka awesome! :) glad it could help!
Hey Charli I would love to see more tutorial videos. These are great!
+emericaonline definitely have more planned!
Awesome tutorial!! Sketch is so fun too!
+Gregory Bedford thanks Gregory!
This might be the 13th video of yours I watched this week. I'm trying to transition from Graphic Designer to more Visual Designer(Getting stronger on the web/UX side). Thank you so much for providing such great education content.
you're welcome Tonni! I'll keep making more :)
This was so great!! I love all of your videos and I really want to start using sketch.. maybe you could post more tutorials for it when you get the chance or show how you go from sketch to html/css :)
GREAT! very good with your choice of words. thanks
you're welcome! :)
I've watched a bunch of intro-to-Sketch videos this week, and this is my favorite. I'm still going to press "v" a hundred times a day, but now I know what to do :)
i STILL press 'v' a lot but maybe more like ten times a day now haha. slooooowly you get used to hitting esc instead.
Thanks, soon I will try mac and sketch, this video helped me preparing.
i'm glad!
I am just getting started and I am so lost. I will no doubt be viewing your tutorials for a while.
Thank you very much, this was really helpful for me to start out with sketch. Btw, you have a very pleasant voice. :)
Hello from Stockholm! Thank you for a great introduction to Sketch. Please continue your tutorials :-)
I will! glad you enjoyed it :)
That was so helpful. Thanks!
+Leny Santana glad you found it useful!
Very useful thank you!
Very amazing video. Thanks.
you're welcome Jonathan!
Awesome! Thank you!!!
Great presentation
thank you for your tips
Loved this video!! Might have to check out sketch now... Would love to see a video on pixel perfect icons
+Kaylin Murray definitely gonna make that! :)
This was so helpful. Thank you! Also, yes, that tutorial about pixel-perfect icons would be great.
definitely going to make that! Coming this month I think :)
That was great, Marie! Thanks for the quick tutorial. I'd LOVE to get more of these Sketch tutorials. You're really good at them. =)
+CodeRookie so glad you enjoyed it! I am planning more :) (oh and my name is Charli! Marie is my second name)
I'll be on the lookout for those vids then. =)
Whoops! I actually had "Charli" first, then I noticed someone else called you "Marie" so I edited my comment.
Thank you so much for this! I want to be a ux designer. I’m trying to learn these programs as much as I can!
AMONi
Thank you Charli!
Hi. Greetings from Brazil. Today I was looking for vídeos about Sketch and I found your channel and I like to much. *--*
+Tiago Correia welcome! :)
Helpful video, I'm looking forward to the pixel perfect icon tutorial. Thanks for sharing this. I also listen to your podcast It's inspiring. :D
+Afiful Fanani glad to hear you listen to the podcast! :)
Super helpful! I bought Sketch a year ago but haven't used it yet. I mainly design with Webflow, although when working onsite for a client, they prefer that I design in sketch which is easier to export for their developers. Subscribed and looking forward to more tutorials! :)
+Naweed Shams I've not tried webflow yet but I really want to do a series trying lots of different design software!
AMAZING TUTORIAL!
glad you liked it!
Great tut!! Thanks!
+zacksutt you're welcome :)
Thx a lot for your video Marie !!
:)
Thanks for the tut, very informative. Would it be possible to get an idea on your workflow when using Sketch and how you hand those design files to the programer? Would you send them the Sketch file? Or just the exported elements
that's a great question!! I think I'll do a video about this :)
Nice walkthrough about Sketch. Please make a video on must have Sketch plugins and I would love to see your "Pixel perfect Icons" tutorial :)
Great video and it looks like something to consider for wireframing. Are there any options to change or create your own keyboard shortcuts?
+Robbie B i haven't looked into it, but I think so!
Great video, got me up and running on Sketch from zero to ... not zero :-D Thanks for taking the time to create this! :-)
Yay! That’s so great to hear!!
Great overview, exactly what I was looking for! Thank you! I would definitely like to see more tutorials from you, especially on iconography. Keep it up! :)
+Anton Vilanov thanks Anton! Check out my tutorials playlist for that video on pixel perfect icons, and I've got lots more planned! :)
Awesome, will do! :)
Awesome, thanks for taking the time to put this together!! :D
glad you enjoyed it! :)
Amazing, thanks. I wish I'd had this a year or more ago as I tried to learn by myself. you ten minutes would have saved possibly weeks of trial and error and misconceptions, even with a few unintelligible tuts...
You delivery is strong and clear. I subscribed, ta.
thanks! Glad you enjoyed the video :)
Awesome video!! :) Thank you!
+hi hey namaste thank you for watching!
Great introduction, thx. I wasn't that familiar with Sketch before and I'm quite new in web design, but it reminded me a lot on a software I use since a couple of weeks: Adobe XD. Since Sketch is much older and XD avaiable only as beta version I was wondering if you have the time to compare both sometimes?
Do you have to pay for sketch monthly or is it just a one time payment? Thanks!
You've inspired me to make the big jump from Photoshop/ Illustrator/Fireworks to Sketch. It seems really daunting Charli but like you, the ever present feeling of being 'left behind' will force the evolution. You've perfectly illustrated how natural the workflow can be and as the focus is now on mobile platforms, it's a no-brainer. Thanks and here goes! :)
right now I'm feeling the 'left behind' with tools like Adobe XD and webflow! I have it on my list to try those out. still love Sketch though :)
I'm a Sketch convert! I'm absolutely falling in love with having multiple artboards on display and the Craft plu-in is so handy! I've heard so many people ranting about Webflow, it's going to be a busy old year of education! :)
LOVE this video and Im an avid Sketch user too - love it for user interface/mobile prototyping!
+Emily Kelly it's a dream to work with right!?
+CharliMarieTV Totally is! Might even admit I prefer it to Adobe software 🙊
I did my design work in Keynote! This is just like keynote, the layout is very similar, but yet a lot more powerful! :D
so lovely!
Thanks for sharing
This tutorial was so helpful! I have been fumbling around with sketch for the last few days as I have a web design assessment/critique due in a week and I wasn't sure if I should venture into sketch or not. I was thinking I would just go back to photoshop but this video really put the basics together and made it look a lot less daunting, I think I will give it a go! Thank you so much.
Also I would be really interested to see an icon tutorial :) thanks for making such interesting and informative content.
+Katie W glad to hear it Katie! Give Sketch a shot and even though it may take a little extra time to start with it'll be so much faster than photoshop once you get used to it :)
great job, now I need to get a mac!
Thank you Charlie for introduce me on Sketch :)
you're welcome!
Very pretty!
Please post more about sketchapp! You're awesome!!!
I really need to! thanks :)
Nice introduction tutorial for a Sketch newbie!
thanks!
Cheers, for that! Perfect intro:)
Filip Zywica gdgfxsj
Hi, Good tutorial. I am web developer. Never been in too much in design, but now after seeing some conceptually good products got trashed, now learning design. Downloaded Sketch 3 & while looking for sketch tutorial, found this video. Thumbs up for video.
glad you liked the video!
thank you so much for the clear explanation.
Excellent tutorial, thanks! Would love to see the pixel perfect icons tutorial!
+luke mckelvey guess what I made it! Check out the design playlist on my channel and you'll find it :)
This was super helpful Charli, thanks for making it. Im starting to introduce Sketch into my workflow at the moment and it seems really good so far. The shortcuts thing is a pain but it's the same with any new software I think. Like swapping from mouse to graphic tablet, feels bad at first but it's much better in the end.
+The Little Terrarium yeah totally it's just one of those learning curves you have to go through.
woow.... very nice...
Question. If I wanted to create a library of all the typical components used on a website so I could just copy and paste them into a new project then modify from there, how would you suggest doing that? Create a "template" project and just keep it open while working on the new project to pull from? Is there a better way? Thanks.
so cool!
It is a great to watch your video, want to learn more on digital like web & apps, I am in print media, now got interest in web design. wound like to learn more
great! I have many videos about web design planned :)
Very cool guide - thank you :) I am very interested in your process after the sketching/wireframing is done - how do you turn it into a functioning website? Do you make the website from scratch, or use a Wordpress framework or bootstrap theme?
+colorrush Depends on the project! After wireframing I create a full high fidelity mockup of the design and then, if I'm at work I pass it on to the developer to build, and if it's for my own blog, I generally use wordpress.
Hi, a question I've not found an answer to. May you'd be able to help. What's the next step in the process after you've created the complete high fidelity design? What do you give to the coder? Nowadays, Bootstrap is popular so how can I make my Sketch design appear exactly the same in Bootstrap? Thanks
Hi CharliMarie, thanks for a nice tutorial on Sketch.
I was wondering if there's an option in Sketch to have a Baseline Grid which can be toggled on and off as is possible with
the use of Illustrator where you can make your own baseline grid quickly with guides.
thanks in advance,
Ramon
Yes! you can have both columns and rows as layout guides in Sketch and set how wide you want them, how far apart etc :)
Thank you for this! A really big help for those who are self-studying only, like me! Love you! :)
Oh no, there is no Sketch available for Windows? :(
+Tina Ponce you're welcome! And yes unfortunately it is only Mac at the moment. It uses some Mac system software elements that I'm not sure are possible on windows
i searched for it and it is really not available on Windows huhu. Maybe I will just study how to use Illustrator :) Do you have video about Ai? :D
I have been curious about Sketch, so thank you for this video! Great insight into what it can do. I wonder, have you tried out Adobe's new mobile experience design program since it was released? Similarities/differences, preferences, etc?
+SSchraders I haven't properly used it, but it seems like eventually it will have the same features as sketch! Its a bit basic for now, but shows great promise.
I would love some tips on making icons. Great video +charliMarieTv.
+Vosco Rash awesome will definitely make that video :)