Everything is designed. Few things are designed well. -Brian Reed
Design is everywhere around us. From the social media posts we see all the time to website user interfaces. In this article, we will talk about Sketch – explain what it is, why people love it, and provide 20 Sketch tutorials that will help you start your design journey with a bang.
Article overview:
What is Sketch?
Getting started with Sketch
Web Design Tutorials
App Design Tutorials
Digital Marketing Design Tutorials
What is Sketch?
Sketch is one of the best UX/UI software on the market. In fact, it ranks first in our chart. It is among the oldest user experience apps on the market. It was launched in September 2010 – in comparison, both Adobe XD and Figma were released in 2016. So it’s not a coincidence that most experienced UX and UI designers have created their first mockups in Sketch. Probably the only setback with the app is that it is available only on iOS and macOS which limits its exposure on standard desktop computers.
Why do people love it?
Rated with 4.5/5 stars in G2, Sketch certainly raises eyebrows. While some people complain about the lack of PC support or collaboration editing, we must admit that price-wise Sketch is better than both Figma and Adobe Illustrator – it costs just $99 annually per contributor.
While some users have moved to competitors, being on the market for well over a decade means Sketch is well-known to professional designers, and many of them will keep using it for the foreseeable future.
Getting started with Sketch
1. Introduction to Sketch
As with every single app, learning the user interface is the first and foremost task you should complete. In this Sketch introduction tutorial, you will see where the app components are located, how to create a new Sketch file, as well as see how to create shapes in Sketch or utilize the color picker tool. You will also see how to add texts to your designs and change font size, colors, etc.
2. Learn Sketch: Features from A to Z
It’s not very common that you find quirky tutorials. However, in this video guide, you will see 26 terms (starting with the letters A-Z) and see what their significance for your Sketch projects is. Every single term is well explained – the usability of it, how to find it, how to optimize it, etc. The best of all is that the lecturer speaks slowly and convincingly, so it’s a very useful Sketch tutorial to kick start your journey with the app.
3. Sketch Keyboard Shortcuts
No matter how useful an app is, keyboard shortcuts are the thing that can boost speed. Once you learn how to use Sketch, you will start looking for a way to optimize the time spent on the app. This video will help you remember the main shortcuts in Sketch and reduce your completion time by a lot!
4. How to Design On Artboards in Sketch?
Artboards are an important part of Sketch. In this Sketch beginner tutorial, you will see how to use artboards and create variously sized ones for different devices (iPhones, Android, etc.). You will also learn how to manage the artboards and export them in different resolutions.
5. How to Manage Color Palette in Sketch?
Working with color palettes is one of the pivotal tasks each designer should do. In this video tutorial, you will see how to organize your colors in Sketch so that you can easily access them. What we love here is that each color is given a name and a value in HEX, RGB, etc. It makes it easy to work afterward.
6. How to Create a User Flow in Sketch?
User flows are part of each UX experience. They ensure developers and designers are on the same page. This Sketch tutorial is quite helpful, as it shows you how to link the different artboards and create relationships. You should consider that it has a custom plugin, though (Sketch Flowkit). Luckily, if you want to create your own kit, there is another tutorial from MDS.
7. How to Prototype in Sketch?
Prototyping is the bread and butter of Sketch. It lets you see how the final outcome will look like. In this explanatory video, you will learn how to add transitions and animations, so that you recreate a normal user experience. The Sketch tutorial is quite useful, as the presenter speaks as he operates on the platform and there’s no background music, so you can focus on the tasks.
8. How to Handoff Projects in Sketch?
Learning how to make developer handoff in Sketch is crucial for the collaboration between designers and developers. What you will learn here is how to share documents with peers who will use the Inspector feature to check the design and turn it into code. Not only that – developers can directly copy the code and paste it afterward.
Web Design Tutorials
9. How to Create a Website Design in Sketch?
Website design is where Sketch excels. It has superb features that can provide you with consistent user experiences. In this Sketch web design tutorial, you will see how to create a user interface from scratch. Everything is well explained, and what we love is how each command is written in the subtitles. It’s very rare to see it, but it helps a lot.
10. How to Make Animations in Sketch?
Animations and interactions make designs so much better, as they make the latter much more interesting to users. Jesse Showalter shows us the Anima plugin that lets you create complex animations, interactions, and perfect timings. The plugin also lets you export the video, as well as the code, and handoff to developers which makes things even better.
11. How to Design a Blog with Sketch?
WordPress has become a hub for blogs, thanks to its simplicity. However, for purists, Sketch is still a tool that can make the blog section look absolutely stunning. In this Sketch tutorial, you will see how to create a blog article design with the app. If you have a custom-made site, this tutorial might be extremely helpful for you and your designers.
12. How to Design a Landing Page in Sketch?
We have already shown you how to create a landing page in Sketch, but we couldn’t resist this tutorial. Why? First, because it’s quite practical for SaaS companies, and second – because it shows not one but two design versions. Every single process is well explained, and you will learn some tips and tricks on how to add icons, how to add a placeholder text and utilize the grid according to the best practices.
13. How to Create a Progress Bar in Sketch?
Progress bars can contribute a lot to the website’s performance, yet they are always quite tricky to make. In this Sketch tutorial, you will see how to make an accurate and editable progress bar in the app within 3 minutes. You will see how Sketch can calculate everything precisely and help you out with the design of the progress bar.
App Design Tutorials
14. How to Make a Modern App Icon in Sketch?
The first thing when you are doing app design is to think about what the app icon will look like. In this icon tutorial, you will see how to create a modern and lovely-looking material design icon by using only a background and a basic drop icon.
15. How to Design an App UI in Sketch?
Sketch is a very powerful tool for creating app designs, and in this UI tutorial, you will see how to create a music app in Sketch. What we loved here was how the screens were aligned, and the design followed the grid pattern to achieve consistency. It’s crucial for any mobile design to offer a consistent UX.
16. How to Create a Travel App in Sketch?
We have shown you how to design a music app in the previous video. In this Sketch app tutorial, you will find out how to design a travel app. The key takes here are to prepare a logo, a color palette and headings, and body texts before you start crafting your app user interface. Then, you will see how to add custom icons and create different pages. The video ends up with prototyping of the whole project.
Digital Marketing Design Tutorials
17. How to Design a Business Card with Sketch?
You can easily design a business card with Sketch. In this business card tutorial, you will see how to create one from scratch. Of course, you can use business card templates that you can modify in the app and avoid thinking about the concept.
18. How to Create a Logo in Sketch?
Sketch is a multi-purpose app, and if you use the right features, you can actually come up with a great logo. In this Sketch logo design tutorial, you will learn how to create a certain logo in a couple of steps. The tutorial is easy to follow. If you want to create a logo but are not fond of this one, you can check some free logo templates that are editable in Sketch.
19. How to Design an Instagram Story in Sketch?
Instagram stories are a crucial part of any marketing strategy. Thus businesses should pay them enough attention. Luckily, you can create a great Instagram story ad with Sketch, and in this video tutorial, you will see how to make it in 2 minutes.
20. How to Create an Email Design in Sketch?
Email newsletters have proven to dramatically increase sales, especially for e-commerce stores. In this Sketch email design tutorial, you will learn how to create a newsletter design with Sketch in just over two minutes. It’s really simple – all you have to do is have some text, an image, and flashy attention-grabbing call-to-action buttons.
Conclusion
Sketch is one amazing prototyping app, and while it is no longer the only horse in the UX/UI design race, it certainly holds the upper hand in software maturity, and lots of experienced designers are still choosing it for the macOS environment.
If you find this article helpful, you can also read some of our other tutorials:
