Introduction to Sketch for web design – 101 software tutorial | CharliMarieTV

A 101 introduction tutorial to the Mac software Sketch for designing websites. Please remember to subscribe

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!


Download Sketch:
Sketch toolbox:
Content Generator plugin:

Wireframing tutorial video:
Web design resources video:



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 YouTube. 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:



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 🙂



Online apparel store:
Design portfolio:


Snapchat: charlimarietv

My sister SmayJay’s channel:


  1. I am blown away by Sketch. I'm so late to discover this. Great tutorial. Much more easier and faster workflow than photoshop.

  2. How to check pixel wise spacing in a sketch file? Like if I want to check how many pixels of padding is there between 2 modules…. Is there any shortcut or a way to highlight all the spacing in a already built sketch file?

  3. Great video, got me up and running on Sketch from zero to … not zero 😀 Thanks for taking the time to create this! 🙂

  4. I freakin' love that accent!!! Tell me what other alternative software are out there that work on the local machine vs cloud (gotta be connected to the internet) based software?

  5. 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!

  6. I found a beautiful website that wasn't made with a CMS and I needed to know what the designer used. Checked the page source and "Sketch" was everywhere in the HTML/CSS. I'm downloading the software tonight and plan on crafting a marketing portfolio. This looks like the website design software I've been looking for.

  7. How can i install plugins? I am currently using trial version and it opens in github. So what are the steps for this?

Leave a comment

Your email address will not be published.