bringing design to life
DESCRIPTION
I gave this talk at WebVisions 09. May 21 2009. DESCRIPTION "Any sufficiently advanced technology is indistinguishable from magic." -Arthur C. Clarke, "Profiles of the Future", 1961 (Clarke's third law) At most companies, designers and engineers live in completely different worlds. For many designers the work of engineering is indistinguishable from magic. This unfortunately makes creating a finely crafted user experience much harder than it should be. Not knowing what is possible or proposing the impossible both hinder the synergy between design and engineering. Understanding the interface engineer's bag of tricks can go a long way to closing the gap between these two worlds. What is now possible in the browser? And what is still hard to do? In this session, Bill will focus specifically on the challenges and the opportunities for DHTML-based web sites and applications. Drawing from 25 years of experience in designing and engineering interface solutions as well as leading design and engineering organizations, Bill will provide a set of guiding principles as well as concrete, real world examples of what is now possible and what is still hard to do given the current technology landscape.TRANSCRIPT
![Page 1: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/1.jpg)
Bringing Design to Lifewhat engineers wish designers knew
WebVisionsBill Scott
May. 21, 2009
![Page 2: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/2.jpg)
My Background
![Page 3: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/3.jpg)
design & engineering
![Page 4: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/4.jpg)
Developers vs Designers
http://flickr.com/photos/f-l-e-x/3096005116/http://flickr.com/photos/urbanwoodswalker/2690236070/
![Page 5: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/5.jpg)
Developers vs Designers
DHTML developersJavascript developers
PHP/JSP/ASP developersProduce site code
Visual designersInformation architectsInteraction designersProduce designs & assets
http://flickr.com/photos/f-l-e-x/3096005116/http://flickr.com/photos/urbanwoodswalker/2690236070/
![Page 6: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/6.jpg)
Two Worlds?http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
![Page 7: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/7.jpg)
Two Worlds?
Implementation focus
Constrained by browsers
Inspiration focus
Constrained by ideation
http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
![Page 8: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/8.jpg)
Two Worlds?
Implementation focus
Constrained by browsers
Inspiration focus
Constrained by ideation
In reality, some developers have a very creative !air and some designers are very logical.
Nevertheless, the concerns of each role create a natural division between the two worlds.
http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
![Page 9: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/9.jpg)
UI Engineering @ Net!ix
![Page 10: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/10.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
![Page 11: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/11.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
In our world requires mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
![Page 12: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/12.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
In our world requires mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
Must also have a love for good designSome of our engineers started as designers
![Page 13: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/13.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
In our world requires mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
Must also have a love for good designSome of our engineers started as designers
Must have a desire to say “Yes, we can”Problems should be challenges, not show-stoppers
![Page 14: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/14.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
In our world requires mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
Must also have a love for good designSome of our engineers started as designers
Must have a desire to say “Yes, we can”Problems should be challenges, not show-stoppers
Partner with design through prototypesAs rapid and as early as possible
![Page 15: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/15.jpg)
UI Engineering @ Net!ixElsewhere calledWeb dev, front end engineer (Y!), interface engineer
In our world requires mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
Must also have a love for good designSome of our engineers started as designers
Must have a desire to say “Yes, we can”Problems should be challenges, not show-stoppers
Partner with design through prototypesAs rapid and as early as possible
Weekly roundtables to discuss detailsConstant communication is critical
![Page 16: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/16.jpg)
What is good design?
![Page 17: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/17.jpg)
What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well
![Page 18: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/18.jpg)
What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well
![Page 19: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/19.jpg)
What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well
Not just visual designNot just information architectureNot just interaction designBut the careful blending of the three disciplinesMust look good and also work well
![Page 20: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/20.jpg)
What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well
Not just visual designNot just information architectureNot just interaction designBut the careful blending of the three disciplinesMust look good and also work well
![Page 21: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/21.jpg)
What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well
Not just visual designNot just information architectureNot just interaction designBut the careful blending of the three disciplinesMust look good and also work well
Not just in photoshop, but a living experience for the userMust look good and also work well
![Page 22: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/22.jpg)
guiding principles for designerswhat engineers wish you understood...
![Page 23: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/23.jpg)
1. the site is dynamicphotoshop is static.
the site is not.
![Page 24: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/24.jpg)
dynamicDynamic Content“Content is a big part of your design. don't forget about it. integrate it. make it functional.” (Nate Koechley)
“There’s always less space in the design for text once you translate to German.” (Nicholas Zakas)
Credit: Scaleable Design by Luke Wroblewskihttp://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
![Page 25: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/25.jpg)
dynamicDynamic ContentEven something as simple as a title. Rarely do long titles show up in comps produced in photoshop.
suggested movies from net!ix.com home page
![Page 26: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/26.jpg)
dynamicDynamic ContentEven something as simple as a title. Rarely do long titles show up in comps produced in photoshop.
suggested movies from net!ix.com home page
![Page 27: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/27.jpg)
dynamic
Understand how to design for a large or di"cult to acquire data set
Dynamic Content
excerpt from a large member queue on Net!ix
Yahoo! Mail On-Demand Scrolling
drag & drop, performance,
chunking
![Page 28: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/28.jpg)
dynamic
Understand how to design for a large or di"cult to acquire data set
Dynamic Content
excerpt from a large member queue on Net!ix
Yahoo! Mail On-Demand Scrolling
drag & drop, performance,
chunking
![Page 29: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/29.jpg)
dynamic
Understand how to design for a large or di"cult to acquire data set
Dynamic Content
excerpt from a large member queue on Net!ix
Yahoo! Mail On-Demand Scrolling
drag & drop, performance,
chunking
![Page 30: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/30.jpg)
dynamic
Understand how to design for a large or di"cult to acquire data set
Dynamic Content
excerpt from a large member queue on Net!ix
Yahoo! Mail On-Demand Scrolling
drag & drop, performance,
chunking
![Page 31: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/31.jpg)
dynamic
Understand how to design for a large or di"cult to acquire data set
Dynamic Content
excerpt from a large member queue on Net!ix
Yahoo! Mail On-Demand Scrolling
drag & drop, performance,
chunking
![Page 32: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/32.jpg)
dynamicDynamic LayoutThink about the resize eventDesign for di#erent formats when necessaryWhat about the scroll bar?
dynamic layout in International Herald Tribune
![Page 33: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/33.jpg)
dynamicScaleable DesignScreen frameworks
Credit: Scaleable Design by Luke Wroblewskihttp://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
Designing Web Interfaces: 12 Screen Patternshttp://tinyurl.com/8kr6yq
![Page 34: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/34.jpg)
dynamicScaleable DesignScreen frameworks
Credit: Scaleable Design by Luke Wroblewskihttp://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
![Page 35: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/35.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
![Page 36: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/36.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
![Page 37: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/37.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
![Page 38: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/38.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
![Page 39: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/39.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
![Page 40: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/40.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
![Page 41: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/41.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
![Page 42: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/42.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
![Page 43: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/43.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
interesting moments grid
![Page 44: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/44.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
confusing interaction. net!ix
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
interesting moments grid
![Page 45: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/45.jpg)
dynamic
Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework
Dynamic Interaction
confusing interaction. net!ix
thoughtful approach to blending modes. Yahoo! 360
drag and drop on My Yahoo!
interesting moments grid
improved interaction. net!ix
![Page 46: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/46.jpg)
dynamicKeyframe with Photoshop
![Page 47: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/47.jpg)
dynamicKeynote: Keyframe WireframesUsing page transitions and simple animation transitions
![Page 48: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/48.jpg)
dynamicKeynote: Keyframe WireframesUsing page transitions and simple animation transitions
![Page 49: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/49.jpg)
dynamicKeynote: Simulating Interaction
![Page 50: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/50.jpg)
dynamicKeynote: Simulating Interaction
![Page 51: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/51.jpg)
dynamicKeynote: Simulating Interaction
net!ix. rate & replace. interactive mockup
step one. button appears step one. second row moves down
the secret. hidden row behind solid mask
![Page 52: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/52.jpg)
dynamicMicrosoft Expression Blend
![Page 53: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/53.jpg)
dynamicFireworks CS4SlicesRich SymbolsCSS Export
PDF ExportSmart AlignPhotoshop Compatible Text
![Page 54: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/54.jpg)
dynamicAxure
![Page 55: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/55.jpg)
dynamicGotchas for dynamic designNot the same as printed page.
Photoshop = static
Use layers to simulate dynamic content
Learn how to prototype
Consider extremes and design for scalability.
Realize pixel-perfect layouts and font rendering will not look the same across all browsers/platformsstop worrying about where the line break is in a particular paragraph of text.
Take the challenge: consider the dynamic nature of the site a worthy design challenge
![Page 56: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/56.jpg)
2. technology is criticalweb design without technology is just art.
you must understand the magic that gets it on the site.
![Page 57: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/57.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
![Page 58: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/58.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
![Page 59: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/59.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
![Page 60: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/60.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
![Page 61: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/61.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
8 major browsers
![Page 62: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/62.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
8 major browsers
5 ways to layout elements
![Page 63: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/63.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
8 major browsers
5 ways to layout elements 6+ways to
vertically align
![Page 64: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/64.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
8 major browsers
5 ways to layout elements 6+ways to
vertically align
34 ways to improve performance
![Page 65: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/65.jpg)
technologychallenge of interface engineering
14 IE 6 layout bugs
63 rounded corner techniques
9 ways to layout columns
3 rendering engines
8 major browsers
5 ways to layout elements 6+ways to
vertically align
34 ways to improve performance
8 areas of focus
![Page 66: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/66.jpg)
technology
diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
challenge of interface engineering
![Page 67: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/67.jpg)
technology
9 knowledge areas
4 dimensions
3 platforms
4 browsers per platform
2 rendering modes
=672diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
challenge of interface engineering
![Page 68: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/68.jpg)
technologycompeting interestshigh performance
minimalist markup
unobtrusive javascriptordered markup (accessibility)semantic markup
minimal or no hacks
accessibilityinternationalization infrastructure
processtools
![Page 69: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/69.jpg)
technologyDesign for markupInstead of graphics dependent design, opt for markup based designLet content drive height
Previous way to render buttons. 84 graphic images. Net!ix.
button=image
![Page 70: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/70.jpg)
technologyDesign for markupInstead of graphics dependent design, opt for markup based designLet content drive height
Previous way to render buttons. 84 graphic images. Net!ix.
VShttp://www.alistapart.com/articles/slidingdoors/
sliding doors technique
button=image
![Page 71: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/71.jpg)
technologyBuilding assets for engineering concerns alsosimpli$es design work
Plan for spriting
Previous way to render stars. 51 separate images.
![Page 72: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/72.jpg)
technologyBuilding assets for engineering concerns alsosimpli$es design work
Plan for spriting
Previous way to render stars. 51 separate images.
one image, clipped in two places, combined for star rating
![Page 73: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/73.jpg)
technologyBuilding assets for engineering concerns alsosimpli$es design work
Plan for spriting
+
Previous way to render stars. 51 separate images.
one image, clipped in two places, combined for star rating
![Page 74: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/74.jpg)
technologyBuilding assets for engineering concerns alsosimpli$es design work
Plan for spriting
+
=
Previous way to render stars. 51 separate images.
one image, clipped in two places, combined for star rating
![Page 75: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/75.jpg)
technologyKnow how stu" gets usedOften design teams don’t know how their stu# ends up on the siteDo you deliver HTML/CSS that gets cut up into JSP/ASP/PHP?Do you deliver photoshop comps that get sliced/diced & html-ized?One simple tool is Firebug:
![Page 76: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/76.jpg)
technologyKnow what is challengingVertical alignmentvertical-align does not work on block elements; however display:inline-block is best
Rounded corners + drop shadow63 ways for rounded corners; 15 ways for drop shadow. Combined very tricky.
Pixel parity across all browsersStop worrying about pixel parity for IE6. Design for modern browsers and have graceful fallback for older browsers. See Transcending CSS, Molly H.
Equalizing height across columnsFaux approach works the best (background images fake out column height). But not known by all developers.
Pixel perfect widthsDue to IE6 bugs sometimes need a few extra pixels to avoid layout issues with !oats (double margin bug); usually $xed with display:inline
![Page 77: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/77.jpg)
technologyKnow what is challengingSpecifying minimum or maximum widthNot understood by IE6
Taming IE6At least 12 bugs concerning !oats & layout. These can be sinkholes in time
Hard to layout against the !owIn the current world, remember that this is a document model not a GUI layout engine
Height is harder to controlContent should normally drive the height
Not possible to render your Photoshop fontsUse browser-available fonts; SIFR and other solutions are buggy; specify alternates.
For the skill level of your engineers*Most* problems can be solved. Seasoned engineers will have a bag of tricks.
![Page 78: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/78.jpg)
technologyTipsKnow what your technology can and can’t doAt least at the high level. Think of it as your toolkit.
Not all designs cost the sameEverything has a cost. The cost may be in performance, development time, and/or maintenance time. We need to balance what you want against those costs each and every time. (zakas)
Know what your engineers can and can’t doNot all developers are created equally.
![Page 79: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/79.jpg)
3. components & grids are keydevelopers think in terms of reuse; designers often in terms of new work.
you must also design for reuse.
![Page 80: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/80.jpg)
components
Design for reuseThe temptation for most designers is variety for variety sake
Often designers get bored with their design before it gets fully realized on the site
They bristle at the thought of “reusable design”
![Page 81: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/81.jpg)
components
Embrace ComponentsDesign for each component & reuse throughout the siteInventory site & create a vocabulary for the common components
Do a holistic design for the components as a suite
Easy to map to engineering Components become tags, widgets, plugins, etc.
Results in cleaner CSS. Instead of CSS appearing hodge-podge across the site, it gets reused for components
See Object-Oriented CSS presentation on Slideshare by Nicole Sullivan
![Page 82: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/82.jpg)
components
Net!ix Site Elements/Components
![Page 83: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/83.jpg)
components
Net!ix Site Elements/Components
![Page 84: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/84.jpg)
components
Embrace GridsIt’s the right way to design anywaySee The Principles of Beautiful Web Design by Jason Beaird
Grids map to templatesThere are at least 12 CSS frameworks each supporting the concept of templates/gridshttp://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/
Establish templates and standards that are engineering approvedInclude engineering early & often to get these reusable assets “blessed”. They can make it happen. (@ Net!ix - Simpli$ed Visual Framework)
Reference grids & components in your designsCan be quickly referenced in order to facilitate faster design cycles.
Easy to match photoshop, illustrator templates with a CSS grid system
![Page 85: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/85.jpg)
components
Blueprint CSS Framework
![Page 86: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/86.jpg)
components
Blueprint CSS Framework
![Page 87: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/87.jpg)
components
Blueprint CSS Framework
![Page 88: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/88.jpg)
components
Blueprint CSS Framework
![Page 89: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/89.jpg)
components
![Page 90: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/90.jpg)
components
![Page 91: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/91.jpg)
components
![Page 92: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/92.jpg)
components
Net!ix Templates/Grids
![Page 93: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/93.jpg)
components
Net!ix Gallery Template
![Page 94: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/94.jpg)
components
Net!ix Gallery Template1
2
3
18
4
5
5
12
15
16
21
22
22
![Page 95: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/95.jpg)
4. partnership is imperativeit’s tempting to design and toss over the wall.
but the real magic happens during collaboration.
![Page 96: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/96.jpg)
partnershipQuotes“Our designers start to design things with development in mind, and our developers build code with design in mind. It’s really beautiful. “
“I’ve dealt with a couple of programmers in my career that were just ‘no’ guys - all day every day, no , no , no , - and it’s a terrible experience. There is ALWAYS a way to make something work.”
“From a designer’s perspective (which is really the only one I’ve got): both sides should learn as much as they can about the other sides’ disciplines. It can do nothing but good, fostering a greater understanding for what goes into the tasks each other have.”
![Page 97: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/97.jpg)
2 keysCommunicate & Iterate
partnership
![Page 98: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/98.jpg)
partnershipCommunicateVocabulary MismatchExample: Lockups
Mismatch: components, templates
Mappings: grids -> templates, site elements -> tags
Common Project: Simpli$ed Visual Framework (SVF)
![Page 99: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/99.jpg)
partnershipCommunicateVocabulary MismatchExample: Lockups
Mismatch: components, templates
Mappings: grids -> templates, site elements -> tags
Common Project: Simpli$ed Visual Framework (SVF)
![Page 100: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/100.jpg)
partnershipCommunicatePattern LibraryNice way to capture the templates, components, interactions that are common
Gets people speaking the same language
More useful in established organizations &where communication spans groups/borders
![Page 101: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/101.jpg)
partnershipCommunicateLearn how to talk to engineersengineers adverse to unnecessary change; designers must educate “why”
designers feel engineers push back to the point of a “broken design”
which leads to rework... just what they didn’t want
RoundtablesHas worked well @ Net!ix. Every Friday at 2pm.
Throw out ideas.
Discuss technical solutions to thorny problems.
Discuss vocabulary. Hear frustrations.
![Page 102: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/102.jpg)
partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”
engineers get surprised
![Page 103: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/103.jpg)
partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”
engineers get surprised
Get your design into the “wild”Make it visible everywhere
![Page 104: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/104.jpg)
partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”
engineers get surprised
Get your design into the “wild”Make it visible everywhere
Make it URL-accessibleStop sharing $les by email orembedding on the wiki. Use URLs.Front your $le system with an httpserver.
Use a Design Gallery to make everythingreviewed accessible before & after themeeting.
![Page 105: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/105.jpg)
partnershipIterate: PrototypePrototype. You know to do this but rarely is the time taken.This is where a good interface engineer, su"ciently motivated, passionate about interface can step up and be integral to the solution.
When engineering engages in a design like this... the results are beautiful. Everyone is happier (especially the users).
Build multiple prototypesFor interactive rich experiences it takes lots of variations (permutations).
View prototyping as a means to an end... not the $nal product.
![Page 106: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/106.jpg)
dynamicIterate: PrototypeKeynote & Powerpoint can create quick interactive mockupsKeynote: Smart builds, build ins, build outs and actions can simulate a real interface
Use a prototyping toolBalsamiq, Azure, iRise, Flash, Flex, Interactive PDFs, Fireworks + PDF, Visio, OmniGra%e
Prototyping is much more accessible now than in the pastPerhaps use jQuery for quick stu#?
Coupled with $rebug is a nice way to sprinkle in behavior to existing site
net!ix. rate & replace
![Page 107: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/107.jpg)
100+ variations prototyped over 1 weekWinnowed down between PMs, Design & Eng.Put before users the next week & again 2 weeks later
partnership
![Page 108: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/108.jpg)
5. yes we can interface engineers have the power to say “yes” more than ever
and even more reasons in the future
![Page 109: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/109.jpg)
yesIE8Extensions
Fully CSS Level 2.1-compliantNew pseudo classes
CSS based table layouts
Margin collapsing
hasLayout issues $xed!But don’t get too excited :-)ARIA support
http://tinyurl.com/79c552
IE8 Accelerators IE8 Web Slices IE8 Visual Search
![Page 110: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/110.jpg)
yesSafari/WebkitiPhone SupportDrag and Drop
Flick navigation
CSS Transforms
CSS Animation (keyframes)
More CSS GoodnessMasks
Re!ections
Canvas Drawing
Gradients
Marquee
Coming (Webkit v.528;Safari 3.2 v.525)Full pass of Acid3 (Current Safari does not)
SquirrelFish Extreme
![Page 111: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/111.jpg)
yesSafari 4 ARIA SupportEnhanced Keyboard NavigationFull-Page Zoom (font scaling)HTML CanvasCSS AnimationDownloadable Fonts (CSS 3 Web Fonts)CSS CanvasCSS E#ectsHTML 5 Audio & Video supportHTML 5 O%ine supportSVG 1.1 SupportWeb ClipTurn any web page into a Dashboard widget on your Mac
Resizable Text FieldsMulti-Touch
![Page 112: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/112.jpg)
yesChromeGoogle ChromeMac/Linux versions expected by $rst half of 2009. Very minimal market share. May grow, but not dominant
Application ShortcutsCreate Application Shortcut (think TV interfaces)
Think Web OSEach tab independent process
Comes with a Task Manager
Platform for web applications
Couple with Google Gears for o%ine application
![Page 113: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/113.jpg)
yesFirefox 3.1.x 3.5Location aware browsingOpen audio and video supportLocal data storageFaster page renderingFull CSS 3 Selector supportHTML 5 drag and drop API allows support for dragging and dropping items within and between web sitesDownloadable fonts support
![Page 114: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/114.jpg)
yesFirefox 4Prism Lets users split web applications out of the browser and run them directly on the desktop (application shortcuts)
Goal: Distraction Free Browsing (see also Mac OSX Fluid)
WeaveBrowser metadata is pushed into the cloudAutomatic backup and restorePersonalization made portableCollaborative bookmarking
GeocodeAutomatically tracks your location
Through GPS, Wi-Fi or manual entry type options and then serves you with any information you want to know
![Page 115: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/115.jpg)
yesYahoo! Browser PlusAllows developers to create rich web applications with desktop capabilitiesPhoto Uploader (Native Drag & Drop)
Access Motion Sensor
Plugin Architecture
![Page 116: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/116.jpg)
yesFirefox Mobile (Fennec)Humanized prototyping ideasAza Raskin & Scott Robbin
Very intelligent use of real estatePageSlide pattern
Zoomable User Interface (ZUI)
Design PrinciplesTouch
Large targets are good
Visual Momentum and Physics are compelling
Typing is di"cult
Content is king
http://vimeo.com/1152218http://www.azarask.in/blog/post/"refox-mobile-concept-video/
http://www.techcrunch.com/2009/03/18/fennec-"refox-mobile-shows-o#-its-beta/
![Page 117: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/117.jpg)
yesGoogle AndroidApps without bordersApps can access core mobile device functionality via API
Apps can easily embed the webEasily embed HTML, Javascript & stylesheets
Apps are created equalAny app can be extended or replaced
Apps can run in parallelMulti-tasking environment
![Page 118: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/118.jpg)
yesHTML 5FeaturesThe Canvas tag for immediate mode 2D drawing
Timed media playback
O%ine storage
Editing
Drag-and-drop
Messaging/networking
Back button and history management for Ajax/DHTML applications
New markup
Eliminated markup
CompatibilitySee http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
When Can I Use...?http://a.deveria.com/caniuse/
![Page 119: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/119.jpg)
yesTVPlexTV Interface (Open Source)
BoxeeTV Interface
Yahoo! TV WidgetsCompact Internet applications that deliver the Web to the TV
![Page 120: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/120.jpg)
yesSilverlightRich set of controlsRich media supportZoomable User Interface (ZUI)
![Page 121: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/121.jpg)
yesOther TechnologiesFlash 103D e#ects, custom $lters & e#ects, advanced text layout, enhanced drawing, sound
Flex 3Rich, expressive UI with large set of controls
Simple development environment
Nice for prototyping
Adobe AirApplications run without a web browser (though built with web technologies)
Merges DHTML & Flash world
![Page 122: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/122.jpg)
yesThere are still times to say “No”Designer fonts (Gotham!)
Text in graphics
Speci$ed heights
Hire developers that normally say “yes” and “get it”
![Page 123: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/123.jpg)
1. the site is dynamic2. technology is critical3. components are key4. partnership is imperative5. yes we can
![Page 124: Bringing Design to Life](https://reader033.vdocuments.net/reader033/viewer/2022050807/53f139ff8d7f72104c8b4750/html5/thumbnails/124.jpg)
Questions?