Web Design: How To Create A Wireframe- With Samples

Before a website interface designer can create a compelling, colorful web page design for your business, he/she should have an approved wireframe of the page to serve as the foundation for the design.

What is a website wireframe?

“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.” It focuses on what a screen does- not what it looks like. wikipedia

Many clients are confused when they first see wireframes because they perceive them as literal website pages. They don’t understand why there isn’t any branding, color or design on the website. We’ve had many clients wonder what strange language (lorem ipsum) we are using on the pages. It is important to explain to a client in advance what they will be viewing. The client should focus on: 

    • The types of content represented (by blocks) on the page
    • Priority, arrangement and general size of the content blocks
    • Navigation and range of functions depicted
  • How the layout changes based on desktop and mobile views

Wireframes are usually created by an IA (Interface Architect) in a program like Axure or OmniGraffle. Key wireframes should be created for both desktop and mobile devices to indicate how the website structure and function is meant to adapt to different screen resolutions. Wireframes range from simple, flat images to fully interactive pages that link and function similar to actual websites.

Wireframes are generated from website planning documents.

Website Wireframes

The benefit of wireframes for the client:

    • Clients can preview the page layout and request edits before going to design.
  • The client can understand the amount and types of content that will be required from them.

The benefit of wireframes for the web agency:

    • Getting the client to sign off on page structure makes the project more efficient.
    • The designer can focus on interface design.
    • Vetting the wireframe with the tech team can mitigate scope creep.
  • Tech team can begin prototyping based on the wireframe.

How final is a website wireframe?

A wireframe that is approved by the client gives the green light to the interface design team to begin work. If the client comes back later and changes the approved wireframe, then the work that the design team has completed will need to be redone. This redo could trigger a change order and result in increased cost and extended timeframe.

For the designer, there is more creative license. An art director or interface designer uses the approved wireframe as a guide but has the freedom to be creative in the way that various content and functions are depicted. For example, a wireframe may indicate a headline, a block of text and an image, but the designer can present this in any number of ways. If a designer adhered exactly to the wireframe, creativity would be stifled and the project would suffer. Of course, the designer should have a strong rationale behind their design decisions, especially if they stray from the wireframe.

Sample website wireframes and interface designs:

Below are some sample wireframes and the final page that was designed based on the wireframe. You can see that the interface designer moved graphics and text elements around, but generally followed the web page layout as dictated by the wireframe.

wireframe samples - Website Wireframes

If you would like Executionists to develop wireframes for your website project or would like to see additional samples of desktop and mobile wireframes, please contact us at (424) 245-5472. You can also click on the button below!

Credit to: Maximina Juson Revas and Nicolas Parr

Richard Parr
by Richard Parr
Posted: October 2, 2015