from photoshop to drupal theme (drupalcon san francisco 2010)
DESCRIPTION
For more Four Kitchens presentations, please visit http://fourkitchens.com/presentationsTRANSCRIPT
From Photoshop to Drupal themeCreating a Drupal-optimized design
Todd Nienkerk and Aaron StanushDrupalCon San Francisco | April 19, 2010
Personal introductions
Photo: Kristin Hillery
Todd NienkerkCo-founder, designer, and developerFour Kitchens
@toddross
Aaron StanushCo-founder and designerFour Kitchens
@astanush
See drupal.org/node/171194 for more information
Prologue:Anatomy of a Drupal theme
What is a Drupal theme?
A Drupal theme is simply a collection of files uploaded to a specific directory.
This is what Drupal looks like out of the box
The only directory you need to worry
about is /sites
Core themes are stored in /themes
DO NOT put your themes here!
You will need to create this
directory after installing Drupal
Themes should be uploaded to
/sites/all/themes
To add a new theme, upload it to/sites/all/themes
Drupal themes need very few files
Drupal themes need very few files
mytheme.infodefines the theme
Drupal themes need very few files
mytheme.infodefines the theme
.tpl.php files are “template” files
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
‣ The most commonly used template files are:
‣ page.tpl.php
‣ block.tpl.php
‣ node.tpl.php
page.tpl.phpheader region
footer region
content regionleft
sidebarregion
The page template is the theme’s “main” template
It assembles all the pieces into a finished page
The page includes “regions” (header, footer, etc.)
rightsidebarregion
node.tpl.php
The node template renders the content portion of the page
The node template also renders node teasers
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
block.tpl.php
The block template renders each block on a page
block.tpl.php
The block template renders each block on a page
Blocks are placed in the regions
leftsidebarregion
rightsidebarregion
‣ When Drupal renders a page, it works from the inside out
node.tpl.php
node.tpl.php
block.tpl
block.tpl
block.tpl
block.tpl
block.tpl
block.tpl
page.tpl.php
node.tpl.php
block.tpl
block.tpl
block.tpl
block.tpl
block.tpl
block.tpl
‣ When you understand how themes work, you can easily create a Drupal-optimized design
Step 1:Stop! Close Photoshop!
You wouldn’t paint a house before building it...
So how can you design a website before 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?
Define the site“What’s the purpose of the site?”
List your goals
Make money!
Raise awarenessGenerate
buzz
Make money!
Build a community
Make money!
Make money!
Make money!
Make money!
Make money!
Describe your site in two words or less
BrochurewareBlog
Viral campaign
Community site
Online store
Fan site lolcat clone
Define 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 defined by the di!erent information they contain.
Blog post
Title
Author
Date published
Body
Lead image
Product
Name
Description
Price
Options (sizes, colors)
Images
Create a sitemap and wireframes“How will content be organized?”
‣ List all sections of the site
‣ Illustrate how content is organized within the sections
Sitemaps
Science Sports Business
About us Contact usTerms of use
My account
Blog post
Home page
Search
User tools
Secondary menu
Primary menu
Blog post Blog post
Most popular
Blog post
Arts
Blog post
‣ 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
Wireframes
Content
ScienceSportsBusinessArts
Most popularposts
Search
Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
Advertisement
Blog LogoMy account | Log out
Brainstorming should happen using wireframes, not design comps or mockups.
Case study: Spatula CitySpatula City is relaunching their website. It will be the largest spatula site ever built!
Define the site
‣ Build awareness of the Spatula City brand
‣ Be the Amazon.com of online spatula retail
‣ Make money!
Goals‣ “Online store”
Description
Define content types‣ Product
‣ Frequently asked question (FAQ)
‣ Page
Product
Name
Description
Price
Color options
Image
Create a sitemap
Spatulas by type
Spatulas by color
Build-A-Spatula
Retail locations
FAQ Contact us
About us
Search
Terms of use
My account
Spatula page
Home page
Question page
Shopping cart
User tools
Secondary menu
Primary menu
Create the wireframes
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Step 2:Translate the wireframes into “Drupalspeak”
Most Drupal themes are comprised of just a few, basic components.
‣ Content
‣ Usually a node, view, or panel
‣ Nodes are themed using node.tpl.php
‣ Can also be a user profile 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)
‣ Themed using block.tpl.php
‣ Menus
‣ Added to the page as blocks
‣ 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
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Content (node)
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Menu (block)
Content (node) Block
Block
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Menu (block)
Primary links
Content (node) Block
Block
Secondary links
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Menu (block)
Primary links
Search box
Logo
Content (node) Block
Block
Secondary linksFooter message
You’re not designing a website...
You’re designing a web system.
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
Designing the new Spatula City
Content
Logo
Top ratedcontent
Promo
Search box
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Step 4:Build your theme
Theming is simply a matter of changing the markup in the template files and adding your own CSS.
node.tpl.php
node.tpl.php block.tpl.php
block.tpl.php
block.tpl.php
page.tpl.php
Primary links
Secondary links
Footer message
Primary links
Search box
Logo
Secondary links
Better. Faster. Cheaper.How to accelerate the design and theming phases of your project
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
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
Subtheme
‣ Subthemes, their structure and inheritance: drupal.org/node/225125
‣ Zen: drupal.org/project/zen
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
Credits‣ The Swedish Chef was created by
Jim Henson. Or someone who worked for him. Whatever the case, we didn’t invent him.
‣ 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
‣ This presentation was created and delivered by Todd Ross Nienkerk and Aaron Stanush, co-founders of Four Kitchens
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.