Wireframe

Wireframes are diagrams that are used to quickly show the content of web pages. They are used in the planning stages to allow stakeholders (developers, clients, users) to visualize and comment on the content for each page of the web site. There is no one right way to make wireframes and how much detail is in the wireframes often depends on the situation. Below are some lists of what qualities wireframes should and should not posess, and links to tools and resources for making wireframes.

Wireframes should:

  • Clarify what content is on the page (including where are things like: logo, navigation, images, text, titles). One of the main benefits of wireframes is being able to sit down with a client and the wireframes and make sure all of the content has been accounted for.
  • Include enough actual content to make things clear. Exactly how much detail to include is debatable and often depends on the client, the content, the amount of content and other factors. Too little content is when you just have boxes and there is nothing to describe what is in them, too much is when you’re putting in all of the actual text and images for the page. For placeholder text sites like http://www.lipsum.com/ and http://html-ipsum.com/ give you standard dummy typesetting text that you can copy and paste.
  • Be free from a lot of visual design such as images, fancy fonts, full color palettes
  • Be quick  and easy to create. (this is from the actual making point of view. It should take you a while to think about what goes on each page first, but the drawing of the wireframe should be quick). One of the best ways to start wireframing is by just drawing on a piece of paper. In some situations and for some clients that is good enough (usually scanned in and combined in PDF so they’re easy to save and email). Otherwise the hand drawings are the base for cleaner wireframes created in
  • Represent each page in the site map. So if you have 12 pages in the site map then there should be 12 wireframes.

Common Mistakes When Making Wireframes:

  • Every page looks the same. The wireframes are supposed to help clarify what content is going to be on each page
  • No titles on the pages. You should be able to match the wireframe pages to the sitemap diagram.
  • Too vague. When looking at the wireframe it is difficult to tell what content is being represented.
  • Too small. Don’t try to cram a bunch of wireframes on a page. The wireframes should be big enough that it is easy to read them and there is space to make notes. One per page (or an equivalent size) is a good starting point.

Examples

This example shows a four wireframes. Notice that although the wireframes have a minimum amount of detail you can still tell the difference between each page. In some contexts the small amount of detail is fine, in others, such as with a site where there is a lot of complex content, or if a large number of people are working on the site, this would not be enough detail. Also it is imposible to use this kind of wireframe to help plan the typography for the site (for example in the top right image what does SESSION I mean? is there a title and description, just a title?). This page has an example of a very detailed wireframe with annotations (notes).

This example uses the lorem ipsum dummy text. It also shows using real text for things like section titles and navigation that are already known.

On a side note

Wirify: this plugin lets you turn any site into a wireframe with grey boxes over the content.

Wireframing Tools

($) means that you have to pay for it ($)1-10, ($$)21-99, ($$$)100+

(0) means there is no cost

(0-$) means there are free and paid options

Applications with Templates and Other Wireframing features

(0) Pencil: quite possibly the best no-cost option. It requires Firefox (it’s an Add-on) which is also free.

(0-$) Konigi Graph  Paper PDFs: on this page you can download some PDF files that have different graph paper on them. You will have to print it out yourself. The PDFs are free and they also offer products you can buy.

(0) 960.gs sketch sheets: printable sketch templates for the 960.gs template system

This site, http://skyje.com/2010/11/wireframe-templates/, has a list of downloadable and printable wireframe templates for sketching

($$) UI Stencils: these are paper and stencils for drawing high quality wireframes by hand

($$) MockupScreens

($$) Balsamiq Mockups

($$$) Visio

($$$) Smart Draw

($$$) Omnigraffle Pro (MAC)

($$$) Axure RP Pro

Wireframing Web Applications

These are sites that allow you to create and share wireframes online. Most are targeted at web development companies and so carry a price. Most of the time that price is a monthly or yearly subscription. Some offer a limited free version that can still be useful. Also many of these applications are made with Flash so make sure you have the latest version.

(0-$) Jumpchart

(0-$) Cacoo

(0-$) Gliffy

(0-$) Creately

(0-$) Mockflow

($) Mockingbird

($) JustProto

($) iPlotz

(0 – $$) Lovely Charts

(?) Flowchart.com: this is still in beta and is free for now but will start charging at some point.

Applications that can be Used for Wireframing

These applications aren’t designed just to do diagraming and wireframing but they can be used to make them. Sometimes, if you know the application really well it can be easier and faster than trying to learn one of the above applications.

Fireworks: one of the main reasons people still use this is for wireframing

Illustrator

- (0) Sqetch Illustrator Wireframe Toolkit

Photoshop

PowerPoint

Keynote

- ($) Wireframe Toolkit for Keynote

Flash

HTML/CSS: many people are now just using HTML and CSS to make wireframes. If you use a CSS grid framework it can be done relatively quickly and it’s easy to make interactive.

2 Trackbacks

  • By Class 2: 9.10.12 on September 10, 2012 at 10:29 am
  • By Class 4: Page Layout on October 1, 2012 at 11:19 am

    [...] We are going to start with making Wireframes for your midterm project. The assignment is to make wireframes for each page that you made in the sitemap. I am going to talk about the content on the site in class, going over what you have been given on Blackboard. You should refer to that content and you can also use the previous projects to help yo understand what should go on each page. In some cases it is up to you exactly how and in what order you want to group the content. You can also refer to this page for help: http://webdesign.blogs.peopleio.net/planning/wireframe [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>