5 things to do before starting your next design file in Sketch

Graduating from chef school and entering into the real world isn’t as glamorous as you’d 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 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 to prepare for service. Look at this:

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 2 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 5 tips for preparing your design mise en place:

1. Set up typography and 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!):

Each style has 4 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.

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

2. Configure colors and object styles

There are 5 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.

State colors

• Error: Some variant of red. This state lets 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 lets 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 lets users know that everything is groovy. I prefer app colors to be a little cooler, so I’ll make my green a little bluer.

Why only 5 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 they’re 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 and art boards

This one is pretty easy, but it’ll 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.

Pro tip: If you’re using InVision, using Pages to organize your art boards might eventually pay off if they start automatically creating sections for you based off of your page titles. That is, each page will be a section, and all art boards on that page will be in that section on InVision.

4. Set up your grid system and 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.

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

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

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 and 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.

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 you’re ready to start your design dinner service.

This post was originally published on Medium.

Read more about food and design

• Product design with the world’s best restaurants in mind
• 5 ways to keep your Sketch kitchen clean