Website Wireframes for beginners

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

Website Wireframes

What is a Website Wireframe

When creating a website, before you start to design it you need to define a structure. When creating a website wireframe may specify functionality of specific items such as sliders, tabs and other visual elements but it must not include color or design elements that are not 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 apart of specifying a structure. It can’t hold himself up, it needs muscles for that. That’s where design comes into action.
Still a skeleton and muscles alone don’t do anything unless there is a heart, a brain and other body parts to help the body function. That’s the development part.

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

Simple website wireframe

Notice that contrast is used instead of including color. By including color or a color theme you are influencing the designer. We are defining the User Experience journey on the website and not focused on making it look amazing. So it’s important that, at the early stages of wireframing, color is not applied so the focus can be on the experience a user will have interacting and visualizing items on the website.

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

Let’s think about an article page for a blog. There are some basic items that all blog article pages should include:

  • title
  • author
  • date
  • category information
  • the article main content that can be text or image or both.

By including those elements the designers and developers will know what needs to be build and won’t make assumptions or take it upon themselves to define what the page needs.

A U(ser) I(nterface) designer will take the wireframes and specify the typography, color themes and several other design details to make it appealing. Some UI Designers will also define the animation they want certain elements to have.

Once the design is ready the developers will have clear guidelines of what structure and functionality needs to be created.

So keep in mind that a wireframe is the beginning of a workflow process that will help the project run faster and smoother.

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:

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.

** December 21st, 2018 update ***
Currently in 2018 all pages are responsive and adapt to several screens with a special focus to smartphones. Mobile has a big impact and is the primary device used by users.

With this in mind, when building a wireframe, think of the several viewports people will access your content. Think about 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 mistake and very usual for individuals to forget about, particularly when creating wireframes on a tight deadline.

Most wireframes are built thinking on an ideal scenario and not a worst case scenario and therefore are prone for incorrections along the way.

By wireframing for ideal scenario 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?

For example: A title is build to have two lines and maximum 80 characters. But eventually a word is longer than expected and breaks design…

“My travel to Tau­mata­whaka­tangi­hanga­koau­auota­matea­pokai­when­uaki­tana­tahu”

This can be considered worst case scenario and will allow to the UI Designer or Front-end developer to apply some workaround to prevent the design from breaking.

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 best practices, good examples or case studies regarding the market you are about to do the wireframe for. They will 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

Photo by rawpixel on Unsplash

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

Make a 15 minute brainstorming session with 3 or 4 people, ideally from different departments, 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.

As professional courtesy I can tell you that 99% of clients a client don’t want to see rudimentary wireframes. Most of them will feel disappointed or not interested in all the process.

Always create hi-fidelity wireframes to show to a client.

Photo by Pankaj Patel on Unsplash

Hi-Fidelity Wireframes are a complete journey of the user on the website. This means the full experience, with design and, if possible, make them interactive so the client can interact with them and preview the experience it’s users will have on the website.

There are several tools such as Invision that allow you to create interactive mockups without the need to produce HTML, CSS and Javascript.

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 younger 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.

Do you know other tools for wireframing? Leave a comment with a link bellow.

To conclude, wireframing doesn’t require a specific software, the software mentioned above has 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: