Getting Set Up With Sketch
I’ve been seeing a lot of articles about what apps to use when designing; what plugins to use, what fonts, colors, etc., but not a whole lot on what to do when you actually have all these things in place.
Designers currently have the luxury of working in a very open and collaborative field, so there is an abundance of tools and resources available that help enhance our design capabilities. One of those tools is Sketch.
The purpose of this article is to help those just getting into design, those who are new to working on large scale projects, who are unsure of their current file management, or anyone that wants to clean up their Sketch files.
Plugins I use
Let’s start by just getting Sketch set up how we want it. Yea, I’ve started using Sketch, and while I haven’t left the Creative Cloud completely (❤ you Illustrator and After Effects), Sketch has become my main day-to-day tool.
One of the best things about Sketch is the abundance and use of plugins. It seems like every week a new plugin is released that solves some problem or annoying step we had to previously take. Here are a couple of my favorites.
Craft is a pretty new plugin recently released by InVision, its main purpose is to allow you to work with real data. Let’s say you’re working on a social media app, previously you would have had to…
- Think of names for the profile
- Find decent photos you could use
- Throw together some resemblance of an email address
- And probably some other forms of data.
Now, with Craft, you can generate all of that with just a couple clicks. No more having to mash together one friend’s first name with another’s last name to create profiles.
Next, Zeplin; this plugin also requires a stand alone app, but once you start working with developers it’ll save you SO MUCH TIME AND HEADACHE. Instead of having to manually create red-lines to tell a dev how far one object is from another, or having to create guidelines on which font to use, Zeplin allows devs to simply check the designs themselves.
There are tons of other plugins to use, these are just two of my favorites. To find more check out Sketch Toolbox; you’ll be able to directly install more plugins than you could ever possibly need/want.
Templates I Use
Alright, so we’ve got a couple (or more) plugins installed, we’ve opened up Sketch at least once, and we’re ready to get started. Buuuuut, I want to make sure we have one more thing handy before we do so, especially if you’re working on an iOS app; a template. I know, I know, “Booooo! You’re just designing a default-iOS looking app!” But no, actually this is super helpful for grabbing things like the status bar or keyboards, and referencing things like the height of a nav bar or the size of iOS standard toggles.
I really like the above template file, it breaks everything down into sections and has every possible item you could need. It also contains example screen from Mail, Safari, Messages, etc., so you can reference those if needed.
Pages
We’re getting close to actually designing now. We’ve got a template to run with, some plugins to use, and an idea in mind. We’re going to create some pages in our Sketch file. So open up Sketch, and in the top left, you’ll see that you have the ability to create new pages. Pages are like having multiple canvases, you can use them to separate different sections of the app, have each page contain a different iteration, or break each app flow into its own page. Really, it’s up to you. I do, however, recommend on setting up three pages right from the get-go. One for your assets, one for your style guide, and one (or more) for your actual designs.
Setting Up Styles
Alright, so let’s get to designing, yea?
No.
Well, kinda. Let’s get a couple more small things set up and then we can start cranking on the next big app.
Let’s start with styles; styles are a great way to make sure that everything stays consistent, as well as a great way to insure that any color or font that needs changes later on doesn’t make you want to tear your hair out.
On the style guide page you made, create a couple basic shapes (either circles or squares) and set them in the colors you’ll be using. We’re then going to turn these into styles by selecting the shape and clicking on the panel on the right hand side of Sketch that says ‘No Shared Style’. In there we’re going to create a new style for each block. Naming conventions should be something along the lines of primaryColor/solid, primaryColor/outlined-2pt, secondaryColor/solid, secondaryColor/outlined-2pt, etc.
If ever a color changes, it’s easy to only have to update this one section, and not have to edit every single item.
Styles will sit inside of symbols (we’ll talk symbols another time), so even icons that use these colors should have the style associated, that way everything updates nicely.
Asset Page
This is something that isn’t as crucial since Zeplin now allows devs to export assets directly from their app, but it is still something I like to have some control over. Each asset lives on its own artboard, and has an invisible bounding box. For me, this is an easy way to keep track of each item and make sure everything is updating in case I do need to change a color or such.
Let’s Actually Design!
Fuck Yea! We’ve got everything in place. We’ve got an asset page ready to go, a template file open, styles are set, wireframes have been created (right?!), and we’re good. Just a few small things before I let you run wild on this…
- Design at 1x. Sketch will allow you to export at 2x and 3x later, and icons that are vector based scale up much nicer than down. So let’s start with that 375x667 artboard (if you’re working on an iOS app).
And, finally
- Name your layers/artboards/files. Name everything. Leave nothing as ‘Group 1’ or ‘Layer 17’. What is ‘Layer 17’? Is it a button? A text field? Imagine getting a file with nothing named, it’s awful.
That’s all I’ve got for now. Hopefully it’s enough to get you started with designing your first app or website. Have questions? Comments? Corrections? Want to get in contact? Feel free to shoot me a tweet and/or check out the work that my co-workers and I are producing over at Intrepid Pursuits as well as the rest of the teams’ thoughts regarding the mobile world.
