10 Design Tips to Level Up Your Next Project

Jobs famously said, "Design is not just what it looks like and how it feels. Design is how it works."

Jason Zhu
Arman Hezarkhani
Last Updated
April 5, 2022
Published
April 1, 2021

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.

  • Trust: If I land on this page or app, does it look trustworthy and legitimate?
  • Identity: Does the aesthetic resonate with my personal identity?
  • Purpose: Can I understand the purpose of the of the project and how its situated in my greater worldview?
  • Usability: Am I experiencing frequent friction or issues?

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.

1. “Good artists copy, great artists steal”

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.

2. Guide the user with proper Hierarchy

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:

  • Font-Weight: bold will draw more attention than light
  • Font-Size: larger sizes will draw more attention than smaller sizes
  • Alignment / Indentation: left-aligned text will draw more attention than indented text
  • Color: darker and/or more vibrant colors will draw more attention than lighter colors.

Here are some rules of thumb to follow when creating proper text hierarchy:

  • Use no more than 1-2 of these mechanisms to differentiate text. Here's some additional reading from Toptal on this.
  • Skip weights and double point sizes between different text elements used. It can make a noticeable contrast difference! For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.
  • If you’d like to quickly create weight (tint & shade) variances, try Shaderade.

3. Anticipate user actions to reduce friction

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.

Graphic referenced from Wikiwand


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.

4. Direct Attention with Visual Cues

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.

Image courtesy of Acuity Intelligence

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:

Image courtesy of CXL

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.

5. Organize the Screen by with Grids

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: