Sketch Tutorials

A Step-by-Step Guide for Starting a New App Design Project in Sketch

And why I never, EVER start them from scratch.

I’m a firm believer in transparency, so before we start, I owe you this:
Portions of this post reference a design framework that I built myself, and sell on the side. That said, this guide will still be useful even if you don’t go buy it.

Starting a design project is hard.

It doesn’t matter if you’re a freelance designer, work for a hot product agency, or help support a large enterprise design team…it’s daunting.

I work at a design agency that signs new clients on a monthly basis. My unofficial title is something like Product Concept Designer, which basically just means that each time we start with a new client, I get the exciting job of creating visionary concept screens which help inspire their product roadmap for the next year (or two…or three).

These concepts come with tight deadlines and require fast turnaround, so my ENTIRE WORLD is centered around efficiency and accuracy; my mockups have to solve the problem, provide vision, and be polished for a smooth transition into production design.

As far as I can tell, I’ve become pretty efficient, and I thought other designers might find benefit in seeing how I start new projects.

Note: I’m not showing you how to make the whole meal…just how to chop the ingredients and turn the stove on 👨🏼‍🍳👩🏾‍🍳


Table of Contents/Abridged Version/“I’m not reading all of that”:

  1. Create the File Folders (yes, for real)
  2. Pick the Colors
  3. Choose the Typeface(s)
  4. Configure the Grid
  5. Build a “Blockframe”
  6. Convert to Hi-Fi

1. Create the File Folders

Why: To keep my design files and assets organized!
Tool(s) I use:
Finder + Automation (below)

If you don’t start off on the right foot, you’ll trip the whole way through. My folder structure helps keep me organized, and gives me a way to share design resources with various parties (marketing, dev, etc.).

I add an _underscore to make sure those folders stay at the top of the list.
  • _assets: This folder is usually shared with internal/external dev teams. It includes everything they will need to build the app (dummy images/content, fonts, icons, images, and logos).
  • _exports: Any time I export a screen to PNG, they go here. This folder is shared with marketing so they always have the latest screens on hand to put into various marketing materials (decks, web pages, social media).
  • ui-design: These are my source files. It’s usually just one file, but if I ever create new ones, they’re stored here.

I created an automation to create all of these folders for me…

…and you can get it here for free:


2. Pick the Colors

Why: To create a base design palette for my project.
Tool(s) I use:
Coolors.co

Picking colors is the easiest way to get started. If you’re working in an existing design system, these are probably already defined, in which case, go ask someone in marketing or visual design.

My design systems are always built on 5 main colors:

  • Brand Primary
  • Black
  • Accent 1 (Success)
  • Accent 2(Warning)
  • Accent 3 (Danger)

Why these colors? (check out section 2 in that article)

I use an app called Coolors by Fabrizio Bianchi to help me generate a palette. You press the spacebar, and it will randomly pick colors for you. When you find a color you like, lock it in, and continue generating until you find your other colors. If your brand color is already defined, you can enter in the hex value, lock that color, then hit the spacebar to generate the rest of the colors.

See a good “Success” color? Lock it in. Keep going until you’ve found colors for each of the 5 main colors. (see this palette)

Once I’ve identified each of my main colors, I’ll plug them into my Sketch design template file. This template file has layer styles already defined, so I’m just updating them with the colors I just generated:

My template has a “Secondary” color as well, but I don’t always need it.

For details about how to create a full-blown stylesheet, read this:


3. Choose the Typeface(s)

Why: To give my app some character!
Tool(s) I use:
Google Fonts and Font Pair

Typefaces are as important to the design as the colors, so take some time picking the right one(s). Because you’re designing an app for people to use, it’s incredibly important that you pick a good typeface.

Hey Jon, what makes a good typeface for app designs?

Hey, I’m glad you asked 😊 Here are some questions I ask myself when I’m picking a typeface:

  • Readability: Is this readable for long periods of time?
  • Scalability: Is this readable when it’s big and when it’s small?
  • Variability: Are there at least two weight variations?

Google Fonts updated their interface last year and it’s really fantastic to use. I always make sure to test things over a white and black background just to verify that everything still works.

The settings in the right panel are how I like to scope my search.

If you like multiple typefaces — say, one for headers, and one for content — then you’ll dig Font Pair. They did the hard work for you and will show you, right inline, what two fonts look like next to each other. It makes it really simple to choose a nice looking pair. Plus, it sources all fonts from Google Fonts, so you don’t have to worry about needing to pay for anything.

Always test fonts with letters, numbers, and punctuation. Sometimes you’ll find a beautiful font that has a bizarre looking “9” or a weird exclamation point. You don’t want to come across that weirdness when you’re already 24 screens deep into your design.

Once you’ve picked your typeface(s), create text styles inside of Sketch for things like headers, body content, and links. You should never add text to a design unless it’s tied to a text style. If you decide to change the font down the road and have “unassigned” text, they’re not going to be updated when you sync your font change.

My Sketch template file has all of these standard text sizes already defined, so I can just select them all, change the font, and sync:


4. Configure the Grid

Why: To establish alignment consistency throughout the app.
Tool(s) I use:
Sketch and a Calculator

It’s become fairly common for grids to be built off of multiples of 8.

Why 8?

Well as it turns out, most popular screen resolutions are divisible by 8. In the table below, the columns test whether or not the width and height are evenly-divisible by 8px:

More details here: https://spec.fm/specifics/8-pt-grid

With this information, you can start to decide the size of your grid. First, decide how your app is going to appear:

  • Full Width: A full-width app is edge-to-edge. If it’s a web app, your design will stretch to the very edges of the browser.
I like to set my gutters to be at least 24px. In this case, gutters are divisible by 8, but the columns are not. Not a huge deal.
  • Floating: A floating app adheres to a fixed-width grid, usually in the center of the window.

For floating apps, I like my gutters and columns to both be divisible by 8. Here’s a simple equation:

(12 columns * Width) + (11 Gutters * Width) = Total Layout Width

  • Hybrid: A hybrid app is a mix of full-width and floating elements. The Medium website is a hybrid app because the top header is full width, but the content area is fixed to 740px.
This layout is a floating layout with some full-width elements.

One final note. The default Shift+→ distance in Sketch is 10px. This is going to be SUPER annoying when you’re working on an 8px grid. Luckily, Anthony Collurafici made an app called Nudg.it that lets you change that.


5. Build a “Blockframe”

Why: To quickly iterate on app layouts and UX interaction flows.
Tool(s) I use:
Well…rectangles.

Before I enter into wireframe mode, I like to build what I call a “blockframe” to establish the various regions of my page layout(s). The idea here is to start getting a feel for the grid you just defined, and quickly blocking out the most important parts of the page.

Here’s a blockframe I did for a chat app I’m designing:

There’s no reasoning behind the colors. Apparently I was feeling patriotic.

This only took me about 90 seconds to generate, but it’s all the guidance I’ll need to start designing the interface. I prefer this over full-blown wireframing because I tend to drift into hi-fi when I try to wireframe every element on the screen. Maybe I’m just a bad designer? I just see a lot of wireframes that are so detailed already that you might as well have done it in full visual fidelity the first time ‘round anyway. Just my opinion!

This is basically the UX phase where I’ll blockframe app workflows to make sure that every interaction drives a positive user experience.


6. Convert to Hi-Fi

So I don’t want to leave you hanging…

…but this is where you do your magic!

The single most important thing during the hi-fi design phase is to adhere to everything we set up in steps 1–5.

  • Save things to the right folder(s).
  • Only use colors in your palette.
  • Don’t stray from your text styles.
  • Always conform to your grid.
  • Blockframe new layouts before doing them in high fidelity.

Summary

So those are the steps I take to start a new app design project. If you’re interested in the Sketch template file I use for all of my projects, I’ve made it available below. More details available here.


When I’m not writing, I’m working on Sketch design tools like UX Power Tools to make you a better, more efficient designer. All the best Sketch designers and teams are using it, and I think you might like it, too. Check it out on Marvel!

Follow UX Power Tools on Twitter
Follow me on Twitter

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.