Website Wireframes | HCDE537 | Premium Design Works

Website Wireframes are black-and-white schematic diagrams that illustrate blocks of content, navigation and functionality of a website design. They are used in the process of designing the content layout for pages of a website:

Web Redesign: Workflow that Works 2.0 - p. 107

See Also:

Developing Site Structure 2 | WEB105 | Premium Design Works
Content Layout for the Web | WEB200 | Premium Design Works
Rehabilitation Institute of Washington | Wireframe Showcase
Creating a Website Wireframe in Illustrator | Premium Design Works
The Right Way to Wireframe | YouTube

Wireframe Tools

A web site prototype can be created using traditional design methods, such as pencil drawings or sketches on a whiteboard, or by means of an broad array of application software. Some examples of the diverse programs that can be turned to this use are Powerpoint, Photoshop, MockupTiger, Keynote, Illustrator, OmniGraffle, Visio, Adobe Fireworks, Balsamiq Mockups, Axure, and WordPress.

Balsamiq Mockups

Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting:

http://balsamiq.com/products/mockups

Go to: Balsamiq Mockups | Balsamiq

Microsft Visio

With a dramatically improved user experience and intelligent drawing tools and templates, Visio 2010 makes every step in creating diagrams easier:

http://visio.microsoft.com/en-us/Pages/default.aspx

Go to: Microsoft Visio | Microsoft

OmniGraffle for Mac

OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click: