Search

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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    21 Favorites

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

    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
    136. Photo by Svet Ivantchev http://www.flickr.com/people/svet/
    137. Moleskine FTW! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    138. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    139. Photo by Paul Worthington http://www.flickr.com/people/paulworthington/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    140. Sketching for problem solving. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    141. 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. V1 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    145. V2 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    146. V3 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    147. V4 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    148. V5 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    149. Designing With Grids. Magical. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    150. Almost every design we do starts with a grid. But why? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    151. Design is all about communication. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    152. In order to communicate well, we must bring order to the data we’re trying to represent. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    153. The grid is a sublime manifestation of a desire to bring order. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    154. While grids are useful for a single page, consistent use can bring consistency across a project. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    155. Paul Rand, 1975 Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    156. Grid design of the 1950s and 1960s Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    157. Is this possible on the Web? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    158. For the most part, yes. Modular grids are tough, but columnar grids make a lot of sense on the Web. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    159. 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. Typography. It’s not just for print any more. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    168. The art of setting type. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    169. The point? To honor the content. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    170. Typography is not about picking cool fonts. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    171. “One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page.” - Robert Bringhurst, The Elements of Typographic Style Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    172. “ In a world rife with unsolicited messages, typography must oen draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency.” - Robert Bringhurst, The Elements of Typographic Style Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    173. Tips for elegant CSS typography: Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    174. Tips for elegant CSS typography: • Use a good CSS reset stylesheet to give yourself a clean slate. • Be sensitive to the high contrast of computer screens—consider using grey on white instead of pure black on white, for example. • Choose an appropriate measure for your text size. Readability takes a big, big hit when your lines are overly long. • Pay attention to leading. Adding a little vertical breathing room is one of the simplest things you can do to improve the aesthetic of your site. • Don’t overdo your paragraph indicators. You don’t need a blank like, and an indent, and a drop cap, and...one will do, thank you. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    175. 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. Realignment. Small changes go a long way. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    181. “e ability to simplify means to eliminate the unnecessary so that the necessary may speak.” - Hans Hoffman, German Painter and Teacher http://www.hanshofmann.org/ Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    182. blueflavor.com
    183. blueflavor.com
    184. Mitigating Risk. Building fallbacks into the design. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    185. Screenshot Gallery Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    186. So How’d we do? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    187.  Goal: Do something different. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    188.  Goal: Show more personality. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    189.  Goal: Simplify the message. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    190. Goal: Better show all that we do. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    191.  Goal: Attract more engaged clients. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    192. anks! Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    193. ? Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
    194. Web Design and Development: Behind the Scenes D. Keith Robinson & Jeff Croft, October 3 & 4, 2008 http://www.blueflavor.com/ http://www.blueflavor.com/blog/ keith@blueflavor.com jeff@blueflavor.com Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008

    + dkrdkr, 2 years ago

    custom

    3415 views, 21 favs, 8 embeds more stats

    Keith Robinson and Jeff Croft will talk about their more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3415
      • 2765 on SlideShare
      • 650 from embeds
    • Comments 0
    • Favorites 21
    • Downloads 0
    Most viewed embeds
    • 313 views on http://blog.filosof.biz
    • 157 views on http://jeffcroft.com
    • 132 views on http://blueflavor.com
    • 22 views on http://www.blueflavor.com
    • 12 views on http://static.slideshare.net

    more

    All embeds
    • 313 views on http://blog.filosof.biz
    • 157 views on http://jeffcroft.com
    • 132 views on http://blueflavor.com
    • 22 views on http://www.blueflavor.com
    • 12 views on http://static.slideshare.net
    • 11 views on http://www.coreycanada.com
    • 2 views on http://www.philly-stream.com
    • 1 views on http://www.slideshare.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    more
    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved