Wireframe vs. mockup vs. prototype: What’s the difference?

What is a wireframe?

So what are wireframes? Well, a wireframe acts as a low-fidelity blueprint for UI

designs such as websites and apps. They provide an outline of the layout and
structure of one screen, or multiple screens, of a design. Wireframes are the first step in
the design process, and every great website or app has most likely started out as a rough
wireframe draft on a piece of paper.

Classified as low-fidelity, wireframes possess no colors, images or large chunks of text,

and they are simply a sketch of a web or app page. These sketches are usually drawn by
hand, but UI design tools such as Mockflow makes online wireframing a possibility too.

What is a mockup?

A mockup is a medium-fidelity visualization of a UI design, such as a website or

app. With all of the aesthetic elements and components in place, including branding,
color and typography, mockups are used to demonstrate how a finished product would
look and feel. As the next stage in the design process, mockups incorporate the draft of a
wireframe to build a visually appealing ‘mockup’ of a website or app.

As a medium-fidelity design, mockups are not used to show the interactivity of a digital
product, and they act as a static version of a finished product. UI design mockups can be
created from scratch on a range of design tools, including Uizard, or from a premade UI
template.
What is a prototype?

A prototype is the closest step in the design process to a finished digital

product. Prototypes demonstrate aesthetics, and functionality, whilst showing
how users would interact with a website or app. A step up from a mockup,
prototypes have increased detail and are all about user flow.

As a high-fidelity design, prototypes can help in the ideation phase when gathering
feedback, and are also great for testing user journeys before the final product is created.

Wireframe vs mockup
Placing a wireframe and a mockup side by side presents some noticeable differences.
More noticeable than say, a mockup vs prototype. As a wireframe is low-fidelity, they are
just a rough sketch in comparison to a medium-fidelity mockup. With color, imagery,
defined elements and components, a mockup stands out massively besides the
monochrome appearance of a wireframe.

The reason for these visual differences is solely due to the varying purposes of a
wireframe vs mockup. Whilst a wireframe is used to gather initial feedback about a
potential design, and can go through several iterations, a mockup is a slightly more
refined version of the design. With detailed elements and components, mockups are not
too far from what a finished website or app may look like. However, without a
doubt, designing mockups and wireframes are both key stages in the design process and
are both equally as important.

Mockup vs prototype

So, what is the difference between a mockup and a prototype? Whilst in appearance
they may look similar, for instance they’re both visually close to the final product, there
are slight differences. As prototypes represent the complete final design of a
website or app, aspects such as content are much more detailed than on
mockups. Large blocks of content are not usually found on mockups, but on prototypes
they are essential in demonstrating exactly what a user would see on a UI design.

Despite having one purpose in common, which is to present a likeness of a digital

product, a prototype goes one step further than a mockup. High-fidelity prototypes are
used to show how a user would interact with a website or app, this means
they focus on the user journey. Linking screens, components and elements together is
beneficial for user testing and to iron out any issues before a design reaches
development. Which is why a prototype is the final piece of the design puzzle.

Wireframe vs mockup vs prototype summary

Every step in the design process is valuable. Wireframes, mockups, and prototypes help
you learn what’s working and what isn’t. And they allow you to try out different layouts,
colors, components and elements. But their chief purpose is to start conversations with
team members, clients, and users in order to ensure that your final prototype is perfect
for everyone.

Below you will find a summary of the wireframe vs mockup vs prototype debate, and
hopefully this will help to signify the part each of these terms play in the creation of UI
designs.

Wireframe Mockup Prototype

Definition A sketch of the layout A visualization of a site A more developed

and structure of one or app, including visualization of a UI
screen, or multiple aspects of branding, design, showing user
screens, of a UI color and typography. interactions between
design. screens.

Purpose To collect feedback To demonstrate how a To gain insight from

about design finished product would user testing, and
formatting and look. Detailed feedback implement any final
layout. is used to make design changes.
adjustments.

Design fidelity Low Medium High

Elements and Outlines of Detailed components The final look, with

components? component blocks and elements. Including blocks of content and
and elements such as interactive elements
 Wireframe Mockup Prototype

images and icons. snippets of text. and components.

🔹 Basic UI/UX Fundamentals

1. What is the difference between UI and UX?

2. What does a UX designer do?

3. What is the design thinking process?

4. Can you explain the five elements of UX design?

5. What are the key principles of UI design?

6. How do usability and user experience differ?

7. What makes a good user experience?

8. What are the stages of the UX design process?

9. Why is user-centered design important?

[Link] is a user persona and why is it important?

🔹 User Research & Testing

[Link] methods do you use for user research?

[Link] is the difference between qualitative and quantitative research?

[Link] do you conduct usability testing?

[Link] are some examples of questions you ask during user interviews?

[Link] do you analyze and prioritize user feedback?

[Link] tools do you use for UX research?

[Link] is A/B testing and how do you conduct it?

[Link] is heuristic evaluation?

[Link] do you define and measure success metrics in UX?

[Link] do you conduct a competitive analysis?

🔹 Wireframing & Prototyping

[Link]’s the difference between low-fidelity and high-fidelity wireframes?

[Link] tools do you use to create wireframes?

[Link] is the purpose of a prototype?

[Link] do you determine what to include in a wireframe?

[Link] do you use prototyping in the design process?

[Link] is the difference between interactive and clickable prototypes?

[Link] do you present wireframes to stakeholders?

[Link] do you decide the level of fidelity for a prototype?

[Link] are some challenges you face while prototyping?

[Link] you walk us through a wireframe you created?

🔹 Visual Design & Aesthetics

[Link] is visual hierarchy in UI design?

[Link] do you choose a color palette for a product?

[Link]’s the importance of typography in UI design?

[Link] are some common UI design patterns?

[Link] do you maintain visual consistency across screens?

[Link] is white space and why is it important?

[Link] do you handle icon design and usage?

[Link] are microinteractions and how do they improve UX?

[Link] are your favorite UI design trends and why?

[Link] do you ensure your UI is visually accessible?

🔹 Design Tools & Software

[Link] UI/UX tools are you proficient in?

[Link] are the advantages of Figma over Adobe XD?

[Link] do you use Figma’s auto layout feature?

[Link] plugins do you frequently use in Figma or Sketch?

[Link] do you organize design files for collaboration?

[Link] do you manage version control in design tools?

[Link] you used tools like InVision or Marvel? If yes, how?

[Link] do you prototype user flows in Figma?

[Link]’s your approach to working with design systems in tools?

[Link] do you hand off designs to developers using tools?

🔹 Accessibility & Inclusivity

[Link] is accessibility in UI/UX design?

[Link] are WCAG guidelines?

[Link] do you ensure your designs are accessible?

[Link] do you test for accessibility in your designs?

[Link] design decisions can affect users with disabilities?

[Link] tools do you use for accessibility testing?

[Link] do color contrast and font size affect accessibility?

[Link] is ARIA and how is it used in accessible design?

[Link] you design for screen readers? How?

[Link] do you balance visual appeal with accessibility?

🔹 Psychology & Human Behavior

[Link] do you apply cognitive psychology in UX design?

[Link] is Hick’s Law and how does it relate to UX?

[Link] you explain Fitts’ Law with an example?

[Link] is the Von Restorff Effect?

[Link] do you reduce cognitive load in UI?

[Link] is the Zeigarnik Effect and how can it be used in UX?

[Link] do you use persuasive design principles in UX?

[Link] do emotions influence user behavior?

[Link] do you handle user frustration through design?

[Link] is the role of empathy in UX design?

🔹 Responsive & Adaptive Design

[Link]’s the difference between responsive and adaptive design?

[Link] do you design for multiple screen sizes?

[Link] are breakpoints in responsive design?

[Link] do you prioritize content for mobile design?

[Link] is mobile-first design?

[Link]’s the biggest challenge in responsive UI design?

[Link] do you test designs on different devices?

[Link] do touch interfaces affect design choices?

[Link] are some common responsive design patterns?

[Link] do you ensure your design works across browsers?

🔹 Design Systems & Components

[Link] is a design system?

[Link] are the key components of a design system?

[Link] do you maintain consistency using a design system?

[Link] you created a design system from scratch? Explain.

[Link] do you manage design tokens?

[Link] do you keep design systems scalable?

[Link]’s the difference between a style guide and a design system?

[Link] do you name components and styles in Figma?

[Link] do you document usage guidelines for design systems?

[Link] do you handle updates in a design system?

🔹 Collaboration & Handoff

[Link] do you collaborate with developers?

[Link] do you ensure smooth handoff to development teams?

[Link] do you deal with feedback from developers?

[Link]’s your approach to cross-functional team collaboration?

[Link] do you handle conflicting opinions in a team?

[Link] do you document your design decisions?

[Link] do you use tools like Zeplin, Figma Inspect, or Storybook?

[Link] do you balance design idealism with development constraints?

[Link] do you present your work to stakeholders?

100. How do you incorporate feedback from users and stakeholders?

🔹 Portfolio & Experience-Based Questions

101. Walk us through your favorite UX project.

102. What was the most challenging design problem you solved?

103. Can you show a project where you improved user engagement?

104. How do you manage tight deadlines in UX projects?

105. Describe a time you had to defend your design decisions.

106. Have you worked on a product from ideation to launch?

107. How do you prioritize tasks in a UX project?

108. How do you validate your design ideas?

109. How do you measure the success of your designs?

110. What would you do differently in your last project?

1. What is the difference between UI and UX?

UI (User Interface) is concerned with the visual aspects of a product — how it looks,
including colors, typography, buttons, layouts, and visual design elements. It's about
designing the interface that users interact with.

UX (User Experience), on the other hand, focuses on the overall feel and
functionality of the product — how it works, how easy it is to use, and how it solves the
user's problems effectively. It's about the process and strategy behind the user's
interaction.

Example: Imagine a food delivery app.

 The UI includes the colors of buttons, layout of restaurant listings, and icons for
search and cart.

 The UX includes how quickly a user can find a restaurant, place an order, and get
real-time updates.

2. What does a UX designer do?

A UX designer is responsible for designing meaningful and relevant user

experiences. Their work spans research, wireframing, prototyping, testing, and
iterating.

Typical responsibilities include:

 Conducting user research and interviews.

 Creating user personas.

 Designing user flows and wireframes.

 Building prototypes for user testing.

 Iterating based on feedback and analytics.

Example: In a mobile banking app, a UX designer ensures that users can transfer money
in a few clear, intuitive steps without confusion or security issues.

3. What is the design thinking process?

Design Thinking is a human-centered approach to problem-solving. It focuses on

understanding users’ needs and creating innovative solutions. It consists of five stages:

1. Empathize – Understand the users and their needs through research.

2. Define – Clearly articulate the user problem to solve.

3. Ideate – Generate creative ideas and potential solutions.

4. Prototype – Build low or high-fidelity representations of ideas.

5. Test – Test with users, gather feedback, and refine.

Example: If users are struggling with an online checkout process, a designer uses design
thinking to identify pain points, brainstorm smoother flows, prototype them, and test with
real users to improve the process.

4. Can you explain the five elements of UX design?

The five elements of UX design, as described by Jesse James Garrett, help break down UX
into structured layers:

1. Strategy – Define user needs and business goals.

E.g., A music streaming app wants to increase user engagement.

2. Scope – Determine functional and content requirements.

E.g., Playlist creation and personalized song recommendations.

3. Structure – Create user flows and information architecture.

E.g., How users navigate through albums, artists, and playlists.

4. Skeleton – Design wireframes and interface layout.

E.g., The placement of the play button, search bar, etc.

5. Surface – The visual design (UI) that users see and interact with.
E.g., The look and feel – colors, fonts, button styles.

5. What are the key principles of UI design?

UI design is guided by several core principles:

 Clarity – Interface elements should communicate meaning clearly.

 Consistency – Maintain a uniform look and behavior throughout.

 Feedback – Provide visual cues for user actions (e.g., button click effects).

 Affordance – Design elements should suggest their use (e.g., buttons look clickable).

 Simplicity – Keep interfaces minimal and free of unnecessary elements.

 Accessibility – Make interfaces usable for everyone, including people with

disabilities.

Example: In a sign-up form, using clear labels, a progress bar, and consistent input fields
enhances clarity and usability.

6. How do usability and user experience differ?

 Usability is a component of UX. It focuses on how easy and efficient it is for users to
accomplish tasks.

 User Experience encompasses all aspects of the user's interaction with a product,
including emotions, satisfaction, and perceptions.

Example: A product may be usable (you can complete a task), but the experience may
still be negative if it’s visually unpleasant, slow, or uninspiring.

7. What makes a good user experience?

A good UX is:

 Useful – Solves a real problem.

 Usable – Easy to learn and efficient to use.
 Desirable – Pleasing and emotionally engaging.
 Accessible – Inclusive for all users.
 Credible – Builds trust and reliability.
 Findable – Users can easily locate what they need.

Example: Google Search delivers good UX by being simple, fast, reliable, and giving
accurate results instantly.

8. What are the stages of the UX design process?

The UX design process typically follows these stages:

1. Research – Understand the user and their problems (surveys, interviews, analytics).
2. Define – Identify user pain points and craft problem statements.
3. Ideate – Brainstorm solutions and design concepts.
4. Design – Create wireframes, mockups, and prototypes.
5. Test – Conduct usability testing with real users.
6. Implement – Collaborate with developers for development.
7. Evaluate – Measure performance, collect feedback, and improve.
This process is iterative, meaning testing and feedback lead to continuous refinement.

9. Why is user-centered design important?

User-centered design (UCD) ensures that the product is designed around the user's
needs, behaviors, and feedback, not assumptions.

Benefits:

 Increases user satisfaction.

 Reduces development costs by preventing rework.

 Improves usability and accessibility.

 Drives business success by meeting user expectations.

Example: A healthcare app designed using UCD might prioritize easy access to
prescriptions and appointment booking, especially for elderly users.

10. What is a user persona and why is it important?

A user persona is a fictional, generalized representation of a key user segment. It

includes:

 Name, age, role

 Goals and motivations
 Pain points
 Behaviors and preferences

Purpose:

 Helps the team empathize with users.

 Guides design decisions based on real user needs.
 Ensures alignment across teams.

Example:

Name: Sarah, 29, Freelance Designer

Goals: Manage projects and invoices quickly
Pain points: Too many tools; difficult to track client payments
This persona helps the UX team prioritize simplicity and integration features in a project
management app.

11. What methods do you use for user research?

User research methods help gather insights into user behaviors, needs, and motivations.
Some common methods include:
1. User Interviews – One-on-one conversations to uncover deep motivations and pain
points.
2. Surveys/Questionnaires – Structured questions to collect feedback from a large
group.
3. Usability Testing – Observing users as they interact with a prototype or product.
4. Contextual Inquiry – Observing users in their natural environment.
5. Card Sorting – Helps understand how users group and label content.
6. Field Studies – Visiting real users to observe how they use products in real life.
7. Diary Studies – Users self-record their experiences over a period of time.

Example: Before redesigning an e-commerce checkout, you might conduct usability tests
to understand where users drop off.

12. What is the difference between qualitative and quantitative research?

 Qualitative Research focuses on understanding "why" and "how" users behave.

It's exploratory and open-ended.

o Methods: Interviews, usability testing, observations.

o Output: Insights, themes, and user needs.

 Quantitative Research focuses on measuring "what", "how many", and "how

often".

o Methods: Surveys with numerical scales, analytics, A/B tests.

o Output: Statistical data and trends.

Example:

 Qualitative: "Why do users abandon the checkout process?"

 Quantitative: "How many users abandon the checkout process at Step 3?"

13. How do you conduct usability testing?

Usability testing helps evaluate how easy and effective a product is to use. The process
includes:

1. Define Objectives – What do you want to learn?

2. Create Tasks – Realistic scenarios for users to complete.

3. Recruit Participants – Represent your target audience.

4. Facilitate the Test – Moderate (or unmoderated), ask users to complete tasks while
thinking aloud.

5. Record Observations – Note confusion, errors, and friction.

6. Analyze Results – Identify usability issues and suggest improvements.

Example: In Figma, you can use interactive prototypes to test a login flow and observe if
users understand the form and buttons.

14. What are some examples of questions you ask during user interviews?

User interviews should be open-ended to gain rich insights. Examples:

 Can you walk me through how you currently use [product]?

 What challenges do you face when using similar tools?
 What’s the most important feature for you?
 Have you used a product like this before?
 How do you usually solve [specific problem] today?

Tip: Avoid leading questions. Focus on behavior, not opinions.

15. How do you analyze and prioritize user feedback?

Steps to analyze and prioritize:

1. Organize Feedback – Group similar responses into themes or categories.

2. Identify Pain Points – Highlight what’s affecting usability or experience.

3. Create an Affinity Map – Visual clustering of related issues.

4. Score by Impact & Frequency – Prioritize based on severity and how often the issue
occurs.

5. Use a Prioritization Framework – Like MoSCoW (Must, Should, Could, Won’t) or

RICE.

Example: If 70% of users report confusion during onboarding, that becomes a high-
priority fix.

16. What tools do you use for UX research?

Here are commonly used tools across research stages:

 Surveys: Google Forms, Typeform, SurveyMonkey

 Usability Testing: Maze, UsabilityHub, Lookback, UserTesting

 Analytics: Google Analytics, Hotjar, Mixpanel

 Interview Recording: Zoom, [Link], Dovetail

 Prototyping + Testing: Figma (interactive prototypes), InVision

Example: In Figma, after creating a prototype, you can integrate it with Maze to conduct
unmoderated usability tests.
17. What is A/B testing and how do you conduct it?

A/B Testing is a method of comparing two versions of a design to see which one
performs better.

Steps to conduct:

1. Identify the Goal – e.g., increase signup rate.

2. Create Two Variants – Version A (control) and Version B (variation).
3. Run the Test – Show different versions to different user groups.
4. Measure Performance – Use metrics like click-through rate, conversion.
5. Analyze Results – Choose the variant that performs best.

Example: A/B test two button colors in a Figma prototype by sharing two versions and
analyzing which has higher engagement using a testing tool like Optimizely or VWO.

18. What is heuristic evaluation?

Heuristic Evaluation is a method where experts review a UI against a set of usability

principles (heuristics), most commonly those by Jakob Nielsen.

The 10 Nielsen heuristics include:

 Visibility of system status

 Match between system and real world
 User control and freedom
 Consistency and standards
 Error prevention
 Recognition over recall
 Flexibility and efficiency of use
 Aesthetic and minimalist design
 Help users recognize, diagnose, recover from errors
 Help and documentation

Example: Evaluating a form in Figma, you might identify that unclear error messages
violate the "error prevention" and "help users recover" heuristics.

19. How do you define and measure success metrics in UX?

Success metrics help determine if the design is meeting user and business goals.
Common UX metrics include:

 Task Success Rate – % of users who complete a task correctly.

 Time on Task – How long it takes to complete a task.
 Error Rate – Mistakes users make during a task.
 System Usability Scale (SUS) – Survey to evaluate perceived usability.
 Net Promoter Score (NPS) – Likelihood of users recommending the product.
 Customer Satisfaction Score (CSAT) – Rating given post-interaction.

Example: For a signup form, you might track how many users complete the form without
errors and how long it takes.

20. How do you conduct a competitive analysis?

Competitive analysis helps understand the strengths and weaknesses of similar products
in the market.

Steps:

1. Identify Competitors – Direct and indirect.

2. Analyze Key Features – What do they offer?
3. Evaluate UI/UX Design – Look at layout, navigation, accessibility, interaction
patterns.
4. Assess User Feedback – Read reviews, support forums, and social media.
5. Compare Performance – Identify gaps and opportunities.

Figma Tip: You can create mood boards or UI benchmarking boards by importing
screenshots and annotating good vs poor design practices across competitors.

Example: If redesigning a music app, analyze Spotify, Apple Music, and YouTube Music
for UI patterns, onboarding, personalization, and user flows.

21. What is wireframing and why is it important?

Wireframing is the process of creating a basic visual layout of a digital interface. It

focuses on structure, content placement, and functionality, not visual design.

Importance:

 Establishes the layout and information hierarchy.

 Helps identify user flows early.
 Saves time by iterating quickly.
 Encourages early feedback.

Example: Wireframing a login page shows where the input fields, buttons, and “forgot
password” link will go, without applying final colors or images.

22. What is the difference between low-fidelity and high-fidelity wireframes?

Feature Low-Fidelity High-Fidelity

Detail Basic layout and structure Pixel-perfect, visually detailed

Purpose Explore concepts, early Near-final representation for

feedback stakeholders
 Design Paper, Balsamiq, basic Figma Figma, Sketch, Adobe XD
Tools shapes

Interactivit Often static Interactive and functional

y

Example:

 Low-fi: Box for “Image”, text saying “Button”.

 High-fi: Exact image, styled button with hover state.

23. What tools do you use for wireframing and prototyping?

The most commonly used tools include:

 Figma – Powerful all-in-one design, prototyping, and collaboration tool.

 Sketch – Vector-based design tool for macOS.
 Adobe XD – Useful for UI/UX with basic prototyping.
 Balsamiq – Great for low-fidelity wireframes.
 InVision – Prototype and collaborate with stakeholders.

Preferred: Figma is highly popular due to its cloud-based collaboration and real-time
editing.

24. How do you create a prototype in Figma?

Steps to create a prototype in Figma:

1. Design your frames – Create multiple screens (e.g., Home, About, Contact).

2. Switch to Prototype mode – Click the "Prototype" tab in the right-hand panel.

3. Add interaction links:

o Select a button (e.g., "Next").

o Drag the blue arrow to the target frame (e.g., "Next Page").

o In the interaction panel, choose:

 On Click

 Navigate to [Frame]

 Choose Smart Animate (if needed).

4. Set starting point – Click the desired frame and click the play icon to make it the
start.
5. Preview – Click the “Play” icon (Present) in the top-right to test the prototype.

6. Share – Click “Share” > set permissions and share the prototype link.

Example: Prototype a signup form with three steps and test transitions between each
step.

25. What is the difference between a prototype and a wireframe?

Aspect Wireframe Prototype

Purpose Structure and layout Test interactions and flows

planning

Design Usually grayscale, low/no Can be high-fidelity with

visuals animations

Functionalit Static (non-interactive) Clickable and dynamic

y

Stage Early-stage design Mid to late-stage testing

Example:

 A wireframe may show where the “Buy Now” button is placed.

 A prototype lets users click the “Buy Now” button and see the checkout process.

26. How do you collaborate with developers using Figma?

Collaboration in Figma is seamless due to real-time updates and shared access. Here's
how designers and developers work together:

Key Features in Figma:

1. Share Design Link – Developers can inspect designs via the shared link (no
download needed).

2. Inspect Mode – Click any element to view:

o CSS properties
o Color codes, typography, spacing
o Export options for assets

3. Comments – Stakeholders or developers can leave comments directly on design

components.

4. Version History – Tracks all changes and allows restoring previous versions.

5. Developer Handoff Tools:

 o Zeplin (if needed), though Figma now handles most of it natively.

Workflow Tip: Use consistent naming for components and styles to help developers
understand and implement designs quickly.

27. What are components in Figma and why are they useful?

Components are reusable design elements (buttons, cards, headers) that can be used
across multiple screens.

Benefits:

 Saves time and effort.

 Ensures consistency across the UI.
 Global edits—change the main component, and all instances update.

Steps to Create a Component in Figma:

1. Select the group or frame you want.

2. Press Ctrl + Alt + K (Windows) or Cmd + Option + K (Mac) to make a component.
3. Use Instances across your design. Change overrides (text/images) as needed.
4. To edit all, modify the Main Component.

Example: Create a button component. If the brand color changes, update it once and see
all buttons auto-update.

28. How do you create responsive designs in Figma?

Figma allows responsive design using constraints and auto layout.

Method 1: Constraints

1. Select a frame or element.

2. In the right sidebar, set constraints like:

o Left, Right

o Center

o Scale

3. Resize the parent frame and see how the child elements behave.

Method 2: Auto Layout

1. Select your elements (e.g., button text + background).

2. Press Shift + A to apply Auto Layout.

3. Set spacing, padding, and alignment.

4. Combine auto layout with constraints for adaptive designs.

Example: Create a navigation bar that resizes properly on desktop and mobile by setting
the right constraints and using auto layout for menu items.

29. What is Auto Layout in Figma and how does it help?

Auto Layout allows elements to adjust dynamically based on content or frame changes.

Features:

 Automatically adjusts spacing between items.

 Adds padding and alignment controls.

 Works vertically or horizontally.

 Supports nesting (layouts within layouts).

Benefits:

 Speeds up UI creation.

 Makes components more reusable.

 Enables responsive design.

Steps to use Auto Layout:

1. Select a group of elements (e.g., label + button).

2. Press Shift + A to apply Auto Layout.

3. Adjust spacing between items and padding from the right sidebar.

4. Wrap elements or set them to "Fill Container" for responsive behavior.

Example: Use Auto Layout to create a resizable card component with a title, subtitle,
and button that maintains consistent spacing.

30. How do you create design systems in Figma?

A design system is a collection of reusable components, styles, and guidelines.

Steps to Create a Design System in Figma:

1. Define Styles:
o Colors: Create a palette using "Fill" and save them as color styles.

o Typography: Define text styles for headings, body, etc.

o Grids & Spacing: Set layout grids for responsive design.

2. Create Components:

o Buttons, Inputs, Cards, Modals.

o Use Auto Layout and Constraints.

3. Use Variants:

o Combine similar components (e.g., Primary and Secondary buttons) into a single
component with Variants.

4. Create a Library:

o Organize components and styles in a separate Figma file.

o Click “Assets” > “Publish Library” to share across projects.

5. Document Usage:

o Add notes, usage guidelines, and naming conventions.

Example: A button component can have variants like:

 Type: Primary, Secondary, Disabled

 Size: Small, Medium, Large

Use the Variant feature to manage all in one place and switch between them easily.

31. What are the key principles of good UI design?

Good UI design is based on principles that enhance usability, clarity, and aesthetics:

1. Clarity: Interface elements must clearly convey their purpose.

o Example: A button should look clickable, not like static text.

2. Consistency: Maintain uniform styling across all screens.

o Tip: Use Figma’s design system with styles and components.

3. Feedback: Users should receive clear responses to their actions.

o Example: Button shows a loading spinner after clicking "Submit".

 4. Hierarchy: Prioritize content using visual cues like size, color, and placement.

o Example: Headings are larger and bolder than body text.

5. Affordance: Design should suggest the interaction.

o Example: Input fields look like boxes; sliders suggest movement.

6. Accessibility: Design for all users, including those with disabilities.

7. Simplicity: Eliminate unnecessary elements that distract or confuse.

32. What are UX heuristics? Can you name a few?

UX heuristics are usability principles used to evaluate user interfaces. Jakob Nielsen’s
10 Heuristics are the most well-known.

A few key heuristics:

1. Visibility of system status

o Show users what's happening.

Example: A progress bar during file upload.

2. Match between system and real world

o Use familiar concepts.

Example: Using a trash can icon for "delete".

3. User control and freedom

o Provide undo and redo.

Example: Allowing users to go “Back” in a form.

4. Consistency and standards

o Follow platform guidelines.

Example: Place the hamburger menu in the top-left corner.

5. Error prevention

o Design to prevent problems.

Example: Confirmation popups before deleting data.

33. What is accessibility in UI/UX design and why is it important?

Accessibility means designing products that are usable by people with a wide range of
abilities and disabilities (vision, hearing, motor, cognitive).

Why it's important:

 Legal requirements (WCAG compliance).

 Reaches more users.

 Improves SEO and usability for everyone.

Accessibility considerations:

 Use sufficient color contrast.

 Support keyboard navigation.

 Add alt text for images.

 Use semantic HTML for screen readers.

 Avoid relying on color alone to convey meaning.

Figma Tip:
Use the Able plugin or Contrast plugin in Figma to check contrast ratios between text
and background colors.

34. How do you ensure your designs are accessible to all users?

1. Color Contrast: Ensure text contrasts well with backgrounds.

o Use tools like Figma plugins: Stark, Able.

2. Text Size and Readability: Avoid very small font sizes.

3. Keyboard Navigation: Ensure that forms and buttons are logically navigable.

4. Use Labels and ARIA: Properly label form fields and use ARIA roles when coding.

5. Alt Text: Provide descriptions for non-text elements.

6. Responsive Layouts: Ensure accessibility on all screen sizes.

Example: For a dark-themed site, white text on a dark gray background passes contrast
checks but light gray text may not.

35. What is the importance of visual hierarchy in UI design?

Visual hierarchy is the arrangement of elements to show their order of importance.

Benefits:

 Guides users through the interface naturally.

 Reduces cognitive load.

 Helps users find information faster.

How to create hierarchy:

 Use size: Larger items draw attention.

 Use color: Bright colors pop.

 Use spacing: Group related elements.

 Use alignment: Keep layouts tidy and structured.

Figma Tip: Use grid and layout guides to align text, buttons, and images for better
hierarchy.

Example: On a pricing page, the “Pro” plan card is larger, bolder, and highlighted to
draw attention.

36. What is the difference between visual design and UX design?

Aspect Visual Design UX Design

Focus Look and feel Functionality and experience

Goal Aesthetics and branding Usability and satisfaction

Key Typography, colors, User research, personas,

Activities imagery wireframing

Figma, Illustrator, Figma, UXPin, Maze,

Tools
Photoshop UserTesting

Example:

 A visual designer creates an attractive button style.

 A UX designer ensures the button is easy to find and leads to the desired action.
37. How do you balance aesthetics and usability in your design?

You must find a balance where the interface is both visually appealing and easy to use.

Strategy:

1. Start with wireframes to focus on structure and usability.

2. Apply visual design gradually without overwhelming function.

3. Test designs with users—a beautiful design is useless if users are confused.

4. Follow accessibility and usability principles first, then enhance visuals.

Example:
A landing page may look beautiful with animated elements and bold colors, but if the CTA
(Call-to-Action) is hidden or hard to read, it fails usability.

38. What is information architecture in UX?

Information Architecture (IA) is the practice of organizing, structuring, and labeling

content to support usability and findability.

Key Elements:

 Navigation: How users move through the site/app.

 Categorization: Grouping related content.

 Hierarchy: What appears first and how content is prioritized.

 Labeling: Clear naming for buttons, menus, links.

Example:
On an e-commerce site:

 Main Categories: Men, Women, Kids.

 Subcategories: Shoes, Clothing, Accessories.

 Labels: “Add to Cart”, “Wishlist”, “Checkout”.

Figma Tip: Use a sitemap or tree diagram in Figma to visualize IA before designing
screens.

39. How do you apply consistency in your design?

Consistency ensures that users learn and navigate your interface quickly.

Types of Consistency:

1. Visual Consistency – Fonts, colors, buttons remain the same.

2. Functional Consistency – Interactions behave the same way.

3. Internal Consistency – Across screens within the same app.

4. External Consistency – Matches user expectations from other apps.

Methods in Figma:

 Use Styles (Color, Text).

 Use Components and Variants.

 Build a Design System for repeated elements.

Example: A button should not change shape or color between screens unless there’s a
specific reason.

40. What is a UI style guide and how do you create one in Figma?

A UI Style Guide defines the visual language of your product: colors, typography,
spacing, icons, and components.

Steps to Create in Figma:

1. Define Brand Colors:

o Create color styles (Primary, Secondary, Background, etc.).

o Save them as reusable styles.

2. Typography:

o Define heading levels (H1, H2, Body, Caption).

o Save as text styles.

3. Grid & Spacing System:

o Use an 8px or 4px system for margins and padding.

4. Components:

o Buttons, Inputs, Cards, Navigation.

 o Use Variants for different states (hover, active, disabled).

5. Icons:

o Create or import consistent icon sets.

6. Documentation:

o Add notes for usage guidelines and naming conventions.

Example:
Create a component for a button with variants:

 Type: Primary / Secondary

 States: Default / Hover / Disabled

Publish this guide as a Figma Library to be reused across all projects.