NEW
Font size
WorksheetsWireframes, Design Principles, and Usability
Total questions: 40
Worksheet time: 1hrs 20mins
What is a wireframe?
A fully designed webpage with colors
A skeleton layout showing structure only
A finished prototype
A programming template
Which wireframe type is hand-drawn and simple?
High-fidelity
Mid-fidelity
Low-fidelity
Interactive prototype
Which design principle refers to grouping related elements?
Contrast
Proximity
Alignment
Hierarchy
Which principle uses differences in size or color to emphasize?
Consistency
White space
Contrast
Balance
“Keeping elements uniform across pages” is called—
Usability
Consistency
Symmetry
Functionality
What does hierarchy control?
Readability
Navigation
Visual importance
Function
Which is NOT an input control?
Dropdown
Checkbox
Textbox
Logo
What is the main purpose of a landing page?
To show random information
To convert visitors into users
To store files
To display ads
What design pattern allows users to move between pages?
Modal
Navigation bar
Card layout
Breadcrumbs
What is a site map?
A prototype
A table for content
A visual plan of page structure
A final website
What makes adaptive design different from responsive design?
Adaptive uses one layout for all
Adaptive uses multiple fixed layouts
Responsive uses fixed layouts
Responsive needs multiple versions
Why is white space important?
It reduces website size
It makes elements breathe and improves clarity
It adds color
It increases contrast
Which best describes usability?
Beautiful colors
Easy to navigate and accomplish tasks
Using many images
Adding animations
Why is readability important?
It increases screen brightness
It ensures text is easy to understand
It improves video quality
It adds color contrast only
Brand copywriting focuses on—
Discounts and sales
Personality and tone of the brand
Complex words
Long paragraphs
Which describes mid-fidelity wireframes?
Includes final color
Sketchy outlines only
More structure, spacing, and typography
Real images and animations
Which describes breadcrumbs?
A search tool
A pop-up message
A location trail for navigation
A type of visual hierarchy
What do design patterns provide?
New problems
Reusable solutions to common issues
Random layouts
Complex code only
A textbox labeled “Name” placed far from the textbox violates—
Proximity
Hierarchy
Balance
Contrast
A student designs a header larger than the body text. What principle is applied?
Alignment
Hierarchy
Proximity
White space
A login form groups Username and Password together. Which principle is used?
Contrast
Proximity
Balance
Alignment
A developer uses grids to line up images neatly. This applies—
Alignment
Hierarchy
Contrast
White space
A bright red “Sign Up” button follows which principle?
White space
Consistency
Contrast
Proximity
A website with the same header and footer on every page shows—
Usability
Consistency
Balance
Feedback
A button darkens when hovered. This is—
Contrast
Feedback
Hierarchy
Readability
A designer adds wide spacing between sections. Which principle?
White space
Contrast
Proximity
Alignment
Which issue occurs if all elements are the same size?
Consistency
Poor hierarchy
Usability
Proximity
The layout places too many heavy elements on one side. What principle is violated?
Balance
Proximity
Alignment
Feedback
A user struggles to find the CTA button because it blends with background. What is missing?
Contrast
Proximity
Balance
Readability
A site map showing: Home > Products > Shoes shows—
Alignment
IA hierarchy
Typography
Usability testing
A form with unclear labels like “Info” instead of “Email” suffers from—
Readability
Feedback
Clarity
Consistency
A team decides to rename and reorganize pages based on user confusion. What are they improving?
Wireframe fidelity
Information Architecture (IA)
Copywriting only
White space
Which layout choice is BEST for improving readability?
Using fancy fonts
Adding large blocks of text
Using clear typography and good spacing
Using low contrast colors
Which design is MOST effective for mobile navigation?
Large text paragraphs
Hamburger menu
Long desktop menu
Hidden navigation
A designer uses five different button styles across pages. What is the main issue?
Too much hierarchy
Lack of consistency
Too much white space
Excess proximity
Which landing page feature MOST increases conversions?
Long paragraphs
Distracting animations
Strong call-to-action button
Multiple CTAs with no hierarchy
Which wireframe element should appear FIRST to guide user attention?
Footer
Headline
Contact form
Modal window
Which is the BEST CTA text for a learning platform?
“Click Here”
“Submit Something”
“Start Learning Today”
“Maybe Join Us?”
You are designing a travel landing page. Which combination follows good hierarchy?
Small headline, big footer
Large headline, subheadline, CTA
CTA only
Only images
To improve user flow in a prototype, which should you prioritize?
Random placement of buttons
Clear navigation and consistent layout
Adding many colors
Using decorative fonts
