2. Hierarchy is everything (p. 30)
Visual hierarchy is the most effective tool for making feel designed. De-emphasize secondary and tertiary information, highlight the elements that are most important.
Not all elements are equal
Visual hierarchy is the most effective tool for making something feel designed.
When you de-emphasize secondary and tertiary information and make an effort to highlight the elements that are most important, the result is immediately more pleasing.
Size isn't everything
Control your hierarchy with font weight or color, not with font size.
- use font-weight: 700; for making a primary element bolder
- use a softer color for secondary text (color: hsl(201, 23%, 34%);)
Stick to two or three colors:
- dark color for primary content (headline of an article)
- grey for secondary content (date an article was published)
- lighter grey for tertiary content (copyright notice in a footer)
Two font weight are enough:
- normal font weight (400 or 500) for most text
- heavier font weight (600 or 700) to emphasize text
Don't use grey text on colored backgrounds
Make the text color closer to the background color:
- choose a color with the same hue and adjust saturation and lightness
Emphasize by de-emphasizing
Instead of trying to emphasize the element you want to draw attention to, de-emphasize the elements that are competing with it. For example: if the sidebar is competing with the main content area, don't give it a background color.
Labels are a last resort
When presenting data from a database, don't display it using a "label:value" format.
You might not need a label at all
E-mail address, phone number and price don't need a label. Job title don't need a label too. Present data without labels and emphasize important or identifying information.
Combine labels and values
- instead of "In stock: 12", try "12 left in stock"
- instead of "Bedrooms: 3", try "3 bedrooms"
Labels are secondary
De-emphasize a label:
- make it smaller
- reduce the contrast
- use lighter font weight
When to emphasize a label
Emphasize the label when you know the user will be looking for the label, like technical specifications of a product.
- use a darker color for the label
- slightly lighter color for the value
Separate visual hierarchy from document hierarchy
Use semantic title like h1 elements, but if they act more like labels than headings, titles should be pretty small.
Sometimes, titles is here for accessibility reasons but hide them visually because the content speaks for itself.
Pick elements for semantic purpose and style them to create the best visual hierarchy.
Balance weight and contrast
Using contrast to compensate for weight
When working with icons, they feel heavy because they cover a lot of surface area. To create a balance, give it a softer color than text.
Using weight to compensate for contrast
With 1px borders, increasing the width to 2px helps to emphasize it.
Semantics are secondary
- primary actions should be obvious (high contrast background colors)
- secondary actions should be clear but not prominent (outline styles or lower contrast background colors)
- tertiary actions should be discoverable but unobtrusive (style these actions like links)
Destructive actions
If a destructive action isn't the primary action, give it a secondary or tertiary button treatment.
Then combine this with a confirmation step with a big, red, bold styling there for a primary action.