I’d like to talk about something that can be difficult for software developers to hear. It’s about the way the things we create look and behave. When I look at a lot of applications developed I am often impressed by their capability at solving a challenging problem, the technical skill and understanding of architecture that went into their development, and the talents of those involved in building it. But too often, I am underwhelmed by how they look or feel when actually using them.

I’m talking about the user interface, or UI for short. This is an area that often is negelected for a couple of reasons:

  1. The software developer(s) are ignorant about UI, and don’t realize what an ugly beast they’ve assembled.
  2. The developer(s) are aware they are ignorant about UI, but are intimidated by the prospect of trying to make it look better.
  3. Who cares about how it looks? It does what we promised it would do, doesn’t it?

Function is critical and I would not argue that a beautiful UI on top of an application that fails to do anything useful is indeed worthless. However, too often we forget that in most cases, we’re not build the app for ourselves, but for people whom will use it. Take a moment and think about how you reacted to a great-looking UI. How about the first time you used Facebook? Maybe you didn’t think about how it looked so much, but what if it were truly ugly? Would you have come back, or used it as often? Now think about a really ugly interface, and how you felt while using it. Was it easy to navigate? Could you tell what you were supposed to do? Did it make you feel good while you were on it, or were you eager to get off ASAP so you could save your eyes the pain?

Beauty itself doth of itself persuade the eyes of men without an orator.
-William Shakespeare

Consider how great a lot of the best websites and apps look. These are often developed by companies that understand the importance of UI enough that they have a dedicated UI designer/developer on staff, or even a team of them. These individuals spend their time keeping up on trends and thinking like end users, trying and breaking the UI, and offering fixes to make it better. Why put so much time and money into something like that? Because they know that visual impressions, ease of use, and accessibility are the factors that make potential users either pick up that app and use it every day, or put it aside and pick up something else that does the same thing but looks good doing it.

Look, I know most of us don’t have room for a UI expert on hand to take care of these things for us, and I recognize that UI is a difficult think to pick up. I’ve been developing for years and I wouldn’t consider myself any sort of UI expert. But I have made an effort to learn the fundamentals, and I can tell you the difference between how my UI looks now and how it looked two years ago is striking. Even taking the time to take margins and padding into account in our layout can make for a remarkably improved user experience.

The three elements that I consider to be areas of greatest improvement in most web applications are:

1) Fonts

Seriously, go to Google Fonts and pick out a pair of fonts, one for your headings, and one for your body text. They are free, and easy to use. You can step up your game and pay for a few fonts if you are serious about this, but at least start here.

Your choice of typeface matters. If you don’t think so, take a look at the header for the New York Times. We all instantly recognize that typeface, and it immediately tells us that this is serious news-reading time. Or the FedEx logo, with its clean lines and large letters all tightly packed together. If you think that lots of time and effort weren’t expended on the typeface for these iconic brands, you are sorely mistaken. Hardly anything jumps out more than the font in a brand. It conveys a lot about the tone and messaging before you’ve even started to read a word.

2) Layout

By layout, I’m referring to things like spacing and placement. Most of the time, you want to be thinking in terms of how to make things easier on the eyes, and easy to find. Give things room to breathe and don’t be afraid of whitespace. Too much is certainly not a good thing, but add some margins or padding around your view elements. Avoid cramming things together or using font sizes that are barely legible in pursuit of having everything fit onto a single screen size; if they have to scroll down, so be it. Trust me, they’d rather scroll a little than try to read your 6px type crammed into single-spaced paragraphs with no margins.

A good rule of thumb to start from when you are not too familiar with layout fundamentals is to use multiples of 8 for your margin, padding and font-sizes. For instance, I trend toward 16px for a base font size, and then I may go up to 24px for a third-level heading (or h3 in HTML), 32px for an h2, and 48px for an h1. Your page elements like paragraphs or images will look good if you give them 8px to 16px of space around them, but play with these. An element that sits along the edge might look better lined up with the other elements on that edge than moved inward or outward because of margins or padding, but I would still give it room on the top and bottom.

3) Color

Too often I see websites that either use too little color, or far too much. It can be a real eyesore to go to a site and be presented with a mishmash of colors selected mainly because they have easy names in CSS like ‘red’ or ‘green’. I would advise you to select a color palette before you get started on a new site, because it will do so much to convey what tone you are setting.

Generally, I usually recommend picking at most two colors that look well next to each other, and use these in different contexts throughout the site.

4) Responsive Design

This is a big, wide-ranging topic that justifies its own, separate discussion, so I won’t get too deep in the weeds here. Basically, responsive design is designing your layouts to fit different screen sizes. We live in a mobile world, so if you’re building a website, you need to take that into account. It is no longer sufficient to just build your site so it looks nice on a desktop or laptop screen. Now it needs to look great on tablets and smartphones.

The good news is that there are a lot more tools out there to help you in this space. One nice one is Bootstrap, which is a framework that offers a set of styled components and a grid system that can automatically arrange itself for mobile layouts. Foundation by Zurb is another one, and if you like Angular, as I do, Angular Flex is definitely worth checking into.

Let the beauty of what you love be what you do.
-Rumi

Here are some great resources that can help you in your quest to become a UI master:

The Non-Designer’s Design Book

Robin Williams, 4th Edition

It would be hard to overstate how much I learned by reading this book. Written specifically for those of us not interested in being full-time designers but still wanting to up our design game, this book covers what you should be thinking about when you want what you make to look good. It’s not a long read and most of it is actually visual examples. Do yourself a favor and check it out.

Google Fonts

Google Fonts is probably the greatest source of free fonts on the web today. Just select the fonts you want, and Google provides customized instructions on how to embed them in your website. If you are using a CMS like WordPress or Drupal, you can install plug-ins that can handle this for you. Google Fonts also provides neat tools on their site for comparing different fonts and will suggest a suitable pairing with each font you take a look at. I rely heavily on this resource.

Paletton

Paletton is a web-based tool designed to help you select a color palette. You start by selecting a color you want as a base and you can add a complimentary color to go with it if you like. Paletton then builds a palette of varying shades of your main and complimentary colors and allows you to view how it will look in a positive and negative scheme, and gives you the CSS necessary to add them to your styles. It’s the best free tool of its kind I’ve come across.

CSS Tricks

You could be forgiven for thinking that CSS Tricks is just about CSS, but its grown far beyond its roots to a repository of great information on all things related to web-development, including JavaScript and CMSs such as WordPress, but it’s original mission to share knowledge about CSS remains intact. It has an almanac of every selector and topic in CSS as it currently stands and lots of snippets to help you get your styles to work. I use this resource just about every day to check in on its excellent guide to flexbox, and if you are into responsive design, you will find this to be an invaluable resource.

I hope this gets you thinking about how to up your game in the design department. The goal here is not having to be a design master, just taking pride in how your sites and applications look.

Good luck and have fun designing!

Photo by Scott Webb on Unsplash