Wireframe Secrets Revealed, WordCamp Toronto 2014
-
Upload
elida-arrizza -
Category
Technology
-
view
1.188 -
download
0
Transcript of Wireframe Secrets Revealed, WordCamp Toronto 2014
![Page 1: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/1.jpg)
ELIDA ARRIZZA | WORDCAMP TORONTO 2014
WIREFRAME SECRETS REVEALED
DRAFT
![Page 2: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/2.jpg)
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
![Page 3: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/3.jpg)
THE DARK MYSTERIES
WHERE? WHAT? WHY? HOW? WHEN?
![Page 4: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/4.jpg)
WHERE?
![Page 5: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/5.jpg)
LOCK AND KEY
WHERE DO THEY LIVE?
IN THE ARCHIVES WASTE BINSBACK ROOM
![Page 6: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/6.jpg)
WHERE ARE THEY APPLIED?
APPS
OTHER CREATIVE PLANSENVIRONMENT PLANS TECHY PLANS
http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2
![Page 7: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/7.jpg)
WHAT?
![Page 8: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/8.jpg)
A TOOL IN THE CREATIVE AND PRODUCTION PROCESS TO MATERIALIZE IDEAS IN A STRUCTURAL AND VISUAL WAY
SO WHAT THE HECK ARE THEY?
![Page 9: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/9.jpg)
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
![Page 10: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/10.jpg)
EXAMPLE: TOURISMEMONTREAL.COM/BLOG
Wireframe courtesy: Anne-Sophie Pelletier, Sid Lee
Wireframe Live site
![Page 11: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/11.jpg)
WHY?
![Page 12: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/12.jpg)
SIMPLIFIED VISUALIZATION COMMUNICATION PLATFORM EFFICIENCY ALLOW FLEXIBILITY FOR INTERPRETATION
WIREFRAMES WITH BENEFITS!
![Page 13: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/13.jpg)
<CODE>
DESIGN
CONTENT
WIREFRAMES CONNECT 3 ELEMENTS
WIREFRAMES +
USER EXPERIENCE
![Page 14: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/14.jpg)
COMMUNICATION TOOLEXAMPLE 1 : EASY TO COMPARE STRUCTURAL ELEMENTS, BEFORE COMMITTING IN MOCKUP MODE.
![Page 15: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/15.jpg)
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
![Page 16: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/16.jpg)
![Page 17: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/17.jpg)
![Page 18: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/18.jpg)
COLLABORATIVE ALLOW FLEXIBILITY FOR INTERPRETATION AND ITERATION ALWAYS A WORK IN PROGRESS CLEAR AND CONCISE
THE BEST WIREFRAMES ARE:
![Page 19: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/19.jpg)
HOW?
![Page 20: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/20.jpg)
CLASSIC TOOLS FOR SKETCHINGWHEN YOU NEED AN IMMEDIATE NO FRILLS SKETCH
![Page 21: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/21.jpg)
![Page 22: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/22.jpg)
USE SOFTWARE YOU ARE CONFORTABLE WITHALL YOU NEED IS BOXES, LINES AND TEXT ON A PAGE
![Page 23: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/23.jpg)
GOOD NEWS FOR SPREADSHEET PEOPLE
![Page 24: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/24.jpg)
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”
![Page 25: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/25.jpg)
![Page 26: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/26.jpg)
![Page 27: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/27.jpg)
WHAT TO DRAW?LO-FI HI-FI
![Page 28: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/28.jpg)
HOW T0 SHOW FLOW AND INTERACTIVITY?WITH DYNAMIC WIREFRAMES
Hotspots that hyperlinks to another wireframe.
ADD INTERACTIVITY, FLOW, BASIC ANIMATION TO SIMULATE THE EXPERIENCE.
![Page 29: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/29.jpg)
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
![Page 30: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/30.jpg)
PAPER PROTOTYPESearch Google images for more inspiration
![Page 31: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/31.jpg)
THE CLASSIC PROTOTYPE EXAMPLE
#COMPUTERHISTORY
Paper and wood Palm prototype
https://www.flickr.com/photos/ruth_martin/8798075063/in/photostream/
![Page 32: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/32.jpg)
WHEN?
![Page 33: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/33.jpg)
STATIC
LO-FI HI-FI
DYNAMIC
![Page 34: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/34.jpg)
WHEN DO I NEED A WIREFRAME?
PROBABLY NOIT DEPENDSPROBABLY YES
THE MORE YOU USE THEM, THE MORE YOU KNOW *WHEN* TO USE THEM!
![Page 35: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/35.jpg)
REVERSE WIREFRAMING
![Page 36: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/36.jpg)
REVERSE WIREFRAMING
![Page 37: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/37.jpg)
Single post page example
Header.php
Footer.php
Content
comments.php
With wireframe zoning drawn on topWP WIREFRAME ZONING EXERCISE
![Page 38: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/38.jpg)
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
![Page 39: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/39.jpg)
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 40: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/40.jpg)
page-nosidebar.phppage-home.phppage.php
THEN MAKE IT!
#LadiesLearningCode/WordPress Worksop for Beginners/Montreal /June 2014
DEFAULT TEMPLATE CUSTOM TEMPLATES
![Page 41: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/41.jpg)
SECRETS REVEALED
WHAT? WHY? HOW? WHEN?WHERE?
![Page 42: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/42.jpg)
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
![Page 43: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/43.jpg)
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
![Page 44: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/44.jpg)
many responsive! big
smart!
wow secrets! much
wireframe!such
WordPress!very
blocks!
so websites!
![Page 45: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/45.jpg)
QUESTIONS? THANKS AND GOOD LUCK!t @elida_ca
(slideshare.net/elida-arrizza)bit.ly/WCTO2014wireframes
![Page 46: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/46.jpg)
WHAT ABOUT #RWD?But Elida,
![Page 47: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/47.jpg)
http://www.lukew.com/ff/entry.asp?1514
WIREFRAMES AND RESPONSIVEZONING CHOREOGRAPHY STYLE TILE ITERATIONS
http://styletil/es
![Page 48: Wireframe Secrets Revealed, WordCamp Toronto 2014](https://reader034.fdocuments.in/reader034/viewer/2022042614/5594586c1a28ab732f8b47bb/html5/thumbnails/48.jpg)