UI/UX Design Visual & UI Design Syllabus

Visual & UI Design syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Visual & UI Design in UI/UX Design, not a summary of it.

1. 1

   Visual Design Principles

   4 topics

   • Balance, Contrast, and Emphasis
   • Hierarchy and Scale
   • Alignment and Proximity
   • Repetition and Consistency
2. 2

   Layout & Grids

   4 topics

   • Grid Systems
   • Spacing and the 8-Point System
   • Responsive Layout Patterns
   • White Space and Density
3. 3

   Typography

   4 topics

   • Typographic Anatomy and Terminology
   • Type Pairing and Hierarchy
   • Readability and Legibility
   • Type Scales and Vertical Rhythm
4. 4

   Color Theory

   4 topics

   • Color Models and Spaces
   • Color Harmonies and Palettes
   • Color Psychology and Meaning
   • Color Contrast and Accessibility
5. 5

   Iconography & Imagery

   3 topics

   • Icon Design and Systems
   • Illustration Styles
   • Imagery and Photography Direction
6. 6

   UI Components & Patterns

   5 topics

   • Buttons, Forms, and Inputs
   • Navigation Components
   • Cards, Lists, and Tables
   • Modals, Overlays, and Notifications
   • Empty, Loading, and Error States

Visual & UI Design flashcards for UI/UX Design

25 of 50 cards from the Visual & UI Design deck — real questions with worked answers.

1. What is the difference between symmetrical and asymmetrical balance in visual design?

   Symmetrical balance mirrors elements of equal visual weight on either side of a central axis, feeling formal and stable. Asymmetrical balance uses unequal elements (e.g., one large element offset by several small ones) to achieve equilibrium, feeling dynamic and modern while still appearing stable.

2. Define contrast in visual design and list four attributes that can create it.

   Contrast is the juxtaposition of visibly different elements to create distinction and interest. It can be created through differences in size, color (hue/value), shape, weight, texture, direction, or spacing.

3. What is emphasis in design, and name three techniques for creating a focal point?

   Emphasis is making one element the dominant point of attention. Techniques include: contrast (color, size, or weight), isolation (surrounding the element with white space), and placement (positioning it where the eye naturally lands, such as the top or center).

4. What is radial balance?

   Radial balance arranges elements outward from a common central point, like spokes of a wheel or ripples. It creates strong focus on the center and is common in circular dashboards, badges, and mandala-like compositions.

5. Define visual hierarchy and explain its purpose in UI design.

   Visual hierarchy is the deliberate arrangement of elements so users perceive them in order of importance. It guides the eye through content in the intended sequence using size, color, contrast, placement, and spacing, reducing cognitive load and enabling scanning.

6. How does scale function as a hierarchy tool, and what is the general rule about size and importance?

   Larger elements attract attention first and are perceived as more important; smaller elements recede. Designers exaggerate size differences between levels (e.g., headline vs body) because subtle differences fail to communicate clear hierarchy.

7. Compare the F-pattern and Z-pattern of eye scanning.

   F-pattern: on text-heavy pages, users scan horizontally across the top, again slightly lower, then vertically down the left edge. Z-pattern: on sparse, visual pages, the eye moves top-left to top-right, diagonally down to bottom-left, then across to bottom-right. Designers place key content and CTAs along these paths.

8. What is the alignment principle, and why is it important?

   Alignment means every element is visually connected to another via a shared edge or axis—nothing is placed arbitrarily. It creates invisible lines that produce order, unity, and a cleaner, more professional appearance, and makes layouts easier to scan.

9. State the Gestalt principle of proximity and its implication for UI layout.

   Elements placed close together are perceived as related or belonging to a group, while distant elements are perceived as separate. In UI, spacing alone can communicate grouping—related controls should sit closer to each other than to unrelated ones (space within groups < space between groups).

10. What is optical alignment and how does it differ from mathematical alignment?

    Optical alignment adjusts positioning so elements look aligned to the eye even if their bounding boxes are not mathematically aligned—e.g., nudging a triangular play icon slightly right in a circular button, or letting punctuation hang outside a text margin. It corrects for visual perception rather than trusting geometric measurements.

11. What is the repetition principle in design?

    Repetition means reusing visual elements—colors, fonts, shapes, spacing, icon styles—throughout a design. It creates unity, rhythm, and brand recognition, and teaches users patterns so the interface becomes predictable and learnable.

12. Distinguish internal consistency from external consistency in UI design.

    Internal consistency: the same patterns, components, and terminology behave identically across all screens of one product. External consistency: the product follows conventions from other products and platforms (e.g., OS guidelines), so users can transfer prior knowledge.

13. Name and define the three main structural parts of a layout grid.

    Columns: the vertical blocks that content aligns to. Gutters: the fixed spaces between columns that keep content from touching. Margins: the outer space between the grid and the edge of the page or screen.

14. Why is the 12-column grid the most common choice for web layouts?

    Because 12 is divisible by 2, 3, 4, and 6, it supports many even layout divisions (halves, thirds, quarters, sixths) without fractional columns, making it highly flexible for responsive design.

15. List and briefly define four common types of grid systems.

    Manuscript grid: a single large block for continuous text. Column grid: vertical columns for flowing multi-column content. Modular grid: columns plus rows creating cells/modules for complex layouts. Hierarchical grid: irregular, content-driven placement. (A baseline grid additionally aligns text to evenly spaced horizontal lines.)

16. What is the 8-point spacing system and why is 8 the chosen base unit?

    A system where all spacing, padding, and component dimensions are multiples of 8px (8, 16, 24, 32, ...). Eight is used because it divides evenly on common screen scale factors ($\times 1$, $\times 1.5$, $\times 2$, $\times 3$), avoiding half-pixel blur, and it constrains choices for consistency and faster decisions.

17. When and why is a 4-point half-step used within an 8-point system?

    4px increments are used for fine-grained needs—icon padding, spacing within small components, and typography (line heights, small gaps)—where full 8px steps are too coarse. It keeps values on a predictable sub-grid while preserving overall 8pt rhythm.

18. Give a typical spacing scale in an 8-point system and how the values relate.

    A common scale: 4, 8, 16, 24, 32, 40, 48, 64px. Each value is a multiple of the 8px base (with 4px as a half-step); smaller values separate related items, larger values separate distinct sections, reinforcing proximity-based grouping.

19. What is a breakpoint in responsive design, and what are typical breakpoint ranges?

    A breakpoint is a viewport width at which the layout changes to better fit the screen. Common ranges: mobile under ~600px, tablet ~600–1024px, desktop above ~1024px (e.g., Bootstrap uses 576, 768, 992, 1200px). Breakpoints should ideally be set where the content breaks, not only at device sizes.

20. Name and describe three canonical responsive layout patterns.

    Mostly Fluid: a multi-column grid that scales fluidly, stacking columns only at small sizes. Column Drop: columns stack vertically one by one as width shrinks. Layout Shifter: content blocks rearrange significantly at each breakpoint. (Also Off Canvas: secondary content hidden off-screen until toggled.)

21. 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\%$.

22. 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.

23. 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.

24. 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.

25. 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).

See more Visual & UI Design flashcards →

Planning Visual & UI Design for UI/UX Design

Visual & UI Design (UI/UX Design) FAQ