UI/UX Design Visual & UI Design Syllabus

What is mobile-first design, and what is the fluid grid formula for converting fixed sizes to percentages?

Mobile-first designs for the smallest screen first, then progressively enhances for larger screens, forcing content prioritization. The fluid grid formula: $$\frac{\text{target}}{\text{context}} = \text{result}$$ e.g., a 300px element in a 960px container becomes $\frac{300}{960} = 0.3125 = 31.25\%$.

Differentiate micro white space from macro white space.

Micro white space: small spaces between letters, words, lines of text, list items, and within components—affects readability. Macro white space: large spaces between major layout sections, columns, and around the composition—affects hierarchy, focus, and perceived elegance.

What is the difference between active and passive white space?

Active white space is deliberately added to guide the eye, emphasize elements, or structure content flow. Passive white space occurs naturally from line spacing, letter spacing, and margins needed for basic legibility, without an intentional compositional role.

What are the trade-offs between high-density and low-density UI layouts?

High density shows more information per screen (good for expert tools, dashboards, data tables) but increases cognitive load and error risk. Low density with generous white space improves comprehension, focus, and perceived quality but requires more scrolling and slows expert workflows. Density should match user expertise and task frequency.

Define these typographic anatomy terms: baseline, x-height, cap height, ascender, descender.

Baseline: the invisible line letters sit on. x-height: the height of lowercase letters without ascenders (e.g., 'x'). Cap height: the height of uppercase letters from the baseline. Ascender: the part of a lowercase letter rising above the x-height (b, d, h). Descender: the part dropping below the baseline (g, p, y).

What distinguishes a serif typeface from a sans-serif typeface, and give a classic use case for each.

Serifs are small strokes at the ends of letterforms; serif typefaces (e.g., Georgia, Times) feel traditional and are classic for long-form print reading. Sans-serif typefaces (e.g., Helvetica, Roboto) lack these strokes, feel modern and neutral, and dominate screen UI text.

Differentiate kerning, tracking, and leading.

Kerning: adjusting space between a specific pair of letters (e.g., 'AV'). Tracking (letter-spacing): uniform spacing applied across a range of text. Leading (line-height): the vertical distance between baselines of consecutive lines of text.

Define counter, bowl, and terminal in letterform anatomy.

Counter: the enclosed or partially enclosed negative space inside a letter (o, e, c). Bowl: the curved stroke that encloses a counter (b, d, o). Terminal: the end of a stroke that has no serif, which may be cut straight, ball-shaped, or tapered.

What are the core guidelines for pairing two typefaces successfully?

Choose typefaces with clear contrast (e.g., serif headline + sans-serif body) but complementary proportions (similar x-heights); assign each a distinct, consistent role; avoid pairing two fonts that are similar but not identical (they clash); or use a superfamily designed with matching serif and sans versions.

What is the practical limit on the number of typefaces in one interface, and how do you create variety within it?

Use at most 2 (occasionally 3) typefaces. Create variety within one family using its weights (regular, medium, bold), sizes, italics, and case—this preserves consistency while still enabling hierarchy.

List five typographic variables used to build text hierarchy without changing typeface.

Size, weight (boldness), color/value (dark vs muted), letter case (caps/small caps), and spacing/position (indentation, margin above headings). Style variants like italics add a sixth lever.

Distinguish legibility from readability in typography.

Legibility: how easily individual characters and words can be recognized—a property of the typeface design (x-height, letter shapes, character distinction like Il1). Readability: how easily continuous text can be read and understood—a property of how type is set (size, line length, line height, contrast, spacing).

What is the optimal line length for body text, and what happens outside this range?

About 45–75 characters per line (roughly 66 ideal) for single-column body text. Longer lines make the eye lose its place returning to the next line; shorter lines break reading rhythm with too many returns.

What line-height range is recommended for body text, and how does typeface x-height affect legibility on screens?

Body text line-height of roughly 1.4–1.6 times the font size (headings tighter, ~1.1–1.3). Typefaces with larger x-heights appear bigger and more legible at small screen sizes because lowercase letters occupy more of the em square.

State the modular type scale formula and compute the second step above a 16px base with ratio 1.25.

Each step multiplies the base by a constant ratio: $$s_n = b \cdot r^{n}$$ where $b$ is the base size, $r$ the ratio, and $n$ the step. For $b = 16$, $r = 1.25$: $s_2 = 16 \times 1.25^{2} = 25\text{px}$.

Name four common type scale ratios and their musical/proportional names.

Major second $1.125$, major third $1.25$, perfect fourth $\approx 1.333$, perfect fifth $1.5$, and the golden ratio $\varphi \approx 1.618$. Smaller ratios suit dense UIs; larger ratios suit expressive marketing pages.

What is vertical rhythm and how is a baseline grid used to achieve it?

Vertical rhythm is consistent vertical spacing so text and elements repeat at regular intervals down the page. It is achieved with a baseline grid (e.g., every 4px or 8px): line heights, margins, and component heights are all multiples of the baseline unit so text across columns aligns to the same lines.

Contrast the RGB and CMYK color models: how does each create color and where is each used?

RGB is additive: red, green, and blue light are added together, and full intensity of all three yields white—used for screens. CMYK is subtractive: cyan, magenta, yellow, and key (black) inks absorb light, and combining inks moves toward black—used for print.

What do the three components of HSL represent, and what are their ranges?

Hue: position on the color wheel, $0^{\circ}$–$360^{\circ}$ (0 red, 120 green, 240 blue). Saturation: color intensity from $0\%$ (gray) to $100\%$ (fully vivid). Lightness: from $0\%$ (black) through $50\%$ (pure hue) to $100\%$ (white). HSL is preferred for design work because adjustments are intuitive.

What is a color gamut, and how does Display P3 compare with sRGB?

A gamut is the range of colors a color space can represent. sRGB is the standard web/default space; Display P3 is a wider gamut covering roughly 25% more colors, especially more vivid greens and reds, and is supported by modern Apple and high-end displays.

Define complementary, analogous, and triadic color harmonies.

Complementary: two hues opposite on the color wheel ($180^{\circ}$ apart)—maximum contrast and vibrance. Analogous: 3+ hues adjacent on the wheel—harmonious and low contrast. Triadic: three hues evenly spaced $120^{\circ}$ apart—balanced and colorful while retaining contrast.

State the 60-30-10 rule for color palettes.

Allocate approximately $60\%$ of the design to a dominant (usually neutral) color, $30\%$ to a secondary color, and $10\%$ to an accent color used for emphasis and calls to action. The proportions create balance while keeping the accent attention-grabbing.

Differentiate split-complementary, tetradic, and monochromatic color schemes.

Split-complementary: a base hue plus the two colors adjacent to its complement—contrast with less tension than pure complementary. Tetradic (double complementary): two complementary pairs forming a rectangle on the wheel—rich but hard to balance. Monochromatic: one hue varied only in lightness and saturation—cohesive and safe but low contrast.

What psychological associations are commonly attributed to red, blue, and green in Western UI design?

Red: urgency, passion, danger, errors—draws immediate attention. Blue: trust, calm, competence, security—dominant in finance and tech brands. Green: growth, success, nature, permission—used for confirmations and positive states.

Why must designers be cautious applying color psychology globally? Give an example.

Color meanings are culturally dependent, not universal. Example: white signifies purity and weddings in many Western cultures but is associated with mourning and funerals in parts of East Asia; red means danger in the West but luck and prosperity in China.

What minimum contrast ratios does WCAG 2.1 Level AA require for text?

Normal text: at least $4.5{:}1$ against its background. Large text (at least 18pt, or 14pt bold; ~24px / 18.66px bold): at least $3{:}1$. Non-text UI components and graphical objects also require $3{:}1$.

Give the WCAG formula for contrast ratio and the range of possible values.

$$CR = \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 (luminance from weighted RGB: $L = 0.2126R + 0.7152G + 0.0722B$ after gamma correction). Values range from $1{:}1$ (identical) to $21{:}1$ (black on white).

What contrast ratios does WCAG Level AAA require, and what is the rule about using color alone?

AAA requires $7{:}1$ for normal text and $4.5{:}1$ for large text. Additionally, color must never be the only means of conveying information (e.g., errors need an icon or text label, not just red), to support color-blind users (~8% of men).

What are icon grids and keyline shapes, and what other rules keep an icon system consistent?

Icons are drawn on a fixed pixel grid (commonly $24\times24$px with ~2px padding); keyline shapes (circle, square, vertical/horizontal rectangles) standardize the optical size of different silhouettes. Consistency also requires uniform stroke weight, corner radius, level of detail, and one style (outlined vs filled) per set; interactive icons need touch targets of at least 44–48px.

Name and characterize four common digital illustration styles.

Flat: solid colors, no gradients or 3D depth—simple and scalable. Line art (outline): monoline strokes with minimal fill—light and technical. Isometric: objects drawn at equal $30^{\circ}$ axes without perspective convergence—good for scenes and tech products. 3D rendered: realistic depth, lighting, and texture—premium feel. (The generic flat people style is nicknamed 'Corporate Memphis.')