In this post, I shall quickly highlight my process for designing an app in Sketch. With a handful of free plugins and a guide to quickly set up your sketch document, this process should streamline your set up time and let you get to the design stage more quickly.
Before we start, it’s worth noting that in my process I use a couple of plugins which speed things up. If you read and like this approach, and want to give it a go then you will need the following, both are free. Nice.
Setting up your document
Lets jump into Sketch and get our document set up. When designing a mobile app I like to size my artboard to 360 x 640, according to gs.statcounter.com over 40% of users worldwide have a device with this screen size, so it makes sense to start here.
Canvas size
Create a new artboard in Sketch (A) with a width and height of 360 x 600. Although sketch does have a list of artboard presets available, they tend to be device specific. But fear not, you can quickly create your own default and have it ready to roll every time you need a new screen. (see gif)
The Grid
Now we have our artboards its time to set up the grid. Pinching from Google’s material design guidelines I like to default my grid to 8px, for a complete breakdown of why you may want to use this system I recommend you check out “Understanding layout” on material.io
To set up the grid click View > Grid settings and enter 8px as your grid block size. I tend to keep the think line at 8px, as it creates a less “noisy” gird when designing, but that’s a personal preference that works just as well.
Now we have our lovely 8px grid set up, you’ll notice that when you “tab + space” to position an object it will move the default 10px and land you object “in-between” the grid, but fear not, the plugin nudg allows us to quickly change this. Download it and set the big values to 8px and the small value to 1px. Now, all your design elements should move around the canvas like pieces on a chess board. Nice.
The reason I like to have the small nudge value set at 1px is that it allows me to quickly correct anything that may have been improperly sized or has fallen in-between the grid.
Design Approach
At this stage we are ready to get busy with the app design. It’s tempting to jump straight in and start designing full screens, but I find it easier and more productive to break down the elements required in your app. This allows me to focus on small design tasks and really perfect the details as opposed to getting overwhelmed with the vast amount of designs required to perfect an entire screen.
This approach is sometimes referred to as atomic design, for further reading check out this fantastic article by brad frost
Typically, I like to start out by defining things like Typography and colour to get the ball rolling. Next think about all the elements that will be used in your app, this will include things like; input fields, buttons, navigation bars, headings, text, icons… The list goes on.
Once your happy with how these elements look, consider all the available states for each and then design that. So, if we take your submit button for example – let’s have a design for normal, focused, pressed and disabled.
Symbols
Once you have designed everything (you haven’t, you will 100% have missed something, and have to go back – but it’s ok!) it’s time to make some symbols. Sketch makes life easy once your library of elements have been designed – convert each of your elements into a symbol. This will make sure the elements are consistent throughout all the screens and give us the ability to make global changes, (such as colour tweaks) with just a couple of clicks. Think of your page of symbols like a CSS file.
To create a symbol, group your elements together (shift +G) then right click and select “make symbol” this will create a “symbols” page where all symbols will live.
Once you have built up your symbol library it’s time to piece it together and start composing your screens. having a fully stocked symbol library makes this stage really enjoyable – all that hard work really starts to pay off. By having a library of well-designed elements to choose from to “build” my screens, my focus is less on how the screen looks and more about creating good UX.
Content
To populate the screens with content (if there is no content provided) I use the tried and trusted Craft plugin. This is a really powerful plugin which allows me to quickly populate areas with images and text, gone are the days of lorem ipsum. It’s worth noting that Craft has a host of other features all designed to streamline application design process, from prototyping to asset management, but that’s a post for another day.
Recap
I hope that you found this post useful. Plugins and updates seem to be rolling out every other week to streamline app design, which is a good thing. But, sometimes can be overwhelming, particularly if you are new to sketch. Use this approach as a starting point then try to explore and supplement with other tools.