Next we deal with how to layout the page hierarchy and content using wireframes — you couldn’t (or shouldn’t!) begin building a property without blue-prints. Wireframes are the blueprints of web design.

Why wireframe?

We’ve found it helpful to compare website development to building a house. You can’t (or shouldn’t!) begin building a property without blueprints. Wireframes are the blueprints of web design.

We use wireframes to:

• Understand what content is most important, establishing hierarchy
• Outline functionality requirements
• Outline content requirements

Wireframes define the scope of a project. We understand whether content sections need text, imagery, forms or other interactive elements and how these elements function together to deliver a positive user experience.

We could produce multiple wireframes for each size but we’re always looking for ways to work efficiently. We’ve found it saves time to produce responsive wireframes. There’s a few tools out there, but our current favourite is Jetstrap.

How?

Wireframes can take various forms. Depending on the challenge it could be as simple as a line drawing or require as much work as a functional prototype. Often projects fall somewhere in the middle of this. At Tide, we build responsive web designs. This means our wireframes need to work at mobile, tablet and desktop screen sizes. Planning for this needs to begin at this stage. 

Responsive wireframes allow us to structure layout for various screen sizes.

Which content is the most important?

Content hierarchy has always been an important aspect of web design. It’s not about saying all the things, but the right things.

Developing for multiple devices and orientations makes these decisions even more important. What’s immediately viewable at a traditional desktop size might not be possible on a smaller sized mobile device. We have to understand the hierarchy of the content in order to lay it out.

When we layout our wireframes, we go back to our strategy document and remind ourselves again of the goals of the website. We sense check the layout and function to determine which parts are the most important to support these goals. To get clear agreement we even number the elements in order of importance.

Wireframes for our website

Our wireframes act almost like a skeleton of what the final product will be. You will be able to see a clear connection between wireframes and final designs as we iterate through the design phase.

With approval on our wireframes, we can finalise our scope document. This confirms the technical functionality, setting out a clear brief for build.

What's next?

With wireframes and scope agreed, there’s one more crucial step before we begin our design phase - content. We’ve learned the benefits of a ‘content first’ approach and will share our process for this in our in next series instalment.

More from the Live Development series

Stage 1: Start at the beginning with Discovery
Stage 2: Content hierarchy and wireframes
Stage 3: Content collation
Stage 4: Getting started with design
Stage 5: The front-end build
Stage 6: The back-end build