Upload
bigrock-india
View
107
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Shashank Mehrotra, Business Head at BigRock talks about the art of wire framing to build websites at BigRock httpX 2013 Mumbai
Citation preview
WHAT’S COMMON TO BUILDING GREAT WEBSITES AND GREAT FILMS: LESSONS LEARNT FROM 3 YEARS OF MAKING BIGROCK TV FILMS
SCRIPT
STORYBOARD
PRE-PRODUCTION
FILMING
POST-PRODUCTION
REQUIREMENTS/OBJECTIVES
WIREFRAME
VISUAL DESIGN
CODING
INTEGRATION/TESTING
Wireframe (noun) A visual representation of the structure of a web page
Storyboard (noun) a series of sketches or photographs showing the sequence of shots or images planned for a film
LET’S EXPLORE 5 COMMON THEMES
1. COMMUNICATION
“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.”
LET’S SEE THE FINAL FILM
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
2. REWORK
Cut to footage of a woman chained to the temple stone pillars and screaming.
Cut to footage of a man chained to the temple stone pillars and screaming
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
3. STRUCTURE & FLOW
Happy case
Exception case
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
4. BLUEPRINTS FOR THE BUILDERS
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?
5. THE BEST OF THE BEST USE THEM
WIREFRAMES ARE USED BY THE BEST TEAMS The top product designers & companies use them Clearly they are on to something? Experience shows they work
CONCLUSION: WIREFRAMES ARE OUR FRIENDS And help us get things done faster, better, cheaper …
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-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
THANK YOU ALL FOR COMING Until next time …