ELIDA ARRIZZA | WORDCAMP TORONTO 2014

WIREFRAME SECRETS REVEALED

DRAFT

t @elida_ca

HELLO WORDCAMPERS

elida @ elida.ca

(slideshare.net/elida-arrizza)

• UX Designer at Sid Lee • Photographer • Designer • Teacher

ca.linkedin.com/in/elida

ELIDA ARRIZZA

bit.ly/WCTO2014wireframes

THE DARK MYSTERIES

WHERE? WHAT? WHY? HOW? WHEN?

WHERE?

LOCK AND KEY

WHERE DO THEY LIVE?

IN THE ARCHIVES WASTE BINSBACK ROOM

WHERE ARE THEY APPLIED?

APPS

OTHER CREATIVE PLANSENVIRONMENT PLANS TECHY PLANS

http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2

WHAT?

A TOOL IN THE CREATIVE AND PRODUCTION PROCESS TO MATERIALIZE IDEAS IN A STRUCTURAL AND VISUAL WAY

SO WHAT THE HECK ARE THEY?

Sketching Lo-fi wireframing

Hi-Fi wireframing + Prototyping

Illustrations/ Mockup

Live product

TYPICAL PROCESS

http://en.wikipedia.org/wiki/Florence_Cathedral#mediaviewer/File:1898098977mmmtr7684.JPG

EXAMPLE: TOURISMEMONTREAL.COM/BLOG

Wireframe courtesy: Anne-Sophie Pelletier, Sid Lee

Wireframe Live site

WHY?

SIMPLIFIED VISUALIZATION COMMUNICATION PLATFORM EFFICIENCY ALLOW FLEXIBILITY FOR INTERPRETATION

WIREFRAMES WITH BENEFITS!

<CODE>

DESIGN

CONTENT

WIREFRAMES CONNECT 3 ELEMENTS

WIREFRAMES +

USER EXPERIENCE

COMMUNICATION TOOLEXAMPLE 1 : EASY TO COMPARE STRUCTURAL ELEMENTS, BEFORE COMMITTING IN MOCKUP MODE.

EXAMPLE 2 : WP 2.7>DASHBOARD> ADD NEW POST

http://wpdotorg.files.wordpress.com/2008/10/wf-dashboard_v002_093008jw.pdf

Wireframe Live site

COMMUNICATION TOOL

COLLABORATIVE ALLOW FLEXIBILITY FOR INTERPRETATION AND ITERATION ALWAYS A WORK IN PROGRESS CLEAR AND CONCISE

THE BEST WIREFRAMES ARE:

HOW?

CLASSIC TOOLS FOR SKETCHINGWHEN YOU NEED AN IMMEDIATE NO FRILLS SKETCH

USE SOFTWARE YOU ARE CONFORTABLE WITHALL YOU NEED IS BOXES, LINES AND TEXT ON A PAGE

GOOD NEWS FOR SPREADSHEET PEOPLE

STEP IT UP WITH SPECIALIZED TOOLSAXURE, BALSAMIQ MOCKUPS AND HUNDREDS MORE OUT THERE WITH ENDLESS FEATURESAxure interface example Basamiq Mockups UI library

GOOGLE “WIREFRAME SOFTWARE COMPARISON CHART”

WHAT TO DRAW?LO-FI HI-FI

HOW T0 SHOW FLOW AND INTERACTIVITY?WITH DYNAMIC WIREFRAMES

Hotspots that hyperlinks to another wireframe.

ADD INTERACTIVITY, FLOW, BASIC ANIMATION TO SIMULATE THE EXPERIENCE.

WF VS. PROTOTYPE: WHAT’S THE DIFF?

WIREFRAMES PROTOTYPE UNIVERSE

Multi dimensional Contextual Flow

THE PURPOSE OF A PROTOTYPE IS TO SIMULATE A PART OF THE EXPERIENCE.

DYNAMIC WIREFRAMES

PAPER PROTOTYPESearch Google images for more inspiration

THE CLASSIC PROTOTYPE EXAMPLE

#COMPUTERHISTORY

Paper and wood Palm prototype

https://www.flickr.com/photos/ruth_martin/8798075063/in/photostream/

WHEN?

STATIC

LO-FI HI-FI

DYNAMIC

WHEN DO I NEED A WIREFRAME?

PROBABLY NOIT DEPENDSPROBABLY YES

THE MORE YOU USE THEM, THE MORE YOU KNOW *WHEN* TO USE THEM!

REVERSE WIREFRAMING

REVERSE WIREFRAMING

Single post page example

Header.php

Footer.php

Content

comments.php

With wireframe zoning drawn on topWP WIREFRAME ZONING EXERCISE

Theme Files

<?php get_header(); ?>{ The Page's Content and the Loop live Here}<?php get_sidebar(); ?><?php get_footer(); ?>

Template tagsSingle.php Template

Header.php

Footer.php

ContentSidebar.php

comments.php

WP WIREFRAME ZONING EXERCISE

CREATE CUSTOM WP TEMPLATES BY WIREFRAMING FIRST!

Say I want a fancy homepage like this

page.php DEFAULT TEMPLATE

Say I want a page without a sidebar

like this

page-nosidebar.phppage-home.phppage.php

THEN MAKE IT!

#LadiesLearningCode/WordPress Worksop for Beginners/Montreal /June 2014

DEFAULT TEMPLATE CUSTOM TEMPLATES

SECRETS REVEALED

WHAT? WHY? HOW? WHEN?WHERE?

2 TAKE AWAYS!You have a planning and communication tool in your web toolkit!

WIREFRAMING

Better understanding on how to connect the 3 tracks

<CODE>

DESIGN

CONTENTWF

HOMEWORKWireframe Software comparison chart

insideintercom.io/things-cant-wireframed/

StyleTil.es

LukeW.com

socialcompare.com/en/comparison/mockup-wireframing-design-tools

Good Article: Some Things Can’t be Wireframes

Web Design process for Clients & the Responsive Web

You can learn a lot on responsive from this dude

1234

many responsive! big

smart!

wow secrets! much

wireframe!such

WordPress!very

blocks!

so websites!

QUESTIONS? THANKS AND GOOD LUCK!t @elida_ca

(slideshare.net/elida-arrizza)bit.ly/WCTO2014wireframes

WHAT ABOUT #RWD?But Elida,

http://www.lukew.com/ff/entry.asp?1514

WIREFRAMES AND RESPONSIVEZONING CHOREOGRAPHY STYLE TILE ITERATIONS

http://styletil/es