Design Tutorials
The Ultimate Guide to Becoming a Great Designer (Part 1 of 3)
Simplify your process and make your life easier
Note: This entire article is tool agnostic. That is, it doesn’t matter if you use Sketch, Figma, Adobe XD, Inkscape, or Microsoft Paint, these tips will help you.
Before we start, click here to check out my design system for Figma!
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:
1. Start using a grid
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):
(12 * column width) + (11 * gutter width) = total container width
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:
(12 * 64px) + (11 * 24px) = 1032px wide
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.
- Why it made me better: Everything was always perfectly aligned. Simply put, I didn’t have to think as hard when designing pages.
- Further reading: Intro to The 8-Point Grid System by
2. Stick to a type system
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.
- Why it made me better: Most typography attributes were already defined. Instead of an infinite number of permutations, the list of possible styles became much smaller.
- Further reading: 8-Point Grid: Typography On The Web by Elliot Dahl, How to Automate Creating Text Styles and Layer Styles in Sketch by Jon Moore
3. Be strict about color usage
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.
- Why it made me better: Designs felt more cohesive because color was being used deliberately. The design process was faster because the question “What color should this be?” was answered by the color system.
- Further reading: A Simple Trick For Creating Color Palettes Quickly by Marko Vuletič, Inclusive Color Palettes for the Web by Allison Ofisher, and Building a Color Palette Framework by Rahul Chakraborty
4. Embrace the capabilities of your design tool
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?”
- Why it made me better: The design tool was working for me instead of against me. Then I could spend time focusing on the solution itself, rather than worrying about how to execute it.
- Further reading: Shortcuts, Hotkeys, and Gestures: 5 Ways to Become a Design Ferrari by Jon Moore, The Sketch Update We’ve All Been Waiting For by Jon Moore
Summary
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.
In Part 2 of this series, we’ll dive deeper into techniques to make your design tool work for you instead of against you.
5. Extending the capabilities of your design tool
6 . Building your own reusable tools
7 . Respecting design patterns
8 . Finding auxiliary design resources
Read it here:
When I’m not writing about design, I’m the lead designer at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.
Some other stuff:
