Bridging the Designer
and Developer Gap

Tom Watson Design Technologist, Blue Flavor



              Copyright © 2007 Blu...
Building Web Stuff
(websites, web applications, widgets, mobile web, etc.)




        Copyright © 2007 Blue Flavor. All t...
It takes a team.




Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective o...
So there has to be
           communication
(and inevitably there will be communication problems)




        Copyright © ...
1. The Gap
             2. Bridges
             3. Building Bridges



Copyright © 2007 Blue Flavor. All trademarks and co...
The Gap




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Developers


   back end development, databases,
  content management systems, server
side program languages, LAMP, ASP, P...
Designers



interaction design, visual design, layouts,
colors, visual hierarchy, typography, grids




        Copyright...
The Gap                                                      Designers
Developers




       Copyright © 2007 Blue Flavor....
The Gap



Who’s Going to Do it?


 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of the...
The Gap



Front end development XHMTL, CSS,
       templating languages



     Copyright © 2007 Blue Flavor. All tradema...
Developers The Gap                                                                    Designers


 Front end development X...
It’s hard to fill the gap.




 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their r...
Personalities, Worlds
It’s Different Perspectives,




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain ...
But really it’s the difference
 between making something
good, and creating something
             great.



     Copyrigh...
We’ve all got the same Goal:
        Great Stuff.




    Copyright © 2007 Blue Flavor. All trademarks and copyrights rema...
The Bridges




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Be Involved Early




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective ...
“I was given a thorough overview of
what they're doing, how they're doing it,
why, and got a solid look into the vision
  ...
“If someone had just involved me from
the beginning, even just to watch what
 was happening, I'd have been able to
help. B...
Be Positive




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
We respected each other's opinions and
knowledge base, that's why it worked so
      well. Plus we laughed a lot.

       ...
Be Open Minded




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective own...
Know the Latest Technology




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their re...
Get Your Hands Dirty




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respecti...
Mind at All Times
       Keep the User in Everyones




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain...
Beware of Egos




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective own...
“He didn't respect my portion of the
  project. We all have fortes and if we
aren't communicating it ruins the entire
    ...
“though he needed to hire us for our
    design skills, continually sent back
   revisions to our comps that he liked
 bet...
“I've had the privilege of working
with a brilliant creative designer that
  absolutely refused creative input,
    direct...
Bridge Building




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective ow...
Get everyone talking
                         Initial Planning




Copyright © 2006 Blue Flavor. All trademarks and copyri...
Designers bring early on:

User advocates
Uninhibited big picture thinking
Style




        Copyright © 2006 Blue Flavor....
Developers bring early on:
Perspective
Reality checks
Technical solutions to tricky design
problems
Ways to make it happen...
Possible Dangers
     (or why people avoid bringing others in early)


Solutioneering
Feature creep
Solving solutions to p...
But even one hour can make a
       huge difference.




     Copyright © 2007 Blue Flavor. All trademarks and copyrights ...
People take ownership




  Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respe...
Designing with Grids
  (hint: it’s great for development too)




Copyright © 2007 Blue Flavor. All trademarks and copyrig...
It removes vertical spacing
        guesswork




   Copyright © 2007 Blue Flavor. All trademarks and copyrights remain th...
Design Comp to CSS Grid
    calculation formula
(number of columns x column pixel width) + (number of
     spaces x space ...
Basic Layout




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Quick Calculations




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective...
Sample CSS
#header {
  width: 745px;
}

#content {
   float: left;
   width: 465px;
   margin-left: 15px;
}

#side {
   fl...
Conversions from Photoshop
to XHTML/CSS in half the time!
 (and the guess work / back and forth is virtually gone)




   ...
Challenge: Forms




Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective o...
Why Forms?

Often not "designed"
Difficult to design and convey all the
necessary information
Big payoff for a good user e...
choices
         Because there are so many




Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the prop...
Top Aligned



                   Label Positions

Left Aligned
     Right Aligned




        Copyright © 2006 Blue Flavo...
Required* vs. Not Required

Which fields are required?
How are they required? Does the user
have to enter a phone number o...
Error checking

While you type? Correct!
Or after you’ve click submit?

  Please enter a valid phone number!



        Co...
Where does the form
       information go?
Who gets the email?
Does the data get stored in a database?
Does the informatio...
Ways to handle forms

Design them from the beginning
Discuss the form in development
Use a hosted solution examples
Formsp...
Hybrid approach is best

Each approach has its merits but there’s no
one solution out there.
If you find the form holy gra...
Good Deliverables

Annotated Photoshop Comps
Annotated Wireframes
Just a quick conversation




      Copyright © 2006 Blu...
The Unexpected
It’s always going to happen, it’s how your deal with it that’s
                          the key




      ...
“Anytime an issue came up, we would
  talk it over briefly and determine the
best solution. During the last year we've
 ch...
Communication




IM, In Person, Phone

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of...
“The entire project was a small team
   where we met on a continual basis.
Normally at AOL we always developed a
    desig...
Recent Example




Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective own...
Edge Cases

Additional styles, block quotes, pull outs,
or maybe sIFR isn’t quite working for
certain headlines




      ...
Balance with Deliverables

Finding just the right balance between too
detailed/time intensive and not conveying
enough inf...
Helpful Communication
         Deliverables
Annotated wireframes
Hand written notes on printed documents
They don’t have t...
Agile vs. User Centered Design
                       (an odd couple?)




     Copyright © 2007 Blue Flavor. All trademar...
Communication, Communication,
Communication

Desire to do the right thing, and work to
make that thing the easy thing

Kee...
Attribution
http://www.flickr.com/photos/mikelo/217048717/
http://www.flickr.com/photos/p373/272462743/
http://www.flickr....
Thank You




Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Tom Watson
Design Technologist, Blue Flavor
tom@blueflavor.com
tel. +1 206 545-0210


http://www.blueflavor.com/




     ...
Upcoming SlideShare
Loading in...5
×

Bridging the Designer and Developer Gap

4,915

Published on

The days of building a "website" are over. We are full-fledged application designers, the web is merely our front-end. The increasing complexity of application development is causing our various disciplines to converge, with designers dabbling in front-end code and developers working through interaction paradigms. Though the scope of our work and particular roles continues to increase, excellent communication remains the key to success. Tom Watson will discuss principles that will help bridge this gap so you can create simple and beautiful web applications.

Published in: Technology, Education
1 Comment
24 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,915
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
306
Comments
1
Likes
24
Embeds 0
No embeds

No notes for slide

Bridging the Designer and Developer Gap

  1. 1. Bridging the Designer and Developer Gap Tom Watson Design Technologist, Blue Flavor Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  2. 2. Building Web Stuff (websites, web applications, widgets, mobile web, etc.) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  3. 3. It takes a team. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  4. 4. So there has to be communication (and inevitably there will be communication problems) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  5. 5. 1. The Gap 2. Bridges 3. Building Bridges Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  6. 6. The Gap Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  7. 7. Developers back end development, databases, content management systems, server side program languages, LAMP, ASP, PHP, Ruby on Rails, Lasso, MYSQL Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  8. 8. Designers interaction design, visual design, layouts, colors, visual hierarchy, typography, grids Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  9. 9. The Gap Designers Developers Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  10. 10. The Gap Who’s Going to Do it? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  11. 11. The Gap Front end development XHMTL, CSS, templating languages Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  12. 12. Developers The Gap Designers Front end development XHMTL, CSS, templating languages interaction design, visual design, layouts, colors, visual hierarchy, typography, grids back end development, databases, content management systems, server side program languages, LAMP, ASP, PHP, Ruby on Rails, Lasso, MYSQL Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  13. 13. It’s hard to fill the gap. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  14. 14. Personalities, Worlds It’s Different Perspectives, Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  15. 15. But really it’s the difference between making something good, and creating something great. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  16. 16. We’ve all got the same Goal: Great Stuff. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  17. 17. The Bridges Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  18. 18. Be Involved Early Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  19. 19. “I was given a thorough overview of what they're doing, how they're doing it, why, and got a solid look into the vision of the app and how it would function including quite a bit of in-depth discussion of user interaction. This was great because it made my job easy.” -Scott Boms, Wishingline Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  20. 20. “If someone had just involved me from the beginning, even just to watch what was happening, I'd have been able to help. But at the point I was brought in, I felt rushed and uninformed, and obviously didn't do my best work.” -Patrick Haney, Harvard University Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  21. 21. Be Positive Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  22. 22. We respected each other's opinions and knowledge base, that's why it worked so well. Plus we laughed a lot. -Cindy Li, AOL Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  23. 23. Be Open Minded Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  24. 24. Know the Latest Technology Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  25. 25. Get Your Hands Dirty Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  26. 26. Mind at All Times Keep the User in Everyones Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  27. 27. Beware of Egos Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  28. 28. “He didn't respect my portion of the project. We all have fortes and if we aren't communicating it ruins the entire project. ” -Cindy Li, AOL Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  29. 29. “though he needed to hire us for our design skills, continually sent back revisions to our comps that he liked better ... always accompanied by words similar to "this is much better than what you sent me, just use these new tabs that I designed" -Dan Rubin, Sidebar Creative Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  30. 30. “I've had the privilege of working with a brilliant creative designer that absolutely refused creative input, direction, or common usability suggestions. His attitude was stated clearly, "If you don't have a degree in design or art, you have no right to manage or instruct the way I design." -Chip Diffendaffer, University of Denver Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  31. 31. Bridge Building Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  32. 32. Get everyone talking Initial Planning Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  33. 33. Designers bring early on: User advocates Uninhibited big picture thinking Style Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  34. 34. Developers bring early on: Perspective Reality checks Technical solutions to tricky design problems Ways to make it happen Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  35. 35. Possible Dangers (or why people avoid bringing others in early) Solutioneering Feature creep Solving solutions to problems that might be better ignored Too many cooks Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  36. 36. But even one hour can make a huge difference. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  37. 37. People take ownership Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  38. 38. Designing with Grids (hint: it’s great for development too) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  39. 39. It removes vertical spacing guesswork Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  40. 40. Design Comp to CSS Grid calculation formula (number of columns x column pixel width) + (number of spaces x space pixel width) = section width Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  41. 41. Basic Layout Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  42. 42. Quick Calculations Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  43. 43. Sample CSS #header { width: 745px; } #content { float: left; width: 465px; margin-left: 15px; } #side { float: left; width: 265px; } Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  44. 44. Conversions from Photoshop to XHTML/CSS in half the time! (and the guess work / back and forth is virtually gone) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  45. 45. Challenge: Forms Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  46. 46. Why Forms? Often not "designed" Difficult to design and convey all the necessary information Big payoff for a good user experience Development time is extensive (even just front end development) Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  47. 47. choices Because there are so many Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  48. 48. Top Aligned Label Positions Left Aligned Right Aligned Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  49. 49. Required* vs. Not Required Which fields are required? How are they required? Does the user have to enter a phone number or valid email address? Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  50. 50. Error checking While you type? Correct! Or after you’ve click submit? Please enter a valid phone number! Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  51. 51. Where does the form information go? Who gets the email? Does the data get stored in a database? Does the information need to be fed into a Salesforce.com? Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  52. 52. Ways to handle forms Design them from the beginning Discuss the form in development Use a hosted solution examples Formspring, Wufoo, etc. Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  53. 53. Hybrid approach is best Each approach has its merits but there’s no one solution out there. If you find the form holy grail let me in on the secret. Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  54. 54. Good Deliverables Annotated Photoshop Comps Annotated Wireframes Just a quick conversation Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  55. 55. The Unexpected It’s always going to happen, it’s how your deal with it that’s the key Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  56. 56. “Anytime an issue came up, we would talk it over briefly and determine the best solution. During the last year we've changed features, added new ones and continued to refine everything. It's continued to be a very collaborative process - one with both sides sharing a mutual respect and knowing where one's expertise ends and the other's begins.” -Scott Boms, Wishingline Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  57. 57. Communication IM, In Person, Phone Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  58. 58. “The entire project was a small team where we met on a continual basis. Normally at AOL we always developed a design and then handed it to a developer. In this case we were working hand in hand and discussing what we all wanted.” -Cindy Li, AOL Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  59. 59. Recent Example Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  60. 60. Edge Cases Additional styles, block quotes, pull outs, or maybe sIFR isn’t quite working for certain headlines Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  61. 61. Balance with Deliverables Finding just the right balance between too detailed/time intensive and not conveying enough information. Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  62. 62. Helpful Communication Deliverables Annotated wireframes Hand written notes on printed documents They don’t have to be pretty they just need to get the point across Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  63. 63. Agile vs. User Centered Design (an odd couple?) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  64. 64. Communication, Communication, Communication Desire to do the right thing, and work to make that thing the easy thing Keep the user in mind at all times Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  65. 65. Attribution http://www.flickr.com/photos/mikelo/217048717/ http://www.flickr.com/photos/p373/272462743/ http://www.flickr.com/photos/thewkyd/110339552/ http://www.flickr.com/photos/brartist/312951348/ http://www.flickr.com/photos/davidbridle/443265899/ http://www.flickr.com/photos/philaaronson/297342456/ http://www.flickr.com/photos/memestate/45939043/ http://www.flickr.com/photos/phil_g/142176666/ http://www.flickr.com/photos/woodenshoephotography/274164370/ http://www.flickr.com/photos/crystalflickr/41849232/ http://www.flickr.com/photos/crystalflickr/132010762/ http://www.flickr.com/photos/sarchi/51190799/ http://www.flickr.com/photos/basak/467370905/ Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  66. 66. Thank You Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  67. 67. Tom Watson Design Technologist, Blue Flavor tom@blueflavor.com tel. +1 206 545-0210 http://www.blueflavor.com/ Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  1. A particular slide catching your eye?

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

×