How to make simpicty & lightness a part of UI designs

Released

July 5, 2020

Updated

July 28, 2020

Reading Time

6 min

...

Colin Chapman and his racing team were a dominant force in racing. They thought differently about how to build a fast race car. Rather than focus on the obvious solution for going faster, adding more power, the Lotus founder focused on adding simplicity and lightness. The result was a series of cars like the Lotus 57 that dominated their race seasons.

I think this idea of looking at how to add simplicity and lightness can have a profound impact on the products we work on each day. In fact, I've spent the past year experimenting with ways to apply the Lotus philosophy to my product work, and here's what I've learned.

Limit Color Usage

One thing I've noticed when working with more junior designers, and even when I've taken a peek into some of my older work is the overuse of color. You don't need to use slightly different shades of color each of the type sizes, or worse yet, different colors for the type used in different ways.

Reducing the amount of color overall in your app will help in a bunch of ways. First, you can transition to that oh so lovely dark mode in a much faster, much more consistent way. When you curate the amount of background and type colors you can test for accessibility much quicker and ensure you maintain that score throughout the experience.

Here's a great example of how some popular products use color.

Use Fewer Type Sizes

When I'm working on a mobile app, I tend to like to start by only using 4 type sizes. I use the terms Display, Heading, Body, and Label. to describe these four sizes. I start the type scale by basing it off of the Body size. For example, let's say you set your Body size to 16, then you work up from there for Heading and Display. Right now, in many situations, that top Display size might only show up on the default view of the mobile app.

I have found by sticking to a more simplified system of type sizes that I can move much faster and create much more consistency between each stage of the interface design. Don't be afraid to add another type size as I did for the Turnout Nation app design.

Make Space a Pattern

I promise I won't tell you to use a new grid system and move away from the standard 8pt system you know so well. But, what I've been experimenting with is how can I reduce the number of space options in the design to add more consistency and less complexity to the design. For example, in this most recent version of my website design, I created a system of spacing called Space-XS, Space-SM, and so on. This system allowed me to quickly add consistent spacing for each component across each of the viewport sizes.

I will note, this can feel a bit limiting on desktop, but trust me, you don't need more than five spacing options for mobile. With a screen that small, you have the opportunity to add lightness and simplicity rather than extra elements.

Adding simplicity and lightness is a choice with a big payoff. For Lotus, it's meant years of very successful cars that changed the way people think of racing. Likewise, I think we can drive successful results in usability and aesthetics by choosing to add simplicity and lightness in as many ways as possible. If you are already on this path, let me know what other ways you've found to add simplicity and lightness to your product designs.

Related reading

Uber does a great job of explaining the systems they use for their Brand. Read it here

Here's the TL;DR version called Base. Check it out on Dribbble.