From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

From Photoshop to Drupal theme Creating a Drupal-optimized design Todd Nienkerk and Aaron Stanush DrupalCon San Francisco | April 19, 2010

Personal introductions

Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddross Photo: Kristin Hillery

Aaron Stanush Co-founder and designer Four Kitchens aaron@fourkitchens.com @astanush

Prologue: Anatomy of a Drupal theme See drupal.org/node/171194 for more information

What is a Drupal theme?

A Drupal theme is simply a collection of ﬁles uploaded to a speciﬁc 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!

Themes should be uploaded to /sites/all/themes You will need to create this directory after installing Drupal

To add a new theme, upload it to /sites/all/themes

Drupal themes need very few ﬁles

Drupal themes need very few ﬁles mytheme.info deﬁnes the theme

Drupal themes need very few files mytheme.info defines the theme .tpl.php files are “template” files

Template ﬁles ‣ Contain a theme’s markup ‣ Just HTML and a little bit of PHP ‣ Each template ﬁle is responsible for a di erent piece of the page

‣ The most commonly used template ﬁles are: ‣ page.tpl.php ‣ block.tpl.php ‣ node.tpl.php

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 ﬁnished page The page includes “regions” (header, footer, etc.) footer region

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 left right sidebar sidebar Blocks are placed region region in the regions

‣ When Drupal renders a page, it works from the inside out

node.tpl.php

block.tpl block.tpl block.tpl node.tpl.php block.tpl block.tpl block.tpl

page.tpl.php block.tpl block.tpl block.tpl node.tpl.php 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?

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!

Describe your site in two words or less Community site Brochureware Blog Viral campaign Online store Fan site lolcat clone

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 Product Title Name Author Description Date published Price Body Options (sizes, colors) Lead image Images

Create a sitemap and wireframes “How will content be organized?”

Sitemaps ‣ List all sections of the site ‣ Illustrate how content is organized within the sections

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

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

Brainstorming should happen using wireframes, not design comps or mockups.

Case study: Spatula City Spatula City is relaunching their website. It will be the largest spatula site ever built!

Deﬁne the site Goals Description ‣ Build awareness of ‣ “Online store” the Spatula City brand ‣ Be the Amazon.com of online spatula retail ‣ Make money!

Deﬁne content types ‣ Product Product ‣ Frequently asked Name question (FAQ) Description ‣ Page Price Color options Image

Create a sitemap

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

Create the wireframes

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

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 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) ‣ 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

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

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

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

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

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

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

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

Step 4: Build your theme

Theming is simply a matter of changing the markup in the template ﬁles and adding your own CSS.

node.tpl.php

block.tpl.php node.tpl.php block.tpl.php block.tpl.php

page.tpl.php

Primary links Secondary links

Logo Search box Primary links Footer message 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 ﬁle ‣ 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 ‣ 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

http://alifdalya.blogspot.com	319
http://www.slideshare.net	109
http://www.techgig.com	3
http://www.davidandrewjohnson.com	2
http://0leg.net	2
http://webcache.googleusercontent.com	2
https://auroraearth.atlassian.net	2
http://www.e-presentations.us	1
http://localhost:3000	1
http://blackboard.cyoc.wa.edu.au	1
http://sociology-staging.trinity.duke.edu	1
https://rsccd.blackboard.com	1

From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

by Four Kitchens on Apr 26, 2010

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 444

Statistics

From Photoshop to Drupal Theme (DrupalCon San Francisco 2010) Presentation Transcript