The Brief
Take one screen from your current project. Overlay an 8px grid, mark three spacing violations, and fix them.
Starter Prompts
Starter Prompts
Open excalidraw.com and import a screenshot of your current app screen. Draw horizontal and vertical guide lines every 8px. Circle the top three spacing violations in red. Rewrite spacing to 8/16/24 values and annotate each fix directly on the canvas.
Rubric
Lab Checklist (0/5)
Example Output
Show Example Output
Annotated screenshot with red callouts on three violations and green notes showing corrected 8/16/24 spacing values.
Common Mistakes
Common Mistakes
- Adjusting random margins without identifying grouping issues.
- Compressing all gaps equally and flattening hierarchy.
- Fixing spacing without rechecking CTA visibility.
Principles Practiced
spacingalignmentproximity