Icon Design Icon Design Principles & Visual Theory 2 — Questions and Answers
Question 1: What is a 'pixel grid' in icon design used for?
- Choosing brand colors
- Ensuring icon edges align to pixel boundaries for sharpness (Correct answer)
- Generating icon variations automatically
- Measuring export file size
Correct answer: Ensuring icon edges align to pixel boundaries for sharpness
Aligning vector paths to the pixel grid prevents anti-aliasing blur, keeping icon edges crisp at intended render sizes.
Question 2: Which principle describes using the same stroke weight, corner radius, and style across all icons in a set?
- Visual hierarchy
- Consistency (Correct answer)
- Contrast
- Emphasis
Correct answer: Consistency
Consistency ensures all icons in a set look like they belong together, reinforcing the overall design language.
Question 3: In vector icon design, what does 'compound path' mean?
- A path with gradient fill
- Multiple paths combined into one object, creating holes or unions (Correct answer)
- A path exported as a bitmap
- A path with an animated stroke
Correct answer: Multiple paths combined into one object, creating holes or unions
A compound path merges multiple sub-paths so that overlapping areas can create transparent 'holes' or unified shapes.
Question 4: What is the recommended minimum touch target size for icons used in mobile UI, per common usability guidelines?
- 24×24 px
- 32×32 px
- 44×44 px (Correct answer)
- 64×64 px
Correct answer: 44×44 px
Apple's HIG and Google's Material Design both recommend at least 44×44 pt/dp touch targets to ensure comfortable tapping.
Question 5: Which color theory concept helps icon designers ensure sufficient contrast between an icon and its background?
- Analogous color scheme
- Luminance contrast ratio (Correct answer)
- Split-complementary palette
- Monochromatic tinting
Correct answer: Luminance contrast ratio
Luminance contrast ratio (measured per WCAG) determines whether the icon is distinguishable from its background in terms of lightness difference.
Question 6: What does 'optical alignment' mean when positioning elements within an icon bounding box?
- Using automatic snap-to-grid tools only
- Adjusting element positions so they look centered even if they aren't mathematically centered (Correct answer)
- Exporting all icons at the same pixel size
- Applying equal padding on all sides of the artboard
Correct answer: Adjusting element positions so they look centered even if they aren't mathematically centered
Optical alignment compensates for visual weight differences so icons appear balanced to the human eye, even if coordinates are not perfectly centered.
Icon Design Icon Design Principles & Visual Theory 2
What is a 'pixel grid' in icon design used for?