Scribd
Upload
654 views20 pages

Wireframes Prototypes Comp PDF

This document discusses the differences between wireframes, prototypes, and design comps ("comps"). It defines wireframes as depicting page layout and functionality without style or graphics, prototypes as early models to test concepts or processes, and comps as proposed page designs showing element positions before final content decisions. The document provides examples of tools used to create wireframes, prototypes, and comps like Photoshop, Fireworks, Illustrator, paper prototypes, and InDesign. It also lists benefits of each like generating previews and enabling commenting.

Uploaded by

arjunmba119624
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
654 views20 pages

Wireframes Prototypes Comp PDF

This document discusses the differences between wireframes, prototypes, and design comps ("comps"). It defines wireframes as depicting page layout and functionality without style or graphics, prototypes as early models to test concepts or processes, and comps as proposed page designs showing element positions before final content decisions. The document provides examples of tools used to create wireframes, prototypes, and comps like Photoshop, Fireworks, Illustrator, paper prototypes, and InDesign. It also lists benefits of each like generating previews and enabling commenting.

Uploaded by

arjunmba119624
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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/

You might also like