ui design rules

This article provides 16 tips for improving user interface (UI) design through the use of logical rules and guidelines. It uses an example design for a property rental app to demonstrate how each tip can be applied. 

The tips cover topics like using space to group related elements, consistency in designs, ensuring similar elements function similarly, creating a clear visual hierarchy, removing unnecessary styles, using color purposefully, meeting accessibility standards for color contrast and text legibility, not relying solely on color, choosing typefaces, and more. 

For each tip, the article provides before and after comparisons to show how the example design improves by implementing the suggested changes. It aims to show readers how a system of logical rules can help make informed design decisions and simplify complex interfaces. The concise explanations and visual examples help illustrate how following basic design principles can significantly enhance a user experience.

UI & UX design inspiration for mobile & web apps.

orbs




Get Fountn

Pro friends get unlimited Figma conversions, bookmarks and collections.

Free Forever

$0

1 Figma conversion/day

5 collections

15 bookmarks

Limited access to new features

Current Plan

Fountn Pro

$6

Unlimited Figma conversions

Unlimited collections

Unlimited bookmarks

Full access to new features

Upgrade to Pro

You've reached your free limit. Upgrade for unlimited access.