• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 

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

on

  • 7,940 views

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

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

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

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

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

Statistics

Views

Total Views
7,940
Views on SlideShare
7,179
Embed Views
761

Actions

Likes
33
Downloads
0
Comments
0

13 Embeds 761

http://blog.filosof.biz 383
http://jeffcroft.com 180
http://blueflavor.com 132
http://www.blueflavor.com 22
http://static.slideshare.net 12
http://www.coreycanada.com 11
http://www.slideshare.net 7
http://www.linkedin.com 7
http://www.philly-stream.com 2
https://www.linkedin.com 2
http://translate.googleusercontent.com 1
http://www.spreadingscience.com 1
http://cyview.blogspot.hk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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