< Back to blog
Designing a user interface generally involves a few different layers. The first is layout, and you can figure this out using just wireframes.
The next layer tends to add life and meaning to the design, and includes text, typography to style that text, images, icons, and colour. Let's call this "contents", for our purposes.
Finally comes what I like to call "polish", because there isn't a widely used name for it. I wish there was. It includes the various techniques I'm going to list here. Polish adds the final touches or flair to an interface.
If you want to learn about the purely visual side of design, you can find lots of books and resources about the layout and the contents. What you can't find is many books or resources about that last part - the polish.
If I come across something that I can't easily learn about, I become obsessed with it. Eventually that obsession turned into an attempt to catalogue the techniques you can use to add this "polish" to a user interface. That's what I'm going to list now.
Side note: This doesn't include animation or movement. That's an important part of adding the finishing touches to an interface, but I'm focusing just on the static touches a designer can add.
Borders, outlines, strokes, and lines
These are grouped because they're all lines, but they're used for different purposes. Generally, they're used to separate or add contrast.
If you add a background gradient to an element, it can make it appear to bulge outwards or curve inwards. It can give the appearance of metal. It can provide contrast for text over an image.
This adds contrast, and provides depth and realism.
Just like drop shadows, these provide depth and realism, but generally to help something sink into an interface, rather than bulge stick out.
This helps to distinguish different elements through shape, and soften sharp corners almost invisibly.
This can help with providing contrast to text on top of images.
Letting the background through
You can let the background through fully to provide a context appropriate outline, or let it through only a little bit to add some colour to an otherwise flat element body.
This is related to colour choices, but since these are background colours, it's included here because it's a tricky business. Changing the background colour on a landing page, for example, can serve to highlight certain elements or sections. It can help add contrast where the standard background colour won't work.
< Back to blog