Visual Design Fundamentals - Free MCQ Practice Test with solutions, Web

Visual hierarchy is created through contrast and emphasis. The primary CTA needs maximum visual weight through size (larger draws attention), contrast (high contrast separates it from background), weight (bold reinforces importance), and spacing (isolation creates focus). Option A combines all four properties effectively. Option B does the opposite by minimizing all hierarchy-creating properties, making the button recede rather than stand out. Options C and D use moderate or equal treatments that fail to create sufficient differentiation for a primary action.

Negative space (whitespace) is essential for visual breathing room and content separation. Increasing margins between charts and adding internal padding creates clear boundaries, reduces cognitive load, and allows each visualization to be processed independently. This directly addresses the cluttered feeling. Option B eliminates the problem-solving element by removing space entirely. Option C fills space with patterns, which adds visual noise rather than clarity. Option D worsens the problem by compressing elements further, increasing the cluttered perception users complained about.

A split-complementary scheme uses the base color plus the two colors adjacent to its direct complement. Orange at 30 degrees has its complement at 210 degrees (directly opposite). The split-complementary colors are 30 degrees on either side of 210: one at 180 degrees (cyan-blue) and one at 240 degrees (violet-blue). Option D correctly identifies these hues. Option A gives 150 and 210, where 210 is the direct complement (not split). Option B gives analogous colors near orange, not complementary. Option C gives hues adjacent to orange itself, creating an analogous scheme instead.

Contrast ratio is calculated using relative luminance values. Light gray (200,200,200) has high luminance and dark gray (60,60,60) has low luminance, creating a ratio of approximately 7.2:1. WCAG AA requires 4.5:1 for normal text, so this passes comfortably. The combination provides strong readability. Option B incorrectly calculates the ratio—these specific RGB values do produce sufficient contrast. Option C wrongly suggests that gray values automatically meet standards regardless of their lightness difference. Option D is false; WCAG specifies ratios, not specific colors, and many combinations besides black-on-white meet requirements.

In a 12-column grid, there are 11 gutter spaces between 12 columns (gutters sit between columns, not outside). Total gutter width is 11 times 20 pixels equals 220 pixels. Subtract from container: 1200 minus 220 equals 980 pixels for columns. Divide by 12 columns: 980 divided by 12 equals approximately 81.67 pixels, which rounds to 80 pixels per column in practice. Option B is correct. Option A (100 pixels times 12 plus 220 equals 1420, too large). Option C (120 times 12 plus 220 equals 1660, far too large). Option D (90 times 12 plus 220 equals 1300, exceeding container width).

The proximity principle states that elements close together are perceived as related. Title and price are semantically related (both describe the product) so they should be grouped closely. The image represents the product visually and needs space to breathe. The button is an action, distinct from information, so it should be separated with space to stand out. Option A correctly applies this grouping logic. Option B ignores relationships by spacing everything equally, losing meaningful associations. Option C groups unrelated elements (image and button), breaking semantic logic. Option D clusters everything, providing no visual organization or hierarchy.

Optical alignment addresses the difference between mathematical centering and visual centering. Shapes like triangles, circles, or letters with visual weight distributed unevenly appear misaligned when mathematically centered because human perception judges alignment by visual mass, not geometry. Designers must manually adjust positions slightly to achieve perceived alignment. This is the core principle causing the observed issue. Option B describes a lens defect irrelevant to interface alignment. Option C addresses scaling but wouldn't cause consistent misalignment at set positions. Option D relates to text rendering quality, not general element alignment.

Typographic scales use ratios to determine size relationships. The golden ratio (1.618) creates the largest multiplier among common scales, producing the most dramatic jumps: if body text is 16 pixels, the next level is approximately 26 pixels, then 42, then 68—very distinct. This creates strong visual hierarchy. Option B uses 1.067, the smallest common ratio, creating minimal differentiation (16, 17, 18 pixels). Options C and D use moderate ratios (1.333 and 1.250) that create noticeable but less dramatic differences than the golden ratio. The question asks for maximum drama with harmony.

Tabular figures (also called lining figures) are monospaced numerals where each digit occupies the same width, allowing columns of numbers to align vertically. Right alignment ensures decimal points or unit positions line up, making comparison effortless—the eye can scan straight down to compare values. This combination optimizes scanability. Option B uses proportional figures where 1 is narrower than 8, breaking vertical alignment and making comparison difficult. Option C uses old-style figures with varying heights, which are designed for body text, not data tables. Option D adds unnecessary letter spacing and justified alignment makes no sense for numbers.},{

A tint is created by adding white to a color, which in HSB means increasing Brightness (making it lighter) and typically reducing Saturation (as white dilutes color intensity). Option A correctly increases Brightness to 85% and mentions reducing Saturation, creating a lighter, softer version appropriate for disabled states. Option B creates a shade (darker version) by decreasing Brightness, not a tint. Option C changes the Hue entirely, creating a different color rather than a tint. Option D increases Saturation, making the color more vivid rather than lighter, moving away from tint characteristics.

Vertical rhythm is maintained by aligning all vertical spacing to a baseline grid, typically defined by the line height. With a 27-pixel line height, all vertical spacing should be multiples of 27 to keep text baselines aligned: 27, 54, 81, etc. Using 27 pixels for paragraph margins (one line height) maintains the grid and creates consistent rhythm. Option A is correct. Option B (18 pixels) breaks the baseline grid established by 27-pixel line height. Option C (36 pixels) doesn't align with 27-pixel increments, breaking rhythm. Option D (45 pixels) similarly breaks the baseline grid rather than maintaining it.

Icon cohesion requires systematic consistency in formal properties: uniform stroke weight (all lines same thickness), consistent corner radius (sharp, rounded, or mixed but applied uniformly), grid alignment (all icons fit the same underlying structure), and matching detail level (all simple or all complex). This creates visual unity. Option A correctly identifies all key consistency factors. Option B deliberately introduces inconsistency through variation, breaking cohesion. Option C uses photorealism with individual treatments, creating a fragmented set rather than a unified system. Option D mixes styles based on function, which breaks visual consistency even if logically motivated.

Green for positive (growth, profit, gain) and red for negative (loss, decline, danger) is a deeply established convention across financial contexts globally. This pairing leverages learned cultural associations and provides immediate semantic meaning without requiring user education. Option A is universally understood. Option B (blue-orange) offers contrast but lacks the semantic meaning users expect in financial contexts. Option C (purple-yellow) provides differentiation but has no conventional association with positive/negative values. Option D (black-gray) offers insufficient contrast and no semantic signaling for rapid comprehension of value direction.

Labels above input fields create the strongest association between label and field, follow natural reading direction (top to bottom, left to right in Western contexts), and remain visible even when the field is filled. Consistent spacing and left alignment maintain scannability. This reduces cognitive effort. Option A is optimal. Option B (placeholder labels) disappear when typing begins, forcing users to remember what the field requires—increasing cognitive load. Option C (right-side labels) breaks reading flow and is harder to scan. Option D (tooltip labels) hides critical information, requiring extra interaction and increasing friction in form completion.

Apple's Human Interface Guidelines recommend minimum 44x44 point touch targets (equivalent to 44x44 pixels at 1x resolution), and Google's Material Design recommends 48x48 density-independent pixels—both approximately 7-10mm physical size, matching average fingertip width. 44x44 is the widely recognized baseline standard balancing usability and interface density. Option A is correct. Option B (32x32) falls below recommended minimums, increasing tap errors. Option C (24x24) is far too small for comfortable finger interaction. Option D (56x56) exceeds standards and is fine but the question asks for minimum recommended size, making 44x44 the standard answer.