Your SlideShare is downloading. ×
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,167

Published on

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

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 http://fourkitchens.com/presentations

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,167
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Don’t design websites. Design web systems! Creating a Drupal-optimized designTodd Nienkerk and Aaron StanushDrupalCon Copenhagen | August 24, 2010
  • 2. Personal introductions
  • 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddrossPhoto: Kristin Hillery
  • 4. Aaron StanushCo-founder and designerFour Kitchensaaron@fourkitchens.com@aaronstanush
  • 5. Designers are powerful!
  • 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 beforebuilding it...So how can you design a websitebefore 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 technicalrequirements 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 ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
  • 18. Create a sitemap andwireframes“How will content be organized?”
  • 19. Sitemaps‣ List all sections of the site‣ Illustrate how content is organized within the sections
  • 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. 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 SearchScienceSports Most popularBusiness postsArts Content AdvertisementCopyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
  • 23. Brainstorming should happen usingwireframes, not design comps ormockups.
  • 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 wireframesinto “Drupalspeak”
  • 26. Most Drupal themes are comprised ofjust 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 STUDYSpatula CitySpatula City is launching their first website. It will bethe largest spatula e-commerce site ever built!
  • 33. Define the siteGoals 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. 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. Create the wireframes
  • 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. Design it
  • 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. Logo Menu (block) Search box Primary links Content (node) Block BlockFooter message Secondary links
  • 42. CASE STUDYExpeditionary LearningWhat happens when all of the planning anddesigning has been done for you?
  • 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. Sitemap by Thinkso Creative
  • 45. Sitemap by Thinkso Creative
  • 46. ? SectionsSitemap by Thinkso Creative
  • 47. Primary menu items Sections ContextsSitemap by Thinkso Creative
  • 48. ? Section landing pagesSitemap by Thinkso Creative
  • 49. Panels? Section Views? landing pages Secondary menuSitemap by Thinkso Creative
  • 50. Design by Thinkso Creative
  • 51. LogoBreadcrumb Search box
  • 52. Primary linksSecondary links
  • 53. Menu (block)
  • 54. Block?Block?Block?Block? Block?
  • 55. Design by Thinkso Creative
  • 56. Panel!Design by Thinkso Creative
  • 57. Design by Thinkso Creative
  • 58. Page nodeDesign by Thinkso Creative
  • 59. Primary menu item Section ContextSitemap by Thinkso Creative
  • 60. Section Panel landing pageSitemap by Thinkso Creative
  • 61. Secondary menu items Section subpages Page nodesSitemap by Thinkso Creative
  • 62. (More on this case study later...)
  • 63. Better. Faster. Cheaper.How to accelerate the design and theming phasesof your project
  • 64. Don’t start at zero.Start at Drupal.Understand and leverage default Drupal behavior
  • 65. Default output and styling‣ Know what the default markup and CSS look like‣ Stark theme: drupal.org/project/stark
  • 66. Drupal 6 Stark theme: drupal.org/project/stark
  • 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. 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. Understand Drupal’stheming system
  • 70. Theme defaults‣ Regions ‣ left sidebar, right sidebar, content, header, and footer ‣ Assigning content to regions: drupal.org/node/171224
  • 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. 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. 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
  • 74. 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
  • 75. 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
  • 76. Use contributed modulesModules can often take the place of complex andtime-consuming theming
  • 77. 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
  • 78. ‣ Views: drupal.org/projects/views ‣ Create lists of content ‣ Arguments allow views to be dynamic‣ Nodequeue: drupal.org/projects/nodequeue ‣ Create manually curated views
  • 79. ‣ 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
  • 80. 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
  • 81. Wrangling navigationelements‣ 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
  • 82. ‣ 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
  • 83. ‣ Custom Breadcrumbs: drupal.org/project/custom_breadcrumbs ‣ Makes breadcrumb navigation usable
  • 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. ‣ The problem: CCK outputs values one-by-one in their own divs
  • 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. ‣ Text Formatter: drupal.org/project/textformatter ‣ Lets you output CCK fields as lists or comma- separated strings
  • 88. Configuring Text Formatter
  • 89. After Text Formatter No theming required!
  • 90. Design for change
  • 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. 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. Anticipate expandingnavigation‣ What happens if menu items are added?‣ How does your design handle multiple levels of navigation?
  • 94. The site you design todaywill change tomorrow.
  • 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. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.

×