UI/UX Design Principles Interview
Questions & Answers
1. What are the fundamental Design Principles?
"The fundamental design principles are the foundation of good visual design. They guide how
we arrange and organize elements to create effective, aesthetically pleasing interfaces:
Core principles:
• Balance: Distribution of visual weight
• Contrast: Difference between elements to create emphasis
• Emphasis: Making important elements stand out
• Proportion: Size relationships between elements
• Hierarchy: Organizing content by importance
• Repetition: Consistent patterns throughout design
• Rhythm: Creating movement and flow
• Unity: All parts working together cohesively
• White Space: Empty space that gives design breathing room
These principles work together to create designs that are functional, beautiful and
user-friendly. Understanding and applying them is essential for any UI/UX designer."
2. What is Visual Hierarchy and why is it important?
"Visual hierarchy is the arrangement of elements to show their order of importance. It guides
users through content in a logical sequence, from most to least important.
How to create hierarchy:
• Size: Larger elements appear more important
• Color: Bright or contrasting colors draw attention
• Position: Top-left items are seen first in Western cultures
• Spacing: More space around an element increases prominence
• Typography: Bold, larger fonts for headings
• Contrast: Different from surrounding elements
Why it matters:
• Helps users scan content quickly
• Guides attention to important information
• Improves comprehension and usability
• Reduces cognitive load
• Supports conversion goals
Example: On a landing page, the headline is largest (primary), subheading is medium
(secondary), body text is smaller (tertiary), and CTA button uses contrasting color to stand
out."
3. What is Balance in design?
"Balance refers to the distribution of visual weight in a design. It creates stability and structure,
making designs feel comfortable and organized.
Types of balance:
1. Symmetrical balance:
• Elements are mirrored on both sides of a central axis
• Creates formal, stable, traditional feel
• Example: Centered layouts, corporate websites
• Easy to achieve but can feel static
2. Asymmetrical balance:
• Unequal elements balanced through contrast, color, or position
• Creates dynamic, modern, interesting feel
• Example: Large image on left, text blocks on right
• More challenging but visually interesting
3. Radial balance:
• Elements radiate from a central point
• Creates focus and movement
• Example: Circular menus, loading spinners
Visual weight depends on size, color, texture, position and complexity. A small dark element
can balance a large light element. Good balance makes designs feel complete and
organized."
4. What is Contrast and how do you use it effectively?
"Contrast is the difference between design elements. It creates visual interest, establishes
hierarchy and guides attention.
Types of contrast:
• Color contrast: Light vs dark, complementary colors
• Size contrast: Large headlines vs small body text
• Shape contrast: Curved vs angular elements
• Texture contrast: Smooth vs rough surfaces
• Typography contrast: Bold vs regular, serif vs sans-serif
• Space contrast: Dense vs sparse areas
How to use contrast effectively:
• Make primary actions stand out with high contrast
• Use contrast to guide users through the interface
• Ensure sufficient contrast for accessibility (4.5:1 minimum)
• Avoid too much contrast which creates visual chaos
• Use contrast consistently across similar elements
Example: A bright blue CTA button on a white background has strong color contrast, making
it immediately noticeable. Meanwhile, secondary buttons use lower contrast gray to show
lower priority.
Good contrast makes interfaces easier to use and more visually appealing."
5. What are Gestalt Principles?
"Gestalt principles describe how humans perceive and organize visual information. They
explain how we naturally group elements and see patterns.
Key Gestalt principles:
1. Proximity: Elements close together are perceived as related
• Use in UI: Group related form fields, menu items
2. Similarity: Similar elements are perceived as belonging together
• Use in UI: Same color buttons for similar actions
3. Closure: We mentally complete incomplete shapes
• Use in UI: Progress indicators, loading animations
4. Continuity: We follow lines and curves naturally
• Use in UI: Navigation paths, user flows
5. Figure-Ground: We distinguish objects from backgrounds
• Use in UI: Modals standing out from dimmed backgrounds
6. Common Region: Elements within boundaries are grouped
• Use in UI: Cards, panels, containers
7. Common Fate: Elements moving together are related
• Use in UI: Animated groups, carousel items
Understanding Gestalt principles helps designers create intuitive interfaces that align with
natural human perception."
6. What is the Principle of Proximity?
"The principle of proximity states that objects placed close together are perceived as being
related, while objects spaced apart are perceived as separate groups.
How it works:
Our brains automatically group nearby items and assume they share meaning or purpose.
This happens without conscious thought.
Application in UI design:
• Form design: Label close to its input field (8px) vs space to next field (24px)
• Navigation: Related menu items grouped together with spacing between groups
• Cards: Content within a card closely spaced, large gaps between cards
• Product listings: Image, title, price grouped tightly as one product
• Settings: Related settings grouped in sections with clear spacing
Common mistake: Equal spacing everywhere makes relationships unclear. Users cannot tell
what belongs together.
Best practice: Use tight spacing (8-16px) for related elements and generous spacing
(32-48px) between different groups. This creates clear visual groupings without needing
borders or backgrounds."
7. What is the Principle of Similarity?
"The principle of similarity states that elements that look similar are perceived as being related
or having the same function.
Types of similarity:
• Color similarity: All primary buttons blue
• Shape similarity: All icons circular
• Size similarity: All H2 headings same size
• Style similarity: All error messages in red italic
Application in UI design:
• Buttons: Primary actions same color and style
• Links: All links underlined and blue
• Status indicators: Success always green, errors always red
• Icons: Consistent style (outline vs filled) throughout app
• Headings: Same level headings identical in size and weight
Why it matters:
• Helps users learn the interface quickly
• Reduces cognitive load
• Makes interfaces predictable
• Improves usability
Example: All destructive actions (delete, remove, cancel) use red color. Users learn to
associate red with caution, making the interface more intuitive."
8. What is the Principle of Continuity?
"The principle of continuity states that our eyes naturally follow lines, curves and paths. We
perceive continuous forms rather than separate segments.
How it works:
When elements are arranged in a line or curve, we see them as a continuous flow rather than
individual items. Our eyes follow the path created.
Application in UI design:
• Navigation: Horizontal menu items create a continuous line
• Forms: Vertical alignment guides eye down the form
• Timelines: Events connected by a line showing progression
• Progress indicators: Steps connected to show journey
• Image carousels: Items in a row suggesting more content
• Breadcrumbs: Path showing navigation hierarchy
Best practices:
• Align related elements along common axes
• Use lines to connect related information
• Create clear reading paths (F-pattern, Z-pattern)
• Avoid breaking continuity with unrelated elements
Example: A checkout process with steps 1-2-3-4 connected by a horizontal line. Users
understand the sequence and their current position in the flow."
9. What is the Principle of Figure-Ground?
"The principle of figure-ground describes our ability to distinguish an object (figure) from its
background (ground). Our brains automatically separate visual elements into foreground and
background.
How it works:
We perceive some elements as standing in front (figure) and others as receding behind
(ground). This creates depth and focus.
Application in UI design:
• Modals: Dialog box (figure) on dimmed background (ground)
• Cards: White cards (figure) on gray background (ground)
• Buttons: Colored button (figure) on neutral surface (ground)
• Dropdowns: Menu (figure) floating over page content (ground)
• Hero sections: Content (figure) over background image (ground)
Creating clear figure-ground:
• Use contrast (color, value, texture)
• Add shadows to create depth
• Use clear boundaries or backgrounds
• Ensure figure is always distinguishable
Poor figure-ground: Low contrast text on busy background images. Users struggle to read
content because figure and ground compete.
Good figure-ground: Modal with strong shadow on semi-transparent overlay. Clear
separation makes the modal the obvious focus."
10. What is the Principle of Closure?
"The principle of closure states that humans tend to perceive complete shapes even when
information is incomplete. Our brains fill in missing parts to see whole objects.
How it works:
When we see shapes with gaps or missing pieces, our minds automatically complete the
pattern. We see the intended whole rather than individual parts.
Application in UI design:
• Loading indicators: Partial circles that suggest complete rotation
• Progress bars: Incomplete bars suggesting full completion
• Icons: Simple line drawings that suggest full objects
• Logos: Minimal designs that imply complete shapes
• Hamburger menus: Three lines suggesting a menu
• Pagination: Dots indicating total pages even if not all shown
Benefits:
• Reduces visual clutter
• Creates elegant, minimal designs
• Engages users mentally
• Requires less screen space
Example: A circular progress indicator showing only 70% of the circle. Users mentally
complete the circle and understand 30% remains. No need to draw the complete circle."
11. What is the Principle of Common Region?
"The principle of common region states that elements within a defined boundary are perceived
as being grouped together, regardless of spacing or similarity.
How it works:
When items are contained within a visible or implied boundary (box, background, border), we
automatically group them together even if they are different.
Application in UI design:
• Cards: Content grouped within card boundaries
• Panels: Dashboard widgets in separate containers
• Form sections: Groups of fields within bordered areas
• Navigation: Menu items within a header or sidebar
• Tables: Rows creating regions for related data
• Tooltips: Information contained in popup boxes
Creating regions:
• Explicit boundaries: Borders, boxes, backgrounds
• Implicit boundaries: Background color changes, shadows
• Spacing boundaries: Generous space around groups
Why it is powerful:
Common region overrides proximity and similarity. Even widely spaced or different-looking
elements are grouped if they share a region.
Example: A card containing an image, heading, description and button. Even though these
elements are different, the card boundary makes it clear they all relate to one item."
12. What is Emphasis (Focal Point)?
"Emphasis is the principle of making certain elements stand out as more important than
others. It creates a focal point that captures user attention first.
How to create emphasis:
• Contrast: Different color, size, or style from surroundings
• Isolation: Surrounded by white space
• Position: Center or top of layout
• Size: Significantly larger than other elements
• Color: Bright or contrasting colors
• Movement: Animation or interaction
• Directionality: Arrows or elements pointing to it
Application in UI:
• Primary CTA: Large, bright button as focal point
• Hero sections: Main headline emphasized with size and position
• Error messages: Red color and icons draw attention
• New features: Badges or highlights to draw notice
• Sale prices: Large, bold, colored differently
Important principle: If everything is emphasized, nothing is. Use emphasis sparingly.
Typically one primary focal point per screen or section.
Example: On a pricing page, the recommended plan has a colored background, "Popular"
badge, and larger size — creating clear emphasis among the options."
13. What is Repetition (Consistency)?
"Repetition is the principle of repeating visual elements throughout a design to create
consistency, unity and rhythm.
What to repeat:
• Colors: Same color palette throughout
• Typography: Consistent font usage for similar elements
• Spacing: Same padding and margins for components
• Button styles: Identical treatment for similar actions
• Icons: Same style (outline, filled, flat) everywhere
• Imagery: Consistent photography or illustration style
• Layout patterns: Similar page structures
Benefits of repetition:
• Creates professional, polished appearance
• Improves learnability (users learn once, apply everywhere)
• Strengthens brand identity
• Reduces cognitive load
• Makes interfaces predictable and comfortable
Balance needed:
Too much repetition becomes monotonous. Use variation strategically to create interest while
maintaining overall consistency.
Example: All cards in an app have the same padding, border radius, shadow and layout.
Users immediately recognize cards and know how to interact with them throughout the entire
product."
14. What is Proportion (Scale)?
"Proportion refers to the relative size and scale of elements compared to each other. It creates
visual interest and helps establish hierarchy.
Types of proportion:
1. Mathematical proportion:
• Using ratios like Golden Ratio (1.618:1)
• Type scales (1.25, 1.5, 2.0 multipliers)
• 8-point grid system
2. Visual proportion:
• How elements look in relation to each other
• Adjusting based on visual weight
• Optical alignment over mathematical
Application in UI:
• Typography: H1 should be noticeably larger than H2, which is larger than body
• Buttons: Primary larger than secondary
• Images: Hero images larger than thumbnail images
• Icons: Consistent size within context
• Spacing: Larger spaces between major sections, smaller between related items
Poor proportion examples:
• H1 only slightly larger than H2 (no clear hierarchy)
• Buttons that are too large (overwhelming)
• Icons inconsistent sizes (unprofessional)
Good proportion creates harmony and guides users naturally through the interface."
15. What is Rhythm in design?
"Rhythm is the pattern of repetition and variation that creates movement and flow through a
design. It guides the eye and creates visual interest.
Types of rhythm:
1. Regular rhythm:
• Repeating elements at equal intervals
• Example: Grid of equally sized product cards
• Creates predictability and order
2. Flowing rhythm:
• Organic, curved repetitions
• Example: Wave patterns, natural scrolling motion
• Creates smooth, organic feeling
3. Progressive rhythm:
• Elements change gradually
• Example: Buttons getting progressively smaller
• Creates sense of movement or depth
4. Random rhythm:
• Irregular repetitions
• Example: Masonry grid with varying heights
• Creates dynamic, energetic feeling
Application in UI:
• Consistent spacing creating reading rhythm
• Repeating card patterns in feeds
• Animation timing creating flow
• Navigation patterns users can predict
Good rhythm makes designs feel alive and guides users smoothly through content."
16. What is Unity (Harmony)?
"Unity is the principle of all elements working together to create a cohesive whole. The design
feels complete, where every part belongs and supports the overall goal.
How to achieve unity:
• Consistent color palette: Limited colors used throughout
• Typography system: 2-3 fonts maximum, used consistently
• Spacing system: Regular intervals creating rhythm
• Visual style: Consistent illustration or photography approach
• Component library: Reusable elements throughout product
• Design language: Shared vocabulary across team
Unity vs Variety:
• Too much unity: Boring, monotonous
• Too much variety: Chaotic, confusing
• Balance: Unity provides foundation, variety adds interest
Signs of poor unity:
• Pages feel disconnected from each other
• Inconsistent button styles across screens
• Mixed design styles (some flat, some skeuomorphic)
• Random font choices
• Unpredictable spacing
Example of good unity: Material Design or iOS Human Interface Guidelines —
comprehensive systems where every component feels like part of the same family."
17. What is the F-Pattern and Z-Pattern?
"F-Pattern and Z-Pattern describe natural eye movement patterns that users follow when
scanning content. Understanding these helps position important elements effectively.
F-Pattern:
Common in text-heavy pages like articles and blogs
• Users read top horizontal line fully (top of F)
• Then read a shorter horizontal line lower down (middle of F)
• Finally scan vertically down the left side (stem of F)
• Right side content often ignored
Design implications:
• Most important info in first two paragraphs
• Headings and key points along left side
• Frontload paragraphs with key information
• Use bullet points and subheadings to break up text
Z-Pattern:
Common in simple layouts with minimal text
• Eyes start top-left corner
• Move horizontally across top (top of Z)
• Diagonally down and left (middle of Z)
• Horizontally across bottom (bottom of Z)
Design implications:
• Logo top-left
• Navigation top-right
• Key content middle-left
• Call-to-action bottom-right
Position critical elements along these natural eye paths for maximum visibility."
18. What is the Rule of Thirds?
"The Rule of Thirds is a composition principle that divides space into a 3x3 grid. Placing key
elements along grid lines or at intersections creates more interesting, balanced compositions.
How it works:
• Divide your canvas into 9 equal sections with 2 vertical and 2 horizontal lines
• Position important elements along these lines or at their intersections
• Avoid centering everything
• Creates natural, pleasing compositions
Application in UI/UX:
• Hero images: Subject positioned at intersection points
• Layout: Content area takes up 2/3, sidebar 1/3
• Photography: Horizon line at top or bottom third, not center
• Typography: Headline positioned along top third line
• CTA placement: Button at strategic intersection
Why it works:
• More dynamic than centered compositions
• Creates visual tension and interest
• Guides eye movement
• Feels natural and balanced
When to break it:
Perfect symmetry works for formal, authoritative designs. Rule of thirds is a guideline, not a
law. Use judgment based on content and goals."
19. What is the 60-30-10 Color Rule?
"The 60-30-10 rule is a color proportion guideline for creating balanced, harmonious color
schemes:
The breakdown:
• 60% Dominant color: Main color, usually neutral (background)
• 30% Secondary color: Supporting color (major UI elements)
• 10% Accent color: Pop of color (CTAs, highlights)
How to apply:
• 60% example: White or light gray backgrounds, main containers
• 30% example: Dark text, secondary buttons, borders
• 10% example: Primary buttons, links, important highlights
Benefits:
• Creates visual balance
• Prevents color overwhelming
• Makes accent colors stand out
• Professional appearance
• Easy to implement
Example application:
E-commerce site:
• 60%: White background throughout
• 30%: Black text, gray buttons, product images
• 10%: Orange "Add to Cart" buttons, sale badges
The limited accent color makes CTAs highly visible and draws attention to conversion points.
This rule creates visual hierarchy through color proportion."
20. What is Progressive Disclosure?
"Progressive disclosure is the design principle of revealing information gradually, showing
only what users need at each step. It reduces cognitive load and prevents overwhelming
users.
How it works:
Start with essential information and actions. Reveal additional details, options or complexity
only when needed or requested.
Application in UI:
• Accordions: Click to reveal more details
• "Show more" links: Expand to see additional content
• Multi-step forms: One section at a time
• Tooltips: Hover for additional information
• Advanced settings: Hidden under "Advanced" option
• Filters: Basic filters shown, "More filters" option available
• Onboarding: Introduce features gradually, not all at once
Benefits:
• Reduces initial complexity
• Prevents overwhelming new users
• Faster task completion
• Cleaner, simpler interfaces
• Serves both novice and advanced users
Example: Photo editing app shows basic adjustments (brightness, contrast). Click
"Advanced" to reveal detailed controls (curves, levels, HSL). Beginners are not intimidated,
experts can access what they need."
21. What is Fitts's Law?
"Fitts's Law states that the time required to move to a target depends on the distance to the
target and its size. Larger and closer targets are faster and easier to click.
Formula concept:
Time = Log2(Distance/Size + 1)
The farther and smaller a target, the longer it takes to reach it.
Design implications:
• Make important actions large: Bigger buttons are easier to click
• Place related actions close: Reduce mouse travel distance
• Corner and edge placement: Screen edges act as infinite targets (easier to reach)
• Avoid tiny click targets: Minimum 44x44 pixels for touch, 32x32 for mouse
• Increase target area: Expand clickable area with padding even if visual size stays same
Practical applications:
• Primary CTAs larger than secondary buttons
• Clickable card areas instead of tiny links
• Menu items with generous padding
• Mobile back button in thumb-friendly zone
• Common actions near cursor position
Example: MacOS puts window close/minimize buttons in top-left corner — edge makes them
infinitely large in one dimension, very easy to hit."
22. What is Hick's Law?
"Hick's Law states that the time it takes to make a decision increases with the number of
choices available. More options mean slower decisions and potential paralysis.
Core principle:
Every additional choice increases cognitive load. Users must evaluate more options, leading
to decision fatigue.
Design implications:
• Limit menu items: 5-7 main navigation options maximum
• Simplify forms: Only ask for essential information
• Product filtering: Start with few filters, allow refinement
• Default choices: Pre-select recommended options
• Break into steps: Multi-step processes instead of overwhelming single page
• Progressive disclosure: Show basic options, hide advanced
Exception:
When users need to compare many options (e.g., price comparison, product catalog),
showing all options may be appropriate. The law applies more to decision-making actions
than browsing.
Example:
Netflix removed star ratings and reduced to thumbs up/down. Simpler choice (2 options vs 5)
increased user engagement because decisions became faster and easier."
23. What is Jakob's Law?
"Jakob's Law states that users spend most of their time on other sites, so they prefer your site
to work the same way as all the other sites they already know.
Core principle:
Users transfer expectations from familiar products to new ones. They expect common
patterns to work consistently across different websites and apps.
Design implications:
• Follow conventions: Logo top-left, search top-right, menu as expected
• Standard icons: Trash for delete, pencil for edit, hamburger for menu
• Familiar interactions: Swipe, pinch, scroll work as expected
• Common patterns: Shopping cart, checkout flow, account settings
• Form conventions: Required fields marked, validation patterns
When to deviate:
Only break conventions when you have strong evidence that your alternative is significantly
better and worth the learning curve. Test thoroughly.
Balance:
• Use familiar patterns for core functionality
• Innovate in ways that enhance, not replace, expectations
• Make unique features obvious and learnable
Example: Amazon's 1-Click ordering was innovative but built on the familiar pattern of "add to
cart." Users could understand it immediately because it simplified something they already
knew."
Quick Summary - Key Design Principles
Visual Hierarchy: Organize elements by importance using size, color, position
Balance: Distribute visual weight (symmetrical or asymmetrical)
Contrast: Create difference to establish emphasis and guide attention
Proximity: Group related elements close together
Similarity: Similar elements perceived as related
Continuity: Eyes follow lines and curves naturally
Closure: Minds complete incomplete shapes
Figure-Ground: Distinguish objects from backgrounds
White Space: Empty space improves readability and focus
Repetition: Consistent patterns create unity and familiarity
Important UX Laws
Fitts's Law: Larger and closer targets are faster to reach
Hick's Law: More choices increase decision time
Jakob's Law: Users prefer familiar patterns from other sites
60-30-10 Rule: 60% dominant, 30% secondary, 10% accent color
Rule of Thirds: Position elements along 3x3 grid for interest
F-Pattern: Text-heavy pages scanned in F shape
Z-Pattern: Simple layouts scanned in Z shape
Pro tip for interviews:
Design principles are not rigid rules — they are guidelines. Always explain why you applied a
principle and how it serves user needs and business goals. Show you understand both the
theory and practical application!