Get Early Access
Submit the form and we will notify you once the app is launched.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Submit the form and we will notify you once the app is launched.
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.
So how wide should your 12-column grid be? Here's a handy formula that I use (widths in pixels):
Every design I create is based on an 8-pixel grid system, meaning (almost) all padding, margins, and object dimensions are multiples of 8px. This goes for the underlying 12-column grid as well. Below is a common container width I use in many of my designs:
This means that all of my columns will be 64px wide, and the spaces in between will be 24px. And since text spacing and object margins are all based on multiples of 8px, designs feel and appear visually harmonious overall.
Aligning everything in my design to this underlying grid removes all the guesswork required when positioning layers, creating a consistent system for developers to use when implementing your designs. Everything looks cleaner.
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.
Protect yourself from inconsistencies by creating saved text styles (also called “character styles” in some design tools) for these type definitions. This will save you the headache of trying to remember every unique text attribute and characteristic for things like section headers or body text.
Simply define those attributes once, create a saved style with an appropriate name to help you identify it later on, then use it over and over again. The real trick here is to actually use them. If you ever make updates to a text style, most design tools will cascade those changes to every instance where that style has been used, potentially saving you hours of time, depending on the complexity of your file.
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.
It’s easy to get carried away with color, but the immobilizing effect it can have on making decisions should illustrate why you need to settle on a limited palette and commit to using it.
It really doesn’t matter what design tool you use.
Let me repeat: It really doesn’t matter what design tool you use.
What does matter is that you immerse yourself in the tool and its capabilities. I’d say I’m pretty decent at Adobe Illustrator, but also know it has dozens of features that I'm unaware of. I couldn’t tell you how the “vanishing point grid” works, but I’ve definitely turned it on before and had to Google around to figure out how to get rid of it.
Research your tool. Watch YouTube tutorials. Join a chat group. Find a Meetup. Surround yourself with people and resources who can help you learn the ins and outs of the design tool, then put them into practice.
When we hire new UX designers at our digital product agency, Innovatemap, they spend the first couple of months getting really good at Sketch. They learn about hotkeys, styles, symbols, best practices, and techniques for working smarter and more efficiently. After that, designing a login screen starts to feel like playing the piano — keyboard movements become second nature.
Until you fully embrace and master your design tool, you’ll only be creating extra work for yourself. In many cases, a feature probably exists that does exactly what you’re trying to accomplish, but in a fraction of the time. Become selfish about your time, and always ask “Is there a better, faster way?”
