Starting any profession is a lot like going to a buffet for the very first time, where a myriad of choices are available.
Hot food. Cold food. Salad. Desserts. A fresh tray of bacon. Is that soup?! Big plates. Small plates. Adorable little ramekins. Oh my, soft serve ice cream!
Things can feel pretty overwhelming, and you are almost certain to make bad decisions the first time around. What should you eat? How much? Can this buffet sushi be trusted?
The secret to buffets is learning something new each go around, so your approach improves over time. Over time you learn what to get, what not to get, and how much mac and cheese your body can handle in a single sitting.
Learning design can feel exactly the same way. The first time around you take on way more than you can handle, make poor decisions, and waste time focusing on the wrong things.
Allow me to offer some guidance with a cheat sheet of everything I’ve learned from countless trips to the design buffet that have made me a better, more efficient designer:
Spacing is arguably one of the most important and fundamental skills in all of design. When I discovered you could drag guide lines from the rulers in Adobe Illustrator to align layers, I wept like a child who had just gotten a new puppy.
Spacing is hard. Consistent spacing is even harder.
A grid not only helps you align objects, but also reduces the amount of mental gymnastics you’ll need to do when arranging hundreds of layers.
For the sake of this article, let’s assume you’re designing a website or web app. It’s best to start with a simple, 12-column grid.
Why 12 columns?
Well, the number 12 is conveniently divisible by lots of different numbers, which makes it easy to create all kinds of layouts: 1 column, 2 columns, 3 columns, 4 columns, 6 columns, 12 columns, etc.
I see junior designers struggling with text sizing more than anything else in their designs. Inexperienced designers simply don’t have a frame of reference for this, so their text designs are usually too big or too small.
Create a simple type system and stick to it. Even the most complicated interfaces have fewer than 10 unique type sizes, because size is only one of many ways to differentiate lines of text from one another. Weight, color, and spacing are other variables to play with for organizing information in a way that is easy to understand.
I love the clothing store UNIQLO because they have affordable basics that actually fit my "medium but sometimes large in certain brands" frame.
The problem with UNIQLO is they offer the same T-shirt in about 93 different colors. Red. Green. Blue. Blue-green. Teal. Turquoise. Aquamarine. Azure. Beryl. Cerulean. The list goes on.
This doesn’t help. I’m naturally indecisive, and having thousands of colors to choose from only helps Pantone’s Color of the Year department.
To combat color-choice paralysis, I borrowed a page from every millionaire’s wardrobe book (except Beyoncé's) and severely narrowed down my choices. Instead of a closet full of colors, I give myself a limited palette to choose from.
Color should always serve a purpose. If you’re adding color just to add color, then you probably don’t need to.
My standard color palette usually has five main colors, plus black and white. Tints of these five colors are generated using transparency levels (100% opaque…50%…25%). This gives me an expanded color palette based on the same five seed colors, and saves me from having to figure out exact hex values (check out #3 in this article for a deeper explanation of this technique). Lastly, I’ll usually have a secondary palette of colors for things like charts, graphs, and visualizations.
Brand Primary: The main brand color. For Mailchimp, it’s yellow.
Brand Secondary: The secondary, accent color. Mailchimp's is sort of teal-ish.
Success: Typically a shade of green. This means “Good job!” or “Things went according to plan!”
Warning: Typically a shade of yellow. This means “Keep an eye on this.” or “Things might not go as expected.”
Error: Typically a shade of red. This means “You goofed up.” or “Massive system meltdown.” (Maybe not quite so dramatic, but you get the idea.)
Black: Just black. Sometimes slightly tinted.
White: For backgrounds and things.
Becoming a great designer begins with mastering the fundamentals. If you overburden your mind with too many decisions, it’s hard to make progress. Perfect your technique in one area, then move on to the next.
Every great design in the world is rooted in the foundations of spacing, type, and color. Once you’ve established a simple framework for using and manipulating these attributes that is easy to come back to, the design process itself will feel much less laborious.
