Bringing Design to Life
   what engineers wish designers knew

              WebVisions
               Bill Scott
        ...
My Background
design & engineering
Developers vs Designers



     http://flickr.com/photos/urbanwoodswalker/2690236070/   http://flickr.com/photos/f-l-e-x/309...
Developers vs Designers



      http://flickr.com/photos/urbanwoodswalker/2690236070/   http://flickr.com/photos/f-l-e-x/30...
Two Worlds?   http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
Two Worlds?         http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html




     Implementation focus ...
Two Worlds?          http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html




     Implementation focus...
UI Engineering @ Net ix
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer

In our world requires maste...
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer

In our world requires maste...
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer

In our world requires maste...
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer

In our world requires maste...
UI Engineering @ Net ix
Elsewhere called
Web dev, front end engineer (Y!), interface engineer

In our world requires maste...
What is good design?
What is good design?
Not just the form
Not just the function
But the artful blend of form and function
Must look good and ...
What is good design?
Not just the form
Not just the function
But the artful blend of form and function
Must look good and ...
What is good design?
Not just the form
Not just the function
But the artful blend of form and function
Must look good and ...
What is good design?
Not just the form
Not just the function
But the artful blend of form and function
Must look good and ...
What is good design?
Not just the form
Not just the function
But the artful blend of form and function
Must look good and ...
guiding principles for designers
       what engineers wish you understood...
1. the site is dynamic
      photoshop is static.
        the site is not.
dy
                                                                                na
Dynamic Content                     ...
dy
                                                                                  na
Dynamic Content                   ...
dy
                                                                                  na
Dynamic Content                   ...
dy
                                                                                          na
Dynamic Content           ...
dy
                                                                                          na
Dynamic Content           ...
dy
                                                                                          na
Dynamic Content           ...
dy
                                                                                          na
Dynamic Content           ...
dy
                                                                                          na
Dynamic Content           ...
dy
                                                                       na
Dynamic Layout                               ...
dy
                                                                                                                    na
...
dy
                                                                     na
Scaleable Design                               ...
dy
                                            na
Dynamic Interaction                              m
                     ...
dy
                                                              na
Dynamic Interaction                                   ...
dy
                                                              na
Dynamic Interaction                                   ...
dy
                                                              na
Dynamic Interaction                                   ...
dy
                                                                    na
Dynamic Interaction                             ...
dy
                                                                    na
Dynamic Interaction                             ...
dy
                                                                    na
Dynamic Interaction                             ...
dy
                                                                    na
Dynamic Interaction                             ...
dy
                                                                                               na
Dynamic Interaction  ...
dy
                                                                                                          na
Dynamic In...
dy
                                                                                                              na
Dynami...
dy
                            na
Keyframe with Photoshop          m
                                  ic
dy
                                                            na
Keynote: Keyframe Wireframes                            ...
dy
                                                            na
Keynote: Keyframe Wireframes                            ...
dy
                                    na
Keynote: Simulating Interaction          m
                                     ...
dy
                                    na
Keynote: Simulating Interaction          m
                                     ...
dy
                                                                                                          na
Keynote: S...
dy
                               na
Microsoft Expression Blend          m
                                     ic
dy
                                              na
Fireworks CS4                                      m
                 ...
dy
          na
Axure          m
                ic
dy
                                                                                   na
Gotchas for dynamic design       ...
2. technology is critical
     web design without technology is just art.
you must understand the magic that gets it on th...
te
                                    chn
challenge of interface engineering      ol
                                    ...
te
                                    chn
challenge of interface engineering      ol
                                    ...
te
                                           chn
challenge of interface engineering             ol
                      ...
te
                                           chn
challenge of interface engineering             ol
                      ...
te
                                                          chn
challenge of interface engineering                       ...
te
                                                             chn
challenge of interface engineering                    ...
te
                                                                  chn
challenge of interface engineering               ...
te
                                                                   chn
challenge of interface engineering              ...
te
                                                                    chn
challenge of interface engineering             ...
te
                                                                                                                  chn
c...
te
                                                                                                                  chn
c...
te
                                                  chn
competing interests                                   ol
        ...
te
                                                                        chn
Design for markup                          ...
te
                                                                                                             chn
Design...
te
                                                                                   chn
Plan for spriting               ...
te
                                                                                   chn
Plan for spriting               ...
te
                                                                                   chn
Plan for spriting               ...
te
                                                                                   chn
Plan for spriting               ...
te
                                                                   chn
Know how stu gets used                          ...
te
                                                                                            chn
Know what is challengin...
te
                                                                                          chn
Know what is challenging ...
te
                                                                                           chn
Tips                    ...
3. components & grids are key
developers think in terms of reuse; designers often in terms of new work.
                  ...
co
                                                                      m
Design for reuse




                          ...
co
                                                                                         m
Embrace Components




     ...
co
                                 m
Net ix Site Elements/Components




                                  po
           ...
co
                                 m
Net ix Site Elements/Components




                                  po
           ...
co
                                                                                            m
Embrace Grids




       ...
co
                             m
Blueprint CSS Framework




                              po
                           ...
co
                             m
Blueprint CSS Framework




                              po
                           ...
co
                             m
Blueprint CSS Framework




                              po
                           ...
co
                             m
Blueprint CSS Framework




                              po
                           ...
s
         nt
      ne
    po
   m
co
s
         nt
      ne
    po
   m
co
s
         nt
      ne
    po
   m
co
co
                            m
Net ix Templates/Grids




                             po
                              ...
co
                             m
Net ix Gallery Template




                              po
                           ...
co
                                                 m
Net ix Gallery Template




                                        ...
4. partnership is imperative
    it’s tempting to design and toss over the wall.
   but the real magic happens during coll...
pa
Quotes




                                                                        r tn
                               ...
pa
                           r
                          tn
                             er
                             ...
pa
Communicate




                                                         r
                                            ...
pa
Communicate




                                                         r
                                            ...
pa
Communicate




                                                    r
                                                 ...
pa
Communicate




                                                                           r
                          ...
pa
Communicate




                                                     r
                                                ...
pa
Communicate




                                                     r
                                                ...
pa
Communicate




                                                     r
                                                ...
pa
Iterate: Prototype




                                                                                              r
...
dy
                                                                                                     na
Iterate: Protot...
100+ variations prototyped over 1 week




                                              pa
                              ...
5. yes we can
interface engineers have the power to say “yes” more than ever
             and even more reasons in the fut...
IE8




                                                                               ye
                                ...
Safari/Webkit




                                               ye
                                                 s
iPh...
ARIA Support
Safari 4




                                                          ye
           Enhanced Keyboard Naviga...
Chrome




                                                                                        ye
                    ...
Firefox 3.1.x 3.5




                                                           ye
                                      ...
Firefox 4




                                                                           ye
                              ...
Yahoo! Browser Plus




                                                                 ye
                              ...
Firefox Mobile (Fennec)




                                                                                              ...
Google Android




                                                           ye
                                         ...
HTML 5




                                                                  ye
                                          ...
TV




                                                             ye
                                                   ...
Silverlight




                                ye
                                  s
Rich set of controls
Rich media sup...
Other Technologies




                                                                                  ye
              ...
There are still times to say “No”




                                                       ye
                          ...
1. the site is dynamic
2. technology is critical
3. components are key
4. partnership is imperative
5. yes we can
Questions?
Upcoming SlideShare
Loading in...5
×

Bringing Design to Life

7,403

Published on

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.

Published in: Design, Technology, Business
1 Comment
47 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,403
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
245
Comments
1
Likes
47
Embeds 0
No embeds

No notes for slide

Bringing Design to Life

  1. 1. Bringing Design to Life what engineers wish designers knew WebVisions Bill Scott May. 21, 2009
  2. 2. My Background
  3. 3. design & engineering
  4. 4. Developers vs Designers http://flickr.com/photos/urbanwoodswalker/2690236070/ http://flickr.com/photos/f-l-e-x/3096005116/
  5. 5. Developers vs Designers http://flickr.com/photos/urbanwoodswalker/2690236070/ http://flickr.com/photos/f-l-e-x/3096005116/ DHTML developers Visual designers Javascript developers Information architects PHP/JSP/ASP developers Interaction designers Produce site code Produce designs & assets
  6. 6. Two Worlds? http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
  7. 7. Two Worlds? http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html Implementation focus Inspiration focus Constrained by browsers Constrained by ideation
  8. 8. Two Worlds? http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html Implementation focus Inspiration focus Constrained by browsers 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.
  9. 9. UI Engineering @ Net ix
  10. 10. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer
  11. 11. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer In our world requires mastering a number of technologies HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
  12. 12. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer In our world requires mastering a number of technologies HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery) Must also have a love for good design Some of our engineers started as designers
  13. 13. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer In our world requires mastering a number of technologies HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery) Must also have a love for good design Some of our engineers started as designers Must have a desire to say “Yes, we can” Problems should be challenges, not show-stoppers
  14. 14. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer In our world requires mastering a number of technologies HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery) Must also have a love for good design Some 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 prototypes As rapid and as early as possible
  15. 15. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer In our world requires mastering a number of technologies HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery) Must also have a love for good design Some 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 prototypes As rapid and as early as possible Weekly roundtables to discuss details Constant communication is critical
  16. 16. What is good design?
  17. 17. What is good design? Not just the form Not just the function But the artful blend of form and function Must look good and also work well
  18. 18. What is good design? Not just the form Not just the function But the artful blend of form and function Must look good and also work well
  19. 19. What is good design? Not just the form Not just the function But the artful blend of form and function Must look good and also work well Not just visual design Not just information architecture Not just interaction design But the careful blending of the three disciplines Must look good and also work well
  20. 20. What is good design? Not just the form Not just the function But the artful blend of form and function Must look good and also work well Not just visual design Not just information architecture Not just interaction design But the careful blending of the three disciplines Must look good and also work well
  21. 21. What is good design? Not just the form Not just the function But the artful blend of form and function Must look good and also work well Not just visual design Not just information architecture Not just interaction design But the careful blending of the three disciplines Must look good and also work well Not just in photoshop, but a living experience for the user Must look good and also work well
  22. 22. guiding principles for designers what engineers wish you understood...
  23. 23. 1. the site is dynamic photoshop is static. the site is not.
  24. 24. dy na Dynamic Content m ic “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 Wroblewski http://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
  25. 25. dy na Dynamic Content m ic Even 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
  26. 26. dy na Dynamic Content m ic Even 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
  27. 27. dy na Dynamic Content m ic Understand how to design for a large or di cult to acquire data set Yahoo! Mail On-Demand Scrolling excerpt from a large member queue on Net ix drag & drop, performance, chunking
  28. 28. dy na Dynamic Content m ic Understand how to design for a large or di cult to acquire data set Yahoo! Mail On-Demand Scrolling excerpt from a large member queue on Net ix drag & drop, performance, chunking
  29. 29. dy na Dynamic Content m ic Understand how to design for a large or di cult to acquire data set Yahoo! Mail On-Demand Scrolling excerpt from a large member queue on Net ix drag & drop, performance, chunking
  30. 30. dy na Dynamic Content m ic Understand how to design for a large or di cult to acquire data set Yahoo! Mail On-Demand Scrolling excerpt from a large member queue on Net ix drag & drop, performance, chunking
  31. 31. dy na Dynamic Content m ic Understand how to design for a large or di cult to acquire data set Yahoo! Mail On-Demand Scrolling excerpt from a large member queue on Net ix drag & drop, performance, chunking
  32. 32. dy na Dynamic Layout m ic Think about the resize event Design for di erent formats when necessary What about the scroll bar? dynamic layout in International Herald Tribune
  33. 33. dy na Scaleable Design Designing Web Interfaces: 12 Screen Patterns http://tinyurl.com/8kr6yq m ic Screen frameworks Credit: Scaleable Design by Luke Wroblewski http://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
  34. 34. dy na Scaleable Design m ic Screen frameworks Credit: Scaleable Design by Luke Wroblewski http://www.uxmatters.com/mt/archives/2007/10/scalable-design.php
  35. 35. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework
  36. 36. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360
  37. 37. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360
  38. 38. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360
  39. 39. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360 drag and drop on My Yahoo!
  40. 40. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360 drag and drop on My Yahoo!
  41. 41. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360 drag and drop on My Yahoo!
  42. 42. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360 drag and drop on My Yahoo!
  43. 43. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework thoughtful approach to blending modes. Yahoo! 360 interesting moments grid drag and drop on My Yahoo!
  44. 44. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework confusing interaction. net ix thoughtful approach to blending modes. Yahoo! 360 interesting moments grid drag and drop on My Yahoo!
  45. 45. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework confusing interaction. net ix thoughtful approach to blending modes. Yahoo! 360 improved interaction. net ix interesting moments grid drag and drop on My Yahoo!
  46. 46. dy na Keyframe with Photoshop m ic
  47. 47. dy na Keynote: Keyframe Wireframes m ic Using page transitions and simple animation transitions
  48. 48. dy na Keynote: Keyframe Wireframes m ic Using page transitions and simple animation transitions
  49. 49. dy na Keynote: Simulating Interaction m ic
  50. 50. dy na Keynote: Simulating Interaction m ic
  51. 51. dy na Keynote: Simulating Interaction m ic net ix. rate & replace. interactive mockup the secret. hidden row behind solid mask step one. button appears step one. second row moves down
  52. 52. dy na Microsoft Expression Blend m ic
  53. 53. dy na Fireworks CS4 m ic Slices PDF Export Rich Symbols Smart Align CSS Export Photoshop Compatible Text
  54. 54. dy na Axure m ic
  55. 55. dy na Gotchas for dynamic design m ic Not 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/platforms stop 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
  56. 56. 2. technology is critical web design without technology is just art. you must understand the magic that gets it on the site.
  57. 57. te chn challenge of interface engineering ol og y 14 IE 6 layout bugs
  58. 58. te chn challenge of interface engineering ol og y 14 IE 6 layout bugs 63 rounded corner techniques
  59. 59. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 63 rounded corner techniques
  60. 60. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 63 rounded corner techniques
  61. 61. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 63 rounded corner techniques 8 major browsers
  62. 62. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 63 rounded corner techniques 8 major browsers 5 ways to layout elements
  63. 63. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 63 rounded corner techniques 8 major browsers 5 ways to layout elements 6+ ways to vertically align
  64. 64. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 3 rendering engines 63 rounded corner techniques 8 major browsers 34 ways to improve performance 5 ways to layout elements 6+ ways to vertically align
  65. 65. te chn challenge of interface engineering ol og y 9 ways to layout columns 14 IE 6 layout bugs 8 areas of focus 3 rendering engines 63 rounded corner techniques 8 major browsers 34 ways to improve performance 5 ways to layout elements 6+ ways to vertically align
  66. 66. te chn challenge of interface engineering ol og y diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
  67. 67. te chn challenge of interface engineering ol og y 9 knowledge areas 4 dimensions 3 platforms 4 browsers per platform 2 rendering modes =672 diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
  68. 68. te chn competing interests ol og y high performance accessibility tools process internationalization infrastructure minimalist markup semantic markup ordered markup (accessibility) unobtrusive javascript minimal or no hacks
  69. 69. te chn Design for markup ol og y Instead of graphics dependent design, opt for markup based design Let content drive height button=image Previous way to render buttons. 84 graphic images. Net ix.
  70. 70. te chn Design for markup ol og y Instead of graphics dependent design, opt for markup based design Let content drive height button=image sliding doors technique VS http://www.alistapart.com/articles/slidingdoors/ Previous way to render buttons. 84 graphic images. Net ix.
  71. 71. te chn Plan for spriting ol og y Building assets for engineering concerns also simpli es design work Previous way to render stars. 51 separate images.
  72. 72. te chn Plan for spriting ol og y Building assets for engineering concerns also simpli es design work one image, clipped in two places, combined for star rating Previous way to render stars. 51 separate images.
  73. 73. te chn Plan for spriting ol og y Building assets for engineering concerns also simpli es design work one image, clipped in two places, combined for star rating + Previous way to render stars. 51 separate images.
  74. 74. te chn Plan for spriting ol og y Building assets for engineering concerns also simpli es design work one image, clipped in two places, combined for star rating + = Previous way to render stars. 51 separate images.
  75. 75. te chn Know how stu gets used ol og y Often design teams don’t know how their stu ends up on the site Do 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:
  76. 76. te chn Know what is challenging ol og y Vertical alignment vertical-align does not work on block elements; however display:inline-block is best Rounded corners + drop shadow 63 ways for rounded corners; 15 ways for drop shadow. Combined very tricky. Pixel parity across all browsers Stop 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 columns Faux approach works the best (background images fake out column height). But not known by all developers. Pixel perfect widths Due to IE6 bugs sometimes need a few extra pixels to avoid layout issues with oats (double margin bug); usually xed with display:inline
  77. 77. te chn Know what is challenging ol og y Specifying minimum or maximum width Not understood by IE6 Taming IE6 At least 12 bugs concerning oats & layout. These can be sinkholes in time Hard to layout against the ow In the current world, remember that this is a document model not a GUI layout engine Height is harder to control Content should normally drive the height Not possible to render your Photoshop fonts Use 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.
  78. 78. te chn Tips ol og y Know what your technology can and can’t do At least at the high level. Think of it as your toolkit. Not all designs cost the same Everything 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 do Not all developers are created equally.
  79. 79. 3. components & grids are key developers think in terms of reuse; designers often in terms of new work. you must also design for reuse.
  80. 80. co m Design for reuse po ne nt s The 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”
  81. 81. co m Embrace Components po ne nt s Design for each component & reuse throughout the site Inventory 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
  82. 82. co m Net ix Site Elements/Components po ne nt s
  83. 83. co m Net ix Site Elements/Components po ne nt s
  84. 84. co m Embrace Grids po ne nt s It’s the right way to design anyway See The Principles of Beautiful Web Design by Jason Beaird Grids map to templates There are at least 12 CSS frameworks each supporting the concept of templates/grids http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/ Establish templates and standards that are engineering approved Include 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 designs Can be quickly referenced in order to facilitate faster design cycles. Easy to match photoshop, illustrator templates with a CSS grid system
  85. 85. co m Blueprint CSS Framework po ne nt s
  86. 86. co m Blueprint CSS Framework po ne nt s
  87. 87. co m Blueprint CSS Framework po ne nt s
  88. 88. co m Blueprint CSS Framework po ne nt s
  89. 89. s nt ne po m co
  90. 90. s nt ne po m co
  91. 91. s nt ne po m co
  92. 92. co m Net ix Templates/Grids po ne nt s
  93. 93. co m Net ix Gallery Template po ne nt s
  94. 94. co m Net ix Gallery Template po ne nt s 1 22 22 3 21 5 4 15 18 12 16 5 2
  95. 95. 4. partnership is imperative it’s tempting to design and toss over the wall. but the real magic happens during collaboration.
  96. 96. pa Quotes r tn er his p “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.”
  97. 97. pa r tn er s hi p 2 keys Communicate & Iterate
  98. 98. pa Communicate r tn er s hi p Vocabulary Mismatch Example: Lockups Mismatch: components, templates Mappings: grids -> templates, site elements -> tags Common Project: Simpli ed Visual Framework (SVF)
  99. 99. pa Communicate r tn er s hi p Vocabulary Mismatch Example: Lockups Mismatch: components, templates Mappings: grids -> templates, site elements -> tags Common Project: Simpli ed Visual Framework (SVF)
  100. 100. pa Communicate r tn er s hi p Pattern Library Nice 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
  101. 101. pa Communicate r tn er s hi p Learn how to talk to engineers engineers 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 Roundtables Has worked well @ Net ix. Every Friday at 2pm. Throw out ideas. Discuss technical solutions to thorny problems. Discuss vocabulary. Hear frustrations.
  102. 102. pa Communicate r tn er s hi p Practice transparency many designers won’t share till it is “perfect” engineers get surprised
  103. 103. pa Communicate r tn er s hi p Practice transparency many designers won’t share till it is “perfect” engineers get surprised Get your design into the “wild” Make it visible everywhere
  104. 104. pa Communicate r tn er s hi p Practice transparency many designers won’t share till it is “perfect” engineers get surprised Get your design into the “wild” Make it visible everywhere Make it URL-accessible Stop sharing les by email or embedding on the wiki. Use URLs. Front your le system with an http server. Use a Design Gallery to make everything reviewed accessible before & after the meeting.
  105. 105. pa Iterate: Prototype r tn er s hi p Prototype. 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 prototypes For interactive rich experiences it takes lots of variations (permutations). View prototyping as a means to an end... not the nal product.
  106. 106. dy na Iterate: Prototype m ic Keynote & Powerpoint can create quick interactive mockups Keynote: Smart builds, build ins, build outs and actions can simulate a real interface Use a prototyping tool Balsamiq, Azure, iRise, Flash, Flex, Interactive PDFs, Fireworks + PDF, Visio, OmniGra e net ix. rate & replace Prototyping is much more accessible now than in the past Perhaps use jQuery for quick stu ? Coupled with rebug is a nice way to sprinkle in behavior to existing site
  107. 107. 100+ variations prototyped over 1 week pa r tn Winnowed down between PMs, Design & Eng. er shi Put before users the next week & again 2 weeks later p
  108. 108. 5. yes we can interface engineers have the power to say “yes” more than ever and even more reasons in the future
  109. 109. IE8 ye s Extensions IE8 Accelerators IE8 Web Slices IE8 Visual Search Fully CSS Level 2.1-compliant New pseudo classes CSS based table layouts Margin collapsing hasLayout issues xed! But don’t get too excited :-) ARIA support http://tinyurl.com/79c552
  110. 110. Safari/Webkit ye s iPhone Support Drag and Drop Flick navigation CSS Transforms CSS Animation (keyframes) More CSS Goodness Masks 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
  111. 111. ARIA Support Safari 4 ye Enhanced Keyboard Navigation s Full-Page Zoom (font scaling) HTML Canvas CSS Animation Downloadable Fonts (CSS 3 Web Fonts) CSS Canvas CSS E ects HTML 5 Audio & Video support HTML 5 O ine support SVG 1.1 Support Web Clip Turn any web page into a Dashboard widget on your Mac Resizable Text Fields Multi-Touch
  112. 112. Chrome ye s Google Chrome Mac/Linux versions expected by rst half of 2009. Very minimal market share. May grow, but not dominant Application Shortcuts Create Application Shortcut (think TV interfaces) Think Web OS Each tab independent process Comes with a Task Manager Platform for web applications Couple with Google Gears for o ine application
  113. 113. Firefox 3.1.x 3.5 ye s Location aware browsing Open audio and video support Local data storage Faster page rendering Full CSS 3 Selector support HTML 5 drag and drop API allows support for dragging and dropping items within and between web sites Downloadable fonts support
  114. 114. Firefox 4 ye s Prism 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) Weave Browser metadata is pushed into the cloud Automatic backup and restore Personalization made portable Collaborative bookmarking Geocode Automatically tracks your location Through GPS, Wi-Fi or manual entry type options and then serves you with any information you want to know
  115. 115. Yahoo! Browser Plus ye s Allows developers to create rich web applications with desktop capabilities Photo Uploader (Native Drag & Drop) Access Motion Sensor Plugin Architecture
  116. 116. Firefox Mobile (Fennec) ye s Humanized prototyping ideas Aza Raskin & Scott Robbin Very intelligent use of real estate PageSlide pattern Zoomable User Interface (ZUI) Design Principles http://vimeo.com/1152218 Touch http://www.azarask.in/blog/post/ refox-mobile-concept-video/ http://www.techcrunch.com/2009/03/18/fennec- refox-mobile-shows-o -its-beta/ Large targets are good Visual Momentum and Physics are compelling Typing is di cult Content is king
  117. 117. Google Android ye s Apps without borders Apps can access core mobile device functionality via API Apps can easily embed the web Easily embed HTML, Javascript & stylesheets Apps are created equal Any app can be extended or replaced Apps can run in parallel Multi-tasking environment
  118. 118. HTML 5 ye s Features The 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 Compatibility See http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers When Can I Use...? http://a.deveria.com/caniuse/
  119. 119. TV ye s Plex TV Interface (Open Source) Boxee TV Interface Yahoo! TV Widgets Compact Internet applications that deliver the Web to the TV
  120. 120. Silverlight ye s Rich set of controls Rich media support Zoomable User Interface (ZUI)
  121. 121. Other Technologies ye s Flash 10 3D e ects, custom lters & e ects, advanced text layout, enhanced drawing, sound Flex 3 Rich, expressive UI with large set of controls Simple development environment Nice for prototyping Adobe Air Applications run without a web browser (though built with web technologies) Merges DHTML & Flash world
  122. 122. There are still times to say “No” ye s Designer fonts (Gotham!) Text in graphics Speci ed heights Hire developers that normally say “yes” and “get it”
  123. 123. 1. the site is dynamic 2. technology is critical 3. components are key 4. partnership is imperative 5. yes we can
  124. 124. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×