Chapter 2
2.1 What is a Wireframe?
A wireframe is a visual guide that outlines the basic structure and layout of an app or website. Much like a blueprint for a building, it provides a general framework, showing where elements such as buttons, text fields, and menus will be placed—without including final design details like colors, images, or animations. Wireframes are used to plan the user interface (UI) and user experience (UX) before any coding begins.
2.1.1 Why Wireframing is Important
Wireframing plays a crucial role in app development. It helps organize content, identify potential layout issues early on, and improves the overall usability of the app. By starting with a wireframe, developers and designers can work together more effectively, making changes and adjustments based on feedback before investing time in high-fidelity design or development.
2.1.2 What Does a Wireframe Look Like?
Wireframes are simplified versions of app screens. They use basic shapes—rectangles, circles, and lines—to represent elements such as buttons, menus, and text fields. These shapes act as placeholders that map out where content will appear. For example, a rectangle might represent a button, a circle an icon, and a blank line a space for text. These early layouts focus entirely on structure and functionality rather than visual appeal.
2.1.3 Key Components of a Wireframe
Every wireframe includes essential UI elements that demonstrate how users will interact with the app. These include:
- Navigation bars: to move between app screens.
- Buttons: for user interaction.
- Text fields: for inputting information.
- Images/icons: shown as placeholder shapes.
- Headings and labels: to organize content areas.
For example, a wireframe for a music app home screen might include a search bar, a list of song categories, and play/skip buttons.
2.1.4 Types of Wireframes
Wireframes can be categorized into three types:
- Low-fidelity wireframes are quick sketches with minimal detail, used for early brainstorming.
- Mid-fidelity wireframes are more polished with defined spacing and labels.
- High-fidelity wireframes are detailed mockups that closely resemble the final design.
In this chapter, students will focus on creating low-fidelity wireframes using FigJam before moving to high-fidelity designs in Figma.
2.1.5 Wireframes vs. Final UI Design
Wireframes and final UI designs serve different purposes. Wireframes are used to plan layout and navigation, typically in grayscale and using simple shapes. Final UI designs include colors, fonts, images, and interactive elements. While wireframes are usually created in tools like FigJam or drawn by hand, UI designs are produced in tools like Figma or Photoshop. Wireframing should always come first to ensure the structure and usability of the app before adding design details.
2.1.6 How Wireframes Fit Into the App Development Process
Wireframing fits into the app development process after the brainstorming stage and before prototyping or coding. The typical order is:
- Brainstorming (Ideation) – Come up with the app idea.
- Wireframing (FigJam) – Create a visual plan for the layout.
- Prototyping (Figma) – Build an interactive model.
- Development (Coding) – Turn the prototype into a working app.
Skipping wireframing can lead to confusion, poor navigation, or missed features.
2.1.7 Hands-On Activity: Understanding Wireframes
Students will practice identifying the structure of popular apps by creating a low-fidelity wireframe. The steps are:
- Choose an app like Instagram or YouTube.
- Examine the layout of its home screen.
- Recreate it in FigJam using shapes and labels.
- Present the wireframe and explain design decisions.
This activity helps students see how apps are structured and how wireframes support user experience planning.
2.1.8 Real-World Example: How Wireframing Helped Airbnb
Airbnb began with simple wireframes that mapped out how users would search for listings, apply filters, and book rooms. These early layouts helped them identify and fix issues before final development. They made the search bar more visible, simplified booking steps, and improved filtering. This real-world use of wireframing demonstrates how important it is for usability and success.
2.2 Types of Wireframes
Wireframes help designers plan the user experience before adding color or functionality. They vary in complexity and are used at different stages of the design process.
2.2.1 Low-Fidelity Wireframes
Low-fidelity wireframes are quick, basic sketches that organize app content using simple shapes. They are usually drawn on paper or in FigJam and focus on layout, not appearance. These wireframes are useful for brainstorming and gathering feedback without worrying about visual details.
Example: A to-do list app might include a title bar, an input field for new tasks, a list of tasks, and delete buttons. All elements would be represented as labeled rectangles or lines.
2.2.2 Mid-Fidelity Wireframes
Mid-fidelity wireframes are more refined and typically created in digital tools. They include better spacing, alignment, and clearer labeling than low-fidelity wireframes. While they still use placeholder content, they offer more structure and are helpful for usability testing and team collaboration.
Example: A music streaming app might include a labeled search bar, album cover placeholders, and a navigation bar with icons.
2.2.3 High-Fidelity Wireframes
High-fidelity wireframes are detailed and closely resemble the final design. They include real text, spacing, fonts, and icons, though they may remain grayscale. These wireframes are created in Figma and are used before moving on to full development.
Example: A shopping app might include a product image, price, add-to-cart button, description text, and user reviews—all clearly labeled and positioned.
2.2.4 Comparing Wireframe Types
| Feature | Low-Fidelity | Mid-Fidelity | High-Fidelity |
|---|---|---|---|
| Created With | Paper, FigJam | FigJam, Figma | Figma |
| Visuals | Basic shapes | Placeholder content | Near-final UI |
| Colors | ❌ No | ❌ No | ✅ Sometimes |
| Text | Placeholder | Placeholder | Real content |
| Purpose | Brainstorming | Usability testing | Pre-development guide |
2.2.5 Which Wireframe Type Should You Use?
Use low-fidelity wireframes during brainstorming to map out ideas quickly. Move to mid-fidelity when refining layout and usability. Use high-fidelity wireframes to finalize UI structure before prototyping or development.
2.2.6 Hands-On Activity: Creating Different Wireframes
Students will choose an app idea and build it at three different fidelity levels:
- Start with a low-fidelity layout.
- Convert it to mid-fidelity with refined structure.
- If time allows, create a high-fidelity version with text and icons.
- Compare wireframes and discuss with classmates.
This activity illustrates how wireframe complexity increases as the app design progresses.
2.3 Planning an App Layout in FigJam
Before wireframing, it’s important to plan the app’s layout to avoid confusion and ensure all essential features are included. Planning involves deciding which screens the app will need and how users will navigate between them.
2.3.1 Why Planning an App Layout is Important
Planning helps define the app’s structure, improve user experience, avoid unnecessary changes later, and make collaboration easier.
2.3.2 Key Questions to Ask Before Planning
To begin planning, students should ask:
- What problem does the app solve?
- Who is the app for?
- What features does it need?
- How will users move between screens?
Answering these questions provides a clear foundation for building an effective layout.
2.3.3 Identifying Essential Screens
Most apps need a few core screens:
| Screen | Purpose |
|---|---|
| Splash Screen | Shows app logo or loading animation |
| Login/Signup | User account access |
| Home Screen | Main features and navigation |
| Profile | User info and settings |
| Settings | Adjust preferences like notifications or themes |
2.3.4 Using FigJam to Plan an App Layout
Students can use FigJam to create a user flow diagram showing how screens connect. Sticky notes represent screens, and arrows show navigation between them.
Example Flow:
Splash → Login → Home → Product Page → Cart → Checkout
2.3.5 Sketching the Layout with Wireframe Elements
Using rectangles and lines, students can create wireframes of each screen. Key elements include:
- Headers: Titles or app names.
- Buttons: For navigation or actions.
- Navigation Bars: For screen switching.
- Text Fields: For user input.
These elements should be evenly spaced and clearly labeled.
2.3.6 Best Practices for Planning an App Layout
- Place important content near the top.
- Keep navigation consistent and simple.
- Avoid overcrowding screens.
- Always include a way to go back.
2.3.7 Hands-On Activity: Planning Your Own App Layout
Students will choose an app idea, create a user flow diagram in FigJam, and sketch at least three wireframes. They will label key UI elements and present their designs to the class.
2.3.8 Real-World Example: How FigJam Helped Plan a Successful App
Airbnb used FigJam to plan their redesigned app layout. They discovered improvements such as simplifying the search bar, making checkout easier, and enhancing bottom navigation. This shows how valuable planning is to successful design.
2.4 Creating a Wireframe in FigJam
After planning, students move on to creating low-fidelity wireframes in FigJam. This involves defining screen layouts and showing how users will navigate the app.
2.4.1 Why Use FigJam for Wireframing?
FigJam makes it easy to sketch wireframes quickly, collaborate with others, and update layouts in real time. It’s a great tool for early-stage planning.
2.4.2 Step-by-Step Guide to Creating a Wireframe in FigJam
- Open a new FigJam file.
- Identify key screens: Home, Login, Profile, Settings.
- Use rectangles and shapes to represent screens and UI elements.
- Label components and use arrows to show navigation.
Example: A food delivery app might include a restaurant list, cart screen, and order tracker.
2.4.3 Example: Creating a Wireframe for a Fitness Tracker App
Screens could include:
- Home: Step counter, Start Workout button, bottom navigation.
- Stats: Progress graph, workout history, total time.
- Profile: Profile picture, settings, sync toggle.
2.4.4 Wireframing Best Practices in FigJam
- Keep it simple.
- Label everything clearly.
- Align components evenly.
- Use consistent symbols and styles.
2.4.5 Hands-On Activity: Create a Low-Fidelity Wireframe in FigJam
Students will design three screens for an original app, such as a task manager or fitness app. They will use shapes to represent UI elements, label them, and connect the screens with arrows.
2.4.6 Real-World Example: How FigJam Wireframes Improve App Design
Instagram’s team used wireframes early in the design process to plan post uploading, feed browsing, and interaction. Their layout was tested and refined long before the final design was applied.
2.6 Activities and Reflection
Activity 1: Brainstorm app ideas in FigJam. Organize features and challenges into categories.
Activity 2: Create a user journey map using FigJam templates to track touchpoints and key actions.
Reflection: Write a short essay on how brainstorming helped your team define the app’s purpose and collaborate better. Share any key insights or decisions that resulted from the activity.
2.7 Chapter Recap
This chapter introduced the importance of planning, wireframing, and using FigJam in the app development process. You explored different wireframe types, learned to plan layouts and navigation, and practiced creating your own low-fidelity wireframes. These skills form the foundation for turning your app ideas into detailed designs, which you will begin building in Figma in the next 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. |