UNIT-3

Wireframing and Prototyping

I. Sketching and wireframing techniques

Sketching Techniques:
Sketching is the foundational step in the design process, enabling rapid visualization of
ideas without getting bogged down by details. It emphasizes speed, creativity, and
collaboration.

Purpose of Sketching
• Ideation: Explore multiple design solutions quickly.
• Communication: Share concepts with stakeholders or team members.
• Low-Cost Iteration: Test ideas before investing time in digital tools.

Freehand Sketching
What it is: Hand-drawn, rough sketches using pen/pencil and paper or a tablet.
Why use it:
• Encourages creativity and spontaneity.
• Ideal for brainstorming sessions or early-stage feedback.
Example:
Designing a mobile app homepage:
• Sketch a rectangular frame (representing a phone screen).
• Draw a top navigation bar with a menu icon and logo.
• Add a search bar, hero image placeholder, and product grid.

Templates and Grids

What it is: Predefined layouts (e.g., device screens, browser windows) to maintain
consistency.
Example:
Using a mobile grid template:
• Print a template with a phone outline and 12-column grid.
• Sketch a login screen with input fields centered on grid lines.
Case Study: Redesigning a Login Screen
Problem: Users abandon the login process due to unclear error messages.
Sketching Process:
1. Initial sketch: Basic layout with email/password fields and a “Sign In” button.
2. Iteration 1: Add a “Forgot Password?” link.
3. Final sketch: Annotate dynamic error message logic.

Wireframing Techniques
Wireframes translate sketches into structured layouts, focusing on hierarchy, spacing,
and function-
ality.

Low-Fidelity vs. Mid-Fidelity Wireframes

Aspect Low-Fi Wireframes Mid-Fi Wireframes

Detail Level Basic shapes, minimal text More structure,
placeholder text
Interactivity Static Clickable links/buttons
Tools Balsamiq, Paper FIgma, Sketch

Case Study: E-Commerce Product Page

Problem: Users struggle to find product details.

Wireframing Process:
• Low-Fi: Product image placeholder, title, price, and “Add to Cart” button.
• Mid-Fi: Tabs for “Details,” “Reviews,” and a sticky “Buy Now” button.

Best Practices
• Sketching: Use thick pens to avoid over-refining.
• Wireframing: Start with boxes and leverage grids.

Example Wireframe: Food Delivery App

• Header: Search bar + location selector.
• Body: Hero banner, category filters, restaurant cards.
• Footer: Navigation icons for Home, Orders, and Account.

Summary
• Sketching focuses on speed and ideation; wireframing adds structure.
• Use low-fi for brainstorming and mid-fi for detailed planning.
• Always annotate and iterate based on feedback.

II. Introduction to Digital Wireframing Tools

Digital wireframing tools streamline the design process by enabling precise, scalable,
and collab-
orative creation of user interfaces. This section focuses on three industry-leading tools:
Figma,
Sketch, and Adobe XD.

1. Figma
Key Features
• Cloud-Based: Access projects from any device with a browser.
• Real-Time Collaboration: Multiple users can edit simultaneously.
• Design Systems: Create reusable components (e.g., buttons, icons).
• Prototyping: Build interactive flows with transitions and animations.
Example Workflow: Mobile App Header
• Use Frames to set screen dimensions (e.g., iPhone 13).
• Drag Components (e.g., navigation bar, search field).
• Link screens with Prototype Mode to simulate user flow.
Advantages
• Free tier available for small teams.
• Cross-platform (Windows, macOS, Linux).
• Integrates with Slack, Jira, and Zoom.

2. Sketch
Key Features
• Vector Editing: Precision tools for icons and illustrations.
• Symbol Libraries: Reusable design elements with overrides.
• Plugins: Extend functionality with third-party tools (e.g., Anima for responsive
layouts).
• Export Options: Generate assets for developers (SVG, PNG, PDF).

Example Workflow: Dashboard Design

• Create a Artboard for desktop (1440px width).
• Use Grids to align charts and tables.
• Export styles via Sketch Cloud for developer handoff.
Advantages
• Optimized for macOS (smooth performance).
• Strong community plugin ecosystem.
• Offline access to projects.

3. Adobe XD
Key Features
• Auto-Animate: Create complex animations between artboards.
• Repeat Grid: Duplicate elements (e.g., lists, cards) instantly.
• Voice Prototyping: Design voice-enabled interactions.
• Adobe Integration: Seamless workflow with Photoshop and Illustrator.
Example Workflow: E-Commerce Prototype
• Import product images from Adobe Stock.
• Use Repeat Grid to generate product listings.
• Add Micro-Interactions (e.g., hover effects on buttons).
Advantages
• Free starter plan for individual users.
• Robust animation tools.
• Supports voice and gamepad interactions.

Best Practices for Choosing a Tool

• Team Size: Figma for remote teams; Sketch for macOS-centric designers.
• Project Complexity: Adobe XD for high-fidelity animations.
• Integration Needs: Adobe XD for Creative Cloud users.

Case Studies
Case Study 1: Startup MVP (Figma)
Challenge: A remote team needed to design a fitness app collaboratively.
Solution: Used Figma’s real-time editing and comments to iterate on wireframes.
Outcome: Reduced feedback cycle by 40%.

Case Study 2: Enterprise Dashboard (Sketch)

Challenge: A macOS-based team required consistent UI components.
Solution: Built a symbol library in Sketch for buttons, forms, and charts.
Outcome: Accelerated design-to-development handoff by 30%.

Exercises
1. Figma Task: Create a responsive website wireframe with a shared design system.
2. Sketch Task: Design a mobile app icon set using vector tools.
3. Adobe XD Task: Prototype a login screen with Auto-Animate transitions.

III. Low-Fidelity vs. High-Fidelity Prototypes

Introduction to Prototypes
Prototypes simulate the user experience of a product, allowing designers to test
functionality and
gather feedback. They range from rough, static sketches (low-fidelity) to polished,
interactive
models (high-fidelity).

1. Low-Fidelity Prototypes
Low-fidelity (low-fi) prototypes are simple, quick representations of a design, focusing
on structure
and flow rather than visual details.

Key Characteristics
• Visual Simplicity: Basic shapes, grayscale colors, placeholder text.
• Static Interaction: No animations or transitions (e.g., paper prototypes).
• Purpose: Validate concepts, test user flows, and gather early feedback.

Tools and Techniques

• Paper Prototyping: Hand-drawn sketches with annotations.
• Digital Tools: Balsamiq, Figma (wireframe mode), PowerPoint.
• Example: A paper sketch of a mobile app’s onboarding screens.

Case Study: E-Commerce Checkout Flow

Problem: Users abandon carts due to a confusing checkout process.

Solution:
• Created paper prototypes of the checkout steps.
• Conducted usability tests to identify pain points (e.g., unclear “Back” button).
• Iterated to streamline the flow from 5 steps to 3.

Best Practices
• Use thick markers to avoid over-detailing.
• Test with 5–8 users to identify major usability issues.
• Iterate rapidly based on feedback.

2. High-Fidelity Prototypes
High-fidelity (high-fi) prototypes are pixel-perfect, interactive models that mimic the
final product’s
look and feel.

Key Characteristics
• Visual Detail: Real content, typography, colors, and images.
• Dynamic Interaction: Animations, transitions, and micro-interactions.
• Purpose: Usability testing, stakeholder presentations, and developer handoff.

Tools and Techniques

• Design Tools: Figma, Adobe XD, Sketch + InVision.
• Example: A Figma prototype of a travel app with animated flight bookings.

Case Study: Fitness App Onboarding

Problem: Users found the onboarding process impersonal.

Solution:
• Built a high-fi prototype in Adobe XD with custom illustrations and smooth transitions.
• Added micro-interactions (e.g., progress bar animation).
• Conducted A/B testing to refine the tone of onboarding messages.

Best Practices
• Use design systems for consistency.
• Simulate real data (e.g., user names, product images).
• Test on actual devices (mobile/desktop).

When to Use Each

• Low-Fi:
Brainstorming sessions.
Validating navigation flows.
Early stakeholder alignment.
• High-Fi:
Testing visual hierarchy.
Demonstrating interactions to clients.
Developer handoff.

Exercises
1. Low-Fi Task: Sketch a paper prototype for a food delivery app’s menu screen.
2. High-Fi Task: Design an interactive prototype for a weather app in Figma, including
tran-
sitions between daily and weekly views.
3. Comparative Test: Test the same feature (e.g., signup flow) with low-fi and high-fi
proto-
types. Document differences in feedback.

IV. Interaction Design Principles

Introduction to Interaction Design

Interaction Design (IxD) focuses on creating intuitive, efficient, and delightful user
experiences by
defining how users interact with digital products. This section covers core principles and
their
practical application.

1. Key Interaction Design Principles

1.1 Consistency
Definition: Maintain uniformity in design patterns, terminology, and behaviors across
the product.
Why It Matters: Reduces cognitive load and learning curve.
Examples:
• Use the same button style (color, padding) for all primary actions.
• Keep navigation menus in identical locations across screens.
1.2 Feedback
Definition: Provide immediate responses to user actions.
Why It Matters: Confirms that the system has registered the interaction.
Examples:
• A button changes color on hover.
• A loading spinner appears during data processing.
1.3 Affordances
Definition: Design elements should suggest their functionality.
Why It Matters: Users intuitively understand how to interact with UI components.
Examples:
• A raised 3D effect indicates a button is clickable.
• A scrollbar implies content overflow.
1.4 Error Prevention & Recovery
Definition: Minimize user errors and provide clear recovery paths.
Why It Matters: Reduces frustration and abandoned tasks.
Examples:
• Warn before deleting critical data (e.g., ”Are you sure?”).
• Autosave drafts to recover from accidental closure.
1.5 User Control
Definition: Empower users to undo/redo actions or customize workflows.
Why It Matters: Enhances trust and satisfaction.
Examples:
• ”Cancel” option during a multi-step process.
• Dark mode toggle in app settings.
1.6 Flexibility
Definition: Support multiple interaction methods (e.g., keyboard shortcuts, touch).
Why It Matters: Accommodates diverse user preferences and abilities.
Examples:
• Allow form submission via ”Enter” key or button click.
• Provide gesture-based navigation (swipe left/right).

2. Case Studies
Case Study 1: Banking App Error Messages
Problem: Users repeatedly entered invalid passwords without understanding why.
Solution:
• Added real-time feedback: ”Password must include a number.”
• Highlighted the invalid field in red.
Outcome: Reduced login failures by 60%.
Case Study 2: E-Commerce Checkout Flow
Problem: High cart abandonment due to hidden ”Continue Shopping” options.
Solution:
• Added a sticky ”Back to Cart” button during checkout.
• Used breadcrumbs to show progress (Step 1 of 3).
Outcome: Increased conversions by 25%.

3. Principles in Practice: Comparison Table

4. Best Practices
• Prioritize user goals over aesthetic trends.
• Test interactions with real users early and often.
• Document interaction patterns in a style guide.

5. Common Mistakes
• Inconsistent button styles across screens.
• Delayed feedback (e.g., no loading indicator).
• Overloading users with irreversible actions.

6. Exercises
1. Feedback Exercise: Redesign a file upload interaction to include progress tracking.
2. Affordance Exercise: Sketch a mobile screen where a ”swipe” gesture is the primary
navi-
gation.
3. Error Handling Exercise: Prototype a form with inline validation using Figma.

V. Prototyping Tools and Techniques

Introduction to Prototyping
Prototyping transforms static designs into interactive models, enabling designers to
simulate user
experiences, test functionality, and gather actionable feedback. This section explores
tools and
techniques for creating low- to high-fidelity prototypes.

1. Prototyping Tools
1.1 Figma
Features:
• Interactive Components: Create dynamic buttons, toggles, and menus.
• Smart Animate: Auto-generate transitions between frames.
• Collaboration: Real-time co-editing and commenting.
Best For: Teams needing cloud-based collaboration and rapid iteration.
Example: A food delivery app prototype with animated cart interactions.

1.2 Adobe XD
Features:
• Auto-Animate: Smooth transitions between artboards.
• Voice Prototyping: Design voice-activated workflows.
• Repeat Grid: Quickly populate lists or grids with content.
Best For: High-fidelity animations and Adobe ecosystem integration.
Example: A travel booking prototype with parallax scrolling effects.
1.3 InVision
Features:
• Clickable Hotspots: Link static screens for basic flow testing.
• Design System Manager: Centralize UI components.
• User Testing: Built-in feedback collection.
Best For: Low-fi click-throughs and stakeholder reviews.
Example: A nonprofit website prototype for donor journey testing.
1.4 Axure RP
Features:
• Conditional Logic: Simulate login validation or form errors.
• Data-Driven Prototypes: Dynamic content using datasets.
• Documentation: Auto-generate specs for developers.
Best For: Complex enterprise applications with multi-step workflows.
Example: A banking app prototype with real-time balance updates.

2. Prototyping Techniques
2.1 Paper Prototyping
Purpose: Rapidly test ideas with minimal effort.
Steps:
1. Sketch screens on paper.
2. Use sticky notes for pop-ups or dynamic content.
3. Simulate interactions manually (e.g., flipping pages).
Example: Testing a mobile app’s navigation flow with hand-drawn screens.

2.2 Wireflow Prototyping

Purpose: Combine wireframes and user flows into a single diagram.
Tools: Miro, Lucidchart, FigJam.
Example: Mapping an e-commerce checkout process with decision points.
2.3 Interactive Digital Prototyping
Purpose: Simulate realistic user interactions.
Techniques:
• Micro-Interactions: Hover effects, loading animations.
• Transitions: Slide, fade, or zoom between screens.
Example: A fitness app prototype with animated workout progress tracking.
2.4 Functional Prototyping (Code-Based)
Purpose: Test advanced interactions or technical feasibility.
Tools: Framer, Webflow, ProtoPie.
Example: A smart home app prototype integrating live IoT device data.

3. Tool Comparison
4. Case Studies
Case Study 1: Healthcare App (Figma)
Problem: Users struggled with appointment booking.
Solution:
• Created a high-fi prototype with step-by-step animations.
• Tested transitions to reduce cognitive overload.
Outcome: Improved task completion rate by 35%.
Case Study 2: Retail Kiosk (Axure RP)
Problem: Needed to simulate payment errors for training.
Solution:
• Built a prototype with conditional logic (e.g., ”Insufficient funds”).
• Added touch gestures for kiosk interactions.
Outcome: Reduced training time by 50%.

5. Best Practices
• Start Simple: Begin with low-fi prototypes to validate flows.
• Annotate: Document interactions for developers.
• Test Iteratively: Refine based on user feedback.

6. Exercises
1. Paper Prototyping: Sketch and test a library app’s book search flow.
2. Figma Task: Create a clickable prototype for a music player’s UI.
3. Axure RP Task: Simulate a login flow with error handling.

VI. User Flow Design

Introduction to User Flow Design

User flow design maps the journey a user takes to accomplish a goal within a product. It
identifies
entry points, actions, decision paths, and endpoints, ensuring intuitive navigation and
reducing
friction. This section covers principles, tools, and techniques for creating effective user
flows.

1. Key Concepts
1.1 Definition and Purpose
User Flow: A visual representation of the steps a user follows to complete a task.
Purpose:
• Identify pain points in existing workflows.
• Align stakeholders on user pathways.
• Guide UI/UX design and development.
1.2 Elements of User Flows
• Entry Points: Where users begin (e.g., homepage, email link).
• Actions: Clicks, swipes, form submissions.
• Decision Points: Branches based on user choices (e.g., login vs. signup).
• Endpoints: Task completion or exit (e.g., confirmation screen).
1.3 Types of User Flows

2. Tools for User Flow Design

• Figma: Create flows with clickable prototypes and frames.
• Miro: Collaborative flowcharts with sticky notes and templates.
• Lucidchart: Advanced diagramming for complex workflows.
• FlowMapp: Dedicated user flow tool with persona integration.
Tool Comparison
3. Case Studies
Case Study 1: E-Commerce Checkout Redesign
Problem: High cart abandonment due to a 5-step checkout.
Solution:
• Mapped existing flow and identified redundant steps.
• Redesigned flow to 3 steps with guest checkout option.
• Added progress indicators and error validation.
Outcome: Cart abandonment reduced by 30%.
Case Study 2: Banking App Fund Transfer
Problem: Users struggled to navigate multi-account transfers.
Solution:
• Created a task flow with clear decision points (e.g., account selection).
• Added a confirmation summary step with edit options.
Outcome: Transfer success rate increased by 45%.
4. Best Practices
• Start Simple: Outline key steps before adding details.
• User-Centric: Base flows on personas and user research.
• Iterate: Validate flows with usability testing.
• Document Annotations: Note edge cases (e.g., ”Handle invalid PIN entry”).

5. Common Mistakes
• Overcomplicating flows with unnecessary branches.
• Ignoring error states and recovery paths.
• Failing to align flows with business goals.

6. Exercises
1. Task Flow Exercise: Map a user flow for booking a doctor’s appointment via a
healthcare
app.
2. Wire Flow Exercise: Use Figma to link wireframes for a hotel booking flow.
3. Redesign Exercise: Analyze Spotify’s ”Create Playlist” flow and propose
improvements.

VII. Basic Interaction and Animation Principles

Introduction to Interaction and Animation

Interaction and animation are essential components of modern user interfaces,
enhancing usability,
engagement, and feedback. This section explores the foundational principles and
techniques for
designing effective interactions and animations.

1. Interaction Design Principles

1.1 Feedback
Definition: Provide immediate responses to user actions.
Why It Matters: Confirms that the system has registered the interaction.
Examples:
• A button changes color on hover.
• A loading spinner appears during data processing.

1.2 Consistency
Definition: Maintain uniformity in design patterns, terminology, and behaviors.
Why It Matters: Reduces cognitive load and improves usability.
Examples:
• Use the same button style for all primary actions.
• Keep navigation menus in identical locations across screens.
1.3 Affordances
Definition: Design elements should suggest their functionality.
Why It Matters: Users intuitively understand how to interact with UI components.
Examples:
• A raised 3D effect indicates a button is clickable.
• A scrollbar implies content overflow.
1.4 User Control
Definition: Empower users to undo/redo actions or customize workflows.
Why It Matters: Enhances trust and satisfaction.
Examples:
• ”Cancel” option during a multi-step process.
• Dark mode toggle in app settings.

2. Animation Principles
2.1 Purpose of Animation
• Feedback: Confirm user actions (e.g., button press animation).
• Transitions: Guide users between states (e.g., page transitions).
• Engagement: Delight users with subtle motion (e.g., hover effects).
2.2 Timing and Easing
Timing: Duration of animations (e.g., 300ms for button hover).
Easing: Speed curve of animations (e.g., ease-in, ease-out).
Examples:
• A modal window slides in with an ease-out curve.
• A button press animation lasts 200ms.

2.3 Micro-Interactions
Definition: Small, functional animations that enhance usability.
Examples:
• A heart icon animates when ”liked.”
• A progress bar fills as a file uploads.
2.4 Choreography
Definition: Coordinating multiple animations to create a cohesive experience.
Examples:
• A card expands while surrounding content fades out.
• A menu slides in as the background dims.
3. Tools for Interaction and Animation
3.1 Figma
Features:
• Smart Animate: Auto-generates transitions between frames.
• Interactive Components: Create dynamic buttons, toggles, and menus.
Example: A button that changes color on hover and click.
3.2 Adobe XD
Features:
• Auto-Animate: Smooth transitions between artboards.
• Voice Prototyping: Design voice-activated workflows.
Example: A travel booking prototype with parallax scrolling effects.
3.3 Principle
Features:
• Timeline-Based Animation: Fine-tune animation timing.
• Driver-Based Interactions: Link animations to scroll or drag gestures.
Example: A swipeable carousel with smooth transitions.

4. Case Studies
Case Study 1: E-Commerce Add-to-Cart Animation
Problem: Users were unsure if items were added to their cart.
Solution:
• Added a micro-interaction: The cart icon animates (bounces) when an item is added.
• Displayed a toast notification: ”Item added to cart.”
Outcome: Increased user confidence and reduced duplicate orders.
Case Study 2: Fitness App Progress Tracking
Problem: Users found progress tracking uninspiring.
Solution:
• Added animated progress bars with easing effects.
• Celebratory animations (e.g., confetti) when goals were achieved.
Outcome: Improved user engagement and retention.
5. Best Practices
• Keep It Subtle: Avoid overwhelming users with excessive motion.
• Use Animation Purposefully: Every animation should serve a clear function.
• Test on Real Devices: Ensure animations perform well across platforms.

6. Exercises
1. Feedback Exercise: Design a button with hover and click animations in Figma.
2. Micro-Interaction Exercise: Create a loading spinner animation in Adobe XD.
3. Choreography Exercise: Prototype a card expansion with background dimming in
Principle.