Web Site Wireframes – Samples, Examples

Originally published February 2007

Web Site Wireframe

(aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic)

What are wireframes?

Web site wireframes are blue prints that define a Web page’s content and functionality. They do not convey design – e.g. colors, graphics, or fonts.

How are wireframes used ?

Wireframes – combined with Site Maps -are the bread and butter tools of information architects. Web site wireframes are useful for conveying the general page structure and content requirements for individual Web pages. Typically wireframes are developed by an information architect, requirements analyst, or designer. In many Web groups these are all the same person.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. They also help to keep a paper trail of functional and design decisions that are made. I sometimes use wireframes to get people thinking and generate requirements. Getting signoff on a set of detailed wireframes can save a lot of time and money. Forcing managers and clients to actually think about the site’s functionality at a page level will avoid changes later on. Otherwise programmers can end up making endless changes and tweaks to their code.

Wireframes can end up evolving into the default requirements document for a system. I sometimes end up adding a sitemap to the beginning of the wireframe document. I then add notations and requirements on specific pages. Sample Wireframe 2 below is an example of this.


How are wireframes created?

Wireframes – like most information architecture diagrams – can be created using a variety of software programs. I generally use Visio because of its powerful stencil feature. Visio stencils allow you to save libraries of commonly used shapes and elements. I have custom stencils created that allow me to easily drag and drop wireframe elements onto the screen. This really speeds up the process of creating wireframes.

I have also seen wireframes created using Excel, Word, and Power Point. So the choice is yours.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

HTML Wireframes

Information Architects and designers sometimes end up creating the initial HTML layouts that are then turned over to a developer for “real” programming. This often makes sense, because in some cases it’s the IA or designer with the best command of HTML layout and design. HTML may be used to create basic wireframe templates that can be used for usability testing or to get client feedback. In other cases the HTML is created in order to keep tight control on the design, rather than leaving it up to the programmer.

Wireframe Examples

Sample Wireframes (pdf)

Sample Wireframes 2 (pdf)

Sample Wireframes 3 (pdf)

Follow Discussion

41 Responses to “Web Site Wireframes – Samples, Examples”

  1. Nicholas James

    Great article and the PDF examples are very useful to learn about this topic and a great resource. It seems there are many options for doing wireframes and it’s a great way to progress through the design process and have a visual document of progress. I’m going to check the other articles out too when I have time.

  2. Glen

    Nicholas – Absolutely there are plenty of options and methods for creating wireframes. I find it to be an invaluable step in building websites. I plan to follow up with a more current article on website Wireframes and the various software available to help with the job.

  3. Devterch

    Thanks Glen for the article…am sure it will make our design process easier and more fun. Thanks.

  4. Howard

    Are wireframes copyrightable? If I like the wireframe of a site and copy it (of course coding it myself and filling it with my content and graphics, etc), is that a copyright violation of any kind?

  5. Howard
  6. Dannie Bolanos

    thanks for the great article, this really nice blog

  7. Holger

    Interesting article brief and strait to the point.
    Perhaps this article is interesting for you http://ux4dotcom.blogspot.com/2010/01/why-and-why-not-wireframing.html
    @ Howard – interesting question – I never thought about it – I will read your linked article
    Thanks and keep on “wireframe’ing” :-)

  8. Digital marketing

    Good examples! I learn a bit from your 3 PDF files. :-)

  9. wusthof knives

    Just thought i’d comment and say neat design, did you code it yourself? Lookssuperb.

  10. zahra karami

    thank you for your great article and pdfs, that are very usefull

  11. Millard Gagne

    Good article cheers for the information.

  12. Debbie

    This article was most helpful. I am most pleased that I came accross this. I was wondering could you direct me to rss feed for your site?

  13. gichuru

    great article, thank you

  14. doctor takapuna

    Hey I was just checking If someone could help me out with this , I read this blog a fair bit but the background keeps messing up so I cant read the text. PLease help me

  15. Glen

    Try upgrading your browser

  16. Martha

    I see that it’s your passion. :)

  17. RJ

    I reference these often, thank you

  18. Gina23

    Loved the post! It helps sometimes to know that there are lots of us out there taking the slow road to the top. LOL

  19. Tom Elliott

    Thanks for the samples, I think the larger the site the more useful wireframes can be

  20. Jonas

    Here is a wireframes kit for Adobe Fireworks that might be useful:
    http://www.dragnet.se/webbdesign/websitewireframes.html

  21. Jessica

    My 2011 will be better knowing this!

  22. Łomża Dankert

    It’s super site, I was looking for something like this

  23. Alam

    Grate post and very nicely written. Thanks for shearing

  24. DC Web Design

    Do you guy’s have those files in PSD? :-)

  25. Jack Nolan

    My sister told me about this site just today. Great blog you’ve got!

  26. tjäna pengar

    I am glad to be one of the visitants on this outstanding site (:, thankyou for putting up.

  27. Marcel

    Thanks for the concise information and accompanying pdfs. I’m just getting started with web-page design, wire framing and information architecture. Much obliged for the handy info; (Terminator voice:) I’ll be back. :)

  28. Anon

    Great site i like the pdf very helpfull

  29. Nilesh

    You should also take a look at MockupTiger for building quick wireframes

  30. Nilesh

    Here is the link http://www.mockuptiger.com

  31. kai

    How do you map from the webpage to data elements?

  32. prasad

    Thanks a lot for such a superb information.

  33. Paginas Para Celulares

    Hello there, You’ve performed a fantastic job. I will certainly digg it and for my part recommend to my friends. I am confident they will be benefited from this site.

Trackbacks

  1. Wire Framing « Perry Penick Communications – Web Resources  
  2. Web Site Wireframes – Samples, Examples » Unika Tek Boutik Blog Site  
  3. Azzcat Blast » Website Workflow| WordPress | Website Design | Print Design | Identity Design  
  4. Webサイトのワイヤーフレームを作る時に参考になる10のURL « nia.note  
  5. Website design for gaming community - Graphic Design Forums: UK forums for graphic designers  
  6. Web Site Wireframes – Samples, Examples : FatPurple « Nadeem khan  
  7. Call me old fashioned « My Blog  
  8. Navigation, Labelling, Categorisation and Wireframing « emmacostello  

Leave a Reply