Graphic Design Foundations of Visual Design Syllabus

Name five factors that increase an element's visual weight.

Larger size, darker value, higher color saturation (especially warm colors), complex texture or detail, and isolation from other elements. Position also matters: elements far from the center exert more compositional leverage.

Define contrast and list four common types used in design.

Contrast is the juxtaposition of noticeably different elements to create distinction, hierarchy, and interest. Common types: value contrast (light vs. dark), size contrast (large vs. small), color contrast (e.g., complementary hues), and shape or typeface contrast (geometric vs. organic, serif vs. sans-serif).

How is the WCAG color contrast ratio calculated, and what are the AA minimums for text?

Contrast ratio $= \frac{L_{1} + 0.05}{L_{2} + 0.05}$, where $L_{1}$ is the relative luminance of the lighter color and $L_{2}$ of the darker. WCAG AA requires at least $4.5:1$ for normal text and $3:1$ for large text.

Define emphasis and focal point in a composition.

Emphasis is the principle of making one element or area visually dominant so it attracts attention first. The focal point is that specific spot where the viewer's eye lands first.

List five techniques for creating a focal point.

1) Contrast (in color, value, size, or shape), 2) isolation (separating an element from groups), 3) placement (e.g., center or rule-of-thirds intersections), 4) convergence (leading lines pointing to the element), 5) anomaly (breaking an established pattern).

What is the rule of thirds?

A composition guideline that divides the frame into a $3 \times 3$ grid with two equally spaced horizontal and vertical lines. Placing key elements along these lines or at their four intersections ("power points") creates more dynamic, balanced compositions than centering.

Define rhythm as a principle of design.

Rhythm is a sense of organized visual movement created by repeating elements (shapes, colors, lines) with intervals or spaces between them, guiding the eye through the composition like a beat in music.

Name and briefly describe the five types of visual rhythm.

Regular: identical elements at equal intervals. Alternating: two or more motifs repeating in sequence (ABAB). Flowing: repetition following curves or organic paths. Progressive: elements change gradually in size, color, or spacing with each repeat. Random: repetition with no discernible order.

What role does repetition play in a design system or brand?

Repetition reuses the same visual elements (colors, fonts, shapes, spacing) throughout a work or brand. It creates unity, consistency, rhythm, and recognizability, tying separate parts into a cohesive whole.

What is the difference between proportion and scale?

Proportion is the size relationship of parts within a single object or between elements of a composition (e.g., head-to-body ratio). Scale is an object's overall size relative to a standard of reference, such as the human body or surrounding objects.

State the defining relation and approximate value of the golden ratio.

For quantities $a > b > 0$, the golden ratio satisfies $\frac{a+b}{a} = \frac{a}{b} = \phi$, where $$\phi = \frac{1 + \sqrt{5}}{2} \approx 1.618$$ It has long been used to create proportions considered naturally pleasing.

What is a modular typographic scale, and what is its formula?

A modular scale is a sequence of type sizes generated by multiplying a base size repeatedly by a fixed ratio: $s_{n} = s_{0} \times r^{n}$, where $s_{0}$ is the base size and $r$ is the ratio (e.g., $r = 1.25$, the "major third"). It produces harmonious, proportionally related sizes.

What is hierarchical scale?

The deliberate exaggeration or manipulation of relative size to signal importance — larger elements read as more significant. Used from ancient art (pharaohs drawn larger than servants) to modern layouts (headlines larger than body text).

Define unity and list four techniques for achieving it.

Unity is the sense that all elements of a composition belong together as a coherent whole. Techniques: proximity (grouping related items), repetition (of colors, shapes, fonts), alignment to a grid, and a limited, consistent color palette.

Why must unity be balanced with variety?

Total unity without variety becomes monotonous and boring; total variety without unity becomes chaotic. Effective design keeps enough consistency to feel whole while introducing enough difference (in color, size, shape) to sustain interest.

Define harmony in visual design and give two ways to achieve it.

Harmony is the pleasing agreement among elements, where parts relate to each other comfortably without jarring conflict. It is achieved through analogous color schemes, similar or related shapes, consistent texture or style, and repetition of visual themes.

What is the central idea of Gestalt psychology as applied to design?

"The whole is other than the sum of its parts": viewers perceive unified, organized wholes before individual elements. Designers exploit grouping principles (proximity, similarity, closure, continuity, common fate, symmetry) to control how compositions are perceived.

State the alignment principle of design.

Nothing should be placed arbitrarily: every element should share a visual connection (an invisible line) with another element's edge or center. Alignment creates order, sharpens the design, and strengthens unity. Edge alignment generally looks stronger than centered alignment for multiple items.

State the proximity principle as a layout/design rule.

Related items should be grouped close together so they read as one visual unit, while unrelated items should be separated by space. This organizes information, reduces clutter, and instantly communicates structure to the viewer.

What is the figure-ground relationship?

The perceptual tendency to separate a scene into a figure (the object of focus, seen as the subject) and the ground (the background it rests on). Clear figure-ground separation is fundamental to legibility and recognition.

What are the three types of figure-ground relationships, and what classic image demonstrates reversal?

1) Stable: figure and ground are clearly distinct. 2) Reversible: figure and ground can flip roles, each viewable as the subject — classically demonstrated by Rubin's vase (a vase or two facing profiles). 3) Ambiguous: elements can be read as figure or ground simultaneously with no clear assignment.

State the Gestalt principle of similarity.

Elements that share visual characteristics — shape, color, size, texture, or orientation — are perceived as belonging to the same group. A deliberate break in similarity (an anomaly) creates emphasis and a focal point.

When the Gestalt principles of proximity and similarity conflict, which usually dominates perception?

Proximity generally overrides similarity: elements placed close together tend to be grouped together even if they differ in shape or color from one another and resemble more distant elements.

State the Gestalt principle of closure.

The mind automatically completes incomplete shapes, perceiving a whole figure even when parts of its contour are missing. Designers use it in minimal logos (e.g., the WWF panda), letting viewers "fill in" the missing information.

State the Gestalt principle of continuity (good continuation).

The eye prefers to follow the smoothest, most continuous path: elements arranged along a line or curve are perceived as related and are followed as a single flow, even when the path is interrupted or crosses other elements.

State the Gestalt principle of common fate.

Elements that move (or appear to move/point) in the same direction at the same time are perceived as a single group, regardless of their spacing or appearance. It is especially powerful in motion design and animated interfaces.

How does the Gestalt principle of symmetry (and order/Prägnanz) affect perception?

Symmetrical elements are perceived as belonging together and forming a unified figure around their axis, even when separated by distance. Related is the law of Prägnanz: viewers interpret ambiguous or complex images in the simplest, most orderly form possible.

Define visual hierarchy.

Visual hierarchy is the arrangement of elements to signal their order of importance, controlling the sequence in which viewers notice and process information — what is seen first, second, and third.

List five visual cues designers use to establish hierarchy.

1) Size and scale (bigger = more important), 2) color and contrast (bright/high-contrast elements stand out), 3) placement (top and upper-left positions read first in Western layouts), 4) whitespace and isolation, 5) typographic weight and style (bold headings vs. light body text).

Compare the F-pattern and Z-pattern of visual scanning, and state when each applies.

F-pattern: on text-heavy pages, eyes sweep horizontally across the top, then a shorter sweep lower down, then scan vertically down the left side — key content belongs along these strokes. Z-pattern: on sparse, image-led layouts, eyes move top-left to top-right, diagonally down to bottom-left, then across to bottom-right — ideal for placing logo, headline, and call-to-action.