Wireframe Secrets Revealed - WordCamp Montreal 2014

2,039 views
1,824 views

Published on

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/

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,039
On SlideShare
0
From Embeds
0
Number of Embeds
103
Actions
Shares
0
Downloads
55
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Wireframe Secrets Revealed - WordCamp Montreal 2014

  1. 1. WIREFRAME SECRETS REVEALED ELIDA ARRIZZA | WORDCAMP MONTREAL 2014
  2. 2. HELLO WORDCAMPERS t @elida_ca elida @ elida.ca • UX Designer at Sid Lee • Photographer • Designer • Teacher (slideshare.net/elida-arrizza) ca.linkedin.com/in/elida ELIDA ARRIZZA bit.ly/WCMTL2014wireframes
  3. 3. THE DARK MYSTERIES WHERE? WHAT? WHY? HOW? WHEN?
  4. 4. WHERE?
  5. 5. If you want to learn about them by example, the pickings are very slim. LOCK AND KEY WHERE DO THEY LIVE? BACK ROOM IN THE ARCHIVES WASTE BINS 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 officemax.com https://www.flickr.com/photos/30368236@N08/
  6. 6. WHERE ARE THEY APPLIED? ENVIRONMENT PLANS TECHY PLANS OTHER CREATIVE PLANS Urban planning Architecture 3D Rendering etc. APPS Software, Apps, Game Design, Websites etc. Storyboards Data visualization etc. http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2
  7. 7. WHAT?
  8. 8. SO WHAT THE HECK ARE THEY? A TOOL IN THE CREATIVE AND PRODUCTION PROCESS TO MATERIALIZE IDEAS IN A STRUCTURAL AND VISUAL WAY
  9. 9. 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
  10. 10. EXAMPLE: TOURISMEMONTREAL.COM/BLOG Wireframe Live site Wireframe courtesy: Anne-Sophie Pelletier, Sid Lee
  11. 11. WHY?
  12. 12. WIREFRAMES CONNECT 3 ELEMENTS <CODE> DESIGN WIREFRAMES + USER EXPERIENCE CONTENT
  13. 13. COMMUNICATION TOOL EXAMPLE 1 : EASY TO COMPARE STRUCTURAL ELEMENTS, BEFORE COMMITTING IN MOCKUP MODE. Full-width hero Content visible above the fold
  14. 14. COMMUNICATION TOOL EXAMPLE 2 : WP 2.7>DASHBOARD> ADD NEW POST Wireframe Live site http://wpdotorg.files.wordpress.com/2008/10/wf-dashboard_v002_093008jw.pdf
  15. 15. WIREFRAMES WITH BENEFITS! 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 !
  16. 16. BEWARE OF WIREFRAME MISUSE 1. 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
  17. 17. HOW?
  18. 18. CLASSIC TOOLS FOR SKETCHING WHEN YOU NEED AN IMMEDIATE NO FRILLS SKETCH
  19. 19. STEP IT UP WITH COMMON SOFTWARE USE WHAT YOU ARE COMFORTABLE WITH ALL YOU NEED IS BOXES, LINES AND TEXT ON A PAGE
  20. 20. GOOD NEWS FOR SPREADSHEET PEOPLE
  21. 21. STEP IT UP WITH SPECIALIZED TOOLS AXURE, BALSAMIQ MOCKUPS AND HUNDREDS MORE OUT THERE WITH ENDLESS FEATURES Axure interface example Basamiq Mockups UI library GOOGLE “WIREFRAME SOFTWARE COMPARISON CHART”
  22. 22. WHAT TO DRAW? LO-FI HI-FI
  23. 23. HOW T0 SHOW FLOW AND INTERACTIVITY? WITH DYNAMIC WIREFRAMES ADD INTERACTIVITY, FLOW, BASIC ANIMATION TO SIMULATE THE EXPERIENCE. Hotspots that hyperlinks to another wireframe. DEMO
  24. 24. 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
  25. 25. THE CLASSIC PROTOTYPE EXAMPLE Paper and wood Palm prototype #COMPUTERHISTORY https://www.flickr.com/photos/ruth_martin/8798075063/in/photostream/
  26. 26. DYNAMIC LO-FI HI-FI STATIC
  27. 27. WHEN?
  28. 28. WHEN DO I NEED A WIREFRAME? THE MORE YOU USE THEM, THE MORE YOU KNOW *WHEN* TO USE THEM! PROBABLY YES IT DEPENDS PROBABLY NO
  29. 29. REVERSE WIREFRAMING
  30. 30. REVERSE WIREFRAMING
  31. 31. WP WIREFRAME ZONING EXERCISE Single post page example With wireframe zoning drawn on top Header.php Content comments.php Footer.php
  32. 32. WP WIREFRAME ZONING EXERCISE Single.php Template Theme Files Template tags Header.php <?php get_header(); ?>! { The Page's Content and the Loop live Here}! <?php get_sidebar(); ?>! <?php get_footer(); ?> Content Footer.php Sidebar.php comments.php
  33. 33. CREATE CUSTOM WP TEMPLATES BY WIREFRAMING FIRST! Say I want a fancy homepage like this DEFAULT TEMPLATE page.php Say I want a page without a sidebar like this
  34. 34. THEN MAKE IT! DEFAULT TEMPLATE CUSTOM TEMPLATES page.php page-home.php page-nosidebar.php #LadiesLearningCode/WordPress Worksop for Beginners/Montreal /June 2014
  35. 35. SECRETS REVEALED WHERE? WHAT? WHY? HOW? WHEN?
  36. 36. 2 TAKE AWAYS! You have a planning and communication tool in your web toolkit! WIREFRAMING Better understanding on how to connect the 3 tracks DESIGN <CODE> WF CONTENT
  37. 37. HOMEWORK Wireframe Software comparison chart socialcompare.com/en/comparison/mockup-wireframing-design-tools Good Article: Some Things Can’t be Wireframes insideintercom.io/things-cant-wireframed/ Web Design process for Clients & the Responsive Web StyleTil.es You can learn a lot on responsive from this dude LukeW.com 1 2 3 4
  38. 38. many responsive! big smart! wow secrets! much wireframe! such WordPress! very blocks! so websites!
  39. 39. QUESTIONS? THANKS AND GOOD LUCK! t @elida_ca bit.ly/WCMTL2014wireframes (slideshare.net/elida-arrizza)
  40. 40. But Elida, WHAT ABOUT #RWD?
  41. 41. WIREFRAMES AND RESPONSIVE ZONING CHOREOGRAPHY STYLE TILE ITERATIONS http://www.lukew.com/ff/entry.asp?1514 http://styletil/es

×