SlideShare a Scribd company logo
1 of 124
Download to read offline
Bringing Design to Life
   what engineers wish designers knew

              WebVisions
               Bill Scott
             May. 21, 2009
My Background
design & engineering
Developers vs Designers



     http://flickr.com/photos/urbanwoodswalker/2690236070/   http://flickr.com/photos/f-l-e-x/3096005116/
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
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                   Inspiration focus
   Constrained by browsers                  Constrained by ideation
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.
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 mastering a number of technologies
HTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)
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
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
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
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
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 also work well
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
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
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
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
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                                                                      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
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
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
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
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
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
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
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
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
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
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
dy
                                            na
Dynamic Interaction                              m
                                                  ic
Design for interesting moments up front
Prototype, prototype, prototype
Avoids lots of expensive rework
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
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
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
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!
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!
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!
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!
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!
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!
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!
dy
                            na
Keyframe with Photoshop          m
                                  ic
dy
                                                            na
Keynote: Keyframe Wireframes                                     m
                                                                  ic
Using page transitions and simple animation transitions
dy
                                                            na
Keynote: Keyframe Wireframes                                     m
                                                                  ic
Using page transitions and simple animation transitions
dy
                                    na
Keynote: Simulating Interaction          m
                                          ic
dy
                                    na
Keynote: Simulating Interaction          m
                                          ic
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
dy
                               na
Microsoft Expression Blend          m
                                     ic
dy
                                              na
Fireworks CS4                                      m
                                                    ic
Slices          PDF Export
Rich Symbols    Smart Align
CSS Export      Photoshop Compatible Text
dy
          na
Axure          m
                ic
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
2. technology is critical
     web design without technology is just art.
you must understand the magic that gets it on the site.
te
                                    chn
challenge of interface engineering      ol
                                          og
                                            y




14   IE 6 layout
     bugs
te
                                    chn
challenge of interface engineering      ol
                                          og
                                            y




14   IE 6 layout
     bugs




63    rounded corner
      techniques
te
                                           chn
challenge of interface engineering             ol
                                                 og
                                                   y


                   9   ways to layout
                       columns

14   IE 6 layout
     bugs




63    rounded corner
      techniques
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
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
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
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
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
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
te
                                                                                                                  chn
challenge of interface engineering                                                                                    ol
                                                                                                                        og
                                                                                                                          y




     diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
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
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
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.
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.
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.
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.
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.
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.
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:
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
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.
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.
3. components & grids are key
developers think in terms of reuse; designers often in terms of new work.
                     you must also design for reuse.
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”
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
co
                                 m
Net ix Site Elements/Components




                                  po
                                    ne
                                       nt
                                          s
co
                                 m
Net ix Site Elements/Components




                                  po
                                    ne
                                       nt
                                          s
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
co
                             m
Blueprint CSS Framework




                              po
                                ne
                                   nt
                                      s
co
                             m
Blueprint CSS Framework




                              po
                                ne
                                   nt
                                      s
co
                             m
Blueprint CSS Framework




                              po
                                ne
                                   nt
                                      s
co
                             m
Blueprint CSS Framework




                              po
                                ne
                                   nt
                                      s
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
                               ne
                                  nt
                                     s
co
                             m
Net ix Gallery Template




                              po
                                ne
                                   nt
                                      s
co
                                                 m
Net ix Gallery Template




                                                  po
                                                    ne
                                                       nt
                                                          s
1                                   22

    22

                  3            21
                      5
         4


                               15


             18
                          12



                                         16




                                    5


2
4. partnership is imperative
    it’s tempting to design and toss over the wall.
   but the real magic happens during collaboration.
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.”
pa
                           r
                          tn
                             er
                                s
                               hi
                                  p
    2 keys
Communicate & Iterate
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)
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)
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
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.
pa
Communicate




                                                     r
                                                    tn
                                                       er
                                                          s
                                                         hi
                                                            p
Practice transparency
many designers won’t share till it is “perfect”
engineers get surprised
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
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.
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.
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
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
5. yes we can
interface engineers have the power to say “yes” more than ever
             and even more reasons in the future
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
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
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
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
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
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
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
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
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
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/
TV




                                                             ye
                                                               s
     Plex
     TV Interface (Open Source)




     Boxee
     TV Interface




     Yahoo! TV Widgets
     Compact Internet applications that deliver the Web to
     the TV
Silverlight




                                ye
                                  s
Rich set of controls
Rich media support
Zoomable User Interface (ZUI)
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
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”
1. the site is dynamic
2. technology is critical
3. components are key
4. partnership is imperative
5. yes we can
Questions?

More Related Content

Viewers also liked

Deep Learning through Examples
Deep Learning through ExamplesDeep Learning through Examples
Deep Learning through ExamplesSri Ambati
 
History and clinical examination in obstetrics
History and clinical examination in obstetricsHistory and clinical examination in obstetrics
History and clinical examination in obstetricsdr shabnam naz shaikh
 
Data Modeling with Neo4j
Data Modeling with Neo4jData Modeling with Neo4j
Data Modeling with Neo4jNeo4j
 
PowerPoint Hacks for Rookies: 4 Must Consider Aspects
PowerPoint Hacks for Rookies: 4 Must Consider AspectsPowerPoint Hacks for Rookies: 4 Must Consider Aspects
PowerPoint Hacks for Rookies: 4 Must Consider Aspects24Slides
 
Operative instruments in Conservative Dentistry & Endodontics
Operative instruments in Conservative Dentistry & EndodonticsOperative instruments in Conservative Dentistry & Endodontics
Operative instruments in Conservative Dentistry & EndodonticsAshok Ayer
 
The Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing ContentThe Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing ContentNeil Patel
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Emiland
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessJonathon Colman
 
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksHow to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksSlideShare
 
10+ Getting to Know You Activities for Teens & Adults
10+ Getting to Know You Activities for Teens & Adults10+ Getting to Know You Activities for Teens & Adults
10+ Getting to Know You Activities for Teens & AdultsShelly Sanchez Terrell
 
Doctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPDoctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPJonathan Wage
 
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...Jorge Saguinsin
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great InfographicsSlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShareSlideShare
 
4. heredity and evolution
4. heredity and evolution4. heredity and evolution
4. heredity and evolutionAbhay Goyal
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShareKapost
 
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareSTOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareEmpowered Presentations
 

Viewers also liked (20)

Deep Learning through Examples
Deep Learning through ExamplesDeep Learning through Examples
Deep Learning through Examples
 
History and clinical examination in obstetrics
History and clinical examination in obstetricsHistory and clinical examination in obstetrics
History and clinical examination in obstetrics
 
Data Modeling with Neo4j
Data Modeling with Neo4jData Modeling with Neo4j
Data Modeling with Neo4j
 
PowerPoint Hacks for Rookies: 4 Must Consider Aspects
PowerPoint Hacks for Rookies: 4 Must Consider AspectsPowerPoint Hacks for Rookies: 4 Must Consider Aspects
PowerPoint Hacks for Rookies: 4 Must Consider Aspects
 
Operative instruments in Conservative Dentistry & Endodontics
Operative instruments in Conservative Dentistry & EndodonticsOperative instruments in Conservative Dentistry & Endodontics
Operative instruments in Conservative Dentistry & Endodontics
 
5000 Sat Words With Definitions
5000 Sat Words With Definitions5000 Sat Words With Definitions
5000 Sat Words With Definitions
 
Antidepressants
Antidepressants Antidepressants
Antidepressants
 
The Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing ContentThe Ultimate Guide to Creating Visually Appealing Content
The Ultimate Guide to Creating Visually Appealing Content
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for Success
 
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & TricksHow to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & Tricks
 
10+ Getting to Know You Activities for Teens & Adults
10+ Getting to Know You Activities for Teens & Adults10+ Getting to Know You Activities for Teens & Adults
10+ Getting to Know You Activities for Teens & Adults
 
Doctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHPDoctrine 2: Enterprise Persistence Layer for PHP
Doctrine 2: Enterprise Persistence Layer for PHP
 
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...
Entrepreneurship, introduction to entrepreneurship, definition of entrepreneu...
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great Infographics
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 
4. heredity and evolution
4. heredity and evolution4. heredity and evolution
4. heredity and evolution
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShare
 
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareSTOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
 
You Suck At PowerPoint!
You Suck At PowerPoint!You Suck At PowerPoint!
You Suck At PowerPoint!
 

Similar to Bringing Design to Life

Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud CommunitiesPeter Coffee
 
Chicago from the Cloud
Chicago from the CloudChicago from the Cloud
Chicago from the CloudWAN-IFRA
 
Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Mario Esposito
 
The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The CloudGatsbyjs
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Ron Michael Zettlemoyer
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentationcolberding
 
Flex For Java Developers - SDForum Java SIG
Flex For Java Developers - SDForum Java SIGFlex For Java Developers - SDForum Java SIG
Flex For Java Developers - SDForum Java SIGChris Richardson
 
Netflix Velocity Conference 2011
Netflix Velocity Conference 2011Netflix Velocity Conference 2011
Netflix Velocity Conference 2011Adrian Cockcroft
 
What Is The Zachman Framework
What Is The Zachman FrameworkWhat Is The Zachman Framework
What Is The Zachman FrameworkMia Gordon
 
Towards Social Webtops Using Semantic Wiki
Towards Social Webtops Using Semantic WikiTowards Social Webtops Using Semantic Wiki
Towards Social Webtops Using Semantic WikiJie Bao
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issuesNeil Perlin
 
Creating a Component Library
Creating a Component LibraryCreating a Component Library
Creating a Component Librarynathanacurtis
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Designmartinridgway
 
Gilbane 2010 -- Building a Global View of Your Data
Gilbane 2010 -- Building a Global View of Your DataGilbane 2010 -- Building a Global View of Your Data
Gilbane 2010 -- Building a Global View of Your Dataweisinger
 
Web 2.0 Business Models
Web 2.0 Business ModelsWeb 2.0 Business Models
Web 2.0 Business ModelsTeemu Arina
 
Using Drupal to build your Developer Network
Using Drupal to build your Developer NetworkUsing Drupal to build your Developer Network
Using Drupal to build your Developer Networkarkelly66
 

Similar to Bringing Design to Life (20)

Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud Communities
 
Chicago from the Cloud
Chicago from the CloudChicago from the Cloud
Chicago from the Cloud
 
Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012
 
The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud
 
#dd12 Content in motion
#dd12 Content in motion#dd12 Content in motion
#dd12 Content in motion
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2Building a semantic enterprise content management system v2
Building a semantic enterprise content management system v2
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
Flex For Java Developers - SDForum Java SIG
Flex For Java Developers - SDForum Java SIGFlex For Java Developers - SDForum Java SIG
Flex For Java Developers - SDForum Java SIG
 
Netflix Velocity Conference 2011
Netflix Velocity Conference 2011Netflix Velocity Conference 2011
Netflix Velocity Conference 2011
 
What Is The Zachman Framework
What Is The Zachman FrameworkWhat Is The Zachman Framework
What Is The Zachman Framework
 
Towards Social Webtops Using Semantic Wiki
Towards Social Webtops Using Semantic WikiTowards Social Webtops Using Semantic Wiki
Towards Social Webtops Using Semantic Wiki
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issues
 
Creating a Component Library
Creating a Component LibraryCreating a Component Library
Creating a Component Library
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Design
 
Netflix in the cloud 2011
Netflix in the cloud 2011Netflix in the cloud 2011
Netflix in the cloud 2011
 
Gilbane 2010 -- Building a Global View of Your Data
Gilbane 2010 -- Building a Global View of Your DataGilbane 2010 -- Building a Global View of Your Data
Gilbane 2010 -- Building a Global View of Your Data
 
Concloud
ConcloudConcloud
Concloud
 
Web 2.0 Business Models
Web 2.0 Business ModelsWeb 2.0 Business Models
Web 2.0 Business Models
 
Using Drupal to build your Developer Network
Using Drupal to build your Developer NetworkUsing Drupal to build your Developer Network
Using Drupal to build your Developer Network
 

More from Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsBill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting MomentsBill Scott
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastBill Scott
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesBill Scott
 

More from Bill Scott (20)

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting Moments
 
Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly Webcast
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 

Recently uploaded

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (18)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Bringing Design to Life

  • 1. Bringing Design to Life what engineers wish designers knew WebVisions Bill Scott May. 21, 2009
  • 4. Developers vs Designers http://flickr.com/photos/urbanwoodswalker/2690236070/ http://flickr.com/photos/f-l-e-x/3096005116/
  • 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. Two Worlds? http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html
  • 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. 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.
  • 10. UI Engineering @ Net ix Elsewhere called Web dev, front end engineer (Y!), interface engineer
  • 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. 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. 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. 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. 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. What is good design?
  • 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. 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. 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. 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. 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. guiding principles for designers what engineers wish you understood...
  • 23. 1. the site is dynamic photoshop is static. the site is not.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. dy na Dynamic Interaction m ic Design for interesting moments up front Prototype, prototype, prototype Avoids lots of expensive rework
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. dy na Keyframe with Photoshop m ic
  • 47. dy na Keynote: Keyframe Wireframes m ic Using page transitions and simple animation transitions
  • 48. dy na Keynote: Keyframe Wireframes m ic Using page transitions and simple animation transitions
  • 49. dy na Keynote: Simulating Interaction m ic
  • 50. dy na Keynote: Simulating Interaction m ic
  • 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. dy na Microsoft Expression Blend m ic
  • 53. dy na Fireworks CS4 m ic Slices PDF Export Rich Symbols Smart Align CSS Export Photoshop Compatible Text
  • 54. dy na Axure m ic
  • 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. 2. technology is critical web design without technology is just art. you must understand the magic that gets it on the site.
  • 57. te chn challenge of interface engineering ol og y 14 IE 6 layout bugs
  • 58. te chn challenge of interface engineering ol og y 14 IE 6 layout bugs 63 rounded corner techniques
  • 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. 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. 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. 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. 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. 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. 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. te chn challenge of interface engineering ol og y diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. co m Net ix Site Elements/Components po ne nt s
  • 83. co m Net ix Site Elements/Components po ne nt s
  • 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. co m Blueprint CSS Framework po ne nt s
  • 86. co m Blueprint CSS Framework po ne nt s
  • 87. co m Blueprint CSS Framework po ne nt s
  • 88. co m Blueprint CSS Framework po ne nt s
  • 89. s nt ne po m co
  • 90. s nt ne po m co
  • 91. s nt ne po m co
  • 92. co m Net ix Templates/Grids po ne nt s
  • 93. co m Net ix Gallery Template po ne nt s
  • 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. 4. partnership is imperative it’s tempting to design and toss over the wall. but the real magic happens during collaboration.
  • 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. pa r tn er s hi p 2 keys Communicate & Iterate
  • 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. 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. 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. 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. pa Communicate r tn er s hi p Practice transparency many designers won’t share till it is “perfect” engineers get surprised
  • 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. 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. 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. 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. 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. 5. yes we can interface engineers have the power to say “yes” more than ever and even more reasons in the future
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Silverlight ye s Rich set of controls Rich media support Zoomable User Interface (ZUI)
  • 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. 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. 1. the site is dynamic 2. technology is critical 3. components are key 4. partnership is imperative 5. yes we can