Please enable JavaScript.
Coggle requires JavaScript to display documents.
Refactoring UI - Coggle Diagram
Refactoring UI
Think about the set of features needed to start the design
Start designing one feature (And don't get hung up on low-level decisions)
Start designing in grayscale so you're force to use spacing, contrast and size to do all the heavy lifting
Work in cycles
Expect features to be hard to build, design the smallest easy to build version of the feature.
We design "Nice-to-have" features later on
Choose a design personality
Design Personality
Font choice
Elegant or classic look
Serif typeface
Ex: Freight text
Playful look
Rounded sans serif
Ex: Proxima soft
Neutral look
Neutral sans serif
Ex: Freight sans
Color
Blue
Safe and familiar
Gold
Expensive and sophisticated
Pink
More fun and not so serious
Border radius
Small border radius
Neutral
Large border
Playful
No radius
Serious and formal
Language
Less personal tone
Official or professional
Friendlier casual language
Design systems in advance
Font size
Font weight
Line height
Color
Margin
Padding
Width
Height
Box shadows
Border radius
Border width
Opacity
Hierarchy is everything
Primary, secondary, tertiary content
Supporting text
Font size, font weight and color are really important when indicating importance
Try to stick to two or three colors
A dark color for primary content (Like the title of an article)
A grey for secondary content (Like the date an article was published)
A light grey for tertiary content (Maybe the copyright notice at a footer)
Two font weights: Stay away from weights under 400, if needed use lighter colors instead.
Normal font weight
1 more item...
Heavier font weight
1 more item...
Don't use grey text in colored backgrounds
Choose a color with the same hue, and adjust the saturation and lightness
Emphasize by de-emphasizing
Labels are last resort
They don't allow you to give any extra emphasis to the data
1 more item...
Balance Weight and Contrast
2 more items...