Wireframes

How It Works

A black & white sketch of a page’s interface

Role

Industry

Duration

Wireframes in UX Design: What They Are and Necessary Steps

A Wireframe helps us understand the main concept we will design, the structure of the system, and user flows. We use Wireframes at the start of the design process to collect feedback about the system structure before adding color, animations, and graphic elements

What Are Wireframes?

Wireframes are simplified visual representations of a user interface's layout or structure. They act as the skeleton of a design, helping teams plan and organize content before adding visual details.

Wireframes help to:

1. Communicate Ideas: Share design concepts quickly and clearly.

2. Validate Flows: Test and refine navigation and functionality.

3. Save Time: Identify and resolve structural issues early on.

Wireframes in UX Design: What They Are and Necessary Steps

What Are Wireframes?

Wireframes are simplified visual representations of a user interface's layout or structure. They act as the skeleton of a design, helping teams plan and organize content before adding visual details.

Wireframes help to:

1. Communicate Ideas: Share design concepts quickly and clearly.

2. Validate Flows: Test and refine navigation and functionality.

3. Save Time: Identify and resolve structural issues early on.

Techniques for Sketching and Layout Design

Define the Goals for Your Wireframe
1. Determine the purpose of the wireframe:
  - What is the main action users need to perform?
  - What information should be prioritized?
2. Examples:Highlight the reservation flow for a restaurant.
3. Showcase key restaurant features like ratings or availability.
Choose the Level of Fidelity
1. Low-Fidelity: Simple, hand-drawn sketches or basic wireframes with minimal detail, focusing on structure and flow.
2. High-Fidelity: Detailed designs, typically created with digital tools, showing more accurate layouts.
Start Sketching
1. Begin on paper or a whiteboard to explore ideas freely.
2. Use basic shapes (rectangles, circles) to represent buttons, images, or text areas.
3. Focus on layout hierarchy, ensuring the most critical elements stand out.
Apply Layout Best Practices
1. Use grids to align elements for consistency.
2. Break the interface into key sections: header, body, footer.
3. Create a clear visual hierarchy for content, prioritizing the user's needs

Exercise: Design Low-Fidelity Wireframes in Figma for a Restaurant Booking App

Step 1: Set Up the Project

Open Figma and create a new file.
Add artboards for key screens: Home Page, Search, Booking Details.
Use a standard mobile resolution, like 375x812 px.

Step 2: Design the Key Screens

Home Page:

Include a header with space for the logo.
Add a search bar for users to look up restaurants.
Display categories in a horizontal grid (e.g., "Italian", "Sushi", "Vegetarian").

Search Page:

Add a filter bar with options like "Price Range" or "Location".
List restaurants in a card format: each card should have placeholders for an image, name, description, and a "Book Now" button.

Booking Details Page:

Create input fields for selecting the date, time, and number of guests.
Include a "Confirm Booking" button in a prominent position.

Step 3: Build Reusable Components

Turn frequently used elements like buttons and input fields into reusable Figma components.
Use placeholder text (e.g., "Restaurant Name" or "Enter Date") to simulate content.

Step 4: Test and Gather Feedback

Share your wireframe as a Figma prototype link for feedback.
Ask users or team members if the structure and flow are intuitive.
Iterate based on the feedback received.

Tips for Success

Start Simple: Focus on functionality and structure, leaving visuals for later.
Keep the User in Mind: Design layouts that reflect the user's journey and goals.
Collaborate: Use wireframes as a collaborative tool with developers, stakeholders, and users.

Steps to Create Wireframes for a Restaurant App in Figma

1. Set Up the Project in Figma

Open Figma: Create a new file.
Add Artboards: Insert frames (artboards) with a standard mobile size (e.g., 375x812 px).
Name the Frames: Label the frames as Home, Search, Booking Details, etc.

2. Design the Main Screens

Home Screen

Header: Add a rectangle for the logo.
Search Bar: Use a rectangular input box with placeholder text like “Search restaurants.”
Categories: Add buttons in a horizontal grid for categories (e.g., Italian, Sushi, Vegetarian).

Search Screen

Filters: Create a top bar for filters (e.g., Location, Price).
Results: Insert listing cards, each with space for an image, name, short description, and a "Book Now" button.

Booking Details Screen

Form: Add input fields for date, time, and the number of guests.
Primary Button: Create a prominent button for “Confirm Booking.”

3. Use Reusable Components

Convert frequently used elements (buttons, input fields) into Components in Figma.
This ensures consistency across screens and makes updates easier.

4. Refine and Gather Feedback

Prototype: Link the screens in Prototype mode to simulate user flow.
Share: Send the link to team members or users for feedback.
Iterate: Adjust the layout and structure based on the feedback received.

Exercise: Design Low-Fidelity Wireframes in Figma for a Restaurant Booking App

Step 1: Set Up the Project

Open Figma and create a new file.
Add artboards for key screens: Home Page, Search, Booking Details.
Use a standard mobile resolution, like 375x812 px.

Step 2: Design the Key Screens

Home Page:

Include a header with space for the logo.
Add a search bar for users to look up restaurants.
Display categories in a horizontal grid (e.g., "Italian", "Sushi", "Vegetarian").

Search Page:

Add a filter bar with options like "Price Range" or "Location".
List restaurants in a card format: each card should have placeholders for an image, name, description, and a "Book Now" button.

Booking Details Page:

Create input fields for selecting the date, time, and number of guests.
Include a "Confirm Booking" button in a prominent position.

Step 3: Build Reusable Components

Turn frequently used elements like buttons and input fields into reusable Figma components.
Use placeholder text (e.g., "Restaurant Name" or "Enter Date") to simulate content.

Step 4: Test and Gather Feedback

Share your wireframe as a Figma prototype link for feedback.
Ask users or team members if the structure and flow are intuitive.
Iterate based on the feedback received.

Tips for Success

Start Simple: Focus on functionality and structure, leaving visuals for later.
Keep the User in Mind: Design layouts that reflect the user's journey and goals.
Collaborate: Use wireframes as a collaborative tool with developers, stakeholders, and users.

Steps to Create Wireframes for a Restaurant App in Figma

1. Set Up the Project in Figma

Open Figma: Create a new file.
Add Artboards: Insert frames (artboards) with a standard mobile size (e.g., 375x812 px).
Name the Frames: Label the frames as Home, Search, Booking Details, etc.

2. Design the Main Screens

Home Screen

Header: Add a rectangle for the logo.
Search Bar: Use a rectangular input box with placeholder text like “Search restaurants.”
Categories: Add buttons in a horizontal grid for categories (e.g., Italian, Sushi, Vegetarian).

Search Screen

Filters: Create a top bar for filters (e.g., Location, Price).
Results: Insert listing cards, each with space for an image, name, short description, and a "Book Now" button.

Booking Details Screen

Form: Add input fields for date, time, and the number of guests.
Primary Button: Create a prominent button for “Confirm Booking.”

3. Use Reusable Components

Convert frequently used elements (buttons, input fields) into Components in Figma.
This ensures consistency across screens and makes updates easier.

4. Refine and Gather Feedback

Prototype: Link the screens in Prototype mode to simulate user flow.
Share: Send the link to team members or users for feedback.
Iterate: Adjust the layout and structure based on the feedback received.

Other projects

Figma

Figma is a cloud-based design tool for digital interfaces.

A/B Testing

AB testing is quantitative research method used to compare two versions of a web page or app interface to determine which one performs better.

Computing Basics

Computing Basics: HTML and CSS Fundamentals

Research Methods

Research Methods in UX Design: Understanding and Applying User Research

Visual Culture

Visual Culture in UX Design: Understanding and Applying Key Concepts

Prototyping

A sample version of the product which is released to a small number of end-users in order to test and approve the design. After a few versions of the prototype, we can come up with a product for sale.