The complete visual design syllabus

Content

Basic

• Copy (The words that fill your design)
• 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)
• 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)
• Icons (Small abstract imagery with a specific meaning)
• Icon bounding box (Icons often sit in the middle of a fixed size space, regardless of the shape of the icon)

Advanced

• 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)
• Similarity of graphics (Icons, photos, and illustrations should feel like they belong together)
• 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)
• Flavour elements (Small visual touches to add interest, like pen marks or random shapes)
• Inline imagery (Imagery that sits inline with text)

Layout

Basic

• Horizontal grids (Grids made of columns)
• Space (The empty space between and within elements)
• Alignment (You can line up the edges or centres of elements)
• Gestalt (Laws of proximity, similarity, closure, continuation, uniform connectedness)
• Scale (Differences in size between elements)
• Visual weight (The darker and larger something is, the more attention it attracts)
• Visual balance (If one area has heavier elements, it feels unbalanced)
• Visual hierarchy (Use visual cues to suggest order of importance)
• Responsive design (Use different layouts depending on the size of the design)
• Space to direct attention (Add lots of space around an element to direct the viewer’s attention to it)
• Foreground and background (The viewer naturally separates what they see into foreground and background elements. Sometimes called “figure and ground”)
• Layering (Elements can be layered on top of one another)
• 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)
• 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)
• Ordering elements (You need to consider the order of elements on a page level and at an element level)
• Vertical rhythm (It’s good if elements feel like they’re spaced apart in an orderly way)
• Density (The elements in a design can be packed closely or far apart)
• 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)
• 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)

Advanced

• 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)
• Other layout systems (There are less common layout systems like circular and diagonal)
• 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)
• Layout by visual weight (The visually heavy parts of your layout should follow/affect the layout more than the visually light parts)
• 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)
• 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)
• Alignment for microcopy (There are different ways to align words with other interface elements)
• Composition (How you lay out all of the elements in a design so that they work well together)
• 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)
• More padding in longest direction (Sometimes—buttons are a good example—the padding in a container should be larger in that containers longest direction)

Typography

Basic

• Typography best practice/books (There are widely agreed-upon best practices for typography you can learn from books)
• Typefaces (Finding and choosing high quality typefaces is very important)
• 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)
• 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)
• 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)

Advanced

• Spacing characters/carriage return control (HTML offers different ways to control the space between characters)
• Typeface purpose (Some typefaces are designed for s 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)
• Paragraph styles (There are common ways to style paragraphs, such as drop caps and hanging punctuation)
• 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)

Colour

Basic

• Colour wheel (A common way to understand how colours relate to each other)
• 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)
• 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)
• 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)
• Contrast for accessibility (If there is not enough contrast between two colours, they can be hard to tell apart for some people)
• 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)
• Vibrating edges (The edges of some colours will seem to vibrate when they sit next to each other. These combinations should be avoided)
• Gradients (A colour fill that uses more than one colour together and blends between them)

Advanced

• Colour impact (Generally the less or more muted colours you use, the more impact other bright colours will have)
• Colour context (Colours perception is affected by other present colours. You can learn more about these effects)
• Colour categories (Jewel, pastel, earth, neutral, and fluorescent tones, plus the shades (black and white))
• Denotation versus connotation (Denotive 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)
• Natural brightness (Some colours like yellow are naturally brighter than other colours like violet)
• 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)
• Dark mode (There are common colour rules you can follow when designing dark-mode interfaces)
• When to use light vs. dark palettes (Light mode is more approachable, mature, professional. Dark mode is more cool, edgy, young)
• Light on dark looks bigger (A white element on a black background looks bigger than the reverse, for example)

Non-content imagery

Basic

• Pattern and other texture (Pattern and texture are a way to add visual variety to a design)

Advanced

• Flair (Flair like dot grids are foreground visual imagery that don’t have much meaning but add visual interest)
• 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

Basic

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

Advanced

• 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)
• Constraints (The more limits and strict rules you use when you design, the more creative you often are)
• Attention to detail (Good visual designers pay a lot of attention to detail)
• 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)
• 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)

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)

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)

Aesthetics

• Fashions/trends (There are visual styles that are usually temporarily popular, just as in clothing fashion)
• 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)

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)
• Depth (A visual design can have more or less depth, as shown by many depth cues)
• 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)

Things to be aware of

• More elements means more difficult coherence (The more elements 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 elements means more difficult execution (The less elements 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 design element may not be noticed but may still have an effect, meaning they can be subtler than assumed)
• 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)