From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

24,639 views
23,209 views

Published on

For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

Published in: Design

From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

  1. From Photoshop to Drupal theme Creating a Drupal-optimized design Todd Nienkerk and Aaron Stanush DrupalCon San Francisco | April 19, 2010
  2. Personal introductions
  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 @astanush
  5. Prologue: Anatomy of a Drupal theme See drupal.org/node/171194 for more information
  6. What is a Drupal theme?
  7. A Drupal theme is simply a collection of files uploaded to a specific directory.
  8. This is what Drupal looks like out of the box The only directory you need to worry about is /sites
  9. Core themes are stored in /themes DO NOT put your themes here!
  10. Themes should be uploaded to /sites/all/themes You will need to create this directory after installing Drupal
  11. To add a new theme, upload it to /sites/all/themes
  12. Drupal themes need very few files
  13. Drupal themes need very few files mytheme.info defines the theme
  14. Drupal themes need very few files mytheme.info defines the theme .tpl.php files are “template” files
  15. Template files ‣ Contain a theme’s markup ‣ Just HTML and a little bit of PHP ‣ Each template file is responsible for a di erent piece of the page
  16. ‣ The most commonly used template files are: ‣ page.tpl.php ‣ block.tpl.php ‣ node.tpl.php
  17. page.tpl.php header region The page template is the theme’s “main” template left right It assembles all the sidebar content region sidebar pieces into a region region finished page The page includes “regions” (header, footer, etc.) footer region
  18. node.tpl.php The node template renders the content portion of the page The node template also renders node teasers
  19. node.tpl.php The node template renders the content portion of the page The node template also renders node teasers Multiple nodes can appear on page
  20. block.tpl.php The block template renders each block on a page
  21. block.tpl.php The block template renders each block on a page left right sidebar sidebar Blocks are placed region region in the regions
  22. ‣ When Drupal renders a page, it works from the inside out
  23. node.tpl.php
  24. block.tpl block.tpl block.tpl node.tpl.php block.tpl block.tpl block.tpl
  25. page.tpl.php block.tpl block.tpl block.tpl node.tpl.php block.tpl block.tpl block.tpl
  26. ‣ When you understand how themes work, you can easily create a Drupal-optimized design
  27. Step 1: Stop! Close Photoshop!
  28. You wouldn’t paint a house before building it... So how can you design a website before architecting it?
  29. Before you design, ask: ‣ What’s the purpose of the site? ‣ What kind of content will the site contain? ‣ How will content be organized?
  30. Define the site “What’s the purpose of the site?”
  31. List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
  32. Describe your site in two words or less Community site Brochureware Blog Viral campaign Online store Fan site lolcat clone
  33. Define the content “What kind of content will the site contain?”
  34. ‣ In Drupal, di erent kinds of content are called content types. ‣ Content types are usually defined by the di erent information they contain.
  35. Blog post Product Title Name Author Description Date published Price Body Options (sizes, colors) Lead image Images
  36. Create a sitemap and wireframes “How will content be organized?”
  37. Sitemaps ‣ List all sections of the site ‣ Illustrate how content is organized within the sections
  38. 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
  39. Wireframes ‣ Illustrate page layout and functionality ‣ Demonstrate how a user will navigate the site ‣ Use placement of key components to reinforce the goals of the site ‣ Shopping cart icon ‣ Revenue-generating ads
  40. 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
  41. Brainstorming should happen using wireframes, not design comps or mockups.
  42. Case study: Spatula City Spatula City is relaunching their website. It will be the largest spatula site ever built!
  43. Define the site Goals Description ‣ Build awareness of ‣ “Online store” the Spatula City brand ‣ Be the Amazon.com of online spatula retail ‣ Make money!
  44. Define content types ‣ Product Product ‣ Frequently asked Name question (FAQ) Description ‣ Page Price Color options Image
  45. Create a sitemap
  46. 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
  47. Create the wireframes
  48. My account Shopping cart Log out Logo Search Browse by type Browse by color Build-A-Spatula Contact us FAQ Top rated content Content Promo Copyright text About us Retail locations Terms of use
  49. Step 2: Translate the wireframes into “Drupalspeak”
  50. Most Drupal themes are comprised of just a few, basic components.
  51. ‣ Content ‣ Usually a node, view, or panel ‣ Nodes are themed using node.tpl.php ‣ Can also be a user profile or admin interface
  52. ‣ 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) ‣ Themed using block.tpl.php ‣ Menus ‣ Added to the page as blocks
  53. ‣ Primary and secondary links ‣ Navigation ‣ Special kinds of menus ‣ Logo ‣ Search box ‣ Footer message ‣ All of these are page-level components that are themed in page.tpl.php
  54. My account Shopping cart Log out Logo Search Browse by type Browse by color Build-A-Spatula Contact us FAQ Top rated content Content Promo Copyright text About us Retail locations Terms of use
  55. My account Shopping cart Log out Logo Search Browse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Top rated content Content Promo Copyright text About us Retail locations Terms of use
  56. Menu (block) My account Shopping cart Log out Logo Search Browse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Copyright text About us Retail locations Terms of use
  57. Menu (block) My account Shopping cart Log out Logo Search Primary links Browse by type Browse by color Build-A-Spatula Contact us FAQ Content (node) Block Top rated content Content Block Promo Secondary links Copyright text About us Retail locations Terms of use
  58. 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
  59. You’re not designing a website... You’re designing a web system.
  60. Step 3: Design your site (You may now open Photoshop!)
  61. ‣ 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
  62. Designing the new Spatula City
  63. My account Shopping cart Log out Logo Search box Browse by type Browse by color Build-A-Spatula Contact us FAQ Top rated content Content Promo Copyright text About us Retail locations Terms of use
  64. Step 4: Build your theme
  65. Theming is simply a matter of changing the markup in the template files and adding your own CSS.
  66. node.tpl.php
  67. block.tpl.php node.tpl.php block.tpl.php block.tpl.php
  68. page.tpl.php
  69. Primary links Secondary links
  70. Logo Search box Primary links Footer message Secondary links
  71. Better. Faster. Cheaper. How to accelerate the design and theming phases of your project
  72. Know what Drupal wants to do ‣ Know what Drupal’s default output looks like ‣ Stark theme: drupal.org/project/stark ‣ Know the default regions ‣ left, right, content, header, and footer ‣ Assigning content to regions: drupal.org/node/171224
  73. Use template suggestions ‣ You’re not limited to a single template per component! ‣ For example, each content type can have its own node.tpl.php file ‣ Learn more at drupal.org/node/190815
  74. Subtheme ‣ Subthemes, their structure and inheritance: drupal.org/node/225125 ‣ Zen: drupal.org/project/zen
  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 ‣ Blueprint: drupal.org/project/blueprint ‣ Drupal port of the Blueprint CSS framework
  76. Credits ‣ The Swedish Chef was created by ‣ This presentation was created and Jim Henson. Or someone who delivered by Todd Ross Nienkerk worked for him. Whatever the and Aaron Stanush, co-founders of case, we didn’t invent him. Four Kitchens ‣ Spatula City is based on an idea by the great Weird Al Yankovic, internationally renowned accordion virtuoso. ‣ The items listed above are exempt from this presentation’s Creative Commons license
  77. All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.

×