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




            Web Desi...
Introduction.
  We’re going to rock your world.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, ...
D. Keith Robinson




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
D. Keith Robinson
• Principle & Creative Director for Blue Flavor
• Based in Seattle, Washington
• Over 12 years designing...
Jeff Cro




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Jeff Cro
• Designer and developer at Blue Flavor
• Calls Seattle home, but temporarily living close to family in Kansas Ci...
One small leaf...




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




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Blue Flavor
• Founded in Seattle, Washington in 2005.
• 7 employees at the moment.
• Focused on design, standards-based de...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design




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

• Strategy and planning for success online.


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

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
Web Design and Development: Behind the Scenes
Day One: Strategy and Design

• Strategy and planning for success online.
• ...
?
              Let ‘em fly.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Strategy.
   Setting the stage for success.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, Octo...
?
What’s not working?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Start with goals.




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


Firefox's Blake Ross's Slide from Gnomedex 6
Photo credit: Kris Krug
http://www.flickr.com/photos/kk...
Tec
                    als
                 Go




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




 Web Design and Development: Behind the Scenes, Webmaster Jam...
Old Blueflavor.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Problem #1: We don’t stand out.




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
None of these things is not that much like the other.




Grapefruits, Oranges and Limes
Photo credit: Frank Grubet
http:/...
“Everyone is a “great web
      designer” these days.”
                              - Matt Brown, Designer
http://thingst...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Problem #2: Our personality
      doesn’t show.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Problem #3: Our content wasn’t
   straightforward enough.



     Web Design and Development: Behind the Scenes, Webmaster...
Problem #4: Screenshots aren’t
       that compelling.



     Web Design and Development: Behind the Scenes, Webmaster Ja...
Problem #5: We weren’t
attracting the kinds of clients
        we wanted to.


    Web Design and Development: Behind the ...
Blue Flavor’s Goals




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Do something different.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Show more personality.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Simplify the message.




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Better show all that we
             do.



    Web Design and Development: Behind the Scenes, Webmaster Jam Session...
Goal: Attract more engaged
           clients.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session,...
No solutioneering.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Turning goals into strategy.




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



 Attract “better”
     clients.
Simplify messaging.
 Better show all that...
Differentiate
               Show personality



 Attract “better”
     clients.
Simplify messaging.
 Better show all that...
Differentiate
            Show personality

 Attract “better”
     clients.
Simplify messaging.
 Better show all that we d...
Differentiate
            Show personality

  Attract “better”
          clients.
Simplify messaging.
 Better show all tha...
Branding.
          Authentic and Different.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, Oct...
?
What’s important about a
strong online presence?



  Web Design and Development: Behind the Scenes, Webmaster Jam Sessi...
“One wants to be the
 needle in the haystack.
    Not a haystack.”
- Donald Draper, AMC’s Mad Men




      Web Design and...
AWESOME




                                                                   Pleasant




                              ...
AWESOME




                                                                           Pleasant

averagewebsite.com
      ...
blueflavor.com

                                                                               AWESOME




                ...
BRANDING
  101
 ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hought Leadership. Honesty. Cr...
BRANDING      Differentiation




  101
 ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hough...
BRANDING      Differentiation




  101                                           Authenticity

 ord of Mouth. Differentia...
Being Different




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
jQuery
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
jQuery
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
MooTools
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Prototype
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
SproutCore
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
script.aculo.us
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Provide an experience that is both useful,
 usable, desirable, and differentiated and you
will create demand for your bran...
Authentic Messaging:
     Examples



Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Begin with what you want to say.




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


           ...
Creative and Authentic.




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


             ...
vimeo.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
etsy.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
etsy.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
37signals.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
zappos.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
There’s no sense trying to hide.




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


  ...
Web 2.0. Boo.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Clients don't understand.
eir success is related to
standing out, not fitting
          in.”
   - Donald Draper, AMC’s Ma...
High Style: Examples




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
baguettebox.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
electricpulp.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
inlawsandoutlaws.com/

Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
I made this!




                inlawsandoutlaws.com/

Web Design and Development: Behind the Scenes, Webmaster Jam Sessi...
The Big Idea(s).




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“is is the greatest advertising
opportunity since the invention
of cereal. You have six identical
companies making six id...
Focus on our work and let it, and our
       clients, tell the story.



      Web Design and Development: Behind the Scen...
Use posters to
  illustrate our
        projects




    Blueflavor.com poster by Elliot Jay Stocks
               http://w...
We think this is
  pretty different.
More compelling than screenshots.
                      Tells a story.
              ...
Testimonials. We’ve got lots of them.




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, Octo...
Create a perception of quality and
 mystery, yet remain accessible.



    Web Design and Development: Behind the Scenes, ...
Visual Mystery                           Open Kimono
 Create an aura of                          Use content and to
myster...
Clarity of Vision.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Consensus is for losers.”
                 - D. Keith Robinson, Designer
   http://www.dkeithrobinson.com/entry/consensus...
“Ideas are easy. It’s the execution of ideas that really
         separates the sheep om the goats.”
                    ...
“We all get too excited about
         FAILure.”
                              - Matt Brown, Designer
http://thingsthatare...
It’s ok to fail.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Design Process.
It’s not about producing deliverables.




 Web Design and Development: Behind the Scenes, Webmaster Jam S...
Initial Design Process




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



Discovery




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, Octob...
Initial Design Process



                            Design and
Discovery                  Development
                  ...
Initial Design Process



                            Design and
Discovery                  Development                   ...
Iterative Design Process



                               Design and
Re-Discovery                  Development           ...
e blueflavor.com design process.




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2...
e blueflavor.com design process.
• Discovery: Looking for problems and opportunity, setting goals, etc.
• Strategy: Planni...
A quick note:
The design process is not about your
deliverables, it’s about solving
problems.
Deliverables are about commu...
A few words about content.
           Design is all about words.




    Web Design and Development: Behind the Scenes, We...
“Great web design reflects the way we interact, and the
  primary vehicle for that interaction remains text.”
          - B...
We started out by doing a content
inventory and cutting everything we
  didn’t feel supported our goals.




     Web Desi...
Then we cut what was left in half.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2...
“Murder your darlings.”
         Sir Arthur Quiller-Couch (and others.)




Web Design and Development: Behind the Scenes,...
“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.




     Web Design and Development: Behind the Scen...
Information Architecture.
    Give your content some structure.




    Web Design and Development: Behind the Scenes, Web...
IA is important because it allows you
  to focus on content and interface
without being distracted by look and
           ...
Information Architecture *is* Design.




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, Octob...
Information Architecture
• Document goals, content, navigation and features.
• Give it all a simple layout and structure.
...
Common IA Documentation
• Page Description Diagrams.
• Zone Diagrams.
• Navigation Schemas.
• Wireframes.
• Use Cases.



...
screen description diagram


1                                          2                                        3        ...
Advice for page descriptions.
• Prioritize elements, this will be helpful if you have to cut later.
• Don’t worry about vi...
Our Initial Wireframes


Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Making the simple complicated is commonplace;
making the complicated simple, awesomely simple,
               that’s crea...
Our Revised Wireframes


Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Advice for wireframes
• Be as real as you can. No greeked text.
• Set expectations. Wireframes are not a finished design or...
Inspiration and Concepting.
                 Executing on ideas.




    Web Design and Development: Behind the Scenes, We...
“You can find inspiration anywhere and everywhere,
       you just need to keep an eye out for it.”
                    - D...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Patrick Haney’s Flickr
http://www.flickr.com/photos/splat/sets/981332/

         Web Design and Development: Behind the Sce...
Keeping Creative
• Keep a journal.
• Develop a creative routine.
• Have regular sources (Books, magazines, Flickr, RSS fee...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“Ideas are everywhere. e writer of fiction must learn
  to search the world for these seeds. Probably the most
fertile pla...
The Brief
Simple, different, visually engaging,
slightly challenging, edgy and fun.



     Web Design and Development: Be...
The power of the pen (or
pencil.)


    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Photo by Svet Ivantchev
     http://www.flickr.com/people/svet/
Moleskine FTW!


   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Photo by Paul Worthington
http://www.flickr.com/people/paulworthington/




                Web Design and Development: Be...
Sketching for problem
solving.


   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
V1
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
V2
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
V3
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
V4
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
V5
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Designing With Grids.
                           Magical.




   Web Design and Development: Behind the Scenes, Webmaster ...
Almost every design we do
starts with a grid. But why?




 Web Design and Development: Behind the Scenes, Webmaster Jam S...
Design is all about communication.




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October ...
In order to communicate well, we
must bring order to the data we’re
        trying to represent.



    Web Design and Dev...
The grid is a sublime manifestation of
       a desire to bring order.




      Web Design and Development: Behind the Sc...
While grids are useful for a single
page, consistent use can bring
 consistency across a project.



    Web Design and De...
Paul Rand, 1975

Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Grid design of
                                        the 1950s and
                                             1960s


...
Is this possible on the Web?




 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
For the most part, yes. Modular grids
are tough, but columnar grids make a
       lot of sense on the Web.



      Web De...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Typography.
    It’s not just for print any more.




Web Design and Development: Behind the Scenes, Webmaster Jam Session...
The art of setting type.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
The point? To honor the content.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Typography is not about
   picking cool fonts.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, O...
“One of the principles of durable typography is always
legibility; another is something more than legibility:
some earned ...
“ In a world rife with unsolicited messages, typography
must oen draw attention to itself before it will be read.
Yet in ...
Tips for elegant CSS typography:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2...
Tips for elegant CSS typography:
• Use a good CSS reset stylesheet to give yourself a clean slate.
• Be sensitive to the h...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Realignment.
   Small changes go a long way.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, Oct...
“e ability to simplify means to eliminate the
 unnecessary so that the necessary may speak.”
           - Hans Hoffman, G...
blueflavor.com
blueflavor.com
Mitigating Risk.
Building fallbacks into the design.




Web Design and Development: Behind the Scenes, Webmaster Jam Sess...
Screenshot Gallery
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
So How’d we do?




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Do something different.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Show more personality.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

Goal: Simplify the message.




   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Goal: Better show all that we
             do.



    Web Design and Development: Behind the Scenes, Webmaster Jam Session...

Goal: Attract more engaged
           clients.



   Web Design and Development: Behind the Scenes, Webmaster Jam Sessio...
anks!



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

http://www.blueflavor.co...
Webmaster Jam Session: Design and Development Behind the Scenes Day One
Upcoming SlideShare
Loading in...5
×

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

6,006

Published on

Keith Robinson and Jeff Croft will talk about their design and development process from start to finish using the recent redesign of the Blue Flavor Website as a backdrop.

They'll be covering everything from the branding strategy behind design decisions to development with frameworks. In addition to walking through the design and development process, they'll be there to answer any questions you may have about your own design process.

Topics covered: strategy and branding for the Web, the design process, information architecture and content, grid-based design, typography for the Web, CSS frameworks, Django and CMS frameworks, and more.

Day 1 will focus on design and strategy. Day 2 will be about implementation and development.

Published in: Design, Business
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,006
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. Introduction. We’re going to rock your world. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  3. 3. D. Keith Robinson Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  4. 4. 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  5. 5. Jeff Cro Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  6. 6. Jeff 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  7. 7. One small leaf... Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  8. 8. Blue Flavor Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  9. 9. 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, Webmaster Jam Session, October 2008
  10. 10. Web Design and Development: Behind the Scenes Day One: Strategy and Design Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  11. 11. Web Design and Development: Behind the Scenes Day One: Strategy and Design • Strategy and planning for success online. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  12. 12. Web Design and Development: Behind the Scenes Day One: Strategy and Design • Strategy and planning for success online. • Online branding. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  13. 13. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  14. 14. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  15. 15. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  16. 16. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  17. 17. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  18. 18. 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. • Typography for the web. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  19. 19. ? Let ‘em fly. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  20. 20. Strategy. Setting the stage for success. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  21. 21. ? What’s not working? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  22. 22. Start with goals. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  23. 23. GOALS! GOALS! GOALS! Firefox's Blake Ross's Slide from Gnomedex 6 Photo credit: Kris Krug http://www.flickr.com/photos/kk/183915370/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  24. 24. Tec als Go hn ica ess lG sin Sweet oa l Spot Bu s Customer (or User) Goals Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  25. 25. Blue Flavor’s Problems (And what were we doing right?) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  26. 26. Old Blueflavor.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  27. 27. Problem #1: We don’t stand out. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  28. 28. None of these things is not that much like the other. Grapefruits, Oranges and Limes Photo credit: Frank Grubet http://www.flickr.com/photos/somewhatfrank/425402458/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  29. 29. “Everyone is a “great web designer” these days.” - Matt Brown, Designer http://thingsthatarebrown.com/blog/2008/08/the-first-four-months-of-freelancing-refresh- seattle/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  30. 30. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  31. 31. Problem #2: Our personality doesn’t show. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  32. 32. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  33. 33. Problem #3: Our content wasn’t straightforward enough. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  34. 34. Problem #4: Screenshots aren’t that compelling. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  35. 35. Problem #5: We weren’t attracting the kinds of clients we wanted to. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  36. 36. Blue Flavor’s Goals Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  37. 37. Goal: Do something different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  38. 38. Goal: Show more personality. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  39. 39. Goal: Simplify the message. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  40. 40. Goal: Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  41. 41. Goal: Attract more engaged clients. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  42. 42. No solutioneering. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  43. 43. Turning goals into strategy. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  44. 44. Differentiate Show personality Attract “better” clients. Simplify messaging. Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  45. 45. Differentiate Show personality Attract “better” clients. Simplify messaging. Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  46. 46. Differentiate Show personality Attract “better” clients. Simplify messaging. Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  47. 47. Differentiate Show personality Attract “better” clients. Simplify messaging. Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  48. 48. Branding. Authentic and Different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  49. 49. ? What’s important about a strong online presence? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  50. 50. “One wants to be the needle in the haystack. Not a haystack.” - Donald Draper, AMC’s Mad Men Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  51. 51. AWESOME Pleasant Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  52. 52. AWESOME Pleasant averagewebsite.com Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  53. 53. blueflavor.com AWESOME Pleasant averagewebsite.com Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  54. 54. BRANDING 101 ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal hought Leadership. Honesty. Creativity. People Before Technology. Content Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  55. 55. BRANDING Differentiation 101 ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal hought Leadership. Honesty. Creativity. People Before Technology. Content Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  56. 56. BRANDING Differentiation 101 Authenticity ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal hought Leadership. Honesty. Creativity. People Before Technology. Content Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  57. 57. Being Different Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  58. 58. jQuery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  59. 59. jQuery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  60. 60. MooTools Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  61. 61. Prototype Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  62. 62. SproutCore Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  63. 63. script.aculo.us Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  64. 64. “Provide an experience that is both useful, usable, desirable, and differentiated 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  65. 65. Authentic Messaging: Examples Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  66. 66. Begin with what you want to say. Photo credit: Nate Steiner http://www.flickr.com/photos/nate/2111495424/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  67. 67. Creative and Authentic. Photo credit: Sarah Murray http://www.flickr.com/photos/batterypower/2309957181 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  68. 68. vimeo.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  69. 69. etsy.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  70. 70. etsy.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  71. 71. 37signals.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  72. 72. zappos.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  73. 73. There’s no sense trying to hide. Photo credit: Dan Cederholm http://www.flickr.com/photos/simplebitsdan/407831848/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  74. 74. Web 2.0. Boo. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  75. 75. “Clients don't understand. eir success is related to standing out, not fitting in.” - Donald Draper, AMC’s Mad Men Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  76. 76. High Style: Examples Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  77. 77. baguettebox.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  78. 78. electricpulp.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  79. 79. inlawsandoutlaws.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  80. 80. I made this! inlawsandoutlaws.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  81. 81. The Big Idea(s). Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  82. 82. “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.” - Donald Draper, AMC’s Mad Men Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  83. 83. Focus on our work and let it, and our clients, tell the story. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  84. 84. Use posters to illustrate our projects Blueflavor.com poster by Elliot Jay Stocks http://www.elliotjaystocks.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  85. 85. We think this is pretty different. More compelling than screenshots. Tells a story. Shows personality. Hopefully engaging. Creates a nice artifact. Blueflavor.com poster by Joe Alterio http://www.joealterio.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  86. 86. Testimonials. We’ve got lots of them. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  87. 87. Create a perception of quality and mystery, yet remain accessible. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  88. 88. 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 profile page. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  89. 89. Clarity of Vision. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  90. 90. “Consensus is for losers.” - D. Keith Robinson, Designer http://www.dkeithrobinson.com/entry/consensus_is_for_losers/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  91. 91. “Ideas are easy. It’s the execution of ideas that really separates the sheep om the goats.” - Sue Grafton, Author http://www.suegrafton.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  92. 92. “We all get too excited about FAILure.” - Matt Brown, Designer http://thingsthatarebrown.com/blog/2008/08/the-first-four-months-of-freelancing-refresh- seattle/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  93. 93. It’s ok to fail. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  94. 94. Design Process. It’s not about producing deliverables. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  95. 95. Initial Design Process Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  96. 96. Initial Design Process Discovery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  97. 97. Initial Design Process Design and Discovery Development Decisions Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  98. 98. Initial Design Process Design and Discovery Development Q/A Decisions Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  99. 99. Iterative Design Process Design and Re-Discovery Development Q/A Decisions Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  100. 100. e blueflavor.com design process. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  101. 101. e blueflavor.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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  102. 102. A quick note: The design process is not about your deliverables, it’s about solving problems. Deliverables are about communicating those solutions. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  103. 103. A few words about content. Design is all about words. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  104. 104. “Great web design reflects 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/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  105. 105. We started out by doing a content inventory and cutting everything we didn’t feel supported our goals. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  106. 106. Then we cut what was left in half. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  107. 107. “Murder your darlings.” Sir Arthur Quiller-Couch (and others.) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  108. 108. “Copywriting is interface design.” http://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  109. 109. Our interface is also made of words, we took a long look at that. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  110. 110. Information Architecture. Give your content some structure. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  111. 111. IA is important because it allows you to focus on content and interface without being distracted by look and feel. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  112. 112. Information Architecture *is* Design. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  113. 113. Information Architecture • Document goals, content, navigation and features. • Give it all a simple layout and structure. • Document interactivity, if applicable. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  114. 114. Common IA Documentation • Page Description Diagrams. • Zone Diagrams. • Navigation Schemas. • Wireframes. • Use Cases. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  115. 115. 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  116. 116. Advice for page descriptions. • Prioritize elements, this will be helpful if you have to cut later. • Don’t worry about visual specifics. • Describe how elements reflect user goals. • Use “real” text and examples. • Be verbose, don’t skimp on the details. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  117. 117. Our Initial Wireframes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  118. 118. “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/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  119. 119. Our Revised Wireframes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  120. 120. Advice for wireframes • Be as real as you can. No greeked text. • Set expectations. Wireframes are not a finished design or look and feel. • Annotate thoroughly to describe interaction. • Annotate to answer potential questions that’ll come up later on. • Be as specific as you can. • Don’t get caught in a nasty feedback/revision loop. • Tie them back to previous deliverables to reinforce decisions and thinking. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  121. 121. Inspiration and Concepting. Executing on ideas. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  122. 122. “You can find inspiration anywhere and everywhere, you just need to keep an eye out for it.” - D. Keith Robinson, Designer Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  123. 123. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  124. 124. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  125. 125. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  126. 126. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  127. 127. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  128. 128. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  129. 129. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  130. 130. Patrick Haney’s Flickr http://www.flickr.com/photos/splat/sets/981332/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  131. 131. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  132. 132. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  133. 133. “Ideas are everywhere. e writer of fiction 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  134. 134. The Brief Simple, different, visually engaging, slightly challenging, edgy and fun. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  135. 135. The power of the pen (or pencil.) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  136. 136. Photo by Svet Ivantchev http://www.flickr.com/people/svet/
  137. 137. Moleskine FTW! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  138. 138. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  139. 139. Photo by Paul Worthington http://www.flickr.com/people/paulworthington/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  140. 140. Sketching for problem solving. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  141. 141. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  142. 142. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  143. 143. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  144. 144. V1 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  145. 145. V2 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  146. 146. V3 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  147. 147. V4 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  148. 148. V5 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  149. 149. Designing With Grids. Magical. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  150. 150. Almost every design we do starts with a grid. But why? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  151. 151. Design is all about communication. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  152. 152. In order to communicate well, we must bring order to the data we’re trying to represent. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  153. 153. The grid is a sublime manifestation of a desire to bring order. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  154. 154. While grids are useful for a single page, consistent use can bring consistency across a project. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  155. 155. Paul Rand, 1975 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  156. 156. Grid design of the 1950s and 1960s Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  157. 157. Is this possible on the Web? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  158. 158. For the most part, yes. Modular grids are tough, but columnar grids make a lot of sense on the Web. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  159. 159. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  160. 160. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  161. 161. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  162. 162. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  163. 163. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  164. 164. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  165. 165. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  166. 166. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  167. 167. Typography. It’s not just for print any more. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  168. 168. The art of setting type. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  169. 169. The point? To honor the content. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  170. 170. Typography is not about picking cool fonts. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  171. 171. “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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  172. 172. “ 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  173. 173. Tips for elegant CSS typography: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  174. 174. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  175. 175. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  176. 176. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  177. 177. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  178. 178. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  179. 179. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  180. 180. Realignment. Small changes go a long way. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  181. 181. “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/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  182. 182. blueflavor.com
  183. 183. blueflavor.com
  184. 184. Mitigating Risk. Building fallbacks into the design. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  185. 185. Screenshot Gallery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  186. 186. So How’d we do? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  187. 187.  Goal: Do something different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  188. 188.  Goal: Show more personality. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  189. 189.  Goal: Simplify the message. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  190. 190. Goal: Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  191. 191.  Goal: Attract more engaged clients. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  192. 192. anks! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  193. 193. ? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  194. 194. 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 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

×