The visual design syllabus

Content

Text

• Copy (The words that fill your design)
• Micro-copy (The short pieces of text throughout your interface)
• Truncation (You can cut off text, often with an ellipsis, so that it fits in the space given for it)

Imagery

• Illustration (Abstract imagery you use to reinforce a message)
• Photography (Literal imagery you use to reinforce a message)
• When to use photographs vs. illustrations (Photos are literal/professional, illustrations are abstract/approachable)
• 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)
• Edit images to suit context (e.g. Give an image a warmer temperature to match colour palette)
• Support, persuade, explain for photographs (Photography should support the context, explain something useful, or persuade the viewer)
• Uses of imagery (Imagery should identify, express, or communicate something)
• 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)
• How images affect attention (e.g. our eyes are drawn to faces)
• 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)
• Content vs. flavour (Some imagery is content and some imagery is just there for “flavour”)

Symbols

• Symbols (Small abstract imagery with a specific meaning)
• What symbols can represent (Feeling, object, action, concept)
• Icon bounding box (Icons often sit in the middle of a fixed size space, regardless of the shape of the icon)
• Bigger symbols can have more detail (The smaller a symbol is, the less detail it should have, and vice versa)

Misc

• Similarity of graphics (Icons, photos, and illustrations should feel like they belong together)
• 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)

Layout

Structure

• 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)
• Explicit structure (When you make layout structure more obvious by using visible dividers, containers, and other lines)
• Containers (Show the box that content sits inside)
• 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)
• Vertical rhythm (It’s good if elements feel like they’re spaced apart in an orderly way)
• 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)
• Noticeable edges (Noticeable edges help you recognise elements, and provide good contrast)
• Visible containers for alignment (Layout is easier and looks better if an element’s container is made visible)
• Responsive design (Use different layouts depending on the size of the design)

Space

• Space (The empty space between and within elements)
• Space to direct attention (Add lots of space around an element to direct the viewer’s attention to it)
• Density (The elements in a design can be packed closely or far apart)
• 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)
• Alignment for microcopy (There are different ways to align words with other interface elements)

Hierarchy

• Visual hierarchy (Use visual cues to suggest order of importance)
• Visual weight (The darker and larger something is, the more attention it attracts)
• Scale (Differences in size between elements)
• Ordering elements (You need to consider the order of elements on a page level and at an element level)
• Reading patterns (The common ways that people look through things)
• Right-to-left languages (Some languages are written right-to-left which has an impact on the layout)

Depth

• Depth (A visual design can have more or less depth, as shown by many depth cues)
• Depth cues (Scale, perspective, higher position, shadows, brightness, shading, textures, blur, overlapping)
• Foreground and background (The viewer naturally separates what they see into foreground and background elements. Sometimes called “figure and ground”)

Composition

• Composition (How you lay out all of the elements in a design so that they work well together)
• Layout by visual weight (The visually heavy parts of your layout should follow/affect the layout more than the visually light parts)
• Visual balance (If one area has heavier elements, it feels unbalanced)
• Areas of interest and areas of rest (Provide clusters of interesting elements and empty areas for the eyes to rest)
• Directing the eye (Designers should direct the viewer’s eyes towards the right elements)
• Teasing continuation (When the viewer can’t see the whole design you need to let them know there’s more, to avoid the “false bottom” or the “illusion of completeness”)
• Gestalt (Laws of proximity, similarity, closure, continuation, uniform connectedness)

Misc

• 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)
• Pattern knowledge (There are common ways to lay out interfaces and content)
• Minimum interaction size (Especially on touch screens, elements should be large enough to easily interact with)

Typography

Typefaces

• Typefaces (Finding and choosing high quality typefaces is very important)
• Alternative glyphs (many typefaces offer alternative glyphs which are usually more stylish, for designers to use)
• Typeface purpose (Some typefaces are designed for a specific purpose, such as text, display, and caption typefaces)
• Typeface meaning/association (We attach meaning to typeface styles, such as a rounded typeface that appears more friendly)
• Typeface pairing (You can pair two different typefaces for a specific effect)

Structure

• 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)
• Space between text elements (You need to set how much space is used above and below text elements like headers and paragraphs)
• Centred text (There are some situations where you might want to use centred text, but not many)
• Text justification (Text can be fully justified or ragged)
• Spacing characters/carriage return control (HTML offers different ways to control the space between characters)
• Hyphenation (There is more than one approach to hyphenating words)
• Widows (If the final word in some text sits on its own line, it is a widow. This should be avoided)

Hierarchy

• 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)

Style

• Correct characters (You should use the correct characters in your text, such as punctuation)
• Block quotes (There are many ways to style block quotes)
• List styles (There are many ways to style lists)
• Small caps (Small caps are alternative character styles you may want to use in some situations)
• Case (upper, lower, sentence, title) (You should consider different case styles for text in some situations)
• 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)

Misc

• Typography best practice/books (There are widely agreed-upon best practices for typography you can learn from books)

Colour

Theory

• Colour wheel (A common way to understand how colours relate to each other)
• Colour systems (There is more than one way to represent colour in code, such as HSB, RGB, and Hex)
• Warm vs. cool colours (Warm colours advance towards the viewer, cool colours recede)
• Colour categories (Jewel, pastel, earth, neutral, and fluorescent tones, plus the shades (black and white))
• Natural brightness (Some colours like yellow are naturally brighter than other colours like violet)

Combination

• Colour palettes (A selection of colours that work well together, usually picked for a specific project)
• 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)
• Colour palette approaches on the colour wheel (There are common approaches you can use to pick a colour palette from the colour wheel)
• Contrast for accessibility (If there is not enough contrast between two colours, they can be hard to tell apart for some people)
• Vibrating edges (The edges of some colours will seem to vibrate when they sit next to each other. These combinations should be avoided)
• Saturating neutrals (It’s common to add a small amount of colour to blacks, whites, and greys)
• Colour context (Colours perception is affected by other present colours. You can learn more about these effects)
• 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)

Purpose

• Uses for colour (e.g. meaning, separation, classification, etc.)
• Cultural colour meaning (Cultures attach meaning to colour, and different cultures attach different meanings to colours)
• Colour impact (Generally the less or more muted colours you use, the more impact other bright colours will have)
• 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)
• When to use light vs. dark palettes (Light mode is more approachable, mature. Dark mode is more cool, edgy, young)

Misc

• Never use pure black (Pure black is not a natural colour, so there’s rarely a reason to use it)
• Gradients (A colour fill that uses more than one colour together and blends between them)
• Dark mode (There are common colour rules you can follow when designing dark-mode interfaces)
• Light on dark looks bigger (A white element on a black background looks bigger than the reverse, for example)
• Distinction is easier with more brightness (e.g. two similar off-white colours are easier to tell apart than two similar dark grey colours)

Non-content imagery

Misc

• 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)

Polish

Misc

• Tools available to polish designs (Your design software offers tools to help you polish your visual design)
• Technique knowledge (You need a library of visual design techniques you can call upon)
• Sprinkles (Ornamental or decorative things you add to your design that aren’t necessary but which add visual interest)
• 13 reasons for polish (There are 13 reasons to add polish to a visual design)

Concepts

Approach to work

• 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)
• Inspiration (Designers rely heavily on inspiration from other designs, and other fields)
• Syntax (You can create a set of internal rules, or a system, that your visual design will follow strictly)
• 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)
• Consistency (Good design is very often consistent with itself and its context)
• Regularisation (Predictable element styles means a more efficiently-understood interface, and lets non-standard elements stand out more)
• Constraints (The more limits and strict rules applied to your design, the more creative you are)
• 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)
• 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)
• Discovery through play (One way to find a solution is to move elements semi-randomly until something clicks)
• Iteration (Good design is often the result of lots of iterations)
• Style tiles (Explore visual style options with small example designs)
• Start with something small (Design one element like a button, and use those decisions to inform the rest of the design)
• 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)
• Squint test (If you close your eyes a little your design will be blurry. This can help you see some problems)
• 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)

Context of use

• Designer and audience understanding (The designer and the audience of something might understand it in different ways)
• 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)
• Mental/cultural associations (Viewers of a design associate various design elements with things in their mind. This can be personal or cultural)
• 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)
• Characteristics associated with shapes (Shapes trigger different associations in the viewer’s mind. e.g. Circles are approachable, squares are stable.)
• Audience-appropriate style (e.g. A style that’s appropriate for children might not be appropriate for a professional)
• Meeting expectations (It’s often important that visual design match the viewer’s expectations)
• 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)
• 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”)

Interaction design

• Visual organisation (Visual design should exist to show the viewer where they are, what they’re looking at, and how they can interact)
• Semiotics (The science of signs. Especially syntactics, semantics, pragmatics)
• 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)
• Signifiers (Interfaces can give visual clues to tell users something is possible in the interface)
• Information design (Visual design of lots of information has its own rules and suggestions)
• Make differences obvious (Different things should be noticeably different)
• Cleanliness vs. usability (Often more usable interfaces have more signifiers which makes the interface less clean)
• Ease of seeing differences (From easiest to hardest: Shape, position, size, colour, brightness, texture, orientation)

Aesthetics

• 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)
• Personal style (Designers often have a personal style, where they use a similar style for lots of their work)
• Content-focused (Your text, images, and other content might provide enough visual interest, which means the interface can be simple or plain)
• Brand expression (Every element or visual choice you make is a chance to express the brand, if there is one)
• Classical vs. expressive aesthetics (Pleasant, clear, clean, symmetric design vs. creative, fascinating, special effects, original, sophisticated design)
• Costly value signals (More difficult/expensive visual techniques are a sign of value, like peacock feathers)
• Emotional response (if the viewer has an emotional response to your work they may like it more)
• Preference for nature (people are often fond of things that remind them of nature)
• 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)

Qualities

• Timelessness (Some designs are more timeless than others)
• Simplicity (Simplicity is a major advantage in design, because no-one dislikes simplicity)
• 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)
• Personality (Some designs are believed to have more personality than others)
• Subtlety (Subtle details are often thought to be better than loud/obvious details)
• Motifs (Different elements in your design can be related to each other through visual cues. For example, anything exciting might be round and yellow)
• Realism (Visual styles like drop-shadows, or lit-from-above elements, try to recreate things from the physical world)
• Similarity of line work (line-based elements like text, icons, and illustrations should feel like they were drawn with the same pen)
• Visual language (a visual can be broken down into parts/concepts, which form its visual language. These can be reused as motifs, for example)
• Multiple meanings (an element can express more than one meaning)
• Elegance vs. extravagance (two ends of an efficiency spectrum: doing a lot with a little vs. a lot with a lot)

Things to be aware of

• 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 less 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)
• Effects vs. awareness (A subtle design element may not be consciously noticed but maybe still have an effect)
• Aware but not focused (Viewers should be aware of non-content elements, e.g. containers, but generally not focused on them)
• 1 + 1 = 3 (Two design elements often create a third element out of the relationship between them)
• Eye-catching issues (Small visual issues like misalignment can have a big effect on our enjoyment because we get caught up on them)

Rules of thumb

• Rules you can safely follow (There are visual design rules you can safely follow every time you design)
• Odd numbers are more interesting (An odd number of things creates an interesting tension)
• 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)
• 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)
• Make content high contrast and non-content low contrast (Help the user to focus on the content, not the non-content)

Self-improvement

• Good taste (Designers develop good taste over time and through exposure to good design that they pay attention to)
• Copywork (You can improve your visual design if you copy other people’s work to learn how they created it)
• Margin of safety techniques (Early on, use techniques that are easier to get right/are less likely to go wrong)