Bridging the Designer and Developer Gap

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


It takes a team.


So there has to be
communication
(and inevitably there will be communication problems)


1. The Gap
2. Bridges
3. Building Bridges


The Gap


Developers

back end development, databases,
content management systems, server
side program languages, LAMP, ASP, PHP,
Ruby on Rails, Lasso, MYSQL


Designers

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


The Gap Designers
Developers


The Gap

Who’s Going to Do it?


The Gap

Front end development XHMTL, CSS,
templating languages


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


It’s hard to fill the gap.


Personalities, Worlds
It’s Different Perspectives,


But really it’s the difference
between making something
good, and creating something
great.


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


The Bridges


Be Involved Early


“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


“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


Be Positive


We respected each other's opinions and
knowledge base, that's why it worked so
well. Plus we laughed a lot.

-Cindy Li, AOL


Be Open Minded


Know the Latest Technology


Get Your Hands Dirty


Mind at All Times
Keep the User in Everyones


Beware of Egos


“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


“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


“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


Bridge Building


Get everyone talking
Initial Planning


Designers bring early on:

User advocates
Uninhibited big picture thinking
Style


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 problems that might
be better ignored
Too many cooks


But even one hour can make a
huge difference.


People take ownership


Designing with Grids
(hint: it’s great for development too)


It removes vertical spacing
guesswork


Design Comp to CSS Grid
calculation formula
(number of columns x column pixel width) + (number of
spaces x space pixel width) = section width


Basic Layout


Quick Calculations


Sample CSS
#header {
width: 745px;
}

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

#side {
float: left;
width: 265px;
}


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


Challenge: Forms


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)


choices
Because there are so many


Top Aligned

Label Positions

Left Aligned
Right Aligned


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?


Error checking

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

Please enter a valid phone number!


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?


Ways to handle forms

Design them from the beginning
Discuss the form in development
Use a hosted solution examples
Formspring, Wufoo, etc.


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.


Good Deliverables

Annotated Photoshop Comps
Annotated Wireframes
Just a quick conversation


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


Communication

IM, In Person, Phone


“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


Recent Example


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


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


Agile vs. User Centered Design
(an odd couple?)


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


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/


Thank You


Tom Watson
Design Technologist, Blue Flavor
tom@blueflavor.com
tel. +1 206 545-0210

http://www.blueflavor.com/


Bridging the Designer and Developer Gap

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Recently uploaded

Recently uploaded (20)

Bridging the Designer and Developer Gap