Mais conteúdo relacionado Bridging the Designer and Developer Gap1. 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. 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. 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. 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. 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. 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. 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. 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.