The art and science of wire framing

1,129 views

Published on

Shashank Mehrotra, Business Head at BigRock talks about the art of wire framing to build websites at BigRock httpX 2013 Mumbai

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,129
On SlideShare
0
From Embeds
0
Number of Embeds
408
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The art and science of wire framing

  1. 1. WHAT’S COMMON TO BUILDING GREAT WEBSITES AND GREAT FILMS: LESSONS LEARNT FROM 3 YEARS OF MAKING BIGROCK TV FILMS
  2. 2. SCRIPT STORYBOARD PRE-PRODUCTION FILMING POST-PRODUCTION REQUIREMENTS/OBJECTIVES WIREFRAME VISUAL DESIGN CODING INTEGRATION/TESTING
  3. 3. Wireframe (noun) A visual representation of the structure of a web page
  4. 4. Storyboard (noun) a series of sketches or photographs showing the sequence of shots or images planned for a film
  5. 5. LET’S EXPLORE 5 COMMON THEMES
  6. 6. 1. COMMUNICATION
  7. 7. “The film opens on a row of factory workers wearing futuristic looking uniforms. They stand in front of a series of conveyor belts stamping dot.com and dot.net onto: a tailor with his sewing machine, a chocolatier, a doctor examining a patient, some mannequins wearing wigs, shoes, toothpaste, an architect, a Kathakali dancer, tea, ketchup bottles, a jewelry designer…as each object goes past.”
  8. 8. LET’S SEE THE FINAL FILM
  9. 9. WIREFRAMES SIMPLIFY COMMUNICATION With customers, coders, visual designers, QA, everyone, … Help sell – looks more ‘real’ than something on a piece of paper Reduce communication gaps Require less effort to digest / understand even for newbies
  10. 10. 2. REWORK
  11. 11. Cut to footage of a woman chained to the temple stone pillars and screaming.
  12. 12. Cut to footage of a man chained to the temple stone pillars and screaming
  13. 13. WIREFRAMES EMBRACE REWORK … EARLIER Rework = the reality When do you want to discover what your users really want? Rework earlier = Less Cost = Projects that deliver on time
  14. 14. 3. STRUCTURE & FLOW
  15. 15. Happy case
  16. 16. Exception case
  17. 17. WIREFRAMES LOCK DOWN USABILITY & FLOWS Identify problems with the logical flow of your website? What happens if I press this button? Map out happy case and sad case flow 
  18. 18. 4. BLUEPRINTS FOR THE BUILDERS
  19. 19. WIREFRAMES ARE BLUEPRINTS FOR TECHIES What will the database design look like? What backend components are required to enable this screen? What CSS / HTML components or form validations are needed?
  20. 20. 5. THE BEST OF THE BEST USE THEM
  21. 21. WIREFRAMES ARE USED BY THE BEST TEAMS The top product designers & companies use them Clearly they are on to something? Experience shows they work
  22. 22. CONCLUSION: WIREFRAMES ARE OUR FRIENDS And help us get things done faster, better, cheaper …
  23. 23. http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-webdesign-and-9-tools-to-create-wireframes/ http://mashable.com/2010/07/15/wireframing-tools/ http://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design http://www.orbitmedia.com/blog/7-reasons-to-wireframe Inspired by Marty Kagan
  24. 24. THANK YOU ALL FOR COMING Until next time … 

×