Practice - Section B: Visual Design Fundamentals Applied
Practice Questions
Test your understanding with targeted questions
Name one of the two key reading patterns that designers use to align content for Western users.
* Answer: Z-Pattern (or F-Pattern).
* Hint: These patterns describe how the user's eye naturally scans a page, resembling letters.
💡 Hint: These patterns describe how the user's eye naturally scans a page, resembling letters.
What is the minimum contrast ratio required for normal text to meet accessibility standards?
* Answer: 4.5:1.
* Hint: This is the WCAG standard for text legibility.
💡 Hint: This is the WCAG standard for text legibility.
9 more questions available
Interactive Quizzes
Quick quizzes to reinforce your learning
What is the gradient ($m$) in a linear relationship primarily used to describe?
* Type: mcq
* Options: The y-intercept, The total value, The rate of change, The point of origin.
* Correct Answer: The rate of change
* Explanation: The gradient defines the steepness and direction of the line, which is the definition of the rate of change of y with respect to x.
* Hint: Think about speed or cost per unit.
💡 Hint: Think about speed or cost per unit.
True or False: You should use different font families for H1 and Body Text to create hierarchy.
* Type: boolean
* Options: True, False
* Correct Answer: False
* Explanation: The best practice tip is to limit font families to two and use weights and sizes to create hierarchy. Using too many families reduces consistency.
* Hint: Avoid introducing excessive typefaces; rely on size/weight instead.
💡 Hint: Avoid introducing excessive typefaces; rely on size/weight instead.
3 more questions available
Challenge Problems
Push your limits with advanced challenges
Application Synthesis: You are preparing a Case Study Portfolio section that analyzes the color and typography of a successful competitor website.
* Task: Identify how you would use HSL (Hue, Saturation, Lightness) to analyze the competitor's Feedback Color palette, and explain how this analysis could inform your decision regarding your own design's Accessibility Check.
* Solution: You would use HSL to deconstruct the competitor's Success, Warning, and Error colors. By analyzing their Lightness (L) values, you can determine if they rely on very dark or very light shades. This analysis directly informs your own design's Accessibility Check by showing which Lightness values (L) work best with your chosen neutral background color to ensure a minimum 4.5:1 Contrast Ratio. If the competitor's error color (red) has low lightness, you know to use a lighter, more saturated shade of red on a light background (or vice-versa) to pass the check.
* Hint: HSL breaks down color into measurable components. What component affects contrast the most?
💡 Hint: HSL breaks down color into measurable components. What component affects contrast the most?
Critique & Revision (Layout): An interface design has a landing page where the text (Merriweather 16px) is placed 8px away from the main image border, and the main call-to-action (CTA) button is placed far down the page after three paragraphs of explanatory text.
* Task: Critique the design based on two distinct guidelines from the Layout section (Whitespace and Reading Patterns). Propose a specific, focused revision for each critique point.
* Solution:
* Critique 1 (Whitespace): The text is only 8px from the image border, which violates the minimum 16px margin guideline. Revision: Increase the negative space between the text and the image to 24px to reduce visual tension and enhance clarity.
* Critique 2 (Reading Patterns/Flow): Placing the main CTA after three paragraphs of text violates the Z-Pattern flow (optimal for landing pages), which suggests the CTA should be placed prominently on the top line of the pattern (the right side of the hero section). Revision: Move the CTA button up to appear immediately after the main headline (the first point of the Z-Pattern) to improve conversion and communication flow.
* Hint: Address the spatial issues (gaps/margins) and the flow issues (where the user looks first).
💡 Hint: Address the spatial issues (gaps/margins) and the flow issues (where the user looks first).
Get performance evaluation