These form the foundation of visual layout, used by every designer and frontend developer.
1. Visual Hierarchy
Discover powerful tools for growth
Explanation: Larger and bolder headings grab attention first. Supporting text is
smaller and subdued, and the button stands out as a clear call-to-action.
Supercharge Your Workflow
Organize, collaborate, and conquer your tasks
Explanation: This hero layout uses scale and spacing to guide the user's eyes. The
call-to-action buttons are prominent and styled for visibility.
2. Balance
📷 Product Image
Balance
Even with different content types, the layout feels stable and visually pleasing.
Explanation: The image and text are given equal space using a two-column layout,
creating symmetrical visual balance across the screen.
🚀
Fast Launch
Get up and running in seconds.
🔒
Secure
Your data stays safe with us.
Explanation: Visual balance is maintained by using matching icon styles, text
alignment, and equal spacing between blocks.
3. Contrast
Explanation: Strong background and text color contrast makes the button stand out
and
improves accessibility in both light and dark modes.
Bold Move
Using background contrast to separate cards from the page.
Explanation: This card uses shadows and contrasting backgrounds to visually elevate
and
isolate it from the surrounding content. Combined with padding and shadow, it maintains clear visual
separation.
4. Alignment
Explanation:
A left-aligned label placed directly above the input field provides a clear, natural reading path. This
vertical alignment supports fast form scanning and consistency across inputs.
Explanation:
This form uses a 4-column grid to align labels and inputs horizontally. This alignment improves visual
rhythm and ensures the input fields are consistently spaced, making the form easier to scan and
complete.
5. Proximity
Username is required
No spam, unsubscribe anytime.
Explanation:
Each input example groups related elements (label, field, helper/error text, button) closely together to form a clear visual and functional unit, reducing user effort and cognitive load.
No spam, unsubscribe anytime.
Explanation: Input field and CTA button are grouped in one line to show their
functional relationship.
6. Repetition / Consistency
Explanation: Buttons use the same style and color theme, reinforcing familiarity
and usability across the interface.
Explanation: These repeated buttons follow the same shape, padding, and color
scheme, reinforcing a consistent design language.
7. White Space
Minimalist Design
Less is more. Use space to guide focus and avoid clutter.
Explanation: Padding and spacing around the elements help declutter the design and
improve focus on content.
“This tool changed the way we work!”
— Alex from DevCo
Explanation: Adequate space between text blocks makes this testimonial more readable
and aesthetically pleasing.
8. Scale & Proportion
Start exploring our platform now
Explanation: Larger text size for the heading and smaller size for the body shows
how
scale directs user attention effectively.
Featured Plan
Scale helps users identify what's most important, while proportion ensures elements relate harmoniously
in size.
Basic
$9/mo
✔ 1 project
✔ Email support
Pro
$29/mo
✔ Unlimited projects
✔ Priority support
✔ Access to beta features
Enterprise
Custom
✔ Dedicated support
✔ Custom integration
Explanation:
The "Pro" plan uses larger text, padding, and scaling to visually emphasize its importance. This
demonstrates how adjusting scale and proportion can guide user attention and influence decision-making.
9. Typography Matters
Subheading
Clean typography improves readability and builds trust.
Explanation: Different font weights and sizes define a clear visual hierarchy,
making
content easier to digest.
How We Work
Clear, Concise, and Structured
Every font size and weight carries
visual meaning. It improves readability and user comprehension.
Explanation: Typography creates structure in the content. Headings, subheadings, and
body text all follow a consistent typographic scale.
10. Color Theory
✔️ Success:
Your form has been submitted.
❌ Error: Please enter
a valid email.
Explanation: Each color communicates a message: green for success, red for error,
and
blue for primary actions. This leverages emotional color psychology.
⚠️
Warning: This will overwrite your changes.
ℹ️ Info: Updates
happen every hour.
📘 Tip:
You can undo from history.
Explanation: Semantic colors help users instantly recognize the intent of each
message
(warning, info, tips) using consistent palette and visual tone.