Icon Design Graphics Icon 2 — Questions and Answers
Question 1: What is the recommended minimum touch target size for icons used in mobile interfaces according to Apple's Human Interface Guidelines?
- 32x32 points
- 44x44 points (Correct answer)
- 64x64 points
- 24x24 points
Correct answer: 44x44 points
Apple's HIG recommends a minimum touch target of 44x44 points to ensure usability on touchscreens.
Question 2: Which file format supports both scalable vector graphics and embedded raster images, making it versatile for icon delivery?
- PNG
- JPEG
- SVG (Correct answer)
- GIF
Correct answer: SVG
SVG is an XML-based vector format that natively supports scalable shapes and can embed raster images when needed.
Question 3: In icon design, what does 'optical sizing' refer to?
- Changing the DPI of an exported icon
- Adjusting an icon's visual weight or detail for different display sizes (Correct answer)
- Setting the color profile to match the display
- Scaling icons using CSS transforms
Correct answer: Adjusting an icon's visual weight or detail for different display sizes
Optical sizing means redesigning or adjusting an icon's stroke weight, detail, and proportions so it looks correct at each specific size.
Question 4: What is the purpose of a 'safe zone' or 'live area' in an icon grid?
- To define where gradients can be applied
- To mark the region where critical artwork should be placed to avoid clipping (Correct answer)
- To indicate which pixels are transparent
- To separate icon categories in a sprite sheet
Correct answer: To mark the region where critical artwork should be placed to avoid clipping
The safe zone defines the inner boundary where meaningful artwork should stay to ensure nothing is cut off across different platforms.
Question 5: Which principle is MOST important when designing a set of icons that will be used together in a UI?
- Each icon should use a unique style for visual variety
- All icons should maintain consistent stroke width, corner radius, and visual weight (Correct answer)
- Icons should vary in size to create hierarchy
- Each icon should have a different number of colors
Correct answer: All icons should maintain consistent stroke width, corner radius, and visual weight
Consistency in stroke weight, corner radius, and visual weight makes icon sets feel cohesive and professional.
Question 6: What does 'pixel hinting' accomplish in icon design?
- Adds color hints to indicate interactivity
- Snaps vector paths to the pixel grid to prevent blurry rendering at small sizes (Correct answer)
- Embeds metadata about the icon's intended use
- Converts SVG paths to raster format
Correct answer: Snaps vector paths to the pixel grid to prevent blurry rendering at small sizes
Pixel hinting aligns vector anchor points to the pixel grid so edges render sharply without anti-aliasing blur.
Question 7: When designing monochrome icons for a design system, what is the primary advantage of using a single-color fill?
- It reduces file size significantly compared to SVG
- It allows the icon color to be easily controlled via CSS or design tokens (Correct answer)
- It improves rendering speed on low-end devices
- It automatically adjusts contrast for accessibility
Correct answer: It allows the icon color to be easily controlled via CSS or design tokens
Single-color icons inherit or accept a color value from their parent context, making theming and dark-mode adaptation trivial.
Icon Design Graphics Icon 2
What is the recommended minimum touch target size for icons used in mobile interfaces according to Apple's Human Interface Guidelines?