Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | elida-arrizza |
View: | 781 times |
Download: | 2 times |
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