Chapter 2 Chapter 2: Brainstorming and Planning with FigJam

2.1 What is a Wireframe?

A wireframe is a visual guide that represents the basic structure and layout of an app or website. It is like a blueprint for a building—it outlines where key elements will be placed but does not include final design details like colors, images, or animations. Wireframes help designers and developers plan the user interface (UI) and user experience (UX) before writing any code.

2.1.1 Why Wireframing is Important

Wireframing is a crucial step in app development because it allows designers to:

1. Organize the Structure of the App

Wireframes help define the placement of buttons, text fields, images, and menus so that the app is well-organized.
Designers ensure that users can navigate easily and find what they need without confusion.

2. Save Time and Resources

Wireframing prevents unnecessary design changes later by solving layout issues early.
Developers can build the app faster when they have a clear layout to follow.

3. Improve Usability

Wireframes focus on functionality and navigation, ensuring that users can complete tasks quickly.
Testing wireframes before designing prevents confusing layouts or difficult navigation.

4. Encourage Feedback and Collaboration

Designers can share wireframes with others to gather feedback before moving to the next step.
Team members can suggest improvements to make the app more user-friendly.

2.1.2 What Does a Wireframe Look Like?

A wireframe is a simplified version of an app screen. It uses basic shapes (rectangles, circles, lines) to represent elements like:

Navigation menus (represented by horizontal lines or boxes).
Buttons (shown as rectangles with text labels).
Images or icons (represented as squares or circles with an “X” inside).
Text fields (indicated by a blank box with a label above it).

Wireframes do not include colors, images, or detailed designs—they focus on the layout and functionality of the app.

2.1.3 Key Components of a Wireframe

Each wireframe consists of several important UI elements that define how users will interact with the app.

Element	Description	Symbol in Wireframes
Navigation Bar	A menu that allows users to move between different app screens.	🔲 A horizontal rectangle with menu options inside.
Buttons	Clickable elements that perform actions.	🔳 Rectangles with text labels like “Login” or “Submit.”
Text Fields	Input areas where users enter text (e.g., login credentials).	⬜ Blank rectangles with labels above.
Images/Icons	Visual elements that enhance the app’s look and feel.	⬛ Boxes with an “X” inside to indicate an image.
Headings and Labels	Titles that explain the purpose of a section or screen.	📄 Lines representing text.

🔹 Example: A wireframe for a music app home screen might include:

A search bar at the top.
A list of song categories (e.g., Pop, Rock, Jazz).
A play button and a next button for music control.

2.1.4 Types of Wireframes

Wireframes can be divided into three levels based on their complexity and detail:

1. Low-Fidelity Wireframes (Basic Sketches)

Simple hand-drawn sketches or digital layouts with rough outlines.
Focuses on screen structure without details like fonts or colors.
Used in early stages of app development.
Example: A rough sketch of a login page showing a username field, password field, and a login button.

2. Mid-Fidelity Wireframes (Digital Mockups)

Created using design tools like FigJam with more defined elements.
Includes consistent spacing, better alignment, and labeled buttons.
Used when refining ideas and gathering feedback.

3. High-Fidelity Wireframes (Detailed Layouts)

More polished and structured designs with text, spacing, and icons.
Prepared for final UI design and prototyping.
Usually created in Figma, moving toward a realistic app model.

🔹 In this chapter, students will focus on low-fidelity wireframes using FigJam before moving to high-fidelity designs in Figma.

2.1.5 Wireframes vs. Final UI Design

Many students confuse wireframes with final UI designs. Here’s how they compare:

Feature	Wireframe	Final UI Design
Purpose	Focuses on layout and functionality.	Adds colors, fonts, and interactive elements.
Design Details	Uses only basic shapes and labels.	Includes images, animations, and branding.
Created With	FigJam, hand sketches, or basic tools.	Figma, Photoshop, or coding.
Example	A black-and-white sketch of a login screen.	A fully designed login page with icons, shadows, and colors.

🔹 Tip: Wireframing should always come before UI design to ensure the app’s layout and structure make sense before adding final visual details.

2.1.6 How Wireframes Fit Into the App Development Process

Wireframing is a crucial step in app development. It happens after brainstorming but before prototyping and coding.

Step-by-Step App Development Process:

Brainstorming (Ideation) → Coming up with an app idea.
Wireframing (FigJam) → Planning the app’s screen layout.
Prototyping (Figma) → Creating a clickable model.
Development (Coding) → Building the actual app.

🔹 Skipping wireframing can lead to design mistakes, making the app harder to use.

2.1.7 Hands-On Activity: Understanding Wireframes

To better understand wireframes, students will complete the following interactive activity.

Activity: Reverse-Engineer a Wireframe

Choose a popular app (e.g., Instagram, YouTube, Google Docs).
Look at the app’s layout – Where are the buttons, menus, and navigation bars?
Create a wireframe of the app’s home screen in FigJam.
Label the elements (e.g., “Search Bar,” “Like Button,” “Profile Icon”).
Present your wireframe to the class and discuss any challenges.

🔹 Goal: Learn to break down an app’s structure and understand why wireframing is useful.

2.1.8 Real-World Example: How Wireframing Helped Airbnb

Many successful apps use wireframing before launching. Airbnb, a popular travel app, started with simple black-and-white wireframes to plan how users would search for locations, book rooms, and filter listings.

By testing their wireframes, they discovered:
✔ Users wanted a more prominent search bar at the top of the screen.
✔ The booking button needed to be bigger and easier to find.
✔ Filtering options were confusing, so they simplified them.

💡 Lesson: Even big companies use wireframes to improve app usability before designing final UI elements.

Conclusion

🔹 Key Takeaways:
✅ A wireframe is a blueprint for an app’s layout and navigation.
✅ It helps plan the app’s structure before designing UI elements.
✅ Wireframes can be low-fidelity, mid-fidelity, or high-fidelity.
✅ They are essential for saving time, organizing features, and improving usability.

Next Steps

Now that students understand wireframing, the next section will cover how to plan an app’s layout using FigJam before moving on to prototyping in Figma.

2.2 Types of Wireframes

Wireframes are an essential part of the app design process because they help structure the app’s interface and user experience (UX) before adding visual elements and interactive features. There are different types of wireframes based on their level of detail, complexity, and purpose.

In this section, we will explore the three main types of wireframes: low-fidelity, mid-fidelity, and high-fidelity wireframes. Each type serves a specific purpose and is used at different stages of the design process.

2.2.1 Low-Fidelity Wireframes

What Are Low-Fidelity Wireframes?

Low-fidelity wireframes (often called lo-fi wireframes) are basic sketches that represent the structure of an app’s layout. They focus on the overall organization of elements, such as where the buttons, text fields, images, and menus will be placed.

Low-fidelity wireframes are often drawn on paper or created using simple digital tools like FigJam, where designers can quickly create and adjust layouts.

Key Characteristics of Low-Fidelity Wireframes:

✔ Simple shapes (rectangles, circles, and lines) represent UI elements.
✔ No detailed text, colors, or final graphics—just placeholders.
✔ Focuses only on layout and screen structure.
✔ Used in the early planning phase to organize ideas quickly.

Why Use Low-Fidelity Wireframes?

They allow designers to brainstorm multiple ideas quickly.
They help identify major usability issues before moving to detailed design.
They make it easier to collect feedback and make fast changes.
They ensure that the basic structure of the app is correct before investing time in detailed UI design.

Example of a Low-Fidelity Wireframe: A To-Do List App

Imagine designing a simple to-do list app. A low-fidelity wireframe for the home screen might include:

A header section with the app’s title.
A text input field for adding a new task.
A list of tasks represented by horizontal lines.
A delete button next to each task.

🔹 Tip: When creating low-fidelity wireframes, think about functionality rather than aesthetics. The goal is to map out the user experience before focusing on the design details.

2.2.2 Mid-Fidelity Wireframes

What Are Mid-Fidelity Wireframes?

Mid-fidelity wireframes (mid-fi wireframes) are more refined digital versions of low-fidelity wireframes. They include better spacing, alignment, and labels, but still avoid colors and final design elements.

These wireframes help teams define the user interface (UI) and user experience (UX) in more detail while keeping the design flexible.

Key Characteristics of Mid-Fidelity Wireframes:

✔ Created using design tools like FigJam or Figma rather than hand-drawn sketches.
✔ Includes more refined text and layout organization.
✔ Uses placeholder images and icons (instead of detailed graphics).
✔ Focuses on interaction flow and usability, ensuring buttons and screens are properly linked.

Why Use Mid-Fidelity Wireframes?

They help designers define how users will interact with different elements.
They provide a clearer representation of the app’s structure while still allowing changes.
They make it easier to collaborate with teams and stakeholders.
They allow for early user testing, where people can review and suggest improvements.

Example of a Mid-Fidelity Wireframe: A Music Streaming App

A mid-fidelity wireframe for a music app’s home screen might include:

A search bar at the top.
A list of recommended songs displayed in placeholder rectangles.
A play button and skip button at the bottom.
A navigation bar with icons for “Home,” “Library,” and “Profile.”

🔹 Tip: Mid-fidelity wireframes are great for getting feedback from testers and refining ideas before finalizing the UI design.

2.2.3 High-Fidelity Wireframes

What Are High-Fidelity Wireframes?

High-fidelity wireframes (hi-fi wireframes) are detailed digital representations of an app’s user interface. These wireframes look much closer to the final design, often including real text, buttons, images, icons, and branding elements.

They are created in Figma or other advanced UI design tools and serve as the final step before full prototyping and coding.

Key Characteristics of High-Fidelity Wireframes:

✔ Includes real UI elements, such as icons, buttons, and sample content.
✔ Uses proper spacing, typography, and alignment.
✔ Often grayscale (black and white) but includes real UI components.
✔ Helps teams prepare for the prototyping stage.

Why Use High-Fidelity Wireframes?

They closely resemble the final product, making it easier to spot issues.
They are used for user testing before finalizing the UI design.
They provide detailed guidance for developers when coding the app.

Example of a High-Fidelity Wireframe: A Shopping App

A high-fidelity wireframe for a shopping app’s product page might include:

A large product image placeholder with a price below it.
A “Buy Now” button with a call-to-action label.
A description section with real text instead of a blank box.
A review section with sample user reviews and star ratings.

🔹 Tip: High-fidelity wireframes should be reviewed by both designers and developers to ensure they align with the planned app functionality.

2.2.4 Comparing Wireframe Types

Here’s a side-by-side comparison of the three wireframe types:

Feature	Low-Fidelity Wireframe	Mid-Fidelity Wireframe	High-Fidelity Wireframe
Purpose	Rough sketch to organize layout	More refined structure and usability	Detailed digital layout close to final design
Created With	Paper, FigJam	FigJam, Figma	Figma, Adobe XD
Includes Colors?	❌ No	❌ No	✅ Sometimes (but often grayscale)
Uses Placeholder Text?	✅ Yes	✅ Yes	❌ No (uses real text)
Includes Images?	❌ No (boxes instead)	✅ Placeholder images	✅ Real or near-final images
Best For	Early planning and brainstorming	Usability testing and refining layouts	Finalizing layouts before UI design and coding

🔹 Tip: Start with low-fidelity wireframes to plan your ideas, then refine them into mid-fidelity and high-fidelity wireframes as your project develops.

2.2.5 Which Wireframe Type Should You Use?

Choosing the right wireframe depends on the stage of your project:

1️⃣ Use Low-Fidelity Wireframes when brainstorming ideas or sketching layouts quickly.
2️⃣ Use Mid-Fidelity Wireframes when refining your UI structure and usability.
3️⃣ Use High-Fidelity Wireframes when preparing for prototyping and development.

2.2.6 Hands-On Activity: Creating Different Wireframes

Activity: Design an App Wireframe in Different Levels

Choose an app idea (e.g., a fitness tracker, note-taking app, or budgeting tool).
Create a low-fidelity wireframe (simple layout, no details).
Convert it into a mid-fidelity wireframe (add structure and labels).
If time allows, refine it into a high-fidelity wireframe (add text and icons).
Share your wireframe versions and compare them with classmates.

🔹 Goal: Understand how wireframe complexity evolves as an app design progresses.

Conclusion

🔹 Key Takeaways:
✅ Wireframes help structure an app before adding visual details.
✅ Low-fidelity wireframes focus on basic layout and functionality.
✅ Mid-fidelity wireframes refine the design with better spacing and labels.
✅ High-fidelity wireframes include real content and UI components for final review.

Next Steps

In the next section, students will use FigJam to create their own low-fidelity wireframes, preparing their app designs for high-fidelity UI development in Figma.

2.3 Planning an App Layout in FigJam

Before jumping into wireframing, it is important to plan the app’s layout to ensure a smooth user experience (UX). The planning process helps developers and designers determine what screens the app will need, how users will navigate between them, and what key features will be included.

In this section, students will learn how to use FigJam to plan their app’s structure, create screen layouts, and map out the user journey.

2.3.1 Why Planning an App Layout is Important

Planning an app layout before designing it in detail helps to:

✔ Define the app’s structure – Ensures all necessary screens are included.
✔ Improve user experience – Organizes features in a way that is easy to use.
✔ Avoid design mistakes – Prevents unnecessary revisions later.
✔ Make collaboration easier – Helps teams work together with a clear plan.

Skipping the planning stage can lead to confusing navigation, missing features, or an inefficient design.

2.3.2 Key Questions to Ask Before Planning

Before creating a wireframe, students should ask themselves the following questions to define their app’s purpose and structure:

1. What problem does the app solve?

Is it an educational app? A productivity tool? A social media app?
Example: A homework planner app helps students stay organized with assignments.

2. Who are the target users?

Kids, teenagers, adults, business professionals, gamers, etc.?
Example: A fitness app for teenagers might have gamified rewards for workout completion.

3. What are the key features?

What functionalities must be included for the app to be useful?
Example: A budgeting app should allow users to track income and expenses.

4. How will users navigate through the app?

Will there be a bottom navigation bar, a hamburger menu, or a simple back-and-forward system?
Example: A music streaming app might have a bottom navigation bar with “Home,” “Search,” and “Library” buttons.

2.3.3 Identifying Essential Screens

Every app consists of multiple screens that guide the user through different functions. Some common types of app screens include:

Screen Name	Purpose	Examples
Splash Screen	First screen shown when the app opens.	App logo, loading animation.
Login/Signup Screen	Allows users to log in or create an account.	Username, password, sign-in button.
Home Screen	Central hub for app functions.	Task lists, feed, main content.
Profile Screen	Displays user information.	Profile picture, settings, personal info.
Settings Screen	Allows users to adjust preferences.	Dark mode toggle, notifications, language selection.

💡 Tip: Most apps need a Home Screen, a way to navigate, and at least one functional page to serve its purpose.

2.3.4 Using FigJam to Plan an App Layout

Step 1: Open a New FigJam File

Go to figma.com and log in.
Click “New FigJam File” to start a blank workspace.
Name the file “[Your App Name] Layout Plan”.

Step 2: Create a User Flow Diagram

A user flow diagram visually represents how users will navigate the app.

Use sticky notes in FigJam to list the main screens.
Connect them with arrows to show how users move from one screen to another.
Example:
- Login → Home Screen → Profile
- Home Screen → Settings → Back to Home

Example User Flow for a Shopping App:

1️⃣ Splash Screen → 2️⃣ Login Page → 3️⃣ Home Page
⬇
4️⃣ Product Page → 5️⃣ Cart → 6️⃣ Checkout

💡 Tip: Keep the flow simple and easy to understand. Avoid unnecessary screens that complicate navigation.

2.3.5 Sketching the Layout with Wireframe Elements

Once the user flow is mapped out, it’s time to sketch the basic layout of each screen.

Step 1: Create a Wireframe for the Home Screen

Use rectangles and lines to outline where elements will go.
Label key components like the header, navigation bar, and content area.
Keep spacing even and elements aligned for clarity.

Step 2: Add Common UI Elements

UI Element	Purpose	FigJam Representation
Header	Displays app title or user info.	🔲 Rectangle at the top.
Buttons	Used to interact with the app.	🔳 Small rectangles with labels.
Navigation Bar	Allows movement between screens.	📄 Row of icons at the bottom.
Text Fields	Where users enter information.	⬜ Blank rectangles with labels.

Example: FigJam Wireframe for a Weather App

🔲 Search Bar at the top for entering city names.
🌥 Current Weather Display in the middle of the screen.
📅 Weekly Forecast List below.
📍 Location Button in the bottom corner.

2.3.6 Best Practices for Planning an App Layout

✔ Prioritize Important Information – Key content should be at the top of the screen.
✔ Keep Navigation Simple – Users should always know how to move between screens.
✔ Use Consistent Design Patterns – Buttons, menus, and icons should follow a uniform style.
✔ Think About Screen Size – Ensure layouts are mobile-friendly.

Common Mistakes to Avoid

✘ Overloading the screen with too many elements – Keep it simple and focused.
✘ Forgetting a way to navigate back – Every screen should have a way to return to the previous one.
✘ Ignoring user habits – Place frequently used buttons where users expect them (e.g., bottom navigation).

2.3.7 Hands-On Activity: Planning Your Own App Layout

Activity: Design a User Flow and Wireframe for a New App

Choose an app concept (e.g., a study planner, fitness tracker, or game).
In FigJam, create a user flow diagram showing how users navigate the app.
Sketch wireframes for at least three screens using basic shapes.
Label the buttons, text fields, and navigation elements.
Present your wireframes and explain your design decisions to the class.

🔹 Goal: Understand how planning a layout improves app usability before full design.

2.3.8 Real-World Example: How FigJam Helped Plan a Successful App

🔹 Case Study: How Airbnb Uses Wireframes for UX Design

When Airbnb redesigned their app, they started with user flow diagrams in FigJam to map out the booking process.

Findings from Their Planning Process:

✔ Users wanted a simpler search bar at the top of the home screen.
✔ Many users got confused during the checkout process, so they streamlined it.
✔ They improved navigation by adding a clearer bottom menu.

Lesson: Even successful companies plan their layouts carefully before finalizing designs.

Conclusion

🔹 Key Takeaways:
✅ Planning an app layout organizes features and improves user experience.
✅ User flow diagrams help map out how users navigate the app.
✅ Wireframes in FigJam use basic shapes and labels to plan layouts efficiently.
✅ Good planning saves time, prevents design mistakes, and makes the app easier to use.

Next Steps

Now that students have planned their app layout, the next section will cover creating wireframes in FigJam with detailed UI elements before transitioning to high-fidelity designs in Figma.

2.4 Creating a Wireframe in FigJam

After planning the app layout, the next step is to create a low-fidelity wireframe in FigJam. A wireframe is a simple blueprint of the app’s screens, showing where key elements such as buttons, text fields, images, and navigation menus will be placed.

This section will guide students through the step-by-step process of creating wireframes in FigJam, ensuring they understand how to structure their app’s layout before moving to high-fidelity designs in Figma.

2.4.1 Why Use FigJam for Wireframing?

FigJam is a digital whiteboarding tool that allows designers to quickly sketch out wireframes, organize ideas, and collaborate in real-time. It is particularly useful for low-fidelity wireframing because:

✔ It provides drag-and-drop shapes for easy wireframe creation.
✔ It allows for quick edits and brainstorming before finalizing the layout.
✔ It enables team collaboration, making it easy to receive feedback.
✔ It offers a simple, distraction-free environment focused on structure.

🔹 Tip: FigJam is best for early-stage planning and wireframing, while Figma is used for high-fidelity design and prototyping.

2.4.2 Step-by-Step Guide to Creating a Wireframe in FigJam

Step 1: Set Up a New Wireframe File

Go to FigJam at figma.com and log in.
Click “New FigJam File” to start a blank workspace.
Name the file “[Your App Name] Wireframe”.

Step 2: Define the App Screens

Before placing elements, identify the key screens your app will need. Some common screens include:

Screen Name	Purpose	Key Elements
Home Screen	The main hub where users start.	App title, main content, menu.
Login Screen	Allows users to sign in.	Username, password, login button.
Profile Screen	Displays user information.	Profile image, settings, logout button.
Settings Screen	Lets users adjust preferences.	Notifications, privacy, theme options.

🔹 Tip: Start with 2-3 screens to keep the wireframe simple.

Step 3: Create a Basic Wireframe Structure

Now, begin sketching the layout of each screen using FigJam’s built-in tools.

1️⃣ Use Rectangles for Screen Layout

Click on the “Shapes” tool (square icon) and select a rectangle.
Resize it to represent a mobile screen.
Copy and paste multiple rectangles to create additional screens.

2️⃣ Add UI Components

Use smaller rectangles for buttons and input fields.
Use lines to separate sections (e.g., header, content area, footer).
Use circles for profile images or icons.

3️⃣ Label the Elements

Click “Text” tool (T) and add labels like “Login,” “Search Bar,” “Submit Button.”
Keep labels short and clear.

4️⃣ Connect Screens with Arrows

Use the “Arrow” tool to show how users move from one screen to another.
Example: Clicking “Login” should take the user to the Home Screen.

🔹 Example: A wireframe for a food delivery app

🏠 Home Screen: Restaurant list, search bar, bottom navigation bar.
🛒 Cart Screen: List of items, total price, checkout button.
📍 Order Tracking Screen: Map, estimated delivery time, driver details.

Step 4: Organizing the Wireframe for Clarity

✔ Align elements properly – Keep spacing even and use a grid layout.
✔ Group related elements together – Buttons should be close to the actions they trigger.
✔ Maintain consistency across screens – Headers, footers, and buttons should look similar.

Common Mistakes to Avoid

✘ Too many elements on one screen – Keep the design clean and simple.
✘ Inconsistent button placement – Users should find navigation easy.
✘ Forgetting to label components – Make sure every UI element has a clear function.

2.4.3 Example: Creating a Wireframe for a Fitness Tracker App

Let’s say a student is designing a fitness tracker app. Here’s how the wireframe might be structured:

1️⃣ Home Screen

🔲 Step Counter (shows number of steps taken).
🔲 Start Workout Button (activates tracking).
🔲 Navigation Bar (buttons for Home, Stats, Profile).

2️⃣ Stats Screen

📊 Progress Graph (shows calories burned).
📅 Workout History (list of past workouts).
🕒 Total Active Time (summary of time spent exercising).

3️⃣ Profile Screen

👤 User Profile Picture (editable).
⚙ Settings Button (change preferences).
🔄 Sync with Smartwatch (toggle on/off).

Students will use FigJam to create these wireframes step by step, ensuring all elements are well-organized and functional.

2.4.4 Wireframing Best Practices in FigJam

✔ Start with simple shapes – Focus on layout, not design details.
✔ Use labels and arrows – Make wireframes easy to understand.
✔ Keep spacing even – Elements should be well-aligned.
✔ Use placeholder text – Avoid detailed content in the wireframe stage.
✔ Iterate based on feedback – Adjust the wireframe after testing.

2.4.5 Hands-On Activity: Create a Low-Fidelity Wireframe in FigJam

Activity: Design Your First Wireframe

Choose an app idea (e.g., note-taking app, calendar app, or workout tracker).
Open FigJam and create at least three app screens:
- A Home Screen
- A Feature Screen (e.g., Task List, Fitness Tracking)
- A Settings Screen
Use rectangles, circles, and lines to outline buttons, text fields, and images.
Label each component to make the wireframe clear.
Connect the screens using arrows to show navigation flow.
Present your wireframe to the class and explain your design choices.

🔹 Goal: Learn to map out an app’s structure and navigation before adding final design elements.

2.4.6 Real-World Example: How FigJam Wireframes Improve App Design

🔹 Case Study: Instagram’s Early Wireframes
When Instagram was first developed, the team used basic wireframes to plan how users would:

Upload photos
Scroll through a feed
Like and comment on posts

Their early wireframes helped them refine the user experience, making sure the app was simple and easy to navigate before focusing on the visual design.

📌 Lesson: Even the biggest apps start with simple wireframes to test ideas before committing to a final design.

Conclusion

🔹 Key Takeaways:
✅ Wireframes help visualize an app’s structure before adding design details.
✅ FigJam makes wireframing simple, allowing for quick adjustments.
✅ A well-organized wireframe improves navigation and usability.
✅ Starting with wireframes saves time and prevents design mistakes.

Next Steps

Now that students have created low-fidelity wireframes in FigJam, the next step is to refine their designs into high-fidelity prototypes in Figma, adding colors, icons, and interactive elements.

2.6 Activities and Reflection

Activity 1: Use FigJam to brainstorm an app idea with your classmates. Organize your ideas into categories such as features, design, and challenges. Discuss how these ideas address user needs.
Activity 2: Create a detailed user journey map for a simple app concept, identifying key touchpoints and user actions. Use FigJam’s templates to streamline your workflow.

Reflection: Write a short essay on how brainstorming clarified your app’s purpose and improved your team’s collaboration. Discuss specific ideas or insights that emerged during the session.

2.7 Chapter Recap

In this chapter, we explored the importance of brainstorming and planning in app development. You learned how to use FigJam’s tools and features to generate and organize ideas, map user journeys, and outline app navigation. By mastering brainstorming techniques, you are now equipped to create a solid foundation for your app designs. The next step involves turning these ideas into tangible designs using Figma, which we’ll cover in the following chapter.

Terms and Definitions

Term	Definition
Wireframe	A simple blueprint or sketch of an app’s layout that outlines structure and navigation before adding visual design.
Low-Fidelity Wireframe	A basic sketch of an app’s layout using simple shapes and placeholders, without colors or detailed UI elements.
Mid-Fidelity Wireframe	A more refined wireframe that includes better spacing, labels, and structure but still lacks final colors and images.
High-Fidelity Wireframe	A detailed wireframe that closely resembles the final app design, including fonts, real text, and structured UI elements.
User Flow Diagram	A visual representation of how users move through an app, showing navigation paths and interactions.
Navigation	The way users move between different screens and features within an app.
Placeholder	A temporary shape or text used in wireframes to indicate where elements like images, buttons, or text fields will be placed.
FigJam	A digital whiteboarding tool used for brainstorming, user flow diagrams, and creating low-fidelity wireframes.
Screen Layout	The arrangement of elements on an app screen, including buttons, text fields, and images.
User Experience (UX)	The way users feel when interacting with an app, focusing on ease of navigation and efficiency.
Navigation Bar	A UI component that allows users to switch between different sections of an app.
Prototype	An interactive model of an app that simulates user interactions before actual coding begins.
Hierarchy	The organization of UI elements in a way that prioritizes important information and guides the user’s attention.
User Testing	The process of gathering feedback from users to improve an app’s usability before final development.
Grid Layout	A structured way of arranging UI elements in a wireframe to ensure alignment and consistency.
Call-to-Action (CTA)	A button or link that encourages users to take a specific action, such as “Sign Up” or “Buy Now.”
Consistency	Keeping design elements like buttons, colors, and menus uniform across all screens to improve usability.
Labeling	Adding text descriptions to UI elements in a wireframe to clarify their function.
Interaction Flow	The sequence of actions a user takes when using an app, represented in a wireframe or user flow diagram.
Iteration	The process of refining a wireframe or design based on feedback and testing.