first commit

sn-infographic/references/layouts/z-pattern.md

@@ -0,0 +1,38 @@
+# z-pattern
+
+Eye movement follows a Z path: top-left → top-right → bottom-left → bottom-right.
+
+## Structure
+
+- Key elements placed at the four corners of the Z path
+- Top horizontal: title and primary hook
+- Diagonal: supporting visual or transition element
+- Bottom horizontal: CTA or conclusion
+- Leverages natural Western reading eye movement
+
+## Best For
+
+- Landing page style infographics
+- Marketing and promotional content
+- Content with a clear call to action
+- Two-column layouts with diagonal flow
+
+## Visual Elements
+
+- Strong anchor elements at Z corners
+- Diagonal visual element (image, arrow, or line) connecting mid-points
+- Clear visual hierarchy along the Z path
+- Negative space guiding the eye
+
+## Text Placement
+
+- Headline at top-left
+- Supporting info at top-right
+- Key visual or transition at center diagonal
+- CTA or summary at bottom-right
+
+## Recommended Pairings
+
+- `corporate-memphis`: Marketing layouts
+- `high-contrast-ad`: High-impact promotional designs
+- `ui-wireframe`: Landing page wireframes