Introduction to Building Wireframes

Davide ‘Folletto’ CasaliINTRODUCTION TOBUILDING WIREFRAMES

Head of Design Startup AdvisorNIGHT.EU

What do you do?

TODAY1 / Wireframes · how to work with them2 / Wireframes management · how to use them effectively3 / OmniGrafﬂe Pro · introduction90’ Junior/Mid

PART 1Wireframes

@hjmediastudiosTHE IDEA OFWIREFRAME COMESFROM 3D MODELLING

“A website wireframeis a visual guidethat representsthe skeletal frameworkof a website”Wikipedia:

“Wireframing is a low-cost,rapid iterative designtechnique that offers one ofthe best methods for gainingdesign insight early”Nielsen/Norman Group:http://www.nngroup.com/courses/wireframing-and-prototyping/

THERE AREDIFFERENT QUALITIESOF WIREFRAMES

Even if wireframes display a single interface/pagethey are less like photos and more like movie stills

WIREFRAMESAS STORIES© Ivor Beddoes@awfulshot

WIREFRAMESAS STORYBOARDSFOR INTERFACES© Ivor Beddoes

DIFFERENT WAYS TO TELL A STORYframe by frame, drawingskey frames, textual descriptionskey frames, spoken narrative

Even if the storyboard is not visibleit’s still the foundation of wireframes

Wireframes are a static representationof a dynamic non-linear ﬂow of activity

The wireframe represents also the very ﬁrstmoment when the project team seeseverything coming together.

The minimal visual building blockof a wireframe is the box.Box

Boxes usually contain a uniform kind ofcontent, not the individual elements.However, it’s important to choose the rightlevel of breakdown to support the discussion.Box

ContentBoxBoxBoxNavigationLogo

Let’s wireframe Twitter.Boxes only.

User PageNavigationGlobal NavigationMultimediaContent of the UserWho to followsuggestionsTrendsUser proﬁleUser Stats MessagesTweets

N N NC CS SBoxBoxBoxBoxBoxBoxBoxBoxThis high level box view isimplicit most of the time, but it’sincredibly useful when appliedon a number of pages to ensureconsistency and reusability.

ButtonBoxLorem ipsum gaium sitamet isciquitur elit inellam lacustre pulzella.TEXTBUTTONSIMAGES···MORE...

Thomas Talker:Lorem ipsum gaium sit ametisciquitur elit in ellamlacustre pulzella.Expand

Thomas Talker:Lorem ipsum gaium sit amet isciquitur elit inellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit inellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit inellam lacustre pulzella.ExpandThomas Talker:Lorem ipsum gaium sit amet isciquitur elit inellam lacustre pulzella.ExpandThomas Talker:OFTEN EACHHIGH-LEVELBOX CONTAINSA REPEATINGPATTERN

TRY WORKING WITH PATTERNS ASMUCH AS POSSIBLE TO SUPPORTMEMORY AND LEARNING, MAKINGTHE INTERFACE TRUSTWORTHY

Let’s build a journey.Imagine Twitter’s registration process.

Home Reg. Form ConﬁrmationLOGIN PROCESSThe main steps of the journey

Home Reg. Form Conﬁrmation Your PageLOGIN PROCESSHow do we guide the user to the value??

Home Reg. Form ConﬁrmationEmailYour PageLOGIN PROCESSAn e-mail based approach

Home Reg. Form ConﬁrmationEmailYour PageLOGIN PROCESSA more direct way to engage the user

Home Reg. Form ConﬁrmationEmailYour PageLOGIN PROCESSReview journeys for the edge cases: errors, problems, etc!!

LOGIN PROCESSThe story is even bigger in realityHome Reg. Form ConﬁrmationEmailYour PageTweetThird party Third party

1 / Wireframes as stories2 / From boxes to elements

PART 2Wireframes management

NAPKINSWHITEBOARDSHIGH LEVELDETAILEDHDAgile approach to wireframingchoose the one you need:PAPER SKETCH

Wireframes are made to be thrown away.They are steps in the process of design.Only the ﬁnal one stays... until it gets developed.

In other words:they can be delivered as documentationbut they are not for most of the process

THE INTERMEDIATE STEPSARE VALUABLE:THEY SUPPORTCOMMUNICATION ANDCONSENSUS

AT EACH STEP YOU CAN· test the journey· discuss with management· discuss with technical team· share with other parties

WORK IN ITERATIONSdoobservethinkdotL O O P

This worksfrom startups to big enterprises

WEEKLY ITERATIONHelps with project activitiesscoping, clariﬁes expectations,supports continuos progress review.WEEKLY MEETINGSets formal progress steps to help theclient keeping the pace while being intouch with the project progress

Let’s see an examplePREPAREThe ﬁrst iteration isabout understandingthe problem.

Let’s see an exampleWORKSHOPFirst wireframes madecollaboratively by the stakeholdersin a workshop, in groups.WHITEBOARD

Let’s see an exampleTEST WITH USERSTake the whiteboards andformalize them in individualproposals to be tested.

Let’s see an exampleREVIEW ALTERNATIVESIn this review propose a fewalternatives reﬁning the solutionsfrom the workshop.PAPER SKETCH

Let’s see an exampleTEST WITH USERSYup, again, if it’s possible. Try amore guerrilla approach maybe.

Let’s see an exampleREVIEW FIRST DRAFTAsk explicitly to involvedevelopers if it didn’t happenbefore the review.HIGH LEVEL

1 ITERATION = No review** or review in a different next step (visual design? development?)

2 ITERATIONS = Draft, then feedback, then reﬁne

3 / Wireframes as steps4 / Iterative approach

PART 3OmniGrafﬂe Pro

OmniGraﬄeProfessional

ProStandardvs

WireframesIADiagramsInteractivePDFsFromsketches toHD prototypesHTML exportBuild any PDFPresentationsKeynoteshapes exportOmniGrafﬂe is a powerhouse

No built-incollaborationNo motion designNo pixel precision...even if it lacks some pieces

· You can send them via email· You can use them as prototypes· You can use them for testing· They show ﬂows, not stillsOMNIGRAFFLE CANEXPORT INTERACTIVEPDFS THAT CAN BEUSED AS PROTOTYPES

FUNDAMENTALS

Let’s try!

Let’s sketch Twitter’s wireframeUser PageNavigationGlobal NavigationMultimediaContent of the UserWho to followsuggestionsUser proﬁleUser Stats MessagesTweets

Let’s sketch a single tweet wireframeThomas Talker:Lorem ipsum gaium sit ametisciquitur elit in ellamlacustre pulzella.Expand

Let’s sketch Google’s homepage

Let’s sketch Twitter’s homepage

Let’s sketch Dropbox’s homepage

Let’s sketch Wordpress.com homepage

SIGN UPVIDEOLOGINMORE INFOLots of actions...

PROPERTIES: ACTION

Master LayersGrouping Smart Objects

Grouping

Master Layers

Smart Objects

SET THE PAGE SIZE IN PX BYSPECIFYING THE “PX” (OR “PT”) UNITBY HAND

IT’S A GOOD IDEA TO KEEP THE ZOOMAT 100%, TO DESIGN AT THE RIGHTSCALE. KEEP ALSO THE HEIGHT SHORTTO FEEL THE SCROLL POSITION.

REVIEW THE KEYBOARD SHORTCUTSFROM PREFERENCES TO ADAPT THEMTO YOUR STYLE.REVIEW ALSO “KEEP TOOL ACTIVE”.

5 / Basics of OmniGrafﬂe Pro6 / Grouping, masters, smart objs

“”Bruno MunariTo complicate is easy, to simplify is hard.To complicate, just add,everyone is able to complicate.Few are able to simplify.

Thanks.@Folletto

http://iv4productionsr	138
http://www.conseilsmarketing.com	39
http://www.scoop.it	17
https://twitter.com	16
http://tweetedtimes.com	6
http://www.comtel.in	4
http://localhost	4
http://truongdaynghe.net	3
http://kred.com	3
http://pinterest.com	2
http://metodoselectronicosdeaprendizaje.blogspot.com	2
http://flashattackcrew.blogspot.mx	1
http://fr.slideshare.net	1
http://musikagintza.blogspot.ru	1
http://comtel.in	1
http://www.modernisation-industrielle.courrier.intra.laposte.fr	1
http://www.onlydoo.com	1

Introduction to Building Wireframes

by Davide 'Folletto' Casali on Mar 05, 2013

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 240

Statistics