Creating beautiful, usable, and efficient UIs takes time, with many design revisions along the way. Making those constant tweaks to produce something that your clients, users, and yourself are truly happy with.
A good UI design increases conversion rates. That’s simple. But how does human-oriented design play into it? The mobile revolution, as well as the web revolution before it, constantly forced us to keep restructuring and reconsidering what simplicity means for human-centered design and practically every experience we create.
@the.dsgnr has come up with a handy list of UI Design tips and tricks to help you design better interfaces. He takes you through good vs. bad examples of UI buttons, borders, spacing, contrast, alignment, forms, and more. Check out the list below.
Button
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs, Forms, Toolbars, etc. Primary actions should be obvious. Secondary action should be noticeable but not as prominent.
Border
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Too many borders in your design can complicate the user experience and make your website look really busy.
Spacing
Spacing helps to make the separation between groups of elements and also to make the connection of elements inside the group. It can also help to suggest function and create an emphasis on important content.
Tooltips & Guides
A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Show the user where the error occurred and provide a reason. Validations help users to put the information correctly.
Keylines
Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid. Keylines are not only great for dividing content but also making disconnected content feel more connected.
Text Alignment
the alignment principle states that multiple objects are said to be aligned when they are placed such that their left or right edges, or center-lines line up on a common position. Aligning text is an easy way to clean up your design and make your content much more scannable.
Contrast
Contrast is effective in catching the user’s attention and attracting it to particular elements, in this way supporting intuitive navigation and usability of the page or screen. Using contrast in background color is an excellent way to achieve a clear visual separation between elements.
Forms
A form is a user interface (UI) element that allows the user to send information to a server. Use a single column on small forms, or group them on other cases. Multiple columns disrupt a user’s vertical momentum.
Conclusion
This approach is a reliable booster of usability and desirability. The tips given above aren’t reinventing the wheel but they might present a helpful checklist for problem-solving design solutions.
