Website Wireframe

Website wireframe example

What is a Website Wireframe?

A website wireframe is a visual prototype of a web page that focuses on content, layout, and behavior.

It usually doesn't include any styling, color, or graphics. It's like a blueprint to a house that shows the plan for plumbing and electricity without the interior design.

Website wireframe example

A website wireframe can also show the relationship between pages, allowing you to navigate between a series of mockups with clickable components.

A wireframe is constructed using basic boxes, lines, and other shapes to create an outline of the functional parts of a web page without wasting time creating an intricate, polished design. It's often the first step in the website design and web development process.

The wireframe helps communicate design concepts to a team, clients, or management.

Why Make Wireframes?

It may be tempting to skip wireframing and provide clients with high-fidelity mock ups instead. However, wireframing provides a few key benefits:

  • Brainstorming design ideas and iterating rapidly
  • Soliciting feedback from stakeholders, team members, and clients before devoting resources to a more refined design effort
  • Making sure that everyone is on the same page and shares the same vision
  • Translating the site's information architecture into visual design paths by defining navigation elements such as headers, sidebars, footers, and buttons
  • Highlighting any potential problems and flaws early before they can become larger roadblocks
  • Scoping the development effort
  • Collaborating to help keep projects on track
  • Validating content and navigation
  • Focusing on user interaction, usability, and user experience

How to Make a Website Wireframe

Before you can begin wireframing you may want to have some meetings and brainstorming sessions to discuss business requirements and user needs. Your team should come armed with research: analytics data, surveys, and perhaps even focus group results.

Start with a Sitemap

You'll want to create a sitemap of the existing website or design a new information architecture, discuss content strategy, and build personas.

Website map

Make sure you understand what the goal of each page should be.

Create a Wireframe

Wireframes will help visualize and provide a structure for these ideas.

Create a wireframe

Once you begin creating your wireframe don't use any distracting colors or images. You want the wireframe to focus on layout and behavior. Even the font you use should be generic. Images should be represented with a box with an X through them.

Copy on the page can be placeholder copy (Lorem Ipsum) or canned copy like generic calls to action such as "sign up" or "buy." As you iterate your way to a final wireframe, you may find that generic copy doesn't do your vision justice. You can replace your initial placeholders with more detailed copy, especially if that copy takes up more space. That will affect the layout and other elements on the page.

Detailed copy will also help answer the question: is the page fulfilling its intended goal adequately? Given where the copy is placed, how much space it takes up, and how much attention it will get, is it communicating what you want?

Read SmartDraw's detailed wireframing tutorial on how to create wireframes.

Why SmartDraw is Great at Making Wireframes

SmartDraw provides wireframe templates and wireframe elements you can drag and drop to quickly create professional designs.

Smart wireframe symbols

Better yet, SmartDraw has intuitive tools that let you expand menu items and other elements in just a single click.

Smart symbols let you toggle their states for high-fidelity prototyping.

You can also adjust any element by typing their desired size in pixels right into their dimension display.

Wireframes vs Mockups

A wireframe is a rough blueprint for any planned elements on a website. A mockup is more high-fidelity draft of the same website. While most wireframes are devoid of color, font, and other design choices to not distract from the elements themselves, a mockup will have color, typography, and more visual details to closer estimate the final vision for your website design.

Wireframe vs prototype

Wireframing vs Prototyping

While wireframes offer a high-level visual structure of a site, a prototype is similar to a mockup in that it's a high-fidelity representation of the final design that also simulates user interface interaction (UX). A prototype will let someone toggle controls and interact with the design.

Prototype tool

Wireframes for Word®, Excel® and Other Tools

Designing websites and apps is a collaborative process. That's why SmartDraw makes it easy to add your wireframe to any Office® app in just a few clicks. Add your prototype to your next presentation and report.

SmartDraw also works with the Atlassian stack including Confluence, Jira, and Trello. Get designing and let SmartDraw help.

SmartDraw integrations

Website Wireframe Templates

Click on any of these website wireframes included in SmartDraw and edit them:

Browse SmartDraw's entire collection of website wireframe examples and templates