Bridging the Designer and Developer Gap

  • 4,818 views
Uploaded 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 …

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • I added this slideshow to the webvisions group: http://www.slideshare.net/group/webvisions-2007/
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,818
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
305
Comments
1
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. It takes a team. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 1. The Gap 2. Bridges 3. Building Bridges Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 6. The Gap Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. The Gap Designers Developers Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. 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. It’s hard to fill the gap. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 14. Personalities, Worlds It’s Different Perspectives, Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. The Bridges Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 18. Be Involved Early Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. “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. Be Positive Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. Be Open Minded Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 24. Know the Latest Technology Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 25. Get Your Hands Dirty Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. Beware of Egos Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. “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. “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. Bridge Building Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 32. Get everyone talking Initial Planning Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. 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. 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. People take ownership Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. It removes vertical spacing guesswork Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. Basic Layout Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 42. Quick Calculations Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. Challenge: Forms Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. choices Because there are so many Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. 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. 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. 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. 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. 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. 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. “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. Communication IM, In Person, Phone Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. Recent Example Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. 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. Agile vs. User Centered Design (an odd couple?) Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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. 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. Thank You Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
  • 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.