Responsive Design Wireframing

Responsive design is a solution to a problem that didn't exist until quite recently — how to make a design look good on different device types and sizes. In 2021, mobile users constitute just a bit over half of global internet users.^[2] But most people use several different devices — desktops, laptops, tablets, and smartphones.

Responsive design serves all devices with the same code. The browser detects the screen size, platform, and orientation and chooses which parts of the code to use to accommodate that device type. Fluid grids, flexible images, and media queries are the three technical ingredients.^[3] As a result, all users get great UX — whether they browse your website from their desktop or a small-screen mobile.

Content is what users come to websites for, and our job as designers is to help them find the information they need. To create a website wireframe system, identify what content your website will provide.

For example, if you're designing an e-commerce website, you might need:

• A home page
• Product categories
• A product details page
• A cart page
• An order confirmation page

Each page will have its own content and layout. So, the next step is to identify mandatory and optional content sections for each type of page. For example, for a home page, you can consider including a header, global navigation, hero banner, footer, etc.

After you decide what content should be on each page, start creating user flows. This will help you define scenarios of interaction and measure the importance of the content in the context. Think of your content from the user's perspective. How will your visitors interact with the content?

Map out a target user flow — a series of steps a user takes to achieve a specific goal. A user flow will help you understand which wireframes you'll need to create and how they should be connected. After that, sketch out the core screens.

Next, you can start to define the foundation for responsive wireframe templates for each type of page. Templates should designate the areas of content within them. When working on templates, look for reusable elements (components and design patterns). In many cases, it's possible to define containers that can be reused on many pages. For example, websites often reuse the same headers and footers on different pages.^[4]

Flexible grids are foundational elements of responsive design. Using grids to align elements helps establish visual hierarchy. Grid designs look consistent across all devices and are well-organized.

The design starts with a certain number of columns — typically 12. This number is so popular because it can be broken into 2, 3, 4, and 6 columns, allowing for symmetrical or asymmetrical designs. The column width doesn't change. Instead, the number of columns adjusts from 12 on a desktop to 8 on a tablet and 4 on mobile in this particular layout.

There are many different layouts to explore, not just the 12-column grid.^[5] The type you choose will depend on the type of product, content, and technical limitations. Generally, most grids have 60–80px column widths.^[6] Choosing a column width that works for you is the most important decision since it's the main determinant of your content width.

After you have selected the grid layout, define your screen dimensions. If you design a website, you need to account for at least three types of screens: desktop, phone, and tablet. Other factors to consider are the product's content and the target audience's device preferences.

Web frameworks like Bootstrap or Foundation have default responsive grids. For example, Bootstrap’s tablet portrait mode width is 768px while smartphone max width is 480px. If you work with a design tool, you can customize breakpoints by clicking and setting the dimensions. But as soon as you start translating your design from a graphic design tool to a browser, breakpoints are set using CSS Media Queries.^[7]

The next step is to identify content zones. It will help you to create a clear visual hierarchy for every type of page you've defined earlier in steps one and two. At this stage, don't focus on the wireframe text. Instead, think about how to arrange content blocks for fast scanning. Plan the layout according to how you want your users to process the information and start by drawing boxes on the canvas.

For each type of responsive wireframe template you define, you need to create zone diagrams. Zones are boxes and labels that indicate the types of content and components that will appear on a page.^[8] These diagrams show zones of content and functional elements on the page.

When you're happy with the visual hierarchy, start filling zones with content and UI elements. The goal is to arrange elements in design formats that allow fast scanning. Put a strong focus on the order of information you want to present to your users. People scan web pages from top to bottom, from left to right. The F-shaped pattern works both for desktop and mobile screens.^[9] So, you can improve the scanning by rearranging boxes in both size and placement.

Avoid adding colors and choosing typefaces at this point. The goal is to see if the layout is the best fit for the content. After adding real text and images, you might find that the layout isn't working well. Don't hesitate to change it and look for a better way to present the information. Also, remember to check how your UI looks on different screen sizes and adjust it if needed. Follow a mobile-first mindset and start with the mobile version of your design. After you have created a good visual hierarchy there, move on to another screen dimension.^[10]

There's no need to lay out every single view — just the key screens. Wireframes' purpose is to give you adequate information so that you can make decisions and begin building. This is especially important when wireframing responsive layouts. After deciding what works, you can start building the real thing and work with real data in code.^[11]

Sharing responsive wireframes with your team has several benefits. First, it makes it easier to imagine how the final design will look. Second, it allows testing the layout on various screen sizes and resolutions.

When you finish wireframing, share them with developers and clients. Regular designer-developer collaboration is essential for your design workflow. Wireframes give developers a clear picture of the elements that they will need to code. Sometimes they can even reuse the code from some wireframe tools. As for clients, it's vital to ensure that they understand and agree with content prioritization.^[12]