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


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


back end development, databases, content management systems, server

side program languages, LAMP, ASP, PHP, Ruby on Rails, Lasso, MYSQL

Developers


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

Designers


Developers DesignersThe Gap


Who’s Going to Do it?

The Gap


Front end development XHMTL, CSS, templating languages

The Gap


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


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


But really it’s the difference between making something

good, and creating something great.


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


“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

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


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


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


Designers bring early on:

User advocatesUninhibited big picture thinkingStyle


Developers bring early on:

PerspectiveReality checksTechnical solutions to tricky design problemsWays to make it happen


Possible Dangers(or why people avoid bringing others in early)

Solutioneering Feature creepSolving solutions to problems that might be better ignoredToo 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

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


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


Label Positions

Left Aligned

Top 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 beginningDiscuss the form in developmentUse 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 CompsAnnotated WireframesJust a quick conversation


The UnexpectedIt’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 wireframesHand written notes on printed documentsThey 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


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/

http://www.flickr.com/photos/mikelo/217048717/

http://www.flickr.com/photos/mikelo/217048717/

http://www.flickr.com/photos/p373/272462743/

http://www.flickr.com/photos/p373/272462743/

http://www.flickr.com/photos/thewkyd/110339552/

http://www.flickr.com/photos/thewkyd/110339552/

http://www.flickr.com/photos/brartist/312951348/

http://www.flickr.com/photos/brartist/312951348/

http://www.flickr.com/photos/davidbridle/443265899/

http://www.flickr.com/photos/davidbridle/443265899/

http://www.flickr.com/photos/philaaronson/297342456/

http://www.flickr.com/photos/philaaronson/297342456/

http://www.flickr.com/photos/memestate/45939043/

http://www.flickr.com/photos/memestate/45939043/

http://www.flickr.com/photos/phil_g/142176666/

http://www.flickr.com/photos/phil_g/142176666/

http://www.flickr.com/photos/woodenshoephotography/274164370/

http://www.flickr.com/photos/woodenshoephotography/274164370/

http://www.flickr.com/photos/crystalflickr/41849232/




http://www.flickr.com/photos/sarchi/51190799/

http://www.flickr.com/photos/sarchi/51190799/

http://www.flickr.com/photos/basak/467370905/

http://www.flickr.com/photos/basak/467370905/


Thank You


Tom WatsonDesign Technologist, Blue [email protected]

tel. +1 206 545-0210

http://www.blueflavor.com/

mailto:[email protected]

mailto:[email protected]

http://www.blueflavor.com/presentations/nextgenmobileweb.pdf

http://www.blueflavor.com/presentations/nextgenmobileweb.pdf

bridging the designer and developer gap

Technology

respective owners

blue flavorcopyright

grids copyright

gap copyright

mysql copyright

everyones copyright

bridges copyright

early copyright