Back to feed
Design Notes·digital

Design Improvement Process

NS
normalstory
cover image

Let us solve the problems in the original design one at a time using the following logical rules or guidelines.

Use space to group related elements.
Maintain consistency.
Make sure elements that look similar behave similarly.
Create a clear visual hierarchy.
Remove unnecessary styles.
Use color intentionally.
Ensure a 3:1 contrast ratio for interface elements.
Ensure a 4.5:1 contrast ratio for text.
Do not rely on color alone as an indicator.
Use a single sans-serif typeface.
Use a typeface with taller lowercase letters.
Limit the use of uppercase.
Use only regular and bold font weights.
Avoid pure black text.
Left-align text.
Use at least a 1.5 line height for body text.
For more detail, see the original article below.

16 little UI design rules that make a big impact
A UI design case study to redesign an example user interface using logical rules or guidelines

uxplanet.org

 

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

uxplanet.org

 

 

August 9, 2023

This English version was translated by Codex.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Design Notes

Making My Own 3D Avatar ;D (PEEPS feat. GIPHY)

Oct 28, 2022·1 min
Design Notes

[DIY] LED Light Clip-Board 2017 — making a lighting clipboard

Feb 18, 2019·1 min
Design Notes

Web/Mobile Site Design Work (2012~2013)

Aug 17, 2013·1 min