Wireframes, Prototypes,

and Comps, Oh My!

NEAUG. April 2, 2013

Whats the difference between

a wireframe,
a prototype and
a comp?

Working definitions from Wikipedia....

The wireframe depicts the page layout or

arrangement of the websites content,
including interface elements and
navigational systems, and how they work
together. The wireframe usually lacks
typographic style, color, or graphics, since
the main focus lies in functionality,
behavior, and priority of content.

A prototype is an early sample or model

built to test a concept or process or to
act as a thing to be replicated or learned
from.
Prototyping serves to provide
specifications for a real, working system
rather than a theoretical one.[

A comprehensive layout or comprehensive,

usually shortened to comp, is the page
layout of a proposed design as initially
presented by the designer to a client,
showing the relative positions of text and
illustrations before the final content of
those elements has been decided upon.

Who needs them?

So.. what do

you actually do?

Are you

building wireframes? Prototypes? Design

comps? And how?

Photoshop?

Fireworks?

In Design?

Illustrator?

Paper Prototypes?

Article at A List Apart on responsive

development without a mockup;

http://alistapart.com/article/responsivecomping-obtaining-signoff-with-mockups

"My other wireframe is an html"

"When my wireframe grows up

it wants to be a site design."

Websites that review wireframing

and prototyping tools:

http://www.hongkiat.com/blog/wireframingprototyping-tools/

http://memeburn.com/2012/09/25-of-thebest-wireframing-and-prototyping-toolsever/

Link to video of talk: http://www.ustream.tv/

recorded/25221096
Title of above talk: Sketching, Wireframing,
Prototyping - How to Be Agile and Avoid HalfBaked User Experience, Recorded on 06.09.12
Frontendconf_Zurich on USTREAM. Conference
This would be good homework between the
April and May sessions --- our May meeting
will feature a talk about Agile Development.

What do they get you?

1.
2.
3.
4.
5.

something that LOOKs like a webpage

something that LOOKS like a webpage
and lets you click on things.
Generated pdfs
Generated .png or .jpg
Generated html and css

Opportunities for commenting or

collaborationg.

How do you share with team or with

client? What are your needs?

1. Online tools just send them a link

2. Generated html and css you can put
on a server and send client a link.
3. Email client a set of .pdf or .png or .jpg
files -- large files -

Adobe Touch App:

PROTO

Adobe has abandoned this as of

December 2012. Too bad. It writes
OK html, bad CSS, but creates
WORKING prototype so easily!

http://blogs.adobe.com/creativecloud/
refocusing-our-touch-app-development/

Article on using Fireworks:

http://blog.crazyegg.com/2012/01/17/adobefireworks-design-software/

Article on using InDesign!

http://www.smashingmagazine.com/2013/03/07/
creating-wireframes-and-prototypes-with-indesign/