Sketch Tutorials

5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise en place”

Our new Style Guide is available using all of the tips laid out in this article!

Graduating from chef school and entering into the real world isn’t as glamorous as you would think (so I’ve gathered). You don’t just grab your degree, throw on a chef’s toque hat, and open a restaurant in a trendy part of town.

Wouldn’t that be nice!

No, the majority of chefs join the culinary world preparing the mise en place. Don’t speak French? Me neither! Mise en place means “everything in its place” and refers to the preparation and organization of the ingredients before dinner service.

You know how Rachael Ray always has those tiny bowls of pre-portioned ingredients when she’s doing one of her 30-Minute-Meals-which-I-swear-actually-takes-at-least-an-hour? Well as it turns out, that’s not too far off from what professional kitchens do before every dinner service. Look at this:

This organization makes me feel all warm and fuzzy.

Young greenhorn chefs get to the kitchen hours before service to chop every vegetable, trim every filet, and prepare all of the sauces (among many other duties). In doing so, they’re enabling the restaurant to prepare exquisite dishes with multiple courses to feed your fat face, and get you out the door in under two hours. If they waited until they received an order to prepare all of the ingredients, service would take hours, dishes would be inconsistent, and the kitchen would simply not be able to sustain itself.


Product designers should always prepare their mise en place before diving into design “dinner service”.

Before you start designing dozens of screens and workflows, it’s important to set yourself up for sustainable design success. Here are five tips for preparing your design mise en place:

1. Set Up Typography & Text Styles

This first one is obvious, but it can be a real chore. There is no more direct way users will interact with and understand your product than through words, so it’s important that we get this right.

I like to give myself the widest range possible of text sizes and styles, so my typography sheet looks like this (I always create a dark version, too!):

It’s super quick to change the font if I change my mind down the road: 1) Select All, 2) Change Font, 3) Sync styles. Done!

Each style has four sub-types:

  • Default (usually 80–100% transparency)
  • Secondary (50–70% transparency)
  • Disabled (20–40%)
  • Accent (usually my brand color)

Why do I use transparency instead of hex values?

It’s a neat little trick to ensure that your text looks great over any background color. In the image below, the transparency (second line) looks much better than the grey (first line) because it has taken on the hue of the color below it. There are no tricks; the second line of text is the exact same in each color scenario. It’s just the transparency working for you that makes them look like different text styles. All for the price of one. How convenient!

I won’t get into the mechanics of choosing good font sizes in this post, but check out Typography in Ten Minutes for a quick crash course.

Lastly, it’s imperative that you create a Sketch Text Style for each style you define. If you decide down the road that you want your “disabled” color to be 25% instead of 30%, all you have to do is change it in one place and it will cascade across your document.

ProTip: Using slashes in your text style names (see above) will create little sub menus in your styles dropdown:

My “Dark” styles are set up too, but they’re white, so they don’t show up well in this menu (it says “Dark” above where it says “Light” in the second menu)

2. Configure Colors & Object Styles

There are FIVE base colors that you should figure out before anything else:

Base Colors

  • Brand: This is your brand color, pretty straightforward.
  • Black: Set a base black that you’ll use for all type in your designs. I like to avoid pure black, and instead create a black tinted with my brand color (or a complementary one). See the image below.
Take your brand color and put an 80–90% black square over it. Color drop this as your base black. It’s subtle, but it will make a difference! The one in the bottom right is what I would use.

State Colors

  • Error: Some variant of red. This state let’s users know when something has gone awry. Pure red is a little much. Tint it with yellow or blue to make it easier on the eyes.
  • Warning: Some variant of yellow. This state let’s users know when something hasn’t yet gone awry, but could potentially lead to problems. Don’t make this yellow too electric; mine is usually a little more orange so it’s readable over white.
  • Success: Some variant of green. This state let’s users know that everything is groovy. I prefer app colors to be a little cooler, so I’ll make my green a little bluer.
From left to right: Brand, Black, Error, Warning, Success.

Why only five colors? I feel strongly that colors should be used very deliberately in a product. Don’t make something purple just to make it purple. My designs are built in black and white UNLESS I’m trying to call attention to something.

Additional colors are appropriate for things like charts and graphs, but they should use different colors than your base state colors.

Object Styles

These are a little more difficult to set up front, but are still great for saving time. Object styles are anything from card backgrounds to list item bounding boxes. Here’s a sheet with some of my object styles:

I use these styles whenever I’m creating objects, and if I want to update the base style, I just come to this sheet and sync it across all of my pages. It’s a tremendous time-saver, especially after several months of designing screens for a client in a file with 97 screens. Mama Mia!

3. Create Pages & Art Boards

This one is pretty easy, but it will help you maintain your sanity. Decide up front how you want to organize your designs:

  • By feature: In a food app, you might have one page set up for all “recipe” art boards, and a separate page for all “profile” art boards
  • By user role: In the Medium app, you might have one page set up for all “reader” art boards, and a separate page set up for all “submitter” art boards
  • By workflow: In the Uber app, you might have one page set up with all art boards in your “Ordering a car” workflow, and another one for “Adding a credit card” workflow.

Any of the above are fine, but commit to something early and stick with it.

ProTip: If you’re using InVision, using Pages to organize your Art Boards might eventually pay off. I contacted their support team about how art boards and pages sync to InVision, asking if they would just automatically create sections for me based off of my page titles. That is, each page will be a section, and all art boards on that page will be in that section on InVision. They said it wasn’t currently supported, but that they’d gotten lots of requests for it, so everyone should send them a tweet asking for this feature. Let’s get this [obvious] feature added!

Here are the pages in the UX Power Tools kit we’re working on so you can see how we’ve divided things up. ProTip: If you add a hyphen at the beginning of your page or art board name, they won’t sync to InVision!

4. Set Up Your Grid System & Layout

The grid system is so important that I’ve talked about it before. But you’re just going to have to listen to me talk about it again 🙄

All of these tips are about making things easier for you, and reducing the amount of decisions you have to make while you’re designing.

Setting up your grid system will make layout and positioning a very passive act; you won’t even have to think about how far apart things should be spaced because you know your grid system increments, and have even adjusted your Sketch nudge defaults to adhere to them.

The 12-column grid is still the most popular because it has the most column divisors: 1, 2, 3, 4, 6, and 12.

Here’s a peek at the 8px-base grid layout settings behind the screen above:

This is a full-width app with a floating content area. As the browser width grows, the 12 column grid will stay in the center of the content area.

Something to note when you’re setting up your layout. Depending on your app layout (edge-to-edge vs. floating), you might need to have separate layout guides on each page.

This is a fixed-width (floating) layout with a full-width header.

Added bonus: Your developer friends are going to love you for setting up and adhering to this grid because every framework out there sits on top of a grid system like this.

One final note: I don’t personally set up rows in Sketch because it varies so much from page to page. Feel free to do this if you want, though!

5. Import & Symbolize Branding Assets

Almost done! Deep breath.

The last thing to do is import any/all branding assets. This could be as simple as a logo, or as big as a set of branded app icons. The important thing is that you convert each of these assets into symbols.

Keep it simple, but keep them symbols!

Why?

Well put on your imagination pants and let’s pretend you’ve designed 75 screens with your logo and slogan in the navigation header. Marketing has decided that they want to ditch the slogan because apparently “Just Do It” has already been taken, and some large company is threatening to sue. How could I have missed that?!

Well Danny the Designer goofed up and didn’t symbolize his logo. So Danny the Designer has to go update it on 75 individual screens because they’re being used in marketing materials, and legal needs that slogan removed.

Don’t be like Danny.

In a stroke of genius, Sandy the Sketcher decided to symbolize the logo from the get-go. She updated the base symbol in her style guide, then hit the sync button to update it across all of her pages. While Sandy is off sipping Piña Coladas, Danny is sweating through dozens of pages updating logos.

Be like Sandy.


That’s it! You’ve now prepared your design mise en place and are ready to start your “design dinner service”.


Shameless Self-Promotion:

Everything in UX Power Tools Style Guide is built using all of the tips laid out in this article. That massive typography sheet? Already set up with dozens of text styles. That sheet of object styles? Yep, those too!

Check it out at https://www.uxpower.tools and follow us on Twitter @uxpowertools. Follow me too, if you were entertained: @thejmoore.