troublemonkey/design-rules-notes

Principles + Practices for Great UI Design

Design-Rules-Notes

Principles + Practices for Great UI Design

• UI Design Mantras:

• 1: Design is design is design (how humans react to what they see and why)
• 2: Stop solving other people's problems (your probs are your own)
• 3: Form doesn't & shouldn't follow function (the two have to work together)
• 4: Every force evolves form (impact forces play a role in what it looks like)
• 5: On small screens, less is more (we want quick, ease of use, and simple)
• 6: Balance creates visual order & signals relationships (individual elements do not compete with the whole)
• 7: Visual rhythm speeds comprehension and use (consistent repetitous structure/flow)
• 8: Good design is held together by harmony (visual elements relating/complementing each other)
• 9: Dominance directs user focus (creates a focal point, highlighting important part)
• 10: Align everything with everything else
• 11: Group & organize related content w/proximity
• 12: Use color to communicate & influence interaction
• 13: Choose color based on associations, emotion, brand
• 14: Contrast always wins

1. Ground Rules

What You Need to Know Upfront

• design is solving problems, not drawing pictures
• does the design serve the purpose of its existence? (context of use)
• how should it be perceived?
• nothing in UI design is ever arbitrary
• don't look at themes; they don't tell us anything about problems to solve
  • you will not find inspiration looking at the work of others
  • you will find someone else's solution to someone else's problem
  • the problem you have to solve belongs exclusively to you
• don't look at trends
  • flat design doesn't consider appropriateness or whether people will understand what they see
  • don't rely on instincts as to what looks good and what doesn't
  • think hard about the appropriateness of visual decisions; let them be informed by research, investigation, and fact
• form must follow function
  • louis sullivan manifesto 1896
  • frank lloyd wright was an intern of his
    • believed the two should be in union
    • his application of the principle was the Guggenheim museum
  • Bauhaus was the foundation for modern graphic design
  • *** Great Resource *** Universal Principles of Design
  • form doesn't and shouldn't follow function
    • the two things affect eachother, one doesn't supersede the other
    • what will set you apart is your understanding of why you make the visual decisons that you make
    • if the form of a design was ruled solely by its function, then every function item would have only one design solution. Every element would have the same design.
    • do you need to know the mechanics of how something works in order to use it?
    • as users we don't care how it works
      • our focus is the experience and our expectations of it
      • we have a mental model that predicts the experience
      • when UI sticks to our mental model, use is easier...we buy, share, etc
  • form should be determined by success critera (not funct or personal pref)
    • we are interested in outcomes not features
    • what aspects of the design are critical to success?
• many forces affect the design and development process
  • audience needs, client desires, ethical obligations, aesthetic inclinations, tech constraints, cultural presuppositions, funct reqs, material properties, avail time, avail budget, avail resources
  • balancing act between UI design, info archit, frontend html/css, middle tier logic, backend data struc, prog & processes
• if it's too complex, we assume it's hard to use
• icons without labels are worse than labels alone
• if an opp to interact isn't visible, we assume it isn't avail
• small screen design
  • focus on context of use, when are they doing this
  • simplify, each screen should contain one primary action
  • design for thumbs, things within easy thumb reach
  • design for fat fingers, right size, right space b/w icons
  • minimize the need to type
  • less is more

2. Organizing Visual Information

• ensure pos & neg space fit together so one doesn't overpower the other
• individual elements shouldn't compete with the whole
• the job of balance is to create order and signal relationships
• balanced space allows user to quickly scan and group related elements
• negative space works to signal visual hierarchy
• all visual design has rhythmic consistency and controlled structure
• visual elements must relate and complement each other in harmony
• harmony is directional (guides user to a certain place)
• harmony creates clear and purposeful flow
• dominance is achieved by emphasizing one or more visual elements
• dominance creates a focal point will people will instinctively go at first glance
• without clear dominance, elements compete w/each other
• contrast supersedes size when it comes to dominance
• more negative space creates more dominance
• aligning elements that are related by context creates visual order
• proximity often supersedes color/contrast to show separation

3. Using Color and Contrast Appropriately

• color gets attention and stirs emotional response

• be consistent to avoid confusion

• color creates connection/continuity

• color implies meaning (must do research, know audience, know effect)

• color should never be sole differentiator of the UI elements

• are you using color correctly? (used sparingly, reinforce/interfere with content hierarchy, will this be functional for someone color blind)

• black >>> authority & power, timeless, cool

• white >>> innocence & purity, cleanliness, peace

• red >>> alarm & urgency, attention, warning, love

• pink >>> romance, grace, compassion, female

• blue >>> peaceful, tranquil, business, tech, male (association with sky)

• green >>> nature, calming, relaxing

• yellow >>> optimism, happiness, warmth, joy, hope (association with sunlight)

• purple >>> royalty, wealth, luxury, feminine, romantic

• brown >>> nature, earth, friendship, genuineness

• lighter shades of blue >>> friendlier, trust

• darker shades of blue >>> suggest security

• 4 color variations req'd for good UI design

  • shadows, midtones, highlights, accents

• contrast ensures you pay attention and take the right actions

• contrast enables readability when using stark, complementary colors

• contrast directs focus, ideally to core content

• secondary content should have less contrast

• contrast helps understand relationships b/w elements

• contrast communicates hierarchy

• color and contrast depend on context

4. Designing with Typography and Imagery

• 95% of what we see on screens are text based language
• typography creates emotional impact
• more than just font; purposefully utilizing size, weight, space, style, etc
• never center align paragraphs (hard on brain and eyes)
• space between letters is kerning
• leading is space between lines of text
• typography rules:
  • 1: Two typefaces max; character widths and weights should be complementary avenir & georgia have similar character widths
  • 2: Limit line width; eye works harder when too wide
  • 3: Choose Readability;
  • 4: Choose legibility; beware of L's that look like I's
  • 5: Use space b/w paragraphs; visual breaks giving eye rest
  • 6: Align text elements using baselines; mult text elements should share common alignment
  • 7: Use styles to visually differentiate content; typeface should have at least 3 styles >> regular, italic, bold
• imagery rules:
  • 1: make sure it serves its purpose; what message does it send
  • 2: focus on people not things; person using product, not just product
  • 3: cropping can change meaning
  • 4: never go for cheap shot, especially sexist; don't objectify
  • 5: don't forget the power of illustration; can sometimes be more impactful
• dos and donts:
  • dont default to stock photos

5. Creating and Simplifying Visual Cues

6. Things to Remember