Name: Matthew Louis Ayoob
I have already taken CS147, but I love design concepts, so here’s a writeup of the articles alongside some personal resources I found helpful during CS147: Introduction To Human Computer Interaction.
Word Count: 558
Gestalt Principles
- Gestalt principles
-
- “The Proximity principle”: Information blocks should be grouped together if related, but unrelated elements should be located at some distance from each other.
Think of whitespace as an “element” – consider its position, more whitespace around an element makes it more relevant
Gestalt principles: similarity and connectedness shown through grouping and color, laws of human visual perception, the way we process groups and patterns
- Proximity (elements close together)
- Similarity (of size, shape, or color)
- Continuation (aligned along a line or curve)
- Closure (individual elements form a single object)
- A good layout can remove the need for other confusing and intruding elements such as labels or popups.
- Add color last and only if necessary. Start with position, size, space, & grayscale/luminance
Typography
- Three basic tools of visual design:
- Typography
- Layout
- Color
6.2 Typography (10:47)
- Point size: font size
- Leading: spacing between the lines
- X-height: height of the lowercase letters
- ascenders /descenders:
- Light, regular, bold
- Serifs: give chiseled looks to letters
- Typefaces build reputations
Color
- Reading order pillars:
- Size
- Color
- Layout
- Spacing
- Style
- Color – may vary from individual to individual and yet across cultures, colors have different meanings.
- Hue is gradation of color (i.e., name: “yellow”)
- Saturation is purity of the hue (vividness) how much gray
- Luminance is the brightness in an image
- Grouping by luminance is intuitive like the map from class
- Color Harmonies:
- Complementary, analogous, triad, split complementary, tetradic/rectangle, square
- Beginners should use analogous and split complementary
- Harder to read complimentary – but often in children’s media
- Analogous: nature, bp logo
- Color
- Rods:
- primarily for night vision & perceiving movement • sensitive to broad spectrum of light • can’t discriminate between colors • sense to intensity or shades of gray
- Cones:
- used to sense color
- Photopigments: Red/yellow, green, blue
- Lots of red and green, fewer blue
- DON’T USE BLUE TEXT
- Pure (saturated) colors require more focusing than less pure (desaturated)
- Size of detectable changes in color varies
- hard to detect changes in reds, purples, & greens
- easier to detect changes in yellows & blue-greens
- older users need higher brightness levels
- Hard to focus on edges created by only color
- use both brightness & color differences
- Avoid single-color distinctions
- mixtures of colors should differ in 2 or 3 colors
- helps color-deficient observers
- Rods:
Grid Basics
- Grid Systems:
- A key pattern for implementing rationality, modernism, asymmetry
- Note that no elements are “centered”
-
6.3 Grids & Alignment (17:33)
- When creating templates, design for the longest text block or for multiple languages
- Left-aligned text is generally fastest for skimming
- Alignment guides the eye and reduces clutter
- Pattern conveys consistency
- Visual proximity to convey semantic information
Real World Examples:
https://docs.google.com/document/d/1DaRMHN-Z0pk2VAKH_Dgu32yLwF1hC2lKL005cANX02g/edit?usp=sharing
