How to implement simple, good UIs

uilearning

I'm writing this article to help devs (myself included) create better looking UIs in a world of AI agents. AI-created websites look and feel the same if there are no clear guidelines given, and the UX can be pretty bad. Most sites will have this neon, glowy look with sometimes misaligned elements.

Think about the purpose of the design

Instead of jumping head first into the design, choosing colors, fonts, buttons and slapping them on the screen, think about what the page is supposed to accomplish.

Think about the user journey first, the easiest way to get your users the result they want. A good design is supposed to facilitate exactly that, not a fancy and unusable look.
Ideally a single page should have a single primary purpose to avoid confusing users. Think about a search page, a settings page, or a user account page for example.

Know your users

Before choosing a professional or a more casual look for your design, think about who the app will be for. If your audience is in the legal space, you would be better off using more "serious" colors and rectangular or slightly rounded borders to convey the professional look. As a guideline, you should also avoid rounded fonts.

Usually, the more rounded the fonts, buttons and UI elements are, the more "fun" it appears. Colors also play a big role here, colors associated with precious metals convey a "luxurious" feel.

Create systems, limit your choices

Choose a couple discrete values for the different aspects of the UI. By limiting your choices you prevent slight variations in the UI that can throw it off. Having fewer choices also reduces mental overhead, you won't need to stare at a color wheel or test paddings pixel by pixel.

Create a system of values for the following:

  • font size
  • font weight
  • line height
  • color
  • margin
  • padding
  • width
  • height
  • box shadows
  • border radius
  • border width
  • opacity
  • anything else where you waste time wondering what to choose

Tailwind does this well: colors have 11 shades, sizes and paddings are also discrete xs, sm, md, lg, xl values.

Create visual hierarchy

Focus on making important elements and fields stand out. Make sure elements don't compete for attention, and actively de-emphasize certain elements if needed. For example, you could use a text color with less contrast when it's competing with a header.

Fonts

Don't rely on font size alone, use font weight too. Make sure there are't too many font sizes and font weights used all over the UI. As a rule of thumb, 4-5 font sizes and 2 weights (regular, bold) can go a long way. Constraining your choices makes the UI consistent.

Popular sans serif fonts like Helvetica are usually a good bet, since they are tried and tested.

Paragraphs with small text need more line-height, large text looks better with a smaller line-height.

Grouping

Make sure to group semantically relevant elements together, and have some space between the groups.

Colors

You need more colors than you probably think. The color palette chooser sites don't do it justice, they give you 4-8 colors and that's it.

This simple setup works most designs:

  • 8-10 shades of grey, choose evenly spaced out colors from the entire spectrum (black -> white). Use for neutral text, backgrounds, de-emphasizing, adjusting contrast.
  • 1 primary color, max 2. Choose 5-10 shades, darker ones for text, lighter ones for backgrounds (if you aim for a white theme)
  • accent colors for highlighting and semantic states. Think red shades for delete states, yellow for warnings and the like. Choose 5-10 shades for each so you have more options for creating contrast.

Another simple guideline for color composition is the 60-30-10 rule:

  • 60% dominant or primary colors - backgrounds, large surfaces, cards
  • 30% secondary colors, complements the primary, creates contrast - headers, buttons, badges
  • 10% accent colors that draw attention, makes elements stand out - CTA buttons, announcements

Create depth

Elevated elements attract attention, while appearing farther as less important.

Make elements appear elevated or recessed by simulating light. Use light/dark borders or shadows on different sides of an element to simulate different lighting conditions.

The larger a drop shadow, the closer and more important it seems.

Overlapping elements is another great way of creating depth (imagine pictures on top of each other, with a slight shadow between them).