Chapter 2 - Planning and Wireframing with FigJam

2.1 What is a Wireframe?

When developers and designers begin building an app, one of the first things they create isn’t a colorful screen or a working feature—it’s something called a wireframe. A wireframe is a simple visual layout that maps out where key elements such as buttons, text boxes, menus, and images will appear. Think of it as a blueprint, showing how the app will be structured without getting into how it will look in the final version. There are no fancy colors, logos, or animations here—just shapes and lines that help everyone agree on the app’s basic layout before writing any code.

Creating a wireframe allows teams to focus on how users will interact with the app. By planning out the structure in advance, they can prevent confusion later in the process and ensure that the design meets the needs of the people who will use it.

2.1.1 Why Wireframing Matters

Wireframes help make the invisible visible. It’s often hard to picture how an idea will come together until it’s sketched out. By laying out screens early, developers can catch problems with flow, organization, or usability before any time is spent on building the app itself. Wireframing also improves communication between team members, since everyone can see the same structure and provide feedback on what works or doesn’t. Making changes at this stage is easy—and much faster than making changes after development has started.

2.1.2 What a Wireframe Looks Like

Wireframes are built from simple elements. Boxes might stand in for images. Lines or blank spaces might show where text goes. Circles could represent icons. There’s no color or decoration—just the skeleton of the app. In fact, a wireframe of a music app might only include the position of a search bar, a list of song categories, and a few buttons for play and skip, all outlined using rectangles and labels.

By removing visual distractions, wireframes allow designers to focus entirely on layout and functionality.

2.1.3 The Core of Every Wireframe

Although apps can look very different, wireframes often contain the same core pieces. Most include a way to navigate between screens, places to tap or click (like buttons), areas for user input (such as search bars), and labels that guide users through the interface. These elements form the foundation for interaction and help define how someone will use the app.

2.1.4 From Simple Sketch to Detailed Blueprint

Not all wireframes are created equal. Some are rough sketches drawn during brainstorming sessions, while others are clean, digital diagrams prepared for development. Designers often start with low-fidelity wireframes, where speed matters more than precision. As ideas become clearer, they may move on to more detailed mid- or high-fidelity wireframes that reflect spacing, alignment, and more realistic content.

For students just starting out, low-fidelity wireframes in FigJam are a great place to begin. These quick layouts are easy to adjust and perfect for testing ideas.

2.1.5 Wireframes and Final Designs: What’s the Difference?

It’s easy to confuse wireframes with the final app design, but they serve different purposes. A wireframe is all about structure. It shows how things are arranged and how users will move between screens. The final design, on the other hand, adds the visual polish: colors, icons, text styles, and animations. While wireframes are often grayscale and drawn using shapes and labels, final designs are vibrant, full of detail, and built using tools like Figma or Photoshop.

Wireframing is like drawing a floor plan for a house—you need to know where the rooms go before you decorate them.

2.1.6 Where Wireframes Fit in the Process

Wireframing happens early in app development, just after brainstorming and before prototyping. Once a team has decided what the app will do, they sketch wireframes to figure out how it should work. After that, they create an interactive prototype, and finally, they begin building the actual app. Skipping the wireframe step often leads to design problems and missed features, which can be costly to fix later.

2.1.7 Activity: Reverse-Engineer a Wireframe

To better understand how wireframes reflect real apps, students will examine a familiar app like Instagram or YouTube and recreate its home screen using simple shapes in FigJam. By identifying where elements are placed and how they support the user experience, students will gain a better understanding of layout decisions and navigation.

2.1.8 How Airbnb Used Wireframing

Before Airbnb became the global travel platform it is today, its team started with basic wireframes to map out key features like searching for places, filtering results, and booking a room. These early wireframes helped identify confusion in the booking process and led to improvements such as simplifying the search bar and making filters easier to access. It’s a great example of how good planning can make a huge difference.

---

2.2 Levels of Wireframe Detail

Wireframes come in three levels of complexity: low, mid, and high fidelity. Each has a different role depending on the stage of the project.

In the beginning, designers usually start with low-fidelity wireframes. These are quick to sketch and help focus on basic layout without worrying about spacing or colors. As the design progresses, wireframes become more refined. Mid-fidelity wireframes show clearer spacing and structure, while high-fidelity wireframes closely match the final design in both layout and content, though they may still leave out color.

To understand how these differ, consider a to-do list app. A low-fidelity version might just include rectangles labeled “task list” and “add task.” A mid-fidelity version might show spacing and icons. A high-fidelity version might include actual example tasks, icon positions, and near-final formatting.

Here’s a quick comparison:

Type	Purpose	Visual Style
Low-Fidelity	Brainstorming ideas	Sketchy and simple
Mid-Fidelity	Usability testing	More structured, labeled
High-Fidelity	Final layout before coding	Detailed, near-final

As students move through these types, they’ll better understand how ideas grow into usable designs.

2.2.1 Activity: Build Across Fidelity Levels

Students will choose an original app idea and create three wireframes—one at each level. Starting with a simple layout, they’ll refine spacing and structure in the mid-fidelity version and, if time allows, produce a high-fidelity layout that includes realistic text and icons. Reviewing each version helps students see how design decisions evolve.

---

2.3 Planning Your App Layout

Before drawing wireframes, it’s helpful to take a step back and think through how the app will be organized. Planning involves deciding what screens are needed and how users will move between them. This makes wireframing easier and helps avoid missing features.

A good plan starts with a few key questions: What problem does the app solve? Who will use it? What features are essential? And how should users get from one screen to the next?

Most apps have some core screens that appear again and again. For example, many include a home screen for main content, a profile screen for personal info, a login or signup screen, and a settings page. Thinking about which of these are needed helps shape the user experience from the start.

To visualize these screens, students can create a user flow in FigJam using sticky notes to represent each screen and arrows to show how they connect. For example, a shopping app might begin with a splash screen, then lead to login, home, product pages, a cart, and checkout. Once the screens are mapped out, students can begin sketching each one using shapes to represent UI elements like buttons, headers, or navigation bars.

Some design tips to keep in mind: important content should be placed near the top of the screen, navigation should be consistent across pages, and screens should never feel overcrowded. Simple layouts are easier to understand and improve the overall experience.

2.3.1 Activity: Sketch Your App’s Flow

Students will plan their own app using FigJam. First, they’ll create a user flow showing how screens connect. Then they’ll draw three low-fidelity wireframes to visualize the layout of those screens. During presentations, they’ll explain their design choices and gather feedback from classmates.

---

2.4 Creating Wireframes in FigJam

Now that the app idea is planned and the layout is sketched out, it’s time to build wireframes in FigJam. This process starts with creating a blank file, deciding which screens to include, and using shapes to outline key parts of each screen.

FigJam is great for wireframing because it’s fast, collaborative, and easy to change. Students can build screens using rectangles, lines, and arrows, then label elements to explain what each shape represents. A food delivery app, for example, might include wireframes for the restaurant list, a dish detail page, and the order tracker.

As students design, they should focus on keeping the layout simple and clear. All components should be aligned neatly, labeled clearly, and spaced evenly. The goal is to give someone a quick understanding of how the app works—even if the wireframe has no color or decoration.

2.4.1 Activity: Design Your First Wireframe

Students will choose an original app idea and create three wireframes in FigJam. Each wireframe should show a different screen from the app. Using only shapes and labels, students will map out how users move through the app and what actions they can take on each screen.

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.