ELIDA ARRIZZA | WORDCAMP MONTREAL 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/WCMTL2014wireframes

THE DARK MYSTERIES

WHERE? WHAT? WHY? HOW? WHEN?

WHERE?

LOCK AND KEY

WHERE DO THEY LIVE?IN THE ARCHIVES WASTE BINSBACK ROOM

http://wiki.openstreetmap.org/wiki/File:Server-ramoth-and-bowser.jpg

http://en.wikipedia.org/wiki/The_Pentagon#mediaviewer/File:The_Pentagon_January_2008.jpg

https://www.flickr.com/photos/30368236@N08/officemax.com

If you want to learn about them by example, the pickings are very slim.

Urban planning Architecture 3D Rendering etc.

WHERE ARE THEY APPLIED?

Software, Apps, Game Design, Websites etc.

APPS

Storyboards Data visualization etc.

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?

<CODE>

DESIGN

CONTENT

WIREFRAMES CONNECT 3 ELEMENTS

WIREFRAMES +

USER EXPERIENCE

COMMUNICATION TOOL

Full-width hero Content visible above the fold

EXAMPLE 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

1. Better understanding and design, technical and content

2. Enables clearer communication within all parties for More efficient to update that mockups (less layer comp exports)

3. Clearer feature clarification 4. Helps keep the project focus 5. Overall more efficiency - time saving and less

frustrations than without !

WIREFRAMES WITH BENEFITS!

BEWARE OF WIREFRAME MISUSE1. Ensure Wireframes are collaborative and iterative 2. Don’t worry about perfection 3. Keep perspective of your project 4. Locking things down too early is dangerous 5. Draw only what’s necessary at the time. 6. Can be poorly interpreted in the Design phase

DEPENDING ON THE NEED, PROTOTYPING MAY BE BETTER SUITED

HOW?

CLASSIC TOOLS FOR SKETCHINGWHEN YOU NEED AN IMMEDIATE NO FRILLS SKETCH

STEP IT UP WITH COMMON SOFTWAREUSE WHAT YOU ARE COMFORTABLE WITH

ALL 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?

DEMO

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

THE CLASSIC PROTOTYPE EXAMPLE

#COMPUTERHISTORY

Paper and wood Palm prototype

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

STATIC

LO-FI HI-FI

DYNAMIC

WHEN?

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/WCMTL2014wireframes

WHAT ABOUT #RWD?But Elida,

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

WIREFRAMES AND RESPONSIVEZONING CHOREOGRAPHY STYLE TILE ITERATIONS

http://styletil/es