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 …