Years ago, a designer's only role was “to put lipstick on the pig” — to make the engineer’s work “look good.” That’s no longer the case. Steve Jobs, Edwin Land, and other technology giants proved to the rest of the industry that good design can set the course of a company. Now, some of our biggest tech companies were founded by designers — Airbnb, Snapchat, & Pinterest to name a few.
In short: design matters. It improves trust, identity, purpose, and usability.
But what if you don’t have an entire design team? How can you make your own project better, all on your own? In this post, I’ll lay out how you can use design to supercharge your project in 10 tips. While design isn’t a panacea, it’s one hell of a steroid.
This is a famous quote by Pablo Picasso, but over the years, designers have stolen it (ironic, I know): “Good designers copy, great designers steal.”
It’s not that designers are thieves. In fact, it has nothing to do with plagiarism or design at all. Its all about the user, their mental models, and leveraging what they already know how to do.
Most of your users (I’d be comfortable saying all, but I know better than to make binary statements on the internet…) have used other tools before. They have a way of thinking about things. They know that a button can be clicked because it looks like other buttons. They know that if that button has a small, downward-facing arrow on it, a click will display a menu.
These motifs go beyond just small elements. They also inform how users think about information hierarchy and general flow. As a rule of thumb, if there’s an industry-standard for an interaction or interface, stick to it. Diverging from it will only create confusion.
Websites and apps have a ton of information and it can often overwhelm the user — hierarchy tells your user what’s the most important. You can create this hierarchy using the following mechanisms:
It looks simple, but let’s still break down the main components of this modal:
Here are some rules of thumb to follow when creating proper text hierarchy:
For this point, I’ll bring in some research, specifically related to lists.
Lists are great for displaying information and creating hierarchy. But according to the serial-position effect, users are more likely to remember the items at the beginning or the end of the list. The middle largely goes unnoticed and gets forgotten.
Knowing this, you can order your lists in a way that make people remember what is most important. This idea of anticipating user actions goes far beyond just lists, though.
Consider Youtube’s video screen. You can do several things: search, open a menu, play the video, comment, browse new videos, and more. But, the most prominent element on the screen is the video and it’s because Youtube knows exactly what the user wants: to play the video. So they’ve made it huge, put it at the top/left of the screen, and made everything else less important.
As you’re designing your app, you should be just as brutal. What is the most important thing your user wants? What is the information you want to stick the most? Whatever it is, make it prominent to reduce friction.
Following on the previous point, we often have information that we want people to look at or elements we want people to interact with. One way to do this is through hierarchy, but sometimes, it’s important to be more explicit.You can do this by taking advantage of the fact that people tend to look in the same direction as the people they see -- even in ads.
The image above is a heatmap showing what users look at most. On the left, the baby is looking directly at us, so people are looking directly at it. On the right, the baby is looking at the title, so our gaze also shifts to the title and the text beneath it.
But we can be even more direct! There was another study done, based on the research above, that compared the above theory to a simple arrow:
In the above image, you can see that the subtle cue in the top image draws more attention to the form than in the middle image. But the simple arrow crushes both options.
In your designs, you can be this explicit. Highlight things. Use arrows. Use bright colors. Do it sparingly, of course, but don’t be afraid to be direct.
Straight lines and organized grids help organize information on a screen and make the design look clean and consistent. Aligning text can also make text more readable.
Text can be aligned in a few different ways and it depends on the language you’re writing. For languages read from left to right (like English, Spanish, French, etc), you should align left. For languages read from right to left (like Farsi, Arabic, Hebrew, etc), you should align right.
You can also center or justify text, but I’d avoid them both. Centering text makes it hard to read because it creates ragged edges (each line starts at a different left edge). Justifying text fixes this problem and creates consistent lines on the outsides of the body, but it’s nearly impossible to learn, track, and letter spacing in a responsive way.
Lastly, let’s discuss aligning elements to each other. For this, I’d recommend using the typical 12 column grid with a small gutter. Here's a great intro video!
Here are a couple of great alignment/spacing resources:
Organization is great, but having too much content can be hurtful. It’s important to let your content breathe. Specifically, put space between the elements on your page (this area between elements is called negative space or white space -- or just space).
For paragraph text, use 125%-150% line height to make your text feel more spacious. Using percentages for line height have worked fine for me, but Mozilla recommends using points. Regardless, doing some cross-platform and device testing won't hurt!
You’ll also want to use negative space to help differentiate between elements on the screen. As a general rule of thumb, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page, especially text on the edges. Another simple tip to keep your designer sane, also try to use 4px increments in spacing (e.g. 16px margin rather than 15px).
This is the most cliche design tip in the world, but it’s also incredibly important. To back it up, we’ll look at more research!!
A great study was done on people in a supermarket. There were two tables, both serving different types of jam. One had 24 options of different types of jam and the other had only 6. The study showed that those with more options were far less likely than those with fewer options to buy any jam.
This study is an explanation of a phenomenon called Hick’s Law, which states that the more choices a person has, the longer it will take for them to make a decision.
Throughout this post, we’ve spoken a lot about using design principles to draw attention to specific elements or actions. We’ve discussed using type, space, and even arrows. In this section, I’d like to focus on the use of colors.
Color can create hierarchy, but it can also evoke emotion. To decide what emotion you want to evoke (also known as brand), you should develop a color palette. Here are some tools to help you do so:
In your palette, you should have three colors: your primary, your secondary, and your accent. Your primary color is the one you should use the most (60% of the time), followed by your secondary color (30% of the time). Your accent color, which should only be used 10% of the time, should be used to draw attention to the most important thing on the screen -- usually a call-to-action.
Like colors, you’ll want to keep the number of types on your screen to a minimum -- specifically, I’d recommend you use no more than 2 typefaces in a page as additional typefaces increase cognitive load.
Typically, sites will choose 2 fonts, or a font pairing, for their site (see examples on Font Pairings). One of the types will be a Serif (the ones with the squiggles, like Times New Roman) and the other will typically be a Sans Serif (the one without the squiggles, like Arial).
No piece of software is perfect, so we might as well fail with grace. There’s nothing worse than seeing white screen, having a form refuse to submit with no explanation, or clicking a button that seems to cause your browser to implode.
Errors are inherently negative experience -- the user is unable to do what they intended to do. With a bit of creativity, though, you can turn this around and make it fun.
A great example is Google Chrome’s “No Internet” screen. It’s a case study in clearly explaining the error in a fun and light-hearted way. First of all, it’s pretty hard to get mad when you’re playing an endless running game as a T-Rex. In addition to the fun, though, it tells you what’s wrong: No internet. It even tells you how you might fix it!
Thanks for reading! If you've read this far, I hope that you found it useful. I'd really appreciate if you'd share with your friends and colleagues.
We're growing a design for non-designers community where we curate free 5 minute lessons to help you get smarter every day. For more design tips, case studies, and principles, join our community!