SlideShare a Scribd company logo
1 of 195
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.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 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
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 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
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 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
Web Design and Development: Behind the Scenes
Day One: Strategy and Design




             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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
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
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
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
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
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
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
?
              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, October 2008
?
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/183915370/

                             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
Blue Flavor’s Problems
  (And what were we doing right?)




 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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://www.flickr.com/photos/somewhatfrank/425402458/

                            Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
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, October 2008
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 Jam Session, October 2008
Problem #4: Screenshots aren’t
       that compelling.



     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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, October 2008
Goal: Attract more engaged
           clients.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 we do.

   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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
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
Branding.
          Authentic and Different.




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



  Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
AWESOME




                                                                   Pleasant




                                                          Usable




                                  Needs improvement




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




                                                                           Pleasant

averagewebsite.com
                                                                  Usable




                                          Needs improvement




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

                                                                               AWESOME




                                                                           Pleasant

averagewebsite.com
                                                                  Usable




                                          Needs improvement




        Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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
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
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 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
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/


                             Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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 Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 Mad Men




       Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 Session, October 2008
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 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
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
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
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
Testimonials. We’ve got lots of them.




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



    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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_is_for_losers/




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
“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
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 Session, October 2008
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, October 2008
Initial Design Process



                            Design and
Discovery                  Development
                             Decisions




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



                            Design and
Discovery                  Development                                Q/A
                             Decisions




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



                               Design and
Re-Discovery                  Development                                Q/A
                                Decisions




          Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
e blueflavor.com design process.




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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
A few words about content.
           Design is all about words.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
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
Then we cut what was left in half.




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




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
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
Information Architecture.
    Give your content some structure.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
Information Architecture *is* Design.




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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
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
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
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 creativity.”
        - Charles Mingus, Jazz Composer and Amazing Bassist
                http://www.mingusmingusmingus.com/




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 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
Inspiration and Concepting.
                 Executing on ideas.




    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
“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
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 Scenes, Webmaster Jam Session, October 2008
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
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 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
The Brief
Simple, different, visually engaging,
slightly challenging, edgy and fun.



     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
The power of the pen (or
pencil.)


    Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
Webmaster Jam Session: Design and Development Behind the Scenes Day One
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: Behind the Scenes, Webmaster Jam Session, October 2008
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 Jam Session, October 2008
Almost every design we do
starts with a grid. But why?




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




     Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
The grid is a sublime manifestation of
       a desire to bring order.




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
Paul Rand, 1975

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




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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 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
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, October 2008
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, October 2008
“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
“ 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
Tips for elegant CSS typography:




      Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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
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, October 2008
“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
blueflavor.com
blueflavor.com
Mitigating Risk.
Building fallbacks into the design.




Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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, October 2008

Goal: Attract more engaged
           clients.



   Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
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.com/
http://www.blueflavor.com/blog/
keith@blueflavor.com
jeff@blueflavor.com




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

More Related Content

What's hot

Introduction to Wordpress Theme Development
Introduction to Wordpress Theme Development Introduction to Wordpress Theme Development
Introduction to Wordpress Theme Development Nile Flores
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbaiCss Founder
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-firstAndy Parker
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Cathy Dew
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
BuddyPress Tips: How We Built chekmrk
BuddyPress Tips: How We Built chekmrkBuddyPress Tips: How We Built chekmrk
BuddyPress Tips: How We Built chekmrkWes Chyrchel
 
Enterprise Class WordPress
Enterprise Class WordPressEnterprise Class WordPress
Enterprise Class WordPressJake Goldman
 
Seo moz pro-link-building
Seo moz pro-link-buildingSeo moz pro-link-building
Seo moz pro-link-buildingSon Dang
 
Tarek Resume Edits - Google Docs
Tarek Resume Edits - Google DocsTarek Resume Edits - Google Docs
Tarek Resume Edits - Google DocsTarek Hafez
 
How to Sail Trhough the Bermuda Triangle of Web Designer's Hell
How to Sail Trhough the Bermuda Triangle  of Web Designer's Hell How to Sail Trhough the Bermuda Triangle  of Web Designer's Hell
How to Sail Trhough the Bermuda Triangle of Web Designer's Hell New Tricks
 

What's hot (11)

Introduction to Wordpress Theme Development
Introduction to Wordpress Theme Development Introduction to Wordpress Theme Development
Introduction to Wordpress Theme Development
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbai
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-first
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
BuddyPress Tips: How We Built chekmrk
BuddyPress Tips: How We Built chekmrkBuddyPress Tips: How We Built chekmrk
BuddyPress Tips: How We Built chekmrk
 
Enterprise Class WordPress
Enterprise Class WordPressEnterprise Class WordPress
Enterprise Class WordPress
 
Seo moz pro-link-building
Seo moz pro-link-buildingSeo moz pro-link-building
Seo moz pro-link-building
 
Office 365 branding webinar
Office 365 branding webinarOffice 365 branding webinar
Office 365 branding webinar
 
Tarek Resume Edits - Google Docs
Tarek Resume Edits - Google DocsTarek Resume Edits - Google Docs
Tarek Resume Edits - Google Docs
 
How to Sail Trhough the Bermuda Triangle of Web Designer's Hell
How to Sail Trhough the Bermuda Triangle  of Web Designer's Hell How to Sail Trhough the Bermuda Triangle  of Web Designer's Hell
How to Sail Trhough the Bermuda Triangle of Web Designer's Hell
 

Viewers also liked

Web Design & Development
Web Design & DevelopmentWeb Design & Development
Web Design & DevelopmentAsif Hussain
 
Web Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTREWeb Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTREjatin batra
 
Core 4 Binomial Expansion 2
Core 4 Binomial Expansion 2Core 4 Binomial Expansion 2
Core 4 Binomial Expansion 2davidmiles100
 
The corporate blogging book
The corporate blogging bookThe corporate blogging book
The corporate blogging bookRichard Go
 
Webmaster Presentation
Webmaster PresentationWebmaster Presentation
Webmaster PresentationRichard Go
 
The 'P' Word Can Hurt You! Plagiarism Tips & Tricks
The 'P' Word Can Hurt You! Plagiarism Tips & TricksThe 'P' Word Can Hurt You! Plagiarism Tips & Tricks
The 'P' Word Can Hurt You! Plagiarism Tips & TricksEsther Grassian
 
ISTC 201 - Plagiarism and Proper Citation
ISTC 201 - Plagiarism and Proper CitationISTC 201 - Plagiarism and Proper Citation
ISTC 201 - Plagiarism and Proper CitationLaksamee Putnam
 
Google Apps and Plagiarism
Google Apps and PlagiarismGoogle Apps and Plagiarism
Google Apps and PlagiarismJon Corippo
 
Google analytics ppt
Google analytics pptGoogle analytics ppt
Google analytics pptmaddinpiya
 
5 Fantasy Google Translator
5 Fantasy Google Translator5 Fantasy Google Translator
5 Fantasy Google TranslatorJing-mei Huang
 
Project Voldemort: Big data loading
Project Voldemort: Big data loadingProject Voldemort: Big data loading
Project Voldemort: Big data loadingDan Harvey
 
HBase at Mendeley
HBase at MendeleyHBase at Mendeley
HBase at MendeleyDan Harvey
 
5.4 mathematical induction
5.4 mathematical induction5.4 mathematical induction
5.4 mathematical inductionmath260
 
How to set up campaign in google adwords by Tanuja Talekar
How to set up campaign in google adwords by Tanuja TalekarHow to set up campaign in google adwords by Tanuja Talekar
How to set up campaign in google adwords by Tanuja TalekarTanuja Talekar
 
Scientific writing pro : Office word & Mendeley (dani r firman)
Scientific writing pro : Office word & Mendeley (dani r firman)Scientific writing pro : Office word & Mendeley (dani r firman)
Scientific writing pro : Office word & Mendeley (dani r firman)Dani Firman
 
Principle of mathematical induction
Principle of mathematical inductionPrinciple of mathematical induction
Principle of mathematical inductionKriti Varshney
 

Viewers also liked (19)

Web Design & Development
Web Design & DevelopmentWeb Design & Development
Web Design & Development
 
Web Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTREWeb Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTRE
 
Core 4 Binomial Expansion 2
Core 4 Binomial Expansion 2Core 4 Binomial Expansion 2
Core 4 Binomial Expansion 2
 
The corporate blogging book
The corporate blogging bookThe corporate blogging book
The corporate blogging book
 
Webmaster Presentation
Webmaster PresentationWebmaster Presentation
Webmaster Presentation
 
The 'P' Word Can Hurt You! Plagiarism Tips & Tricks
The 'P' Word Can Hurt You! Plagiarism Tips & TricksThe 'P' Word Can Hurt You! Plagiarism Tips & Tricks
The 'P' Word Can Hurt You! Plagiarism Tips & Tricks
 
Mendeley: On the Web and on Your Desktop
Mendeley:  On the Web and on Your DesktopMendeley:  On the Web and on Your Desktop
Mendeley: On the Web and on Your Desktop
 
thesis-despoina
thesis-despoinathesis-despoina
thesis-despoina
 
ISTC 201 - Plagiarism and Proper Citation
ISTC 201 - Plagiarism and Proper CitationISTC 201 - Plagiarism and Proper Citation
ISTC 201 - Plagiarism and Proper Citation
 
Google Apps and Plagiarism
Google Apps and PlagiarismGoogle Apps and Plagiarism
Google Apps and Plagiarism
 
Plagcitation fa2012
Plagcitation fa2012Plagcitation fa2012
Plagcitation fa2012
 
Google analytics ppt
Google analytics pptGoogle analytics ppt
Google analytics ppt
 
5 Fantasy Google Translator
5 Fantasy Google Translator5 Fantasy Google Translator
5 Fantasy Google Translator
 
Project Voldemort: Big data loading
Project Voldemort: Big data loadingProject Voldemort: Big data loading
Project Voldemort: Big data loading
 
HBase at Mendeley
HBase at MendeleyHBase at Mendeley
HBase at Mendeley
 
5.4 mathematical induction
5.4 mathematical induction5.4 mathematical induction
5.4 mathematical induction
 
How to set up campaign in google adwords by Tanuja Talekar
How to set up campaign in google adwords by Tanuja TalekarHow to set up campaign in google adwords by Tanuja Talekar
How to set up campaign in google adwords by Tanuja Talekar
 
Scientific writing pro : Office word & Mendeley (dani r firman)
Scientific writing pro : Office word & Mendeley (dani r firman)Scientific writing pro : Office word & Mendeley (dani r firman)
Scientific writing pro : Office word & Mendeley (dani r firman)
 
Principle of mathematical induction
Principle of mathematical inductionPrinciple of mathematical induction
Principle of mathematical induction
 

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

Mindmeister Case Study En.Key
Mindmeister Case Study En.KeyMindmeister Case Study En.Key
Mindmeister Case Study En.Keymindmeister
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LAThinkful
 
Designing WebSphere Portal Applications
Designing WebSphere Portal ApplicationsDesigning WebSphere Portal Applications
Designing WebSphere Portal Applicationsdominion
 
Day One Keynote
Day One KeynoteDay One Keynote
Day One Keynotegoodfriday
 
Structure credentials
Structure credentialsStructure credentials
Structure credentialsJohn Galpin
 
Day One Keynote
Day One KeynoteDay One Keynote
Day One Keynotegoodfriday
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSThinkful
 
Clarity CMS - A Brief Overview
Clarity CMS - A Brief OverviewClarity CMS - A Brief Overview
Clarity CMS - A Brief Overviewguestfc16b55
 
Clarity CMS - About Clarity Content Management Solutions
Clarity CMS - About Clarity Content Management SolutionsClarity CMS - About Clarity Content Management Solutions
Clarity CMS - About Clarity Content Management SolutionsClarity Ventures
 
220908 Portfolio Pdf Ver
220908 Portfolio Pdf Ver220908 Portfolio Pdf Ver
220908 Portfolio Pdf Veradamling00
 
Ministry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt CarlisleMinistry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt CarlisleMatt Carlisle
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSThinkful
 
Web Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation SlidesWeb Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation SlidesSlideTeam
 
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle 6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle Dave Parker
 
Project Charter Management One Page Summary Presentation Report Infographic P...
Project Charter Management One Page Summary Presentation Report Infographic P...Project Charter Management One Page Summary Presentation Report Infographic P...
Project Charter Management One Page Summary Presentation Report Infographic P...SlideTeam
 
Netwise Strategies Profile
Netwise Strategies ProfileNetwise Strategies Profile
Netwise Strategies ProfileBassem Sabry
 
Website Strategy And Audit Proposal PowerPoint Presentation Slides
Website Strategy And Audit Proposal PowerPoint Presentation SlidesWebsite Strategy And Audit Proposal PowerPoint Presentation Slides
Website Strategy And Audit Proposal PowerPoint Presentation SlidesSlideTeam
 

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

Mindmeister Case Study En.Key
Mindmeister Case Study En.KeyMindmeister Case Study En.Key
Mindmeister Case Study En.Key
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LA
 
Designing WebSphere Portal Applications
Designing WebSphere Portal ApplicationsDesigning WebSphere Portal Applications
Designing WebSphere Portal Applications
 
Day One Keynote
Day One KeynoteDay One Keynote
Day One Keynote
 
Structure credentials
Structure credentialsStructure credentials
Structure credentials
 
Day One Keynote
Day One KeynoteDay One Keynote
Day One Keynote
 
8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
Clarity CMS - A Brief Overview
Clarity CMS - A Brief OverviewClarity CMS - A Brief Overview
Clarity CMS - A Brief Overview
 
Clarity CMS - About Clarity Content Management Solutions
Clarity CMS - About Clarity Content Management SolutionsClarity CMS - About Clarity Content Management Solutions
Clarity CMS - About Clarity Content Management Solutions
 
220908 Portfolio Pdf Ver
220908 Portfolio Pdf Ver220908 Portfolio Pdf Ver
220908 Portfolio Pdf Ver
 
Ministry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt CarlisleMinistry 2.0: User Centered Website Design | Matt Carlisle
Ministry 2.0: User Centered Website Design | Matt Carlisle
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
Web Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation SlidesWeb Design Proposal Template PowerPoint Presentation Slides
Web Design Proposal Template PowerPoint Presentation Slides
 
Web Site Redesign
Web Site RedesignWeb Site Redesign
Web Site Redesign
 
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle 6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle
6 Month Startup - Ideation to Revenue. Month 3, Cohort 4 Seattle
 
Web Design
Web DesignWeb Design
Web Design
 
Project Charter Management One Page Summary Presentation Report Infographic P...
Project Charter Management One Page Summary Presentation Report Infographic P...Project Charter Management One Page Summary Presentation Report Infographic P...
Project Charter Management One Page Summary Presentation Report Infographic P...
 
Netwise Strategies Profile
Netwise Strategies ProfileNetwise Strategies Profile
Netwise Strategies Profile
 
Website Strategy And Audit Proposal PowerPoint Presentation Slides
Website Strategy And Audit Proposal PowerPoint Presentation SlidesWebsite Strategy And Audit Proposal PowerPoint Presentation Slides
Website Strategy And Audit Proposal PowerPoint Presentation Slides
 

Recently uploaded

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Recently uploaded (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

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

  • 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. Introduction. We’re going to rock your world. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 3. D. Keith Robinson Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Jeff Cro Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. One small leaf... Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 8. Blue Flavor Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ? Let ‘em fly. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 20. Strategy. Setting the stage for success. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 21. ? What’s not working? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 22. Start with goals. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. Blue Flavor’s Problems (And what were we doing right?) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 26. Old Blueflavor.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 27. Problem #1: We don’t stand out. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. “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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 31. Problem #2: Our personality doesn’t show. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 32. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 33. Problem #3: Our content wasn’t straightforward enough. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 34. Problem #4: Screenshots aren’t that compelling. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Blue Flavor’s Goals Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 37. Goal: Do something different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 38. Goal: Show more personality. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 39. Goal: Simplify the message. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 40. Goal: Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 41. Goal: Attract more engaged clients. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 42. No solutioneering. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 43. Turning goals into strategy. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. 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. 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. Branding. Authentic and Different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 49. ? What’s important about a strong online presence? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. AWESOME Pleasant Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 52. AWESOME Pleasant averagewebsite.com Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 53. blueflavor.com AWESOME Pleasant averagewebsite.com Usable Needs improvement Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. 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. Being Different Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 58. jQuery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 59. jQuery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 60. MooTools Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 61. Prototype Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 62. SproutCore Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 63. script.aculo.us Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Authentic Messaging: Examples Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. vimeo.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 69. etsy.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 70. etsy.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 71. 37signals.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 72. zappos.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Web 2.0. Boo. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. High Style: Examples Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 77. baguettebox.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 78. electricpulp.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 79. inlawsandoutlaws.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 80. I made this! inlawsandoutlaws.com/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 81. The Big Idea(s). Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. 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. 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. Testimonials. We’ve got lots of them. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 87. Create a perception of quality and mystery, yet remain accessible. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Clarity of Vision. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. “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. “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. It’s ok to fail. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 94. Design Process. It’s not about producing deliverables. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 95. Initial Design Process Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 96. Initial Design Process Discovery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 97. Initial Design Process Design and Discovery Development Decisions Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 98. Initial Design Process Design and Discovery Development Q/A Decisions Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. e blueflavor.com design process. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. A few words about content. Design is all about words. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. Then we cut what was left in half. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 107. “Murder your darlings.” Sir Arthur Quiller-Couch (and others.) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. Information Architecture. Give your content some structure. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Information Architecture *is* Design. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. 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. 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. Our Initial Wireframes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Our Revised Wireframes Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Inspiration and Concepting. Executing on ideas. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 124. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 125. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 126. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 127. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 128. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 129. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. 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. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 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. The Brief Simple, different, visually engaging, slightly challenging, edgy and fun. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 135. The power of the pen (or pencil.) Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 137. Photo by Svet Ivantchev http://www.flickr.com/people/svet/
  • 138. Moleskine FTW! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 139. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 140. Photo by Paul Worthington http://www.flickr.com/people/paulworthington/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 141. Sketching for problem solving. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 142. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 143. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 144. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 145. V1 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 146. V2 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 147. V3 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 148. V4 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 149. V5 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 150. Designing With Grids. Magical. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 151. Almost every design we do starts with a grid. But why? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 152. Design is all about communication. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 153. 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
  • 154. The grid is a sublime manifestation of a desire to bring order. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 155. 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
  • 156. Paul Rand, 1975 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 157. Grid design of the 1950s and 1960s Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 158. Is this possible on the Web? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 159. 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
  • 160. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 161. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 162. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 163. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 164. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 165. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 166. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 167. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 168. Typography. It’s not just for print any more. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 169. The art of setting type. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 170. The point? To honor the content. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 171. Typography is not about picking cool fonts. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 172. “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
  • 173. “ 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
  • 174. Tips for elegant CSS typography: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 175. 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
  • 176. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 177. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 178. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 179. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 180. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 181. Realignment. Small changes go a long way. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 182. “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
  • 185. Mitigating Risk. Building fallbacks into the design. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 186. Screenshot Gallery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 187. So How’d we do? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 188.  Goal: Do something different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 189.  Goal: Show more personality. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 190.  Goal: Simplify the message. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 191. Goal: Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 192.  Goal: Attract more engaged clients. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 193. anks! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 194. ? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
  • 195. 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