From Content to Wireframe

A Guide to Wireframing for Beginning Web Design Students

Introduction

It can be a difficult process to develop a wireframe for a client even with finalized content in-hand. This post provides a guide for the process of developing a wireframe from content for a small-sized website, and is intended for beginning Web Design students. I created the writing and logo/brand, for the example used for this guide (2gogreen.me), and I’m hoping to fully develop this project in the near future.

Background

It is the job of the web designer to organize large amounts of information, so that it becomes not only readable, and appealing—but so that it also achieves results. Our goal is for the clients of our clients to act: to click, join, sign up, contribute, subscribe, purchase, or whatever the case may be.

Much like the ‘under painting,’ for the traditional artist, wireframes for the web designer form the foundation for all those later-added details. Navigation and action indicators, item placeholders, and composition cues will later give way to a detailed, and branded design prototype. Wireframes are an important tool in achieving consensus about the areas and functionality of the site before exploring mood boards, brand integration, color, imagery, and the other many details that make for a successful prototype. This also helps to correctly set expectations for the site functionality and scope. The use of the visual language of the wireframe can help to eliminate the confusion that arises when designers and clients inevitably use industry terms that may not be familiar to the other party.

There are many powerful wireframing software packages available. However, given the small-size scope of this example site, and our segwey into prototype design and construction in the next part of this series, we’ll use InDesign for wireframing purposes here.

Process

I. Read, Evaluate & Place Content on the Pasteboard in an InDesign Document.

The start file here was created with InDesign CC 2015 . This is a zipped package with an IDML included (for older versions of InDesign.)

Download Start File

We are working with a Content-First approach, which is why it is so important that we’re using real content, and not lorem ipsum, or other placeholder content.

And at this stage, although it’s tempting to start creating stellar graphics and placing them, or working with the typography, we must read and evaluate the content that we’re designing as a first priority .
Screenshot of Start File For Wireframing in InDesign

II. Familiarity with the Layout Program

At a minimum, if you’re not familiar with InDesign, watch this quick primer:

Learn InDesign in 30 Minutes

This is Chapter 1 of David Blatner’s InDesign CC Essential Training on Lynda.com. There is much more to the program than this 30-minute primer can offer (see the 9+ hours of content in the whole of the “Essentials” title for an indicator!) however, this chapter will be a good springboard for further study and will provide what we need to get started with this guide.

III. We Must Start Somewhere: Though, We Should remind ourselves that this is the only time our web design will live in a fixed medium.

After all, under web conditions, we have devices ranging from watch / small smartphone to 4K+ web-enabled televisions & computer screens.

Though I love the ‘Mobile First’ thought technology, for me, beginning a wireframe and then a prototype is an incredibly iterative process, in which, I’m working with more than one size-range right out of the gate. You’ll notice two sizes as a starting point in the file from the link above. Both have a 24-column grid: A.) ‘DESKTOP-ISH’ (This is set at 2000px x 1600px, with large margins making for a content area of 1200px x 1600px;) And B.) ‘MOBILE-ISH’ (320px x 1600px. 320 is a common starting point currently for mobile portrait designs.) For now we’re designing with “Logical Pixels” rather than “Actual Pixels,” (for a chart comparing iPhone “Logical” and “Actual” pixels click here. And there’s some great information on the Mozilla Developer Network here for strategies on handling the pixel conundrum on the coding side.) We’ll address placing and working with graphics for high resolution and retina displays in the upcoming post: From Wireframe to Prototype.

IV. Identify Key Content Blocks and Utilize Descending Gray tints to identify those areas.

Remember, do not use any color or graphics at this time: for those will often work to eclipse foundational decision-making for our projects (pink shown below for highlighting / guideline purposes only.) 

Identifying key areas in the wireframe and blocking off those areas with shades of gray.

V. Decide on a Clear Visual Language.

Using the button below, you can download the InDesign file (again, IDML included for previous versions of InDesign) and copy and paste those elements as you continue to rough-in the areas of your design in the start file provided.

Download Wireframing Elements

 

Visual Language / Key for Wireframe

VI. A Top-Down Approach

The logo and Navigation items are the first we’ll place, followed by the other content areas. See the slideshow below to see the stages of development:

VII. Continue to develop Areas of the Wireframe Using the Above Slideshow as a Guide.

Hint: When you see a bulleted list in the original content, try moving that content into separate columns and pairing with a visual element like an icon or image.

Download Completed Wireframe

Screenshot: Finished Wireframe

Thank you for stopping by! And don’t forget to come back for next week’s post: From Wireframe to Prototype