Logesh Paul’s Reviews > Refactoring UI > Status Update

"Finishing Touches"

- Supercharge with details: replace the default bullet, radio, checkboxes with icons
- Use accent borders.
- Use dark bg to sections to highlight it
- Add small illustrations to bg
- For user creating content create an image with CTA button
- Use fewer borders, design list, radio choices, etc.,

"Working with Images"

- Text on top of the image techniques: add an overlay(dark/light/color), add text-shadow
- Don't scale up/down icons. If you want to upscale images don't increase the size instead use bg fills
- Prevent background bleed for images (avatar corners)

"Creating Depth"

- Set a light source, raised above: light at top and shadow at the bottom, inset: top shadow, bottom light
- Create a set of shadows like colors, spatial, etc.,
- Shadows can be used for interactions also (eg. drag)
- You can use double shadows also
- Negative margin technique can give depth

"Working with color"

- Move from hex to HSL
- You can have 3 groups of colors a) Primary, b) Neutral & c) Accents and you can use 9 different shades
- flip the contrast In order to be accessible and look nice, use dark text in light background (it will go easy in the eyes)
- Don't rely on colors only to communicate some information, Add symbols/icon,
- Use diff shades of color instead of alternate colors

"Designing Text"

- Establish a spacing and sizing system
- Avoid em units
- Ignore typefaces with less than five weights
- For better reading experience 45-75 characters are the limit
- Align text with baseline, line-height of 1.5 is ideal
- Choose font designed for titles(oswald, opensans), don't increase the line height for titles
- If you use all caps include letter spacing for better readability

Layout & Spacing:
- Start with too much white space & cut down
- Dense UI have their place
- A Linear scale won't work, define system
- You don't have to fill the space
- The percentage grid system is not feasible if you scale
- Relative sizing won't work if you scale
- Connect elements/text with spacing
- Give extra space to differentiate elements/text

One of the easiest ways to clean up design is to simply give every element a little more room to breathe.

"Hierarchy is everything" takeaways

- Not all elements are equal
- Size isn't everything (use weights, de-emphasize text using color)
- Don't use grey text on colored backgrounds
- Emphasize primary content by de-emphasizing others
- Labels are the last resort: You don't need labels, combine labels and values, labels are secondary
- Balance weight and contrast (eg solid icon contrast)
- Semantics is secondary

Semantics are secondary

- Primary actions should be obvious: Solid, high contrast, background colors works.
- Secondary actions should be clear but not prominent: Outline styles or lower contrast background works
- Tertiary actions should be discoverable but unobtrusive: Styling these like links is usually the best approach.

"Starting from Scratch" takeaways

- Start with a feature, not a layout
- Details come later
- Don't design too much, Work in cycles, Be a pessimist.
- Personality, Font choice, Color, Language, Border radius matters.
- Limit the choices - Design systems in advance, Systemise everything (Font size, Font weight, Line height, Color, Spacing, Box shadows, Border, Border radius, Opacity)