Sketch is a design tool entirely vector-based and focused on user interface design. It’s easy to pick up and costs a fraction of the price of Photoshop. Because of its simplicity, anyone with little to no training can learn Sketch. On top of that, it’s perfect for today’s need for designing for multiple devices.
When I first started using Sketch 5 years ago, it felt like a glimpse to the future. I immediately made the switch. But for many, it was an uphill battle. Vector-based design tools were unpopular back then. Very few believed in a striped-down, UI-focused design tool. Photoshop had everything they could dream of. They didn’t see an age of Super Retina screens coming. They believed that prototyping was only meant for coders. They thought that 3D was merely for adding bevels to their design. Little did they know that Sketch would soundly dethrone Photoshop 5 years later.
Sketch has completely changed my workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my work as much. Its growth is out of this world; new resources and plugins are coming out almost on a daily basis.
We’ve come a long way since. Artboards, Symbols and Libraries have become common in this space. Designers now collaborate more than ever, thanks to Sketch-first plugins like Abstract, Craft, Flinto, Principleand Framer. Big companies like Appleand Facebook often releases their UI Kits Sketch-first.
Sketch is the ultimate tool for iOS, Android and Web design. It barely weights 45MB in disk space, compared to Photoshop’s 2.17GB. As soon as you open it, you are greeted with an infinite canvas. Just like native Mac apps, you have a familiar user interface with a Toolbar, Navigator and Inspector. As a result, new users will find Sketch far more approachable because it doesn’t get in the way of producing simple designs.
Consistent with the MacOS’s design language, the Toolbar is customizable when you right-click on it. You can set all your favorite tools by dragging in the ones that you want. Since I’m a big proponent of Keyboard Shortcuts, I suggest keeping the ones that are hard to remember, yet frequently used. Some of them only activate when it’s possible to use them, so having them in the Toolbar is helpful. Some of my favorites tools are: Symbols, Scissors, Outlines, Round to Pixel.
Artboards are the Screens of your app. Each Artboard represents a screen or an interaction within a screen. Having an efficient workflow is crucial to a modern designer. We can no longer afford to spend all our time on visual design, because prototyping, delivering assets and coding can truly make our designs come alive instead of being stuck in a vacuum, at the mercy of others.
Before, designers used to save a file for each screen that they designed, resulting in dozens of files to manage. Now, thanks to Artboards, you can have your entire app, with dozens of screens, exist inside a single Sketch file.
It’s easy to Create an Artboard, just press A. Then, on the top right, you can select from a large list of screens, for iOS, Android, Web and Print Additionally, and even you can customize one.
With Artboards, you no longer have to hide interactions, dialogs and states, since you can just put all your screens next to each other. Instead, it is recommended to show all your layers so that you can easily preview everything on your iPhone. You can easily rearrange, duplicate (⌘ D) or export them. I recommend the Artboard Manager plugin to keep Artboards organized.
To select the Artboard, you must select the title above it. Your Artboard should have a background color, otherwise the resulting screen will show a transparent background instead of what seems to be white.
When you work with dozens of screens, you can have a great overview of the whole experience by creating an Artboard covering all your Artboards. Like this, you can export an image of the entire flow.
Each Page represents a platform or a completely different resolution. For most projects, you’ll have twenty something Artboards for a platform like iOS. Then, you’d create another Page for Android, Web, Apple Watch, tvOS, and so on. That way, you can have an entire project within a single Sketch file, saving you a ton of time switching between screens and platforms.
You can open the Pages by clicking on the arrow next to the page name. Also, you can quickly switch between pages by using the dropdown. The keyboard shortcut is Fn ↑ and ↓.
Sketch comes preloaded with a number of user interface templates for iOS, Material Design and Responsive Web. To access them, you simply have to go File, New From Template. The iOS and Material Design templates are particularly comprehensive. They’ll be a great starting point for any designer, beginners and experts alike.
For the iOS UI Kit, it already comes preloaded as a Library. It has a number of important elements such as status bar, navigation bar and tab bar to get your started. Start using them by going to Symbols, iOS UI Design.
If you’re designing for Android, you’ll love the Material Design UI Kit. It has all the elements you need to follow Google’s own design guidelines.
For iOS, I recommend designing at 1x with the iPhone 8 (375 x 667 pt), since that is currently by far the most popular resolution. Also, custom Artboards can be created by clicking the ** +** button.
In Sketch, you work with pixels. Since we’re designing at 1x, your pixel units will be equivalent to points. So, 1 px = 1 pt.
There are many tools in Sketch that will help you design with incredible precision. You can never have too much precision. Designers would have a hard time working without rulers and grids, because they’re essential to keeping the composition organized and clean.
Smart Guides are intrinsic to the experience of using Sketch. In fact, it’s an essential feature in most apps where drawing is involved. As soon as you start dragging in a layer, red lines will appear to indicate if it’s well-aligned or centered properly. Unique to Sketch, you’ll see Smart Guides appearing even before you start drawing, enabling incredible precision.
Holding the Alt key will show the distances between the selected layer against other ones in the same Group or Artboard. It also measures the distances to the Artboard itself. It’s important to mouse over different elements to see the distances.
Tip: Distances can work against Rulers as well.
Rulers can be enabled by pressing Ctrl R. They’re good for setting persistent guides that can be snapped or measured against your layers. To create a guide, simply click within the Ruler regions. Hold Shift to jump by 10 px.
In the Editor, You can even get the distances between a layer and a Ruler guide by holding the Alt key and hovering the guide.
As you create new shapes, you can instantly align them horizontally or vertically within the Artboard. When two layers are selected, they can also align with each other. Distribute Objects allows you to normalize the distances between multiple layers.
If you open Layout Settings, you’ll find a way to set up your own Layout Grid system, such as the famous 960grid. With this, setting up 2, 3 or 4 columns proportionally is as easy as snapping the layers to the grids. Layout Grids are particularly useful for bigger screens that occupy multiple columns and call for clean divisions. Examples are Web, iPad and tvOS interfaces.
Enable Grids (Ctrl G) to divide your canvas perfectly. For instance, Material Design encourages a 8 dp grid system in order for shapes, text and baselines to fall perfectly into those lines. This promotes better spacing and cleanly divided layouts. For iOS, the guidelines are not as strict. Mostly, you are encouraged to have a minimum padding and margin of 8 pt.
Use Show Pixels (Ctrl P) to make sure that your design is pixel perfect. Pixels will only be visible at more than 100% zoom if enabled. If you zoom at 1000% or more, you can see the Pixels Grid automatically.
One of my favorite tools in Sketch is the Scale tool (Cmd K). Note that this isn’t the same as resizing, since it actually scales every property: Size, Radius, Border, Shadow and Inner Shadow. For instance, a 1 px border scaled at 200% will be 2 px. By only resizing, it’ll remain 1 px. This will be indispensable for converting @1x UI Kits to @2x or @3x, as it even works with Artboards.
If you’re new to typography, I suggest heading to the Typography section and start downloading a few modern fonts. The good ones that comes with MacOS or free on Google Fonts are: San Francisco, Avenir Next, Open Sans and Roboto. If you have a subscription to Typekit, download Museo and Proxima Nova.
To create a new text layer, press T. In the inspector, you can choose the font and edit the styles. What’s more, you can use Text Styles to re-use the same style across multiple text layers. It works similarly to CSS, which allows you to have a global style for h1, h2, h3 and so on.
You may want to customize some preferences. Here are the key options that will likely affect your workflow later on.
I highly recommend Auto-Save. It will automatically save all your changes as you design, preventing you from losing precious work in case of crashes, power outage or accidental quitting. Please note that Auto-Save may be dangerous if fonts are missing or team mates open your files and make changes to them. That may lead to unintended modifications. Also, be wary of the disk space cost, especially if you happen to work with large bitmaps.
As a designer, you need a solid process to make your workflow efficient. It’s even more crucial when you’re starting, because you can avoid a lot of inefficient, time-wasting bottlenecks. One of the things that set Sketch apart is the sheer amount of plugins and resources. It’s the openness of the Sketch file, which is universally supported and well-integrated into other apps. Comparing Sketch’s base features to other design tools is like comparing the iPhone’s specs to other phones. You forget the ecosystem, which is what makes Sketch so special.
We’re going to design the iOS app from scratch in Sketch, by using some guidelines and tips that will help your design workflow easier. After you learn to design for iOS from here, it can create a cohesive experience with multiple screens and build beautiful apps. what makes Sketch so special.
We’re going to cover the Navigation Bars, Icons, Table Cell and Tab Bars in Design for iPhone X. We will use the Design+Code iOS app's Bookmarks screen and design it from scratch. By creating this screen in iPhone X,
In this tutorial, we are going to design the Bookmarks screens for Design+Code iPad app. We will learn Adaptive Design in landscape view, Table View, and the difference of the old and new iPad Tab Bar.
If you’ve followed the Design for iOS Part 2 tutorial, you should have done designed the Bookmarks screen. If you’re not, I recommend you to go through the tutorial because you'll learn some of the tips and techniques to use here.
Designing for web is a complex topic because you might need to create for various screen sizes. The web design language is slightly different compared to design for iOS. So it's not recommended to copy your iPhone or iPad design for the website directly. There are a few things you will need to consider when designing for the web, which will be explained in this section.
In Design for Web Part 1, you have learned about the considerations when designing for the Web in regards to typography and grid system. You have completed the design of the Hero, Call-to-Action and Demo sections, and learn about how to choose beautiful gradients. In Part 2, we are going to continue and finish up the Design+Code landing page. We will design the Chapter, Benefits and the Footer sections.