Notes: Refactoring UI

With the COVID-19 Lockdown, finally, I took time to finish Refactoring UI by Adam Wathan & Steve Schoger.

You can download two chapters from their website. If you can not afford it or want to understand what you will get you can refer my notes below.

• Start a new project — start off wireframing/designing/implementing the main
  parts of the UI first. Rest can wait!
• Details can come in later. Don’t worry about colors, font sizes, etc.
• By designing in grayscale, you’re forced to use spacing, contrast, and size
  to do all of the heavy lifting.
• Designing Process is cyclic. Design <=> Code.
• Design what can be implemented today in code. Rest can wait.
• Design Personality is important.
• Blue is safe and familiar — nobody ever complains about blue.
• Define systems in advance — It’s a bit more work up front, but it’s worth it
  — it’ll save you a ton of decision fatigue down the road.
• Systems — Font size, Font weight, Line height, Color, Margin, Padding,
  Width, Height, Box shadows, Border radius, Border width, Opacity
• Pick a base colour — and choose 8-10 shades around it. You will need it.
• Not all elements are equal — use de-emphasize, font size, font weight
• Size isn’t everything — Relying too much on font size to control your
  hierarchy is a mistake
• Don’t use grey text on colored backgrounds. Choose a color with the same
  hue, and adjust the saturation and lightness instead.
• You might not need a label at all — In a lot of situations, you can tell
  what a piece of data is just by looking at the format. Combine labels and
  values. The data itself is what matters, the label is just there for
  clarity. If you’re designing an interface where you know the user will be
  looking for the label, it might make sense to emphasize the label instead of
  the data.
• Separate visual hierarchy from document hierarchy — it’s easy to fall into
  the trap of making those titles bigger than they really need to be.
• Balance weight and contrast – Icons generally cover a lot of surface area.
  Unlike text, there’s no way to change the “weight” of an icon, so to create
  balance it needs to be de-emphasized by contrast.
• Every action on a page sits somewhere in a pyramid of importance.
  • Primary actions should be obvious. Solid, high contrast background
    colors work great here.
  • Secondary actions should be clear but not prominent. Outline styles or
    lower contrast background colors are great options.
  • Tertiary actions should be discoverable but unobtrusive. Styling these
    actions like links is usually the best approach.
• Start with too much white space — It is easier to remove white space than
  adding it.
• Establish a consistent spacing and sizing system.
• You don’t have to fill the whole screen. If you need more columns on smaller
  screen use it.
• Grids are overrated — Not all elements should be fluid.
• Relative sizing doesn’t scale — It should be in relationship with the
  elements.
• Type Scale – avoid ems. You will need more options at the start of the scale
  and lesser as it increases.
• Ignore typefaces with less than five weights — typefaces that come in a lot
  of different weights tend to be crafted with more care and attention to
  detail than typefaces with fewer weights.
• Keep your line length in check — 45 to 75 characters per line.
• Baseline, not center – wehn using multiple font sizes to create hierarchy on
  a single line.
• Line-height is proportional. Taller for para, shorter for headlines.
• Not every link needs a color.
• Align with readability in mind — if something is longer than two or three
  lines, it will almost always look better left-aligned. Right-align numbers.
  Hyphenate justified text.
• Use letter-spacing effectively — Tightening headlines.
• Ditch hex for HSL
  • Hue is a color’s position on the color wheel — it’s the attribute of a
    color that lets us identify two colors as “blue” even if they aren’t
    identical.
  • Saturation is how colorful or vivid a color looks. 0% saturation is grey
    (no color), and 100% saturation is vibrant and intense.
  • Lightness is just what it sounds like — it measures how close a color is
    to black or to white. 0% lightness is pure black, 100% lightness is pure
    white, and 50% lightness is a pure color at the given hue.
• You need more colors than you think — You can’t build anything with five hex
  codes. You will need Greys, Primary color(s), Accent colors, Reds, Yellows,
  Green.
• When you need to create a lighter or darker variation of a color in your
  palette, don’t get clever using CSS preprocessor functions like “lighten” or
  “darken” to create shades on the fly.
• Greys don’t have to be grey — If you want your greys to feel cool, saturate
  them with a bit of blue. To give your greys a warmer feel, saturate them
  with a bit of yellow or orange.
• Accessible doesn’t have to mean ugly.
• Don’t rely on color alone – Add icons etc.
• Emulate a light source.
• Use shadows to convey elevation.
• Even flat designs can have depth.
• Overlap elements to create layers.
• Everything has an intended size – Don’t scale up icons. Don’t scale down
  screenshots. Don’t scale down icons, either. Re-draw them.
• Beware user-uploaded content – Control the shape and size.
• Prevent background bleed from images. Use a subtle inner box shadow or a
  semi-transparent inner border.
• Supercharge the defaults – bullets, link, checkboxes, radio buttons etc.
• Add color with accent borders.
• Decorate your backgrounds – color, patters, simple shape or illustration
  etc.
• Don’t overlook empty states – Try incorporating an image or illustration to
  grab the user’s attention, and emphasizing the call-to-action to encourage
  them to take the next step. Empty states are a user’s first interaction with
  a new product or feature. There’s no point in presenting a bunch of actions
  that don’t do anything until the user has created some content.