Final project UI design tips

I’ve been trying to think of very simple tips to help your UI designs not look like they were designed in the 1990’s.

Here’s some heuristics (rules of thumb) that might help:

Use borders, not background fill for shapes

The sample UI for TextExchange has very ugly “buttons” on the home page to indicate functionality. One reason they look so drab is because they are rectangles will a background color and no border.

A simple change to make them look more modern is to eliminate the background color, and use a border color to delineate the button.

A more important change is to get rid of them altogether: if they really are “buttons”, why not make them the size of buttons? If they are links, why not put them in the navbar?

Use circles as well as rectangles

Most modern UIs employ a mixture of circular design elements with rectangular design elements. For example, in this website’s modules page, the images associated with each module are circular.

A UI that has only rectangles might be improved by selecting some design elements to be circular.

Use icons and/or images (thoughtfully)

An easy way for a non-artist to add useful graphical elements is through icons (fontawesome) or images. Again, see the modules page for an effective use of images.

Consider a single dominant color

“Clean” designs often have a single very dominant color (which might be white) and only “accents” of other colors.

This is not the only way to make a nice UI design, but it is one effective technique.

Avoid the need to scroll on a laptop sized screen

Whenever possible, don’t require the user to scroll to see your content, at least on a laptop sized screen. If they have to scroll, there should be a content-level reason, not because you simply made big images or used big text.