HTML Wireframes and Prototypes: All Gain and No Pain

“Using HTML as the basis for your wireframing and prototyping can be a quick and rewarding experience with fabulous benefits, including easier user testing, improved client communication, and faster, more effective use of design time.”

There are many different definitions of wireframes, prototypes, and visual design, so let’s start by defining how these terms will be used in this article. A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, functionality, etc. that will go on the screen. It does not contain pictures and doesn’t necessarily need to link to anything. It just demonstrates what elements a web page or application screen will contain and roughly where they might go-although the location can change. It does not include visual design. An HTML wireframe is created in HTML using a program such as Dreamweaver. A flat wireframe is created using a program such as Visio, Illustrator, or Photoshop and does not have interactive components, but is a flat image of the elements on the screen.

» Read more from Boxes and Arrows

Jonathan Porter - Designer

Jonathan Porter - Designer

Practised in managing multidisciplinary teams, strategic direction and development of an award-winning ‘Customer Experience Design Team’, Jonathan is the author of New Brand Media’s User-Centred Design methodology and brings an in-depth understanding of the branding, design and technology challenges facing enterprise-level clients today. Equally importantly, the exciting opportunities the connected web is creating for organisations, both large and small.

Related Work:

New Brand Media