Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
3 likes1,512 views
The document emphasizes the importance of designing web systems rather than just websites, particularly within the Drupal framework. It advocates for structured planning through sitemaps and wireframes to clarify the purpose and organization of content before moving to visual design. The presentation also offers practical steps and recommended tools for effectively creating and theming Drupal sites.
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
- 1. Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Nienkerk and Aaron Stanush DrupalCon Copenhagen | August 24, 2010
- 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddross Photo: Kristin Hillery
- 4. Aaron Stanush Co-founder and designer Four Kitchens aaron@fourkitchens.com @aaronstanush
- 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. ‣ As designers, we communicate a site’s functionality to developers through sitemaps, wireframes, and comps ‣ We are site architects
- 8. Designing a web system
- 9. Step 1: Stop! Close Photoshop!
- 10. You wouldn’t paint a house before building it... So how can you design a website before architecting it?
- 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. Define the site “What’s the purpose of the site?”
- 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. Business and technical requirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
- 15. Define the content “What kind of content will the site contain?”
- 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. Blog post Product Title Name Author Description Date published Price Body Options (sizes, colors) Lead image Images
- 18. Create a sitemap and wireframes “How will content be organized?”
- 19. Sitemaps ‣ List all sections of the site ‣ Illustrate how content is organized within the sections
- 20. Home page 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. 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. My account | Log out Blog Logo Search Science Sports Most popular Business posts Arts Content Advertisement Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
- 23. Brainstorming should happen using wireframes, not design comps or mockups.
- 24. Balsamiq Mockups ‣ balsamiq.com ‣ Cross-platform, lots of plugins ‣ Free license for open- source “do-gooders” ‣ Drupal components: bit.ly/drupal-balsamiq
- 25. Step 2: Translate the wireframes into “Drupalspeak”
- 26. Most Drupal themes are comprised of just a few, basic components.
- 27. ‣ Content ‣ Usually a node, view, or panel ‣ Can also be a user profile or admin interface
- 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. ‣ Primary and secondary links ‣ Special kinds of menus ‣ Logo ‣ Search box ‣ Site slogan ‣ Mission statement ‣ Footer message
- 30. Step 3: Design your site (You may now open Photoshop!)
- 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. CASE STUDY Spatula City Spatula City is launching their first website. It will be the largest spatula e-commerce site ever built!
- 33. Define the site Goals Requirements ‣ Build awareness of ‣ Follow branding the Spatula City brand guidelines ‣ Be the Amazon.com ‣ Short page load times of online spatula retail during high tra c ‣ Make money! ‣ SEO-friendly
- 34. Define content types ‣ Product Product ‣ Page Name (e.g. About, Legal) Description ‣ User profile Price ‣ Frequently asked Color options question Image
- 35. Create a sitemap
- 36. Home page 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
- 38. Logo Menu (block) My account Shopping cart Log out Logo Search box Search Primary links Browse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Footer message Secondary links Copyright text About us Retail locations Terms of use
- 39. Design it
- 45. Logo Menu (block) My account Shopping cart Log out Logo Search box Search Primary links Browse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Footer message Secondary links Copyright text About us Retail locations Terms of use
- 46. Logo Menu (block) Search box Primary links Content (node) Block Block Footer message Secondary links
- 47. CASE STUDY Expeditionary Learning What happens when all of the planning and designing has been done for you?
- 48. Working with a provided design ‣ 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
- 49. Sitemap by Thinkso Creative
- 50. Sitemap by Thinkso Creative
- 51. ? Sections Sitemap by Thinkso Creative
- 52. Primary menu items Sections Contexts Sitemap by Thinkso Creative
- 53. ? Section landing pages Sitemap by Thinkso Creative
- 54. Panels? Section Views? landing pages Secondary menu Sitemap by Thinkso Creative
- 55. Design by Thinkso Creative
- 56. Logo Breadcrumb Search box
- 58. Menu (block)
- 59. Block? Block? Block? Block? Block?
- 60. Design by Thinkso Creative
- 61. Panel! Design by Thinkso Creative
- 62. Design by Thinkso Creative
- 63. Page node Design by Thinkso Creative
- 64. Primary menu item Section Context Sitemap by Thinkso Creative
- 65. Section Panel landing page Sitemap by Thinkso Creative
- 66. Secondary menu items Section subpages Page nodes Sitemap by Thinkso Creative
- 67. (More on this case study later...)
- 68. Better. Faster. Cheaper. How to accelerate the design and theming phases of your project
- 69. Don’t start at zero. Start at Drupal. Understand and leverage default Drupal behavior
- 70. Default output and styling ‣ Know what the default markup and CSS look like ‣ Stark theme: drupal.org/project/stark
- 71. Drupal 6 Stark theme: drupal.org/project/stark
- 72. 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
- 73. Core modules ‣ Do you really know what Drupal’s core modules can do? ‣ Aggregator ‣ Menu ‣ Blog ‣ Poll ‣ Book ‣ Profile ‣ Comment ‣ Search ‣ Contact ‣ Taxonomy ‣ Forum
- 75. Theme defaults ‣ Regions ‣ left sidebar, right sidebar, content, header, and footer ‣ Assigning content to regions: drupal.org/node/171224
- 76. ‣ 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
- 77. 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
- 78. 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: drupal.org/node/190815
- 79. Subtheme ‣ Subthemes inherit resources from its base theme ‣ Zen: drupal.org/project/zen ‣ Fusion: drupal.org/project/fusion ‣ More! mogdesign.eu/blog/19-base-themes-for- drupal ‣ Structure and inheritance: drupal.org/node/225125
- 80. Use a grid system ‣ NineSixty: drupal.org/project/ninesixty ‣ Drupal port of the 960.gs grid system ‣ Zen NineSixty: drupal.org/project/zen_ninesixty ‣ 960 Robots: drupal.org/project/ninesixtyrobots ‣ Blueprint: drupal.org/project/blueprint ‣ Drupal port of the Blueprint CSS framework
- 81. Use contributed modules Modules can often take the place of complex and time-consuming theming
- 82. Monster modules ‣ Content Construction Kit (CCK): drupal.org/project/cck ‣ Add virtually any kind of data to nodes ‣ Isolate and control user-added data ‣ Individually theme each piece of data
- 83. ‣ Views: drupal.org/projects/views ‣ Create lists of content ‣ Arguments allow views to be dynamic ‣ Nodequeue: drupal.org/projects/nodequeue ‣ Create manually curated views
- 84. ‣ Panels: drupal.org/projects/panels ‣ Create rich layouts without using multiple page templates or extra regions ‣ New layouts are easily added at the theme layer
- 85. Themer’s helping hands ‣ Devel and the Theme Developer modules: drupal.org/projects/devel drupal.org/projects/devel_themer ‣ Administration themes make the admin UI pretty (so you don’t have to) ‣ Admin: drupal.org/projects/admin ‣ Seven: drupal.org/project/seven
- 86. Wrangling navigation elements ‣ Menu attributes: drupal.org/project/menu_attributes ‣ Add IDs, classes, rel, target, and other attributes to menu items ‣ Context: drupal.org/project/context ‣ Enables you to define “sections” and enforce active menu trails
- 87. ‣ Menu Block: drupal.org/project/menu_block ‣ Drupal’s primary and secondary menus only support two levels ‣ Create robust, multi-level menus ‣ Context Menu Block: drupal.org/project/context_menu_block ‣ Integrates Menu Block with the Context module
- 88. ‣ Custom Breadcrumbs: drupal.org/project/custom_breadcrumbs ‣ Makes breadcrumb navigation usable
- 89. Little modules can save you hours of theming ‣ Someone else has probably run into your problem before... and solved it ‣ The trick is finding the module
- 90. ‣ The problem: CCK outputs values one-by-one in their own divs
- 91. ‣ 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!
- 92. ‣ Text Formatter: drupal.org/project/textformatter ‣ Lets you output CCK fields as lists or comma- separated strings
- 94. After Text Formatter No theming required!
- 96. 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?
- 97. Accommodate content of any 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?
- 98. Anticipate expanding navigation ‣ What happens if menu items are added? ‣ How does your design handle multiple levels of navigation?
- 99. The site you design today will change tomorrow.
- 100. 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.
- 101. All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.