bridging the designer and developer gap

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

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.

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.

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

Keep the User in Everyones Mind at All Times

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

Bridge Building

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

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 informationBig payoff for a good user experienceDevelopment time is extensive (even just front end development)

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/

Thank You

Tom WatsonDesign Technologist, Blue Flavortom@blueflavor.com

tel. +1 206 545-0210

http://www.blueflavor.com/

bridging the designer and developer gap

respective owners

blue flavorcopyright

grids copyright

gap copyright

mysql copyright

everyones copyright

bridges copyright

early copyright

Technology

portfolio - ux designer / ui developer€¦ · portfolio -...

bridging the gap: bridge designer to project manager

wordcamp abq 2013: making the leap from designer to...

bridging the developer and security divide

oracle forms developer tutorial designer

computer information systems€¦ · these roles include...

debunking the myth of the starving artist · level designer...

portfolio - ux designer / ui developer / educator · ux...

front-end developer + designer - phillip...

designer vs developer: creators in wordpress

brian ellwood ellwood - cv.pdfweb developer / designer / ux...

designer. builder. developer. - parsons · designer....

designer vs developer

just another wordpress designer/developer - wordcamp maine

portfolio - jon ross . ux designer / ui developer€¦ ·...

designer & developer work flow for flex builder

the perfect designer and developer workflow

high performance developer designer collaboration

designer developer - exercises qlikview

tutorial for designer and developer 2000