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

2. WHAT’S COMMON TO BUILDING GREAT
WEBSITES AND GREAT FILMS:
LESSONS LEARNT FROM 3 YEARS OF MAKING
BIGROCK TV FILMS

3. SCRIPT
STORYBOARD
PRE-PRODUCTION
FILMING
POST-PRODUCTION
REQUIREMENTS/OBJECTIVES
WIREFRAME
VISUAL DESIGN
CODING
INTEGRATION/TESTING

4. Wireframe (noun)
A visual representation of the structure of a web page

5. Storyboard (noun)
a series of sketches or photographs showing the sequence of
shots or images planned for a film

6. LET’S EXPLORE 5 COMMON THEMES

7. 1. COMMUNICATION

8. “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.”

11. LET’S SEE THE FINAL FILM

12. 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

13. 2. REWORK

14. Cut to footage of a woman chained to the temple stone pillars and screaming.

15. Cut to footage of a man chained to the temple stone pillars and screaming

16. 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

17. 3. STRUCTURE & FLOW

18. Happy case

19. Exception case

20. 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 

21. 4. BLUEPRINTS FOR THE BUILDERS

23. 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?

24. 5. THE BEST OF THE BEST USE THEM

32. WIREFRAMES ARE USED BY THE BEST TEAMS
The top product designers & companies use them
Clearly they are on to something?
Experience shows they work

33. CONCLUSION: WIREFRAMES ARE OUR FRIENDS
And help us get things done faster, better, cheaper …

34. 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

35. THANK YOU ALL FOR COMING
Until next time … 