You wouldn’t paint a house beforebuilding it...So how can you design a websitebefore architecting it?
Before you design, ask:‣ What’s the purpose of the site?‣ What kind of content will the site contain?‣ How will content be organized?
Deﬁne the site“What’s the purpose of the site?”
List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
Business and technicalrequirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
Deﬁne the content“What kind of content will the site contain?”
‣ In Drupal, di erent kinds of content are called content types.‣ Content types are usually deﬁned by the di erent information they contain.
Blog post ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
Create a sitemap andwireframes“How will content be organized?”
Sitemaps‣ List all sections of the site‣ Illustrate how content is organized within the sections
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
Brainstorming should happen usingwireframes, not design comps ormockups.
Balsamiq Mockups‣ balsamiq.com‣ Cross-platform, lots of plugins‣ Free license for open- source “do-gooders”‣ Drupal components: bit.ly/drupal-balsamiq
Step 2:Translate the wireframesinto “Drupalspeak”
Most Drupal themes are comprised ofjust a few, basic components.
‣ Content ‣ Usually a node, view, or panel ‣ Can also be a user proﬁle or admin interface
‣ 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
‣ Primary and secondary links ‣ Special kinds of menus‣ Logo‣ Search box‣ Site slogan‣ Mission statement‣ Footer message
Step 3:Design your site(You may now open Photoshop!)
‣ 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
CASE STUDYSpatula CitySpatula City is launching their ﬁrst website. It will bethe largest spatula e-commerce site ever built!
Deﬁne 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
Deﬁne content types‣ Product Product‣ Page Name (e.g. About, Legal) Description‣ User proﬁle Price‣ Frequently asked Color options question Image
Logo Menu (block) Search box Primary links Content (node) Block BlockFooter message Secondary links
CASE STUDYExpeditionary LearningWhat happens when all of the planning anddesigning has been done for you?
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
Theme defaults‣ Regions ‣ left sidebar, right sidebar, content, header, and footer ‣ Assigning content to regions: drupal.org/node/171224
‣ Variables printed in the template ﬁles ‣ $content, $logo, $submitted, $terms, $links...‣ Available variables are listed at the top of each template ﬁle ‣ Pages: /modules/system/page.tpl.php ‣ Blocks: /modules/system/block.tpl.php ‣ Nodes: /modules/node/node.tpl.php ‣ Comments: /modules/comment/comment.tpl.php
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
Use template suggestions‣ You’re not limited to a single template ‣ Each content type can have its own node.tpl.php ﬁle ‣ Example: node-blog.tpl.php overrides and a ects only “blog” content types‣ Learn more: drupal.org/node/190815
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
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
Use contributed modulesModules can often take the place of complex andtime-consuming theming
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
‣ Views: drupal.org/projects/views ‣ Create lists of content ‣ Arguments allow views to be dynamic‣ Nodequeue: drupal.org/projects/nodequeue ‣ Create manually curated views
‣ 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
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
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 deﬁne “sections” and enforce active menu trails
‣ 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
‣ Custom Breadcrumbs: drupal.org/project/custom_breadcrumbs ‣ Makes breadcrumb navigation usable
Little modules can saveyou hours of theming‣ Someone else has probably run into your problem before... and solved it‣ The trick is ﬁnding the module
‣ The problem: CCK outputs values one-by-one in their own divs
‣ The (theme) solution: ‣ Override the CCK ﬁeld’s template ﬁle ‣ Write PHP to output each ﬁeld separated by a comma‣ There’s got to be a better way!
‣ Text Formatter: drupal.org/project/textformatter ‣ Lets you output CCK ﬁelds as lists or comma- separated strings
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?
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?
Anticipate expandingnavigation‣ What happens if menu items are added?‣ How does your design handle multiple levels of navigation?
The site you design todaywill change tomorrow.
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.
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.