Start with an idea: A design should exist to communicate an idea or message, and it’s useful to come up with the idea first
Semiotics: The science of signs. Especially syntactics, semantics, pragmatics
Designer and audience understanding: The designer and the audience of something might understand it in different ways
Mental/cultural associations: Viewers of a design associate various design elements with things in their mind. This can be personal or cultural
Multiple meanings: an element can express more than one meaning
The abstract to concrete associations spectrum: Some design elements are associated more with a concept than others. For example, the colour green is abstract and the word “envy” is concrete as far as the concept of envy goes
Reification: when an abstract thing (e.g. a colour) is used so many times to represent a concrete thing (e.g. a social class) that it comes to represent that thing in most people’s minds
Meaning of type, colour, shape, and medium
The medium has meaning: How imagery is made carries meaning outside of its subject matter
Denotation versus connotation: Denotative colours mean something specific, sometimes culturally and sometimes that the designer has decided. Connotations are meanings people associate with colours, often more than one per colour
Cultural colour meaning: Cultures attach meaning to colour, and different cultures attach different meanings to colours
Characteristics associated with shapes: Shapes trigger different associations in the viewer’s mind. e.g. Circles are approachable, squares are stable.
Typeface meaning/association: We attach meaning to typeface styles, such as a rounded typeface that appears more friendly
Communicating with text and imagery
Copy: The words that fill your design
Uses of imagery: Imagery should identify, express, or communicate something
Content vs. flavour: Some imagery is content and some imagery is just there for “flavour”
Substitution: replace e.g. a word with an image which represents that word
Uses for colour: e.g. meaning, separation, classification, etc.
What symbols can represent: Feeling, object, action, concept
Micro-copy: The short pieces of text throughout your interface
Support, persuade, explain for photographs: Photography should support the context, explain something useful, or persuade the viewer
Photos should start a video in viewers’ heads: A good photograph should cause a video or scene to play in the viewer’s head when they look at it
Colour coding: When colours are used for a specific contextual meaning, e.g. sub-brands
Visual style
Style selection
Audience-appropriate style: e.g. A style that’s appropriate for children might not be appropriate for a professional
Classical vs. expressive aesthetics: Pleasant, clear, clean, symmetric design vs. creative, fascinating, special effects, original, sophisticated design
Brand expression: Every element or visual choice you make is a chance to express the brand, if there is one
Personal style: Designers often have a personal style, where they use a similar style for lots of their work
Fashions/trends: There are visual styles that are usually temporarily popular, just as in clothing fashion
Most advanced yet acceptable: MAYA principle: make it different enough to stand out, but not so different that people reject it
The taste of crowds: If a lot of people have input into visual design it often ends up dull and inoffensive
When to use light vs. dark palettes: Light mode is more approachable, mature. Dark mode is more cool, edgy, young
Visual consistency
Consistency: Good design is very often consistent with itself and its context
Visual language: a visual can be broken down into parts/concepts, which form its visual language. These can be reused as motifs, for example
Syntax: You can create a set of internal rules, or a system, that your visual design will follow strictly
More visual complexity means more difficult coherence: The more elements or visual cues you include in a design, the more difficult it is to make that design look good, because the number of relationships between elements goes up
Less visual complexity means more difficult execution: The fewer elements or visual cues you include in a design, the more you have to learn about what you can do with each type of element
Regularisation: Predictable element styles means a more efficiently-understood interface, and lets non-standard elements stand out more
Continuity: there are ways to make many screens/views feel like they belong to the same set design
Motifs: Different elements in your design can be related to each other through visual cues. For example, anything exciting might be round and yellow
Similarity of graphics: Icons, photos, and illustrations should feel like they belong together
Similarity of line work: line-based elements like text, icons, and illustrations should feel like they were drawn with the same pen
Personality and emotional response
Emotional response: if the viewer has an emotional response to your work they may like it more
Personality: Some designs are believed to have more personality than others
Timelessness: Some designs are more timeless than others
Variety: A more varied visual design is often a more visually interesting visual design
The value of novelty: Visual design that’s noticeably different has value because it can draw people in
Energy: Some designs have more energy than others, often because of how visually busy and varied they are
Subtlety: Subtle details are often thought to be better than loud/obvious details
Realism: Visual styles like drop-shadows, or lit-from-above elements, try to recreate things from the physical world
Preference for nature: people are often fond of things that remind them of nature
Costly value signals: More difficult/expensive visual techniques are a sign of value, like peacock feathers
Simplicity and decoration
Simplicity: Simplicity is a major advantage in design, because no-one dislikes simplicity
Elegance vs. extravagance: two ends of an efficiency spectrum: doing a lot with a little vs. a lot with a lot
Content-focused: Your text, images, and other content might provide enough visual interest, which means the interface can be simple or plain
13 reasons for polish: There are 13 reasons to add polish to a visual design
Change first, add later: If you want to make your design more expressive, try to change existing elements before you add new ones, to avoid clutter
Sprinkles: Ornamental or decorative things you add to your design that aren’t necessary but which add visual interest
Pattern and other texture: Pattern and texture are a way to add visual variety to a design
Background elements: You can add elements to the background of a design to reinforce a theme or add visual interest. One example is a watermark
Visual perception
Shape recognition and grouping
Gestalt: Laws of proximity, similarity, closure, continuation, uniform connectedness
Foreground and background: The viewer naturally separates what they see into foreground and background elements. Sometimes called “figure and ground”
Effects vs. awareness: A subtle design element may not be consciously noticed but maybe still have an effect
1 + 1 = 3: Two design elements often create a third element out of the relationship between them
Ease of seeing differences: From easiest to hardest: Shape, position, size, colour, brightness, texture, orientation
Visual hierarchy
Visual hierarchy: Use visual cues to suggest order of importance
Dominant, sub-dominant, and subordinate: One element should be dominant, some more should be focal points but less dominant, and the rest should fade into the background
Visual weight: The darker and larger something is, the more attention it attracts
Make differences obvious: Different things should be noticeably different
Contrast of appearance, emphasis and de-emphasis: A common technique in visual design is to emphasise one element and de-emphasise a related element so that the viewer knows where their focus is supposed to be
Scale: Differences in size between elements
Double encoding: Use two or more visual cues to communicate the same concept
Attention and emphasis
Directing the eye: Designers should direct the viewer’s eyes towards the right elements
Less is more impact: if you use less of something, it will have more impact when you do use it
Prominence escalation: As elements do more to stand out visually, other elements need to do more as well
Aware but not focused: Viewers should be aware of non-content elements, e.g. containers, but generally not focused on them
Areas of interest and areas of rest: Provide clusters of interesting elements and empty areas for the eyes to rest
How images affect attention: e.g. our eyes are drawn to faces
Space to direct attention: Add lots of space around an element to direct the viewer’s attention to it
Colour impact: Generally the less or more muted colours you use, the more impact other bright colours will have
Make content high contrast and non-content low contrast: Help the user to focus on the content, not the non-content
Depth
Depth: A visual design can have more or less depth, as shown by many depth cues
Depth cues: Occlusion, perspective (size gradients, texture gradients), cast shadows, height on the picture plane, shading, depth of focus, reference to nearby known objects, degree of contrast with background
Layout
Composition and balance
Composition: How you lay out all of the elements in a design so that they work well together
Ordering elements: You need to consider the order of elements on a page level and at an element level
Visual balance: If one area has heavier elements, it feels unbalanced
Proportional relationships: elements feel more orderly/related if they proportional relationships of various kinds
Layout by visual weight: The visually heavy parts of your layout should follow/affect the layout more than the visually light parts
Odd numbers are more interesting: An odd number of things creates an interesting tension
Grids
Soft vs. hard grids: Soft grids use fixed spacing values between elements, but don’t pay attention to element size. Hard grids fit elements into modules of the grid
Horizontal grids: Grids made of columns
Vertical grids: You can use baseline and block vertical grids to get better vertical rhythm
Modular grids: You can split the design into rectangles that you fill with content
Hierarchical grids: Split the space into sub-sections hierarchically
Other layout systems: There are less common layout systems like circular and diagonal
Ignoring the layout system: Elements don’t have to follow the strict rules of the layout. e.g. they can overlap other elements, or be rotated
Spacing and rhythm
Space: The empty space between and within elements
Density: The elements in a design can be packed closely or far apart
Vertical rhythm: It’s good if elements feel like they’re spaced apart in an orderly way
Spacing scales: You should use a set of specific spacing sizes that work well together
Inner and outer space: The spacing used inside groups should be less than the spacing outside groups
More padding in longest direction: Sometimes—buttons are a good example—the padding in a container should be larger in that containers longest direction
Alignment
Alignment: You can line up the edges or centres of elements
Optical alignment: Sometimes you can’t align things mathematically and need to eyeball it
Vertical alignment options: You can vertically align by the centre if the elements are similar sizes. Otherwise by their tops or bottoms
Visible containers for alignment: Layout is easier and looks better if an element’s container is made visible
Alignment for microcopy: There are different ways to align words with other interface elements
Edges, containers, and corners
Explicit structure: When you make layout structure more obvious by using visible dividers, containers, and other lines
Noticeable edges: Noticeable edges help you recognise elements, and provide good contrast
Containers: Show the box that content sits inside
Rounded corners: You can round the corners of elements to make them softer. You can also smooth the rounded corner as in iOS
Nested rounded corners: If elements are nested and have rounded corners, those corners should visually match each other, which needs different radiuses
Typography
Typeface selection
Typefaces: Finding and choosing high quality typefaces is important
Typeface purpose: Some typefaces are designed for a specific purpose, such as text, display, and caption typefaces
Typeface pairing: You can pair two different typefaces for a specific effect
Alternative glyphs: many typefaces offer alternative glyphs which are usually more stylish, for designers to use
Text hierarchy and formatting
Typographic hierarchy: The structure of your text can be communicated by styling the “levels” of your text like titles and sub-titles
Typographic scales: You can set a scale of related sizes to use for all of your text
Text styles: There are ways to style text that can communicate things. Examples include underlines, italics, bold, and strikethrough
Paragraph styles: There are common ways to style paragraphs, such as drop caps and hanging punctuation
Case (upper, lower, sentence, title): You should consider different case styles for text in some situations
List styles: There are many ways to style lists
Block quotes: There are many ways to style block quotes
Correct characters: You should use the correct characters in your text, such as punctuation
Small caps: Small caps are alternative character styles you may want to use in some situations
Readability and text spacing
Letter and word shape: People recognise letters and words more easily at a glance if they have more distinct shapes
Space between text elements: You need to set how much space is used above and below text elements like headers and paragraphs
Line length: There’s an ideal range for the number of characters in a line
Line height: Lines should not be too close together or too far apart
Letter spacing: You might need to reduce the letter spacing for large text and increase it for small or hard-to-read text
Text alignment, wrapping, and overflow
Text justification: Text can be fully justified or ragged
Centred text: There are some situations where you might want to use centred text, but not many
Hyphenation: There is more than one approach to hyphenating words
Truncation: You can cut off text, often with an ellipsis, so that it fits in the space given for it
Widows: If the final word in some text sits on its own line, it is a widow. This should be avoided
Spacing characters/carriage return control: HTML offers different ways to control the space between characters
Colour
Colour properties and relationships
Colour systems: There is more than one way to represent colour in code, such as HSB, RGB, and Hex
Colour wheel: A common way to understand how colours relate to each other
Colour categories: Jewel, pastel, earth, neutral, and fluorescent tones, plus the shades (black and white)
Colour context: Colours look different in different contexts
Natural brightness: Some colours like yellow are naturally brighter than other colours like violet
Warm vs. cool colours: Warm colours advance towards the viewer, cool colours recede
Colour palettes
Colour palettes: A selection of colours that work well together, usually picked for a specific project
Colour palette approaches on the colour wheel: There are common approaches you can use to pick a colour palette from the colour wheel
Importance of value/brightness in colour palettes: Colours in a palette should have the same brightness or very different brightness, but not nearly-the-same brightness or they’ll look washed out
Colour proportion: A common proportion of colours in a palette is 60% for the primary colour, 30% for the secondary colour, and 10% for the accent colour
Saturating neutrals: It’s common to add a small amount of colour to blacks, whites, and greys
Never use pure black: Pure black is not a natural colour, so there’s rarely a reason to use it
Contrast and visibility
Contrast for accessibility: If there is not enough contrast between two colours, they can be hard to tell apart for some people
Distinction is easier with more brightness: e.g. two similar off-white colours are easier to tell apart than two similar dark grey colours
High contrast for small elements: The smaller an element, the more brightness contrast it should have with its background
Vibrating edges: The edges of some colours will seem to vibrate when they sit next to each other. These combinations should be avoided
Light on dark looks bigger: A white element on a black background looks bigger than the reverse, for example
Dark mode and ambient light
Ambient brightness: A light visual style is easier to see in a bright room, and vice versa
Dark mode: There are common colour rules you can follow when designing dark-mode interfaces
White can be blinding: In low light conditions, brighter colours can be uncomfortable because they cause the screen to shine more brightly
Gradients
Gradients: A colour fill that uses more than one colour together and blends between them
Gradient easing: Using more stops in a gradient to give a smoother transition between two colours
Imagery
Photos, illustrations, and symbols
Tangible vs intangible concepts: some concepts are easy to show a photo or screenshot of, and some concepts are fuzzier and need an illustration that points at the concept
When to use more literal or abstract imagery: e.g. photos are literal/professional, illustrations are abstract/approachable
Photography: Literal imagery you use to reinforce a message
Illustration: Abstract imagery you use to reinforce a message
Symbols: Small abstract imagery with a specific meaning
Image editing and placement
Edit images to suit context: e.g. Give an image a warmer temperature to match colour palette
Cropping images: Images can be cropped so that they fit in the space given for them
Image masks: Graphics can be masked so they take on a shape
Background-less photos: Remove the background around an object in a photo so it fits the design more
Inline imagery: Imagery that sits inline with text
Icon sizing and detail
Bigger symbols can have more detail: The smaller a symbol is, the less detail it should have, and vice versa
Icon bounding box: Icons often sit in the middle of a fixed size space, regardless of the shape of the icon
Interface design
Cultural and platform conventions
Meeting expectations: It’s often important that visual design match the viewer’s expectations
Pattern knowledge: There are common ways to lay out interfaces and content
Cultural UI standards: Different cultures may have different expectations for visual design
Platform standards: Often the platform you design for has its own visual design standards to follow
The direction of time and progress: The concepts of progression and time are associated with a certain direction, depending on your culture. In the West this is left to right
Right-to-left languages: Some languages are written right-to-left which has an impact on the layout
Content flow, density, and variation
Content certainty and creativity: More certain/static content means you can be more creative with layout and other choices. If the content is dynamic you need to be safer
Reading patterns: The common ways that people look through things
Don’t put too much in one view: You shouldn’t visually overwhelm any view the viewer might experience of your design
Consistency within the view: It’s useful if your design is visually consistent in every possible view the viewer might experience. For example two elements might be visually similar but the user might never see them near each other, and two other elements might be in the same view but not be consistent
Navigation and interaction cues
Visual organisation: Visual design should exist to show the viewer where they are, what they’re looking at, and how they can interact
Information design: Visual design of lots of information has its own rules and suggestions
Signifiers: Interfaces can give visual clues to tell users something is possible in the interface
Cleanliness vs. usability: Often more usable interfaces have more signifiers which makes the interface less clean
Minimum interaction size: Especially on touch screens, elements should be large enough to easily interact with
Teasing more content: When the viewer can’t see the whole design you should let them know there’s more, to avoid the “false bottom” or the “illusion of completeness”
Screen sizes, resolution, and frequency of use
Different visual design depending on frequency of use: e.g. software that is used once can be more extreme than software which is used for 8 hours every day
Responsive design: Use different layouts depending on the size of the design
Pixels vs points: For high resolution screens like Retina screens, more than one physical pixel is used for each conceptual pixel, often called a “point”
Design process
Practice and skill development
Good taste: Designers develop good taste over time and through exposure to good design that they pay attention to
Technique knowledge: You need a library of visual design techniques you can call upon
Rules you can safely follow: There are visual design rules you can safely follow every time you design
Margin of safety techniques: Early on, use techniques that are easier to get right/are less likely to go wrong
Copywork: You can improve your visual design if you copy other people’s work to learn how they created it
Typography best practice/books: There are widely agreed-upon best practices for typography you can learn from books
Idea generation and exploration
Inspiration: Designers rely heavily on inspiration from other designs, and other fields
Constraints: The more limits and strict rules applied to your design, the more creative you are
Discovery through play: One way to find a solution is to move elements semi-randomly until something clicks
Start with something small: Design one element like a button, and use those decisions to inform the rest of the design
Style tiles: Explore visual style options with small example designs
Iteration and workflow
Iteration: Good design is often the result of lots of iterations
From general to specific: A good approach to design is to start with general decisions and work your way down to specific decisions
From rough to detailed: Designers often use rough methods like sketching to work on general ideas, and detailed methods like mockups to work on specific ideas
Work in passes: One approach to visual design is to start with content and then “layer on” visual design in passes, e.g. typography, then layout, then colour, then sprinkles
Move on if stuck: If you’re not sure how to improve an element, move on to something else. Success there may influence the stuck decision
Visual checks and polish
Deliberateness: A good designer is often deliberate about everything in their design. Nothing is left unconsidered
Rigour: A graphic design concept that means you strictly follow the rules and pay attention to detail
Attention to detail: Good visual designers pay a lot of attention to detail
Visual hygiene: You have good visual hygiene if your designs are pixel-perfect
Eye-catching issues: Small visual issues like misalignment can have a big effect on our enjoyment because we get caught up on them
Tools available to polish designs: Your design software offers tools to help you polish your visual design
Squint test: If you close your eyes a little your design will be blurry. This can help you see some problems