Designing in the browser
@divya ★ Slides: nimbu.in/codemelb
Advanced Web and Interactivity Engineer at Adobe
Previously, Web Opener at Opera
What am I talking about?
Why Mockups Suck
Web Design
No longer the legacy of print
Dynamic
Design the interaction experience
Product design
Embrace the constraints of the web
No pixel perfection
Uncertainity of features
Things never designed to interact, will
You cannot control the content
Print Tools ≠ Web Design Tools
Makes features appear trivial
Tweaks are impossible and hard to do even with templates
Lorem Ipsum can only go so far
Not easy to recreate CSS3 effects without much work
What does prototyping provide?
Design around content, user interaction
Use print tools to augment the prototype
(see Prototyping with XHTML)
Find where design breaks experience of users
Find where data breaks design
(see Wireframing for Web Apps)
Templates for any use
Design for complexity and uncertainty
(see Taming Complexity)
Build from ground up with design break points
(see: Stephen Hay's presentation)
What you shouldn't be concerned about
Performance
Pointless Semantics
Pixel Perfection, Layout perfection
Old IE Compatibility
Tools for Prototyping
Sensible Defaults:
HTML5 Boilerplate
Naming Conventions: BEM | Nicolas Gallagher's conventions
Getting real fake data: Faker.js
Design Scaffolding: Twitter Bootstrap
Use CodeKit or LiveReload to save on ⌘+r
In Action
Thanks
Made with impress.js