Principles of UI/UX Design

While every client and every design is unique in their needs and wants, there are some universal design philosophies and concepts that help create a user-friendly experience.

1. Top-Right Call to Action

It’s common practice to place a call-to-action in the top right corner of your screen — this is where people are used to looking for an action.

2. Occam’s Razor

When you have several options to choose from, the simplest option is your best option.

3. Gestalt Principles

When there is a lot of information to digest, we tend to look for ways to digest it more easily.

4. Fitt’s Law

There are a series of principles governing speed and accuracy of a user’s ability to interact with the interface.

5. Limit Your Navigation

The quicker a user can understand and make a decision, the more in-control they feel. There should be no more than 5 navigation items - preferably 4 or less.

6. Animation & Hover States

Don’t go crazy with animation and hover states. Use animation and hover states as tools to help with navigability and clarity, not simply to look cool.

7. Image Size

To help reduce file size, save images at 72dpi and play around with the pixel to quality ratio. For example, a 2,000px wide image at 40% quality looks just as good and is significantly smaller than a 1,000px wide image at 80% quality.

8. Boxes

Boxes reduce the visual spaciousness of your site. If you want to clean up your design, the easiest way is to remove boxes.

9. Grids

Using a 12 or 16 column grid system across the site rather than designing unique page layouts on every page will give your site a consistent feel and make your developer happy =)

10. Hierarchy

Build out a “Brand” page to help you visualize your text styles before you build out the rest of the site to help give it the visual structure and consistency that you need.

11. Type Styles

Use no more than 5 different text styles on a single page.

12. Contrast

Higher contrast is better than lower contrast for readability. Here’s a great tool to check your site’s contrast: http://jxnblk.com/colorable/demos/text/

Logos or elements currently in a disabled state are exempt from this standard. This includes inactive buttons or menu items. Placeholder or ghost text for form fields are not exempt from this standard — people still need to read those.

13. Hover States

Don’t rely on hover states to reveal content

14. Menus

In general, menus should have one purpose and one set of options to choose from.

15. Focus States

Field elements should always include focus state to help the user know where they are in the form process.

16. Color as a Differentiator

Don’t use color as the only visual means of communicating. If your user is color blind, they’ll tear their hair out trying to sort through all of your information. A best practice is to ensure your design works in grey scale first, then add color after.

17. Labels

All form fields should have labels outside of the placeholder text within the field. Some browsers do not show the placeholder text and it will leave the users terribly lost without a label.

Still have questions?

Contact one of our team members listed below: