Editor note: This article was written in 2009 for my personal website and featured on Smashing Magazine article 35 Excellent Wireframing Resources. The website no longer contains this article as I decided to review and share it exclusively on Medium.com


What is a Website Wireframe

A website wireframe is the basic structure of a website. During development stages a website wireframe may specify functionality (sliders, tabs, etc) but must not include any color or design, only structural guidelines.

A website wireframe is the basic concept of a layout. A good wireframe will include all important information and work as a guideline for both the designer and developer.

Why Work With Wireframes
Think of a website as a person where the wireframe is the skeleton. The skeleton alone does not do anything, can’t even hold himself up, it needs muscles for that. That’s where the design comes into action.
But a skeleton and muscles alone don’t do anything you need a heart and a brain to help you function and that’s the development part.

The following example is a very basic wireframe built exclusively for this article as visual aid:

Simple website wireframe

Notice that I worked with contrast instead of including color. By including color or color theme on the wireframe are influencing the designer.

When looking at a wireframe the designer and developer should be able to clearly identify page elements to build and understand the function you want those elements to incorporate.

If you are to specify an article page the wirefame should include a title, author, date and category information, article main text.

By including certain elements the designer and developer will know what to build up on. A designed can specify font-sizes, typography and several other design details to make it more appealing and a developer will know that a structure with title, date, category, author and text must be created in the database.

By using wireframes you are creating a workflow that will help the project to run faster and smoother.


Tips for Producing High Quality Wireframes

Search Engine Optimization (SEO)

When building a website it’s crucial to think of SEO. Basic SEO will help you understand key pages for the website as well as their layout. Do some keyword research this will help you build the navigation and key pages for the website. It helps if you create a flow chart or mind map of the website.
Many people think of SEO as a final step when building a website when in fact SEO should be on everybody’s mind from beginning to end of a project.

Moz (former SEOmoz) has covered this very well on their article SEO Wireframing.

CSS / HTML Frameworks

Image from: http://www.vermilion.com/news/articles/2012/10/22/comparing-responsive-css-frameworks-bootstrap-foundation-and-skeleton

Grid systems have pros and cons like every “solution”. If you find a specific framework that helps you solve your most common issues, stick with it.

I’ll be honest, I never really liked grid systems or frameworks because they tend to force you to their specific restrictions, but on the other hand you will need some sort of grid structure to guide yourself: Page width, sidebar, content area, menu area, logo area, advertisement area, etc are all part of a basic grid structure that will help you along the way.

Viewport options

When I first wrote this article in 2009, the most common screen resolution was 1024x768 and I recommended you to work on this and eventually built on this if necessary.

Currently, 2013 on up, this practice is no longer correct as Responsive Web Design is vastly implemented in the web development industry and mobile devices have changed the way people access and view web content.

With this in mind, when building a wireframe, think of the several viewports people will access your content, think of the information you must include on each element of the page and what information is secondary to the viewer.

By doing this you’ll know how much content will exist and how much effort you need to put in to start building the wireframes for the several viewports (Desktop, tablets, smartphones, etc).


The way of the wireframe (mindset)

Be negative, always build for the the worst case scenario.
This is a very common rookie mistake and very usual for individuals to forget about when wireframing on a tight deadline. People tend to build wireframes thinking of the ideal scenario.

By doing so you are assuming your client will accept every limitation you impose and always perform every action correctly, but what happens if the user doesn't? What happens if the user is filling a form and puts letters on the phone number input? Or is writing a description that should not have more than 255 characters but ends up with an “all text is obligatory to include” 320 character description?

By building, and testing, for worst case scenario you will be able to anticipate common error actions and misconceptions. This will improve your work quality and help the designer and developer.

Find Good Referrals

Always start by looking for good examples or case studies regarding the market you are about to do the wireframe for. They can help you find solutions for common problems that will occur later.

A practical example is Amazon’s website. They have millions of people accessing their website everyday from all parts of the world. This means that the bandwidth, viewports, languages, technologies, etc… are much different from each other and there are many articles tackling amazon’s solutions to several problems such as Ben Kamens article Breaking Down Amazon’s Mega Menu which share’s amazon elegant solution to a hover issue common on multi-level dropdown menus.

Team brainstorming

You are not building something exclusively for yourself! So don’t work alone.

Make a 15 minute brainstorming session with 3 or 4 people to get feedback on what features they think that might be a good addition. You’ll often come out with new ideas.

Don’t show sketches to clients

Forgive me father, for I have sinned!

Never show a development wireframe to clients. A client will always expect a finished or near finish design. They want to see their logo, color, good copy writing that guides the user to perform specific actions, click everywhere, see slider animations, etc.

A client will always have high expectations when you deliver something. Don’t build the client expectation short and never, ever show the client something rough (like a naked wireframe) unless it is strictly necessary.

Can you imagine buying a Playboy Magazine and when you open it you only see skeletons? Not a good experience, no sir.

Wireframe for your team, design for your client

Experience tells me designers will be influenced by any colors, fonts, text, images, features (sliders, tabs, etc.) you include on the wireframes, especially new designers.

Taking in consideration all said above, work with contrast and only use design elements (color themes, fonts, images) if there is a specific purpose and need for those specific elements.

Start with a white canvas and create contrast using black or gray tones. Keep it simple and practical.

Be wise and keep it real, and logical

  • Always use real text, don’t use Lorem Ipsum. This is a common practice when building for worse case scenario.
  • Keep image proportions correct.
    - To make a website look good;
    - To prevent the user from having to upload several image sizes;
    - To help the developer automatically create images;
    - To keep a design consistency throughout the website;

It is incredibly frustrating to have a 4:4 (square) thumbnail of a 16:9 (horizontal rectangle) image or even a 9:16 (vertical rectangle) image. In most cases it doesn't work and will force the user to either upload a new image with the correct measures or at least the same ratio. So don’t do it.

If you are working with square images, keep their ratio throughout the website. I don’t care how. Find a way, that’s you job!


Tools for Wireframing

  • Pencil, pen and paper
    Sometimes it’s just easier to sketch something on paper and later adapt that to a cleaner digital version. The biggest downside of this is the inability to create prototypical elements on the fly such as sliders, tabs, etc, you’ll always have to draw them.
  • FlairBuilder
    This tool has really matured since I first used it and I believe is one of the best ones out there and is well worth it’s price if you are planning to use it regularly.
  • Axure (PC)
    If you are serious about wireframing, this is one of the most powerful tools you’ll find for PC.
  • OmniGraffle
    This is probably the best tool I know for Wireframing. It’s simplicity and effectiveness makes it extremely useful and easy to learn. Unfortunately it’s only available for Mac & iPad.
  • Balsamiq Mockups
    Balsamiq Mockups was built on the principle of a wireframe is a wireframe, a design is a design. This tool uses a kind of hand drawn sketching stencils to prevent people from confusing it with a finished design.
  • SmartDraw
    A very complete tool that does allot more than just wireframes, which can be too much if you are simply going to use it for wireframes. It includes decision charts, cycle charts, and many other useful features that can be used on a project.
  • Microsoft Visio
    A very complete software from Microsoft that will allow you to do a whole lot more than wireframing integrating with other Microsft tools such as Excel and Powerpoint.
  • POP Prototyping On Paper
    A mobile app (for iPhone and soon on Android) for creating interactive wireframes to be viewed on mobile devices.
  • Flinto
    An iPhone & iPad app to quickly create interactive mobile wireframes.

Wireframing doesn’t require a specific software, the software mentioned above have many features to help you wireframe quickly and more effectively. You can use Photoshop, inDesign, illustrator or even plain HTML and CSS to make your own wireframes.


If you are looking for further reading please consider: