Creating Content Wireframes for Responsive Web

Design

When creating a new website or redesigning one, designers need to

define a site strategy about the information they will provide to their

visitors.

As information architects, they need tools that help clients understand

the structure of their content. One tool we have found particularly

helpful is wireframes. Basically it is a visual representation of your user

interface. You can use wireframes to communicate four things.

Navigation Structure

Layout - the page hierarchy and placement of elements on the

screen.

It gives an idea to content writers of how content will be placed

within the design.

Functionality – describes how product will work, and how it

interacts with the people using it.

In this article we will focus on the methods used in wire framing process

for responsive web design and how user will access the content.

Introducing the Content Wireframe

The concept of content wireframe is think about the user, not the

technology. It establishes an information hierarchy and flow.

Creating Content Reference Wireframes

You can create the content reference wireframes with a code editor

such as Coda or Adobe’s Brackets. But for those who are let say code

challenged, we will choose illustrator that will fit you best as its

artboards enable you to start with a mobile-first approach and grids

allow for consistency of design. You can easily create precisely sized

boxes for wireframe.

A Mobile-First Approach to Content Wireframes

For a mobile first approach, use illustrator to focus on the important

part of the content. Let’s create 5 viewports to layout the foundation for

a responsive content wireframe

1. CREATE THE DOCUMENTS

In Illustrator, create five new documents with the following widths and

heights (in pixels):

320 × 800

768 × 1200

992 × 1400

1224 × 1600

1440 × 1800

2. CREATE THE CONTAINERS

In the 320 pixel-wide document, make seven unlined boxes filled with

neutral gray.

3. CREATE THE LABELS

Place text over each box — in descending order: Header, Main video,

Video 02, Video 03, Video 04, Video 05 and Footer.

4. RESIZE THE BOXES

Make the main video box a little bigger than the others to indicate its

priority. If necessary, scale down the header and footer — but keep

them full width.

5. COPY THE BOXES

Now that you have relative sizes and labels, copy the boxes to the other

documents or artboards. They represent the existence of content, not

the content’s precise sizing or spacing.

In the above article you have seen that, you can create content

wireframes by simply deconstructing the websites into their basic

building blocks.

iMediaDesigns has expert website designers in custom web design and

web development, that helps brand create unique identity and successful

marketing campaigns.