+ All Categories
Home > Technology > Wireframe Secrets Revealed - WordCamp Montreal 2014

Wireframe Secrets Revealed - WordCamp Montreal 2014

Date post: 15-Jan-2015
Category:
Upload: elida-arrizza
View: 781 times
Download: 2 times
Share this document with a friend
Description:
Wireframes. Such a mysterious and elusive term. You may have heard rumours that they exist deep in the depths of waste bins napkins to top secret security compounds. Legend states that wireframes transcend powerful benefits of website creation. Some say they could be dangerous to use or almost extinct. Could this be all true? If blueprints are to a building, what wireframes are to a website, you could be missing out on fundamental knowledge. Let us embark on a LoFi to HiFi journey, discovering wireframe types, tools and much more. http://2014.montreal.wordcamp.org/session/wireframe-secrets-revealed/
Popular Tags:
42
ELIDA ARRIZZA | WORDCAMP MONTREAL 2014 WIREFRAME SECRETS REVEALED
Transcript
Page 1: Wireframe Secrets Revealed - WordCamp Montreal 2014

ELIDA ARRIZZA | WORDCAMP MONTREAL 2014

WIREFRAME SECRETS REVEALED

DRAFT

Page 2: Wireframe Secrets Revealed - WordCamp Montreal 2014

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

Page 3: Wireframe Secrets Revealed - WordCamp Montreal 2014

THE DARK MYSTERIES

WHERE? WHAT? WHY? HOW? WHEN?

Page 4: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHERE?

Page 5: Wireframe Secrets Revealed - WordCamp Montreal 2014

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.

Page 6: Wireframe Secrets Revealed - WordCamp Montreal 2014

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

Page 7: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHAT?

Page 8: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 Montreal 2014

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 Montreal 2014

EXAMPLE: TOURISMEMONTREAL.COM/BLOG

Wireframe courtesy: Anne-Sophie Pelletier, Sid Lee

Wireframe Live site

Page 11: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHY?

Page 12: Wireframe Secrets Revealed - WordCamp Montreal 2014

<CODE>

DESIGN

CONTENT

WIREFRAMES CONNECT 3 ELEMENTS

WIREFRAMES +

USER EXPERIENCE

Page 13: Wireframe Secrets Revealed - WordCamp Montreal 2014

COMMUNICATION TOOL

Full-width hero Content visible above the fold

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

Page 14: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 15: Wireframe Secrets Revealed - WordCamp Montreal 2014

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!

Page 16: Wireframe Secrets Revealed - WordCamp Montreal 2014

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

Page 17: Wireframe Secrets Revealed - WordCamp Montreal 2014

HOW?

Page 18: Wireframe Secrets Revealed - WordCamp Montreal 2014

CLASSIC TOOLS FOR SKETCHINGWHEN YOU NEED AN IMMEDIATE NO FRILLS SKETCH

Page 19: Wireframe Secrets Revealed - WordCamp Montreal 2014
Page 20: Wireframe Secrets Revealed - WordCamp Montreal 2014

STEP IT UP WITH COMMON SOFTWAREUSE WHAT YOU ARE COMFORTABLE WITH

ALL YOU NEED IS BOXES, LINES AND TEXT ON A PAGE

Page 21: Wireframe Secrets Revealed - WordCamp Montreal 2014

GOOD NEWS FOR SPREADSHEET PEOPLE

Page 22: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 23: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHAT TO DRAW?LO-FI HI-FI

Page 24: Wireframe Secrets Revealed - WordCamp Montreal 2014

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.

Page 25: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 26: Wireframe Secrets Revealed - WordCamp Montreal 2014

THE CLASSIC PROTOTYPE EXAMPLE

#COMPUTERHISTORY

Paper and wood Palm prototype

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

Page 27: Wireframe Secrets Revealed - WordCamp Montreal 2014

STATIC

LO-FI HI-FI

DYNAMIC

Page 28: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHEN?

Page 29: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHEN DO I NEED A WIREFRAME?

PROBABLY NOIT DEPENDSPROBABLY YES

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

Page 30: Wireframe Secrets Revealed - WordCamp Montreal 2014

REVERSE WIREFRAMING

Page 31: Wireframe Secrets Revealed - WordCamp Montreal 2014

REVERSE WIREFRAMING

Page 32: Wireframe Secrets Revealed - WordCamp Montreal 2014

Single post page example

Header.php

Footer.php

Content

comments.php

With wireframe zoning drawn on topWP WIREFRAME ZONING EXERCISE

Page 33: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 34: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 35: Wireframe Secrets Revealed - WordCamp Montreal 2014

page-nosidebar.phppage-home.phppage.php

THEN MAKE IT!

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

DEFAULT TEMPLATE CUSTOM TEMPLATES

Page 36: Wireframe Secrets Revealed - WordCamp Montreal 2014

SECRETS REVEALED

WHAT? WHY? HOW? WHEN?WHERE?

Page 37: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 38: Wireframe Secrets Revealed - WordCamp Montreal 2014

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 39: Wireframe Secrets Revealed - WordCamp Montreal 2014

many responsive! big

smart!

wow secrets! much

wireframe!such

WordPress!very

blocks!

so websites!

Page 40: Wireframe Secrets Revealed - WordCamp Montreal 2014

QUESTIONS? THANKS AND GOOD LUCK!t @elida_ca

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

Page 41: Wireframe Secrets Revealed - WordCamp Montreal 2014

WHAT ABOUT #RWD?But Elida,

Page 42: Wireframe Secrets Revealed - WordCamp Montreal 2014

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

WIREFRAMES AND RESPONSIVEZONING CHOREOGRAPHY STYLE TILE ITERATIONS

http://styletil/es


Recommended