Lab: Grid-Based Wireframe Design

Estimated time: 45 minutes

What you will learn

This lab is designed to equip learners with practical skills in applying grid systems to create structured, user-centric wireframes for websites and mobile applications. Through hands-on exercises, learners will gain a deeper appreciation of how grids contribute to visual consistency, alignment, and responsive design.

Learning objectives

By the end of this lab, you will be able to:

Explain the purpose and underlying structure of grid systems in UI/UX design, including column grids, gutters, and margins.
Construct a well-defined grid layout using industry-standard design tools such as Figma or Adobe XD.
Develop a low-fidelity, responsive wireframe that adheres to a predefined grid system, ensuring consistency across devices.
Critically evaluate and justify layout decisions based on principles of usability, spacing, alignment, and visual hierarchy.

Prerequisites

Basic understanding of UI design and layout principles.
Familiarity with wireframing tools like Figma.

Note: If this is your first time using Figma, we recommend creating an account. To do this, right-click Getting started with Figma and open it in a new tab to sign up.

Introduction

In today's multi-device world, digital products must look clean, work seamlessly, and feel intuitive—whether viewed on a desktop, tablet, or phone. One of the unsung heroes that helps designers achieve this is the grid system. It provides structure, rhythm, and alignment to UI layouts, making interfaces both aesthetically pleasing and functionally effective.

This lab will walk you through the process of designing wireframes using a grid system, a foundational skill every UI/UX designer must master. Think of the grid as the invisible skeleton of your design—it guides where things should go, helps maintain balance, and ensures consistency across pages and screen sizes.

Scenario

Design brief

You've just been hired by Leaf & Page organization, a new online bookstore launching its website. They need a clean, user-friendly homepage wireframe to showcase featured books, categories like fiction and non-fiction, and a newsletter signup.

Your job is to create a low-fidelity wireframe using a grid system to ensure clean alignment, consistent spacing, and a responsive layout. The focus is on structure, not visuals—so stick to simple blocks and placeholder text.

Getting started

Step 1: Open Figma and create a new file - Go to https://figma.com and log in. - After logging in, you will be redirected to your Figma Dashboard, click the "Design" card visible in the dashboard, as shown in given screenshot with highlighted red border.

It opens a blank canvas titled "Untitled."

Click the Untitled file name at the top and rename it to Leaf & Page – Homepage Wireframe.

Create the artboard (frame)

Step 2: Draw the canvas (frame) - Now select the frame from the bottom toolbar.

On the right-side panel under “Design,” select Desktop under Desktop section to choose a screen size for desktop wireframe.

Add a grid system to the frame

Step 3: Add a column grid - Now select the canvas frame and then click Layout grid.

After you click the layout grid option, you will see the grid option, as shown.

Now, click option 1, as shown, to make it editable and then click option 2 to give the size.

Then, select the column option and set number of columns as 5 or 6, and adjust the gutter (space between columns).

You now have a 6-column responsive grid that spans your frame.

Start wireframing sections

Step 4: Header section You'll now create low-fidelity UI blocks using rectangles, lines, and text.

First draw a rectangle from the bottom menu.

Use the T icon to add text within the rectangle. Add Leaf & Page as the logo.

Add more textboxes for Home, Categories, About Us, and Login.

Step 5: Hero section (banner)

Change the layout to column by selecting the entire frame.

Draw a large horizontal rectangle below the header.

Add a headline inside the rectangle.

Add a subheading and adjust font size.

Create a button rectangle and add Explore Now.

Fill the button background color and change text color.

Book categories section

Step 6: Create different book categories - Below the hero section, draw 4 equally-sized rectangles and align with grid. - Add text labels inside each box.

Step 7: Create subscription section - Draw a line to separate subscription section.

Add heading: Subscribe for weekly recommendations.
Add a textbox and a button next to it.

Add a line to close the section and include footer items: Contact Us, Terms, Privacy, Help Center.

Final design

Click the preview button to see your design.

Your final Leaf & Page wireframe should look like this:

Summary

This lab guides you through the step-by-step process of designing a low-fidelity homepage wireframe for a fictional bookstore, Leaf & Page, using Figma. You set up a structured grid layout with defined columns and gutters, and then use basic shapes and text to build key interface sections like the header, hero banner, book categories, newsletter signup, and footer. The exercise emphasizes visual alignment, spacing, and consistency—core principles of UI design—while providing practical exposure to tools like layout grids, typography settings, and component placement in Figma.