1. 10 Rules of Good UI Design to Follow On Every Web Design Project

2. 1. Understand How UI Plays Into UX
UI – User Interface is important but UI designer needs to rely on the information from the user experience angle
UX designers – User Experience (or ‘architects’) need to take into consideration such diverse factors as interaction design and architecture, the creation of clear taxonomies, copywriting, coordination with designers and programmers
Serious work on the interface will begin after gaining access to all of this information, then mockups will be made, tested and approved by UX designers and a product will be launched

3. 2. Know Your Audience
The most important insights into how to design a fantastic interface should be taken from your users
Must already have an idea of what your future audience will want
Looking at the competition can be a great way to kickstart the creative process
Which websites are at the top in your project’s field?
Are they using similar layouts or colors?
Do they adhere to similar styles or seem to cater visually to the same demographics?

4. 2. Know Your Audience
Once you’ve identified your audience, you can test how your design plays out among them and take their feedback into consideration. Actionable feedback from your desired target audience is incredibly valuable, so get it and use it!
Moderated In-Person Usability Testing
obtaining feedback from live users interacting with everything from paper prototypes to fully implemented applications.

5. 2. Know Your Audience
Once you’ve identified your audience, you can test how your design plays out among them and take their feedback into consideration. Actionable feedback from your desired target audience is incredibly valuable, so get it and use it!
Moderated In-Person Usability Testing
Moderated Remote Usability Testing
This works best with website and web-based apps
Conduct testing from the comfort of your personal space, by computer or telephone “All you need is the user’s web cam to be pointed at the device of application and a web- based tool to record the session,” he says.

6. 2. Know Your Audience
Once you’ve identified your audience, you can test how your design plays out among them and take their feedback into consideration. Actionable feedback from your desired target audience is incredibly valuable, so get it and use it!
Moderated In-Person Usability Testing
Moderated Remote Usability Testing
Card Sorting and Tree Testing
create and test a taxonomy or navigation structure with actual users
During Card Sorting exercise, a participant is presented with words or phrases (items) and is asked to sort those items into categories.
Tree Testing is more similar to actual browsing behavior than card sorting. It is considered reverse card sorting

7. Card Sorting Additionally, an online Card Sorting study can:
Help improve an existing site structure or define a new one.
Give insight on how to organise and categorise site information.
Be created quickly: since it doesn’t require moderation, it is easy to collect data from 50+ participants, while lab based studies are normally limited by cost and time.
Save money: online card sorts are much more cost-effective than lab testing. There is no need for lab space, research moderation, or compensating participants for travel.

8. Card Sorting

9. Tree Testing
Tree testing is sometimes referred to as reverse card sorting since you are finding items instead of placing them into a navigation structure (often called taxonomy).  A tree test is like a usability test on the skeleton of your navigation with the design “skin” removed. It allows you to isolate problems in findability in your taxonomy, groups or labels that are not attributable to issues with design distractions, or helpers.

10. 2. Know Your Audience
Once you’ve identified your audience, you can test how your design plays out among them and take their feedback into consideration. Actionable feedback from your desired target audience is incredibly valuable, so get it and use it!
Moderated In-Person Usability Testing
Moderated Remote Usability Testing
Card Sorting and Tree Testing
Beta Testing

11. 3. Keep Things Simple and Consistent
The hallmark of a great interface is simplicity
Easy to understand and interact with
Elements such as colors, typography, feedback messages, and visual hierarchies
Keep consistent throughout a design

12. 4. Implement a Visual Hierarchy
The most important elements of an interface should be highlighted in order to make users focus on them, and design provides an almost endless array of methods through which to achieve this effect.

13. 5. Make Good Use of Typography
Another way to establish visual hierarchy is through the use of typography
Size
Weight
Color
Position
Type Contrast

14. 5. Make Good Use of Typography
Another way to establish visual hierarchy is through the use of typography
Size

15. 5. Make Good Use of Typography
Another way to establish visual hierarchy is through the use of typography
Weight – simply using a bolder weight of a font

16. 5. Make Good Use of Typography
Color

17. 5. Make Good Use of Typography
Position

18. 5. Make Good Use of Typography
Contrasting Typefaces

19. 5. Make Good Use of Typography
Combination

20. 6. Use Color and Contrast Properly
Using colors to their full effect to design a stunning interface
Psychology of colors
Colors can be used to convey
visual hierarchy
establish a relationship between elements
elevate your designs
hold the attention of your users
Maintain some uniformity
Contrasting color to draw attention

21. 7. Consider Feedback Messages
Interfaces are meant to be used
Design feedback messages that convey crucial information to your users when they perform an action
Is something loading? Why not use a simple animation as a feedback message
Did someone fill a field incorrectly? Design a message to inform them right away so they know exactly what went wrong

22. 8. Simplify Your Forms
Forms are one of the main methods through which users will interact with your web projects.
Most users hate forms
Integrate them into your interface as painlessly as possible

23. 9. Collaborate Your Way to Success
Work as part of a team
All members of the team share the same information
Use good collaboration tools

24. 10. Bring It All Together Designing an interface is no simple task
Foresee your audiences’ needs in order to create a design
Using multiple disciplines and having technical information regarding your audience
Maintain a close relationship between user experience design and the interface design
Your interfaces need to be easy to use, simple to navigate, make use of the right colors for your audience, employ the right fonts, integrate useful feedback messages, and remain consistent overall. If you can juggle that many factors and still produce an appealing design, perhaps it’s time for you to teach us some rules of web design.