Bridging the Designer and Developer Gap

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.

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.

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.

“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.

“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.

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.

“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.

“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.

“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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

“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.

“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.

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.

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.

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.

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.

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.

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.

Bridging the Designer and Developer Gap

1 comments

Notes on slide 1

23 Favorites & 1 Group