Bridging the Designer and Developer Gap
-
Upload
twatson -
Category
Technology
-
view
112 -
download
2
description
Transcript of Bridging the Designer and Developer Gap
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
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.
It takes a team.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
1. The Gap2. Bridges3. Building Bridges
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
The Gap
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
back end development, databases, content management systems, server
side program languages, LAMP, ASP, PHP, Ruby on Rails, Lasso, MYSQL
Developers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
interaction design, visual design, layouts, colors, visual hierarchy, typography, grids
Designers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Developers DesignersThe Gap
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who’s Going to Do it?
The Gap
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Front end development XHMTL, CSS, templating languages
The Gap
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
The GapDevelopers Designers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
It’s hard to fill the gap.
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
It’s Different Perspectives, Personalities, Worlds
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
We’ve all got the same Goal:Great Stuff.
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
The Bridges
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Be Involved Early
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 © 2006 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
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Be Positive
Copyright © 2007 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
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Be Open Minded
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Know the Latest Technology
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Get Your Hands Dirty
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Keep the User in Everyones Mind at All Times
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Beware of Egos
Copyright © 2006 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 workingwith a brilliant creative designer that
absolutely refused creative input,direction, or common usability
suggestions. His attitude was statedclearly, "If you don't have a degree in
design or art, you have no right tomanage or instruct the way I design."
-Chip Diffendaffer, University of Denver
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Bridge Building
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Initial PlanningGet everyone talking
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Designers bring early on:
User advocatesUninhibited big picture thinkingStyle
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Developers bring early on:
PerspectiveReality checksTechnical solutions to tricky design problemsWays 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 creepSolving solutions to problems that might be better ignoredToo many cooks
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
But even one hour can make a huge difference.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
People take ownership
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
It removes vertical spacing guesswork
Copyright © 2007 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
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Basic Layout
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Quick Calculations
Copyright © 2006 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 © 2007 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.
Challenge: Forms
Copyright © 2006 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 informationBig payoff for a good user experienceDevelopment time is extensive (even just front end development)
Copy
right
© 2
006
Blue
Fla
vor.
All t
rade
mar
ks a
nd c
opyr
ight
s re
mai
n th
e pr
oper
ty o
f the
ir re
spec
tive
owne
rs.
Because there are so many choices
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Label Positions
Left Aligned
Top Aligned
Right Aligned
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 beginningDiscuss the form in developmentUse 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.
Good Deliverables
Annotated Photoshop CompsAnnotated WireframesJust a quick conversation
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The UnexpectedIt’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.
“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.
Communication
IM, In Person, Phone
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.
Recent Example
Copyright © 2006 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 wireframesHand written notes on printed documentsThey don’t have to be pretty they just need to get the point across
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agile vs. User Centered Design(an odd couple?)
Copyright © 2007 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.
Attributionhttp://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.
Thank You
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Tom WatsonDesign Technologist, Blue [email protected]
tel. +1 206 545-0210
http://www.blueflavor.com/