Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)


Published on

This presentation was given at DrupalCon Copenhagen by Aaron Stanush and Todd Nienkerk of Four Kitchens (August 24, 2010)

For more Four Kitchens presentations, please visit

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)

  1. 1. Don’t design websites. Design web systems! Creating a Drupal-optimized designTodd Nienkerk and Aaron StanushDrupalCon Copenhagen | August 24, 2010
  2. 2. Personal introductions
  3. 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens @toddrossPhoto: Kristin Hillery
  4. 4. Aaron StanushCo-founder and designerFour
  5. 5. Designers are powerful!
  6. 6. “With great power there must also come... great responsibility!” —Stan Lee Amazing Fantasy #15, August 1962 (The first Spiderman story)Photo: Mary Catherine via Wikimedia Commons (CC BY-SA)
  7. 7. ‣ As designers, we communicate a site’s functionality to developers through sitemaps, wireframes, and comps‣ We are site architects
  8. 8. Designing a web system
  9. 9. Step 1:Stop! Close Photoshop!
  10. 10. You wouldn’t paint a house beforebuilding it...So how can you design a websitebefore architecting it?
  11. 11. Before you design, ask:‣ What’s the purpose of the site?‣ What kind of content will the site contain?‣ How will content be organized?
  12. 12. Define the site“What’s the purpose of the site?”
  13. 13. List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
  14. 14. Business and technicalrequirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  15. 15. Define the content“What kind of content will the site contain?”
  16. 16. ‣ In Drupal, di erent kinds of content are called content types.‣ Content types are usually defined by the di erent information they contain.
  17. 17. Blog post ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
  18. 18. Create a sitemap andwireframes“How will content be organized?”
  19. 19. Sitemaps‣ List all sections of the site‣ Illustrate how content is organized within the sections
  20. 20. Homepage Primary menu Most Science Sports Business Arts popular Blog post Blog post Blog post Blog post Blog post Secondary menu About us Terms of use Contact us User tools My account Search
  21. 21. Wireframes‣ Illustrate page layout and functionality‣ Demonstrate how a user will navigate the site‣ Identify dynamically-generated content areas‣ Use placement of key components to reinforce the goals of the site ‣ Shopping cart icon, Revenue-generating ads
  22. 22. My account | Log out Blog Logo SearchScienceSports Most popularBusiness postsArts Content AdvertisementCopyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
  23. 23. Brainstorming should happen usingwireframes, not design comps ormockups.
  24. 24. Balsamiq Mockups‣‣ Cross-platform, lots of plugins‣ Free license for open- source “do-gooders”‣ Drupal components:
  25. 25. Step 2:Translate the wireframesinto “Drupalspeak”
  26. 26. Most Drupal themes are comprised ofjust a few, basic components.
  27. 27. ‣ Content ‣ Usually a node, view, or panel ‣ Can also be a user profile or admin interface
  28. 28. ‣ Blocks ‣ Can contain virtually anything: user login, menus, lists of content, custom HTML, views... ‣ Appear in regions (usually sidebars, but sometimes in the header or footer regions)‣ Menus ‣ Added to the page as blocks
  29. 29. ‣ Primary and secondary links ‣ Special kinds of menus‣ Logo‣ Search box‣ Site slogan‣ Mission statement‣ Footer message
  30. 30. Step 3:Design your site(You may now open Photoshop!)
  31. 31. ‣ Now you can make informed decisions about how to create a compelling and e ective design‣ Use your wireframes as blueprints‣ Let the theme components inform your design
  32. 32. CASE STUDYSpatula CitySpatula City is launching their first website. It will bethe largest spatula e-commerce site ever built!
  33. 33. Define the siteGoals Requirements‣ Build awareness of ‣ Follow branding the Spatula City brand guidelines‣ Be the ‣ Short page load times of online spatula retail during high tra c‣ Make money! ‣ SEO-friendly
  34. 34. Define content types‣ Product Product‣ Page Name (e.g. About, Legal) Description‣ User profile Price‣ Frequently asked Color options question Image
  35. 35. Create a sitemap
  36. 36. Homepage Primary menu Spatulas Spatulas Build-A- FAQ Contact us by type by color Spatula Question Spatula page page Secondary menu Retail locations About us Terms of use User tools My account Shopping cart Search
  37. 37. Create the wireframes
  38. 38. Logo Menu (block) My account Shopping cart Log out Logo Search box Search Primary linksBrowse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Footer message Secondary linksCopyright text About us Retail locations Terms of use
  39. 39. Design it
  40. 40. Logo Menu (block) My account Shopping cart Log out Logo Search box Search Primary linksBrowse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Footer message Secondary linksCopyright text About us Retail locations Terms of use
  41. 41. Logo Menu (block) Search box Primary links Content (node) Block BlockFooter message Secondary links
  42. 42. CASE STUDYExpeditionary LearningWhat happens when all of the planning anddesigning has been done for you?
  43. 43. Working with a provideddesign‣ Expeditionary Learning partnered with Thinkso Creative and Four Kitchens to relaunch their brand and website‣ Thinkso Creative provided the site design‣ They had never worked with Drupal before
  44. 44. Sitemap by Thinkso Creative
  45. 45. Sitemap by Thinkso Creative
  46. 46. ? SectionsSitemap by Thinkso Creative
  47. 47. Primary menu items Sections ContextsSitemap by Thinkso Creative
  48. 48. ? Section landing pagesSitemap by Thinkso Creative
  49. 49. Panels? Section Views? landing pages Secondary menuSitemap by Thinkso Creative
  50. 50. Design by Thinkso Creative
  51. 51. LogoBreadcrumb Search box
  52. 52. Primary linksSecondary links
  53. 53. Menu (block)
  54. 54. Block?Block?Block?Block? Block?
  55. 55. Design by Thinkso Creative
  56. 56. Panel!Design by Thinkso Creative
  57. 57. Design by Thinkso Creative
  58. 58. Page nodeDesign by Thinkso Creative
  59. 59. Primary menu item Section ContextSitemap by Thinkso Creative
  60. 60. Section Panel landing pageSitemap by Thinkso Creative
  61. 61. Secondary menu items Section subpages Page nodesSitemap by Thinkso Creative
  62. 62. (More on this case study later...)
  63. 63. Better. Faster. Cheaper.How to accelerate the design and theming phasesof your project
  64. 64. Don’t start at zero.Start at Drupal.Understand and leverage default Drupal behavior
  65. 65. Default output and styling‣ Know what the default markup and CSS look like‣ Stark theme:
  66. 66. Drupal 6 Stark theme:
  67. 67. Default blocks and menus‣ Default blocks ‣ User login, Recent comments, Who’s online, Who’s new, and more...‣ Default menus ‣ Navigation ‣ Primary and Secondary links
  68. 68. Core modules‣ Do you really know what Drupal’s core modules can do? ‣ Aggregator ‣ Menu ‣ Blog ‣ Poll ‣ Book ‣ Profile ‣ Comment ‣ Search ‣ Contact ‣ Taxonomy ‣ Forum
  69. 69. Understand Drupal’stheming system
  70. 70. Theme defaults‣ Regions ‣ left sidebar, right sidebar, content, header, and footer ‣ Assigning content to regions:
  71. 71. ‣ Variables printed in the template files ‣ $content, $logo, $submitted, $terms, $links...‣ Available variables are listed at the top of each template file ‣ Pages: /modules/system/page.tpl.php ‣ Blocks: /modules/system/block.tpl.php ‣ Nodes: /modules/node/node.tpl.php ‣ Comments: /modules/comment/comment.tpl.php
  72. 72. Theme settings‣ Upload a logo and bookmark icon (favicon)‣ Add copy: site slogan, mission statement, and footer message‣ Show and hide node authoring information by content type‣ Enable user pictures (avatars) in nodes and comments
  73. 73. Use template suggestions‣ You’re not limited to a single template ‣ Each content type can have its own node.tpl.php file ‣ Example: node-blog.tpl.php overrides and a ects only “blog” content types‣ Learn more:
  74. 74. Subtheme‣ Subthemes inherit resources from its base theme ‣ Zen: ‣ Fusion: ‣ More! drupal‣ Structure and inheritance:
  75. 75. Use a grid system‣ NineSixty: ‣ Drupal port of the grid system ‣ Zen NineSixty: ‣ 960 Robots:‣ Blueprint: ‣ Drupal port of the Blueprint CSS framework
  76. 76. Use contributed modulesModules can often take the place of complex andtime-consuming theming
  77. 77. Monster modules‣ Content Construction Kit (CCK): ‣ Add virtually any kind of data to nodes ‣ Isolate and control user-added data ‣ Individually theme each piece of data
  78. 78. ‣ Views: ‣ Create lists of content ‣ Arguments allow views to be dynamic‣ Nodequeue: ‣ Create manually curated views
  79. 79. ‣ Panels: ‣ Create rich layouts without using multiple page templates or extra regions ‣ New layouts are easily added at the theme layer
  80. 80. Themer’s helping hands‣ Devel and the Theme Developer modules:‣ Administration themes make the admin UI pretty (so you don’t have to) ‣ Admin: ‣ Seven:
  81. 81. Wrangling navigationelements‣ Menu attributes: ‣ Add IDs, classes, rel, target, and other attributes to menu items‣ Context: ‣ Enables you to define “sections” and enforce active menu trails
  82. 82. ‣ Menu Block: ‣ Drupal’s primary and secondary menus only support two levels ‣ Create robust, multi-level menus‣ Context Menu Block: ‣ Integrates Menu Block with the Context module
  83. 83. ‣ Custom Breadcrumbs: ‣ Makes breadcrumb navigation usable
  84. 84. Little modules can saveyou hours of theming‣ Someone else has probably run into your problem before... and solved it‣ The trick is finding the module
  85. 85. ‣ The problem: CCK outputs values one-by-one in their own divs
  86. 86. ‣ The (theme) solution: ‣ Override the CCK field’s template file ‣ Write PHP to output each field separated by a comma‣ There’s got to be a better way!
  87. 87. ‣ Text Formatter: ‣ Lets you output CCK fields as lists or comma- separated strings
  88. 88. Configuring Text Formatter
  89. 89. After Text Formatter No theming required!
  90. 90. Design for change
  91. 91. Minimize templates‣ More templates mean more maintenance‣ Consistent styling across templates creates a better user experience‣ Create a robust default template ‣ What happens if a site administrator creates a new content type without creating a new template?
  92. 92. Accommodate content ofany length‣ Your design should be robust enough to handle short and long content‣ What happens if your title wraps to two or three lines?‣ What about the menu items?
  93. 93. Anticipate expandingnavigation‣ What happens if menu items are added?‣ How does your design handle multiple levels of navigation?
  94. 94. The site you design todaywill change tomorrow.
  95. 95. Credits‣ Spatula City is based on an idea by ‣ The items listed above are exempt the great Weird Al Yankovic, from this presentation’s Creative internationally renowned accordion Commons license. virtuoso. ‣ This presentation was created and‣ The Swedish Chef was created by delivered by Todd Nienkerk and Jim Henson. Or someone who Aaron Stanush, co-founders of worked for him. Whatever the Four Kitchens. case, we didn’t invent him.‣ Expeditionary Learning sitemaps, mockups, and screenshots are copyright Expeditionary Learning Schools and/or Thinkso Creative.
  96. 96. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.