Webmaster Jam Session: Design and Development Behind the Scenes Day One

Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008

Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Introduction.
We’re going to rock your world.


D. Keith Robinson


D. Keith Robinson
• Principle & Creative Director for Blue Flavor
• Based in Seattle, Washington
• Over 12 years designing for web, etc.
• Has worked internally for large companies (Boeing, Children’s Hospital
Seattle)
• Has worked as a consultant for companies large and small.
• Recent clients include New York Review of Books, thePlatform, PayPal
• Also done some time as Associate Editor of Lifehacker


Jeﬀ Cro


Jeﬀ Cro
• Designer and developer at Blue Flavor
• Calls Seattle home, but temporarily living close to family in Kansas City
• Been working on the web full-time since 1994.
• Has worked in-house at Universities and newspaper companies
• Worked at the birthplace of Django in Lawrence, KS
• Has co-authored two books: Pro CSS Techniques, and Web
Standards Creativity


One small leaf...


Blue Flavor


Blue Flavor
• Founded in Seattle, Washington in 2005.
• 7 employees at the moment.
• Focused on design, standards-based development and CMS dev/
deployment.
• Client list includes Boeing, Comcast, PayPal, New York Review of
Books, Mithun, Houston Chronicle and Skydeck.


Web Design and Development: Behind the Scenes
Day One: Strategy and Design



• Strategy and planning for success online.



• Online branding.



• The value of good design.



• The design process.



• Information Architecture and content organization.



• Crafting your content with authentic messaging.



• Grid-based visual design.



• Grid-based visual design.
• Typography for the web.


?
Let ‘em ﬂy.


Strategy.
Setting the stage for success.


?
What’s not working?


Start with goals.


GOALS! GOALS! GOALS!

Firefox's Blake Ross's Slide from Gnomedex 6
Photo credit: Kris Krug
http://www.ﬂickr.com/photos/kk/183915370/


Tec
als
Go

hn
ica
ess

lG
sin
Sweet

oa l
Spot
Bu

s
Customer (or User) Goals


Blue Flavor’s Problems
(And what were we doing right?)


Old Blueﬂavor.com

Problem #1: We don’t stand out.


None of these things is not that much like the other.

Grapefruits, Oranges and Limes
Photo credit: Frank Grubet
http://www.ﬂickr.com/photos/somewhatfrank/425402458/


“Everyone is a “great web
designer” these days.”
- Matt Brown, Designer
http://thingsthatarebrown.com/blog/2008/08/the-ﬁrst-four-months-of-freelancing-refresh-
seattle/


Problem #2: Our personality
doesn’t show.


Problem #3: Our content wasn’t
straightforward enough.


Problem #4: Screenshots aren’t
that compelling.


Problem #5: We weren’t
attracting the kinds of clients
we wanted to.


Blue Flavor’s Goals


Goal: Do something different.


Goal: Show more personality.


Goal: Simplify the message.


Goal: Better show all that we
do.


Goal: Attract more engaged
clients.


No solutioneering.


Turning goals into strategy.


Differentiate
Show personality

Attract “better”
clients.
Simplify messaging.
Better show all that we do.


Branding.
Authentic and Different.


?
What’s important about a
strong online presence?


“One wants to be the
needle in the haystack.
Not a haystack.”
- Donald Draper, AMC’s Mad Men


AWESOME

Pleasant

Usable

Needs improvement


AWESOME

Pleasant

averagewebsite.com
Usable

Needs improvement


blueﬂavor.com

AWESOME

Pleasant

averagewebsite.com
Usable

Needs improvement


BRANDING
101
ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hought Leadership. Honesty. Creativity. People Before Technology. Content


BRANDING Differentiation

101


BRANDING Differentiation

101 Authenticity



Being Different


jQuery

MooTools

Prototype

SproutCore

script.aculo.us

“Provide an experience that is both useful,
usable, desirable, and diﬀerentiated and you
will create demand for your brand and delight
your customers.”
- David Armano, Creative Director for Critical Mass
http://darmano.typepad.com/logic_emotion/2006/09/creating_compas.html


Authentic Messaging:
Examples


Begin with what you want to say.

Photo credit: Nate Steiner
http://www.ﬂickr.com/photos/nate/2111495424/


Creative and Authentic.

Photo credit: Sarah Murray
http://www.ﬂickr.com/photos/batterypower/2309957181


vimeo.com

etsy.com

37signals.com

zappos.com

There’s no sense trying to hide.

Photo credit: Dan Cederholm
http://www.ﬂickr.com/photos/simplebitsdan/407831848/


Web 2.0. Boo.


“Clients don't understand.
eir success is related to
standing out, not ﬁtting
in.”


High Style: Examples


baguettebox.com

electricpulp.com

inlawsandoutlaws.com/


I made this!

inlawsandoutlaws.com/


The Big Idea(s).


“is is the greatest advertising
opportunity since the invention
of cereal. You have six identical
companies making six identical
products. We can say anything
we want.”


Focus on our work and let it, and our
clients, tell the story.


Use posters to
illustrate our
projects

Blueﬂavor.com poster by Elliot Jay Stocks
http://www.elliotjaystocks.com


We think this is
pretty different.
More compelling than screenshots.
Tells a story.
Shows personality.
Hopefully engaging.
Creates a nice artifact.

Blueﬂavor.com poster by Joe Alterio
http://www.joealterio.com/


Testimonials. We’ve got lots of them.


Create a perception of quality and
mystery, yet remain accessible.


Visual Mystery Open Kimono
Create an aura of Use content and to
mystery and quality be open and
with our visual authentic.
elements. The Blog.
Homepage as a gallery piece. Our Pricing Guide.
Illustrate projects with posters. Our About and Services Pages.
No typeface on the logo. The Screenshot gallery.
Dark, mysterious backgrounds. The testimonials.
Gallery style proﬁle page.


Clarity of Vision.


“Consensus is for losers.”
- D. Keith Robinson, Designer
http://www.dkeithrobinson.com/entry/consensus_is_for_losers/


“Ideas are easy. It’s the execution of ideas that really
separates the sheep om the goats.”
- Sue Grafton, Author
http://www.suegrafton.com/


“We all get too excited about
FAILure.”
- Matt Brown, Designer
http://thingsthatarebrown.com/blog/2008/08/the-ﬁrst-four-months-of-freelancing-refresh-
seattle/


It’s ok to fail.


Design Process.
It’s not about producing deliverables.


Initial Design Process



Discovery



Design and
Discovery Development
Decisions



Design and
Discovery Development Q/A
Decisions


Iterative Design Process

Design and
Re-Discovery Development Q/A
Decisions


e blueﬂavor.com design process.


e blueﬂavor.com design process.
• Discovery: Looking for problems and opportunity, setting goals, etc.
• Strategy: Planning and initial problem solving.
• Content and Messaging: Going through our content and re-writing.
• Information Architecture: Nailing our navigation and layouts down.
• Visual Concepting: Getting down our look and feel.
• Gridwork, Typography and details: Bringing it all together.
• Iteration. Design is never done.


A quick note:
The design process is not about your
deliverables, it’s about solving
problems.
Deliverables are about communicating
those solutions.


A few words about content.
Design is all about words.


“Great web design reﬂects the way we interact, and the
primary vehicle for that interaction remains text.”
- Bronwyn Jones, Better Writing Through Design
http://www.alistapart.com/articles/betterwritingthroughdesign/


We started out by doing a content
inventory and cutting everything we
didn’t feel supported our goals.


Then we cut what was left in half.


“Murder your darlings.”
Sir Arthur Quiller-Couch (and others.)


“Copywriting is interface design.”
http://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php


Our interface is also made of words,
we took a long look at that.


Information Architecture.
Give your content some structure.


IA is important because it allows you
to focus on content and interface
without being distracted by look and
feel.


Information Architecture *is* Design.


Information Architecture
• Document goals, content, navigation and features.
• Give it all a simple layout and structure.
• Document interactivity, if applicable.


Common IA Documentation
• Page Description Diagrams.
• Zone Diagrams.
• Navigation Schemas.
• Wireframes.
• Use Cases.


screen description diagram

1 2 3 Inbox Screen
Item Creation Field “Action Bar” Recent Changes Log The purpose of the inbox screen is to
capture incoming items and “process”
There will need to be a quick way for This will provide a drop down action There will be a running log (no more them into the system. Here you will
a user to create a new item (which list that will enable the user to “ac- than 5 items) showing recent see new items, new requests, proc-
defaults to a note.) This will be a sim- tion” or bulk edit checked items. Ac- changes to the system. essed items (before they’re “swept”
ple text entry field with associated tions include “Done” “Defer” “Dele-
, , into the system) and deferred items
javascript “listener” to help the user gate” (not sure how this would work) waiting to “tickle” their way in.
know exactly what they’re creating. “Delete” and “Committed/Someday
Maybe.” This describes the elements and basic
interaction of the Inbox screen. It’s
Inbox intended to give a general overview
A primary element of the Inbox “Clean Up” Button of what the user will see on the page.
screen, is (surprise) the Inbox. The There will be a button, part of the
Inbox is a container. Inside the inbox action bar probably, that will “sweep” This describes the “in use” state.
unprocessed items and requests will all processed items into the system. Things would appear a bit differently
be listed (and bolded) as will proc- were there nothing in the inbox, for
essed items (regular weight) and de- example.
ferred items (grayed out.)
“Go to Today”
In order to save time and space I’ve
There should be prominent place-
left out global items such as global
ment of a button that takes a user to
Inbox Items the today screen. This will be made
navigation, the logo, etc.
Inside the inbox will be items. These even more prominent by text in-
will be listed with a title and an icon structing the user to go to the today
that shows the type of item. There screen when the inbox is empty.
will also be a check box next to each
item, so that a user can select it (and
apply batch actions to it.) and there’ll
be an “Edit” link/icon that will allow
for inline editing of the item (similar
to how Basecamp does milestone
editing.)
Page Descriptions


Advice for page descriptions.
• Prioritize elements, this will be helpful if you have to cut later.
• Don’t worry about visual speciﬁcs.
• Describe how elements reﬂect user goals.
• Use “real” text and examples.
• Be verbose, don’t skimp on the details.


Our Initial Wireframes


“Making the simple complicated is commonplace;
making the complicated simple, awesomely simple,
that’s creativity.”
- Charles Mingus, Jazz Composer and Amazing Bassist
http://www.mingusmingusmingus.com/


Our Revised Wireframes


Advice for wireframes
• Be as real as you can. No greeked text.
• Set expectations. Wireframes are not a ﬁnished design or look and feel.
• Annotate thoroughly to describe interaction.
• Annotate to answer potential questions that’ll come up later on.
• Be as speciﬁc as you can.
• Don’t get caught in a nasty feedback/revision loop.
• Tie them back to previous deliverables to reinforce decisions and thinking.


Inspiration and Concepting.
Executing on ideas.


“You can ﬁnd inspiration anywhere and everywhere,
you just need to keep an eye out for it.”
- D. Keith Robinson, Designer


Patrick Haney’s Flickr
http://www.ﬂickr.com/photos/splat/sets/981332/


Keeping Creative
• Keep a journal.
• Develop a creative routine.
• Have regular sources (Books, magazines, Flickr, RSS feeds.)
• Train your eyes to look at the world differently.
• Work at being creative.
• Look for new and different sources of inspiration.
• Try something completely different.


“Ideas are everywhere. e writer of ﬁction must learn
to search the world for these seeds. Probably the most
fertile place to look for ideas is right inside the backyard
of your own life.”
- Alexander Steele, Dean of Faculty, Gotham Writer’s Workshop


The Brief
Simple, different, visually engaging,
slightly challenging, edgy and fun.


The power of the pen (or
pencil.)


Photo by Svet Ivantchev
http://www.flickr.com/people/svet/

Moleskine FTW!


Photo by Paul Worthington
http://www.flickr.com/people/paulworthington/


Sketching for problem
solving.


V1

V2

V3

V4

V5

Designing With Grids.
Magical.


Almost every design we do
starts with a grid. But why?


Design is all about communication.


In order to communicate well, we
must bring order to the data we’re
trying to represent.


The grid is a sublime manifestation of
a desire to bring order.


While grids are useful for a single
page, consistent use can bring
consistency across a project.


Paul Rand, 1975


Grid design of
the 1950s and
1960s


Is this possible on the Web?


For the most part, yes. Modular grids
are tough, but columnar grids make a
lot of sense on the Web.


Typography.
It’s not just for print any more.


The art of setting type.


The point? To honor the content.


Typography is not about
picking cool fonts.


“One of the principles of durable typography is always
legibility; another is something more than legibility:
some earned or unearned interest that gives its living
energy to the page.”
- Robert Bringhurst, The Elements of Typographic Style


“ In a world rife with unsolicited messages, typography
must oen draw attention to itself before it will be read.
Yet in order to be read, it must relinquish the attention
it has drawn. Typography with anything
to say therefore aspires to a kind of
statuesque transparency.”
- Robert Bringhurst, The Elements of Typographic Style


Tips for elegant CSS typography:


Tips for elegant CSS typography:
• Use a good CSS reset stylesheet to give yourself a clean slate.
• Be sensitive to the high contrast of computer screens—consider using grey
on white instead of pure black on white, for example.
• Choose an appropriate measure for your text size. Readability takes a big,
big hit when your lines are overly long.
• Pay attention to leading. Adding a little vertical breathing room is one of the
simplest things you can do to improve the aesthetic of your site.
• Don’t overdo your paragraph indicators. You don’t need a blank like, and an
indent, and a drop cap, and...one will do, thank you.


Realignment.
Small changes go a long way.


“e ability to simplify means to eliminate the
unnecessary so that the necessary may speak.”
- Hans Hoffman, German Painter and Teacher
http://www.hanshofmann.org/


Mitigating Risk.
Building fallbacks into the design.


Screenshot Gallery

So How’d we do?



Goal: Do something different.



Goal: Show more personality.



Goal: Simplify the message.



Goal: Attract more engaged
clients.


anks!


?

Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008

http://www.blueflavor.com/
http://www.blueflavor.com/blog/
keith@blueflavor.com
jeff@blueflavor.com


Webmaster Jam Session: Design and Development Behind the Scenes Day One

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Viewers also liked

Viewers also liked (19)

Similar to Webmaster Jam Session: Design and Development Behind the Scenes Day One

Similar to Webmaster Jam Session: Design and Development Behind the Scenes Day One (20)

Recently uploaded

Recently uploaded (20)

Webmaster Jam Session: Design and Development Behind the Scenes Day One