from photoshop to drupal theme (drupalcon san francisco 2010)

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

Upload: four-kitchens

Post on 17-Aug-2014

16.700 views

Category:

Design


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

From Photoshop to Drupal themeCreating a Drupal-optimized design

Todd Nienkerk and Aaron StanushDrupalCon San Francisco | April 19, 2010

Page 2: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Personal introductions

Page 5: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

See drupal.org/node/171194 for more information

Prologue:Anatomy of a Drupal theme

Page 6: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

What is a Drupal theme?

Page 7: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

A Drupal theme is simply a collection of files uploaded to a specific directory.

Page 8: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

This is what Drupal looks like out of the box

The only directory you need to worry

about is /sites

Page 9: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Core themes are stored in /themes

DO NOT put your themes here!

Page 10: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

You will need to create this

directory after installing Drupal

Themes should be uploaded to

/sites/all/themes

Page 11: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 12: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Drupal themes need very few files

Page 13: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Drupal themes need very few files

mytheme.infodefines the theme

Page 14: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Drupal themes need very few files

mytheme.infodefines the theme

.tpl.php files are “template” files

Page 15: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 16: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ The most commonly used template files are:

‣ page.tpl.php

‣ block.tpl.php

‣ node.tpl.php

Page 17: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 18: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

node.tpl.php

The node template renders the content portion of the page

The node template also renders node teasers

Page 19: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 20: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

block.tpl.php

The block template renders each block on a page

Page 21: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

block.tpl.php

The block template renders each block on a page

Blocks are placed in the regions

leftsidebarregion

rightsidebarregion

Page 22: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 23: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

node.tpl.php

Page 24: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

node.tpl.php

block.tpl

block.tpl

block.tpl

block.tpl

block.tpl

block.tpl

Page 25: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

page.tpl.php

node.tpl.php

block.tpl

block.tpl

block.tpl

block.tpl

block.tpl

block.tpl

Page 26: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ When you understand how themes work, you can easily create a Drupal-optimized design

Page 27: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Step 1:Stop! Close Photoshop!

Page 28: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

You wouldn’t paint a house before building it...

So how can you design a website before architecting it?

Page 29: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Before you design, ask:

‣ What’s the purpose of the site?

‣ What kind of content will the site contain?

‣ How will content be organized?

Page 30: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Define the site“What’s the purpose of the site?”

Page 31: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

List your goals

Make money!

Raise awarenessGenerate

buzz

Make money!

Build a community

Make money!

Make money!

Make money!

Make money!

Make money!

Page 32: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Describe your site in two words or less

BrochurewareBlog

Viral campaign

Community site

Online store

Fan site lolcat clone

Page 33: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Define the content“What kind of content will the site contain?”

Page 34: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ In Drupal, di!erent kinds of content are called content types.

‣ Content types are usually defined by the di!erent information they contain.

Page 35: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Blog post

Title

Author

Date published

Body

Lead image

Product

Name

Description

Price

Options (sizes, colors)

Images

Page 36: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 37: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ List all sections of the site

‣ Illustrate how content is organized within the sections

Sitemaps

Page 38: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 39: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ 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

Page 40: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Content

ScienceSportsBusinessArts

Most popularposts

Search

Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use

Advertisement

Blog LogoMy account | Log out

Page 41: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 42: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 43: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Define the site

‣ Build awareness of the Spatula City brand

‣ Be the Amazon.com of online spatula retail

‣ Make money!

Goals‣ “Online store”

Description

Page 44: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Define content types‣ Product

‣ Frequently asked question (FAQ)

‣ Page

Product

Name

Description

Price

Color options

Image

Page 45: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Create a sitemap

Page 46: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 47: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Create the wireframes

Page 48: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 49: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Step 2:Translate the wireframes into “Drupalspeak”

Page 50: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Most Drupal themes are comprised of just a few, basic components.

Page 51: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ Content

‣ Usually a node, view, or panel

‣ Nodes are themed using node.tpl.php

‣ Can also be a user profile or admin interface

Page 52: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ 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

Page 53: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ 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

Page 54: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 55: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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)

Page 56: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 57: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 58: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 59: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

You’re not designing a website...

You’re designing a web system.

Page 60: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Step 3:Design your site(You may now open Photoshop!)

Page 61: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

‣ 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

Page 62: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Designing the new Spatula City

Page 63: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 64: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
Page 65: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Step 4:Build your theme

Page 66: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 67: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
Page 68: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

node.tpl.php

Page 69: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

node.tpl.php block.tpl.php

block.tpl.php

block.tpl.php

Page 70: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

page.tpl.php

Page 71: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Primary links

Secondary links

Page 72: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Footer message

Primary links

Search box

Logo

Secondary links

Page 73: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Better. Faster. Cheaper.How to accelerate the design and theming phases of your project

Page 74: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 75: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 76: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

Subtheme

‣ Subthemes, their structure and inheritance: drupal.org/node/225125

‣ Zen: drupal.org/project/zen

Page 77: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 78: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

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

Page 79: From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)

All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.