Skip to content

Instantly share code, notes, and snippets.

@ynotdraw

ynotdraw/notes.md

Created August 6, 2019 17:13
Show Gist options
  • Save ynotdraw/9351627d7509cc35813eeac4245cab3b to your computer and use it in GitHub Desktop.
Save ynotdraw/9351627d7509cc35813eeac4245cab3b to your computer and use it in GitHub Desktop.
Download ZIP
Steve Schoger | Refactoring UI | CSS Day 2019
Raw
notes.md

Video: https://www.youtube.com/watch?v=7Z9rrryIOC4&feature=youtu.be&app=desktop Slides: https://speakerdeck.com/steveschoger/practical-solutions-to-common-ui-design-problems

Notes

Tip #1: Give text consistent contrast

  • Image hero's need contrast
  • App bars don't have to be in a bar. App bar changed from a colored bar to transparent so that the image hero blends up into the navbar.
  • More contrast between headline and subtitle. Can use softer color - white text softer on dark background, darken text by decreasing lightness - that's OK.. but always looks a bit off

Tip #2: Don't use grey text on colored backgrounds

  • Consider: trying to achieve reduced contrast. Make text closer to background color, not grey.
  • Don't reduce opacity - it'll look washed out
  • Better approach is to hand-pick a color based on the background color
  • Drag HSB picker to the top-left for color
  • Step further: use perceived brightness

Tip #3: Perceived Brightness

  • Luminosity vs Hue chart

  • Yellow has a higher perceived brightness, blue has a darker perceived brightness

  • How does it help? Want to change how light a color looks, adjust the lightness value. Works to lighten or darker, but also lose some of the intensity. You can rotate to the nearest bright color instead!

  • Adjusted lightness and rotated hue works great when working with light text on colored backgrounds.

  • Great way to make text more accessible while keeping it colorful

  • Dark background distinguishes individual inputs, but still hard to see other components

  • Wrapped the form in a panel

Tip #4: Start with too much whitespace

  • Largest mistake, not having enough white space

  • Start with a ton of white space and then remove it until you're happy with it

  • Use input length as an affordance. Create expectation on how long an entry should be.

  • Increasing height on inputs. Give them a total height of 40 or 48px (size of font + padding around them)

  • Inputs aren't distinct on white background - add off-white background to input. Just enough to create distinction

  • Add icons for visibility and distinction

Tip #5: Balance weight and contrast

  • Unbalanced contrast when icons + text
  • To reduce contrast, give icon a softer color
  • Works like a counter balance - heavier elements feel lighter even though the weight hasn't changed
  • Radio buttons and checkboxes?

Tip #6: Supercharge the defaults

  • Don't use default radio buttons and checkboxes. Create your own!
  • Add color and make it feel more designed
  • Dropdown arrow for select can be modified too
  • Better utilize horizontal space by moving search button to the far right, which reduces overall vertical space.
  • It's below the last input the user interacts with so they don't have to jump left to right
  • Increase height of button so it's consistent with the inputs
  • Added search icon to Search button
  • Introducing the yellow now. High contrast is hard when on yellow or green.
  • Invert the colors (dark text on colored background). Saturate the text color with the background color
  • To upsell the checkboxes and the search, contain them in a box
  • Like having a border, without a border

Tip #7: Overlap elements to create depth

  • Instead of containing card, offset it by using negative margin
  • Since panel shares background color, it looks funny

Tip #8: Use shadows to convey eleveation

  • Add some distinction with box shadow
  • Creating shadows...
  • First thing: use multiple shadows, larger shadow, closer it feels to the user
  • Far left, small shadow, closer to background of the page (button, inputs)
  • Second, further (dropdown menus, small panels)
  • Third (large panels)
  • Fourth and Fifth for modals

Shadows have two parts

  • Ambient light
  • Direct light
  • Shadow created by the ambient light is tighter and darker, lower blur radius
  • Shadow created by direct is larger, softer, with a more vertical offset, with larger blur radius
  • As object gets further, it covers the direct lightsource
  • Negative spread value (box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);). Make direct light subtle

Tip #9: Create depth with color

  • In general, lighter objects feel closer than darker objects
  • Feel more raised, use a subtle off-white
  • Contain table in panel now
  • Shouldn't have same depth as panel on top
  • Use second panel to bring it back a little bit
  • Styling tables is tricky

Tip #10: Align with readability in mind

  • Dollar values and dates right-aligned, then decimal places are in columns
  • font-feature-settings: "tnum" - makes text value look like a monospace font

Tip #11: use fewer borders

  • Can make it look cluttered
  • Use zebra striping instead

Headings

  • Headings don't need to be big and bold
  • Headings are acting more like labels to support content
  • Headings: Small, bold, uppercase text with softer color.

Tip #12: Think outside the database

  • De-emphasize smaller + lighter text

  • Enhance using images if the data calls for it

  • Right buttons draws your eyes away, so to give them a secondary treatment, give them a soft solid background based on text color so it's not as heavy

  • Text link same color as brand color with a chevron to give it a more of a link style

  • Chevron makes it looks more clickable

Cards

  • Different aspect ratios
  • center image in container
  • background-size: cover;
  • Labels for price, website, etc.
  • Most of the time you don't need a label at all!
  • More creative control using weights
  • Reduce noise with borders by using off-white background
  • Use size, weight, color, uppercase to differentiate text
  • Color to emphasize: colored badges to take info in at a quick glance. Soft background color with dark text
  • White text on red is hard to get high contrast ratio. Make background lighter and use a darker text color

Tip #13: Alternate Background

  • Add a color to add distinction between page sections

  • Great for marketing sites, for example

  • Brand blue to the newsletter

  • Footer used a darker treatment

  • Can add a background pattern

  • Big footers are great for a catch all where things are important enough to go in the top nav

  • Still nice to have structure

  • Add subtle labels to each section using a small, bold, uppercase for the headings

  • Legal jargon and social links at the bottom could use some love - added a border

Tip #14: Greys don't have to be "grey"

  • pure greys can make a UI look dull and unnatural
  • Saturate with blue or brown
  • Adjusts temperature of the site
  • Cool: saturate with blue
  • Warm: saturate with yellow or brown
  • Mostly saturate with blue when working with a blue primary color
  • Warmer color if working with red or purple
  • Basecamp uses warmer colors for their backgrounds
  • If working with HSL, increase saturation for the lighter and darker shades to maintain a consistent temperature; otherwise, they'll look washed out

Using Good Fonts

  • Highest impact
  • San Franscisco is cool (mac default)
  • Worth exploring other options though
  • A lot of ways to do this, fonts are everywhere (Google fonts, adobe fonts, typekit)
  • "Cerebri Sans" font. Designed by Hanken Design
  • "Barter Exchange" from bundle purchased

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment