Visual Design Principles & Visual Hierarchy: Contrast, Alignment, Color, Typography & Layout

Core Concepts: What is Visual Design and Visual Hierarchy?

Visual design in UI/UX refers to the aesthetic and functional arrangement of elements (colors, shapes, text, spacing) to guide user attention and improve usability. It is governed by principles (contrast, alignment, proximity, etc.) and laws (Gestalt principles) that dictate how users perceive and interact with interfaces.

Visual hierarchy is the order in which users perceive information based on design choices. A well-designed hierarchy ensures users see what matters first (e.g., a "Buy Now" button over a "Learn More" link).

1. The 6 Key Visual Design Principles

These principles are the building blocks of visual hierarchy. Mastering them helps create interfaces that are intuitive, scannable, and engaging.

A. Contrast: The Power of Difference

Contrast makes elements stand out by creating visual differences in color, size, or weight. It is the most critical principle for guiding attention.

How it works:

• Color contrast (e.g., red button on white background).
• Size contrast (e.g., a large headline vs. small text).
• Weight contrast (e.g., bold vs. light typography).

Example in Real Life:

• eSewa’s payment page uses high contrast for the "Pay Now" button (bright green on white) to ensure users don’t miss it.
• Khalti’s checkout flow uses size contrast to highlight the total amount due.

Worked Example: Daraz’s Product Page

graph TD
    A["Product Image (Largest, Centered)"] --> B["Product Title (Bold, Large, Dark Gray)"]
    B --> C["Price (Red, Larger than Description, Bold)"]
    C --> D["Add to Cart Button (Bright Green, Rounded Corners, Largest Clickable Area)"]
    C --> E["Description (Smaller, Gray Text, Below Price)"]
    E --> F["Reviews & Ratings (Smaller, Gray, Bottom-Right)"]
    F --> G["Related Products (Smaller, Gray, Bottom Section)"]

Daraz’s product page layout with contrast (color, size) and visual hierarchy (button prominence, price emphasis). Why it works:

• The image is the largest element (draws attention first).
• The price is in red and larger than the description (contrast).
• The "Add to Cart" button is bright and prominent (highest contrast).

Common Mistake: Using low contrast (e.g., light gray text on white background) makes text hard to read, especially for users with visual impairments.

B. Alignment: Order and Structure

Alignment creates visual connections between elements, making interfaces feel organized and professional.

Types of Alignment:

Example in Real Life:

• Ncell’s mobile app aligns all buttons to the left or right for consistency.
• Pathao’s ride request screen centers the "Request Ride" button to draw focus.

Worked Example: NTC’s Website

Why it works:

• Consistency in alignment reduces cognitive load.
• Centered elements (like CTAs) grab attention.

C. Proximity: Grouping Related Elements

Proximity groups elements close together to imply they are related, reducing clutter and improving scannability.

Example in Real Life:

• Khalti’s transaction history groups date, amount, and description in a single row.
• eSewa’s service selection places related services (e.g., "Electricity Bill," "Water Bill") near each other.

Worked Example: Bank Loan Calculator

graph TD
    A["Loan Amount Input (Largest Field, Bold Label)"] --> B["Interest Rate Input (Medium Field, Centered)"]
    B --> C["Tenure Dropdown (Smaller, Right-Aligned)"]
    C --> D["Calculate Button (Bright Blue, Rounded, Largest Clickable Area)"]
    D --> E["Result: EMI Amount (Largest Text, Green Highlight)"]
    E --> F["Reset Button (Gray, Smaller, Bottom-Right)"]

Bank loan calculator form with proximity (grouped inputs) and size contrast (result emphasis). Why it works:

• All input fields are grouped together before the result.
• Users instantly understand they must fill all three before calculating.

Common Mistake: Placing unrelated elements too close (e.g., a login form next to a newsletter signup) confuses users.

D. Size: Hierarchy Through Scale

Larger elements dominate attention, while smaller ones recede. This is crucial for visual hierarchy.

Example in Real Life:

• YouTube’s homepage makes the trending videos larger than suggested content.
• Daraz’s search bar is the largest element on the page.

Worked Example: WhatsApp Chat Screen

Why it works:

• Messages are the main focus (largest).
• Media (images/videos) are even larger to stand out.
• Sender names are smaller (secondary info).

E. Color: Emotion and Attention

Color evokes emotions and directs attention. Warm colors (red, orange) grab attention, while cool colors (blue, green) feel calming.

Psychology of Colors in UI:

Example in Real Life:

• eSewa uses green for "Pay" buttons to signal success and action.
• Ncell uses blue for trust (e.g., "Secure Login").

Worked Example: Kathmandu Traffic Routes (Metaphor for UI)

Why it works:

• Red = Stop (highest priority).
• Green = Go (encourages action).
• Gray = Background info (lowest priority).

F. Typography: The Language of Design

Typography includes font choice, size, weight, and spacing. Poor typography makes interfaces hard to read.

Key Typography Principles:

1. Font Pairing: Combine a display font (headlines) with a body font (text).
   • Example: Montserrat (headlines) + Open Sans (body).
2. Hierarchy with Size:
   • H1 > H2 > H3 > Body Text.
3. Line Height (Leading): Too tight = hard to read; too loose = wasted space.
4. Letter Spacing (Tracking): Adjust for readability (e.g., all-caps text needs more spacing).

Example in Real Life:

• Google’s homepage uses simple, clean typography (Roboto) for readability.
• Pathao’s app uses bold headlines for ride details and light text for secondary info.

Worked Example: NEPSE Stock Dashboard

Why it works:

• Stock names are bold (easily scannable).
• Prices are larger (most important info).
• Volume is smaller (secondary data).

2. Visual Hierarchy in Action: How Principles Work Together

Visual hierarchy is not just one principle—it’s the combination of contrast, alignment, size, color, and typography working in harmony.

Example: eSewa Payment Flow

graph TD
    A["Hero Section: 'Pay Your Bill' (Large Text, Blue Background, High Contrast)"] --> B["Service Dropdown (Centered, High Contrast Icon + Text)"]
    B --> C["Amount Input (Largest Field, Red Border if Empty, Bold Label)"]
    C --> D["Pay Now Button (Bright Green, Rounded, Largest Clickable Area)"]
    D --> E["Confirmation Screen (Green Checkmark, Success Message, Largest Text)"]
    E --> F["Transaction History Link (Small, Gray, Bottom-Right)"]

eSewa payment flow demonstrating visual hierarchy through contrast (color, size), alignment (centered elements), and proximity (grouped actions). Breakdown:

1. Hero section uses large text + blue background (color + size).
2. Dropdown is centered (alignment) and high contrast (black text on white).
3. Amount field has red border (contrast for errors).
4. "Pay Now" button is green and large (color + size for action).
5. Confirmation screen uses green checkmark (success signal).

3. Common Pitfalls and How to Avoid Them

## In the Real World

1. eSewa’s Payment Button

   • Principle Used: Contrast + Size
   • How? The "Pay Now" button is bright green, larger, and rounded to stand out against white. Users instantly see it without scanning.

2. Pathao’s Ride Request Screen

   • Principle Used: Alignment + Proximity
   • How? All ride options are left-aligned, and pickup/drop locations are grouped together. Users don’t waste time searching.

3. Daraz’s Product Page

   • Principle Used: Visual Hierarchy (Size + Color)
   • How? The price is red and larger than the description. The "Add to Cart" button is bright orange—users click it first.

4. Ncell’s App Notifications

   • Principle Used: Color Psychology
   • How? Red = urgent alerts (e.g., low balance), blue = informational (e.g., new offers). Users associate colors with actions.

5. Khalti’s Transaction History

   • Principle Used: Proximity + Typography
   • How? Each transaction is a single row (date, amount, description). Bold amounts make it scannable.

## Exam Tip: How to Score Full Marks

1. Define Clearly

   • Always start with definitions (e.g., "Visual hierarchy is the arrangement of elements to guide user attention based on contrast, size, and color.").

2. Use Real-World Examples

   • Examiners love eSewa, Khalti, Daraz, or Pathao examples. Relate principles to specific UI elements (e.g., "The red 'Pay Now' button in eSewa uses contrast to ensure users don’t miss it.").

3. Compare Principles in Tables

   • For questions like "Explain how contrast and alignment work together," use a comparison table (as shown above).

4. Draw Diagrams (Mermaid or Sketches)

   • If allowed, sketch a simple UI flow (like the eSewa example) to show hierarchy.

5. Discuss Consequences of Poor Design

   • Example: "If Daraz’s product page had low contrast between the price and description, users might overlook the price and abandon the cart."

6. Link to Usability

   • Always tie visual design to user experience. Example:

     "Proper visual hierarchy reduces cognitive load, helping elderly users navigate eSewa without frustration."

## Practice Questions (Exam-Style)

1. Analyze how contrast and typography create visual hierarchy in WhatsApp’s chat interface.

   • Answer Structure:
     • Define contrast and typography.
     • Show a labelled diagram of WhatsApp’s chat.
     • Explain how message size > sender name size and bold media previews guide attention.
     • Conclude with usability impact (e.g., "This ensures users focus on conversations, not metadata.").

2. Compare how eSewa and Khalti use color to guide user actions.

   • Answer Structure:
     • Table comparing eSewa (green for "Pay") vs. Khalti (blue for trust).
     • Discuss psychological impact (green = action, blue = trust).
     • Mention consistency across both apps.

3. Explain why poor alignment in a bank’s loan calculator would confuse users.

   • Answer Structure:
     • Show a bad example (misaligned fields).
     • Discuss proximity breakdown (users may miss required fields).
     • Suggest fix (left-aligned inputs, grouped logically).

## Summary Checklist

Before the exam, ensure you can: ✅ Define visual design principles and visual hierarchy. ✅ Explain contrast, alignment, proximity, size, color, and typography with real examples. ✅ Draw a simple UI flow (like eSewa’s payment page) to show hierarchy. ✅ Discuss how poor design affects usability (e.g., low contrast = abandoned carts). ✅ Compare at least two apps (e.g., Pathao vs. Daraz) using visual principles.

Final Note: Visual design is not just about making things look pretty—it’s about guiding users effortlessly. Master these principles, and you’ll design interfaces that work for real people, not just algorithms. 🚀