wireframe secrets revealed, wordcamp toronto 2014
TRANSCRIPT
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