Design and Prototyping for Drupal

Getting Started: Some Stuff to Consider

1. Design for Drupal: Basic Concepts
-About the Case Studies

2. The Drupal Designer's Toolkit
-Balsamiq Mockups
-Fireworks
-Coda
-LessCSS and Less.app
-Design and Layout

3. Sketch Many, Show One
-Ideation: Methods and Madness

4. Using Style Tiles to Explore Design Ideas

5. Design Layout: Covering All Your Bases
-Greyboxing: An In-Between Option

6. Working with Layout Grids
-Why Use a Grid?
-Grids in Wireframing
-Grids in Theming
-Anatomy of a Grid Layout
-But What About All These Presentational Classes? There Must Be a Better Way!
-The New CSS Grid Layout module: The Future Is Now
-Going Deeper: CSS Layout and Grid Systems

7. Setting up Fireworks Templates for Drupal
-Step One: Setting Up the Grid
-Step Two: Setting Up the Header
-Step 3: Single Node Page
-Step 4: Single Node Pages with Sidebars
-Step 5: Create the Other Pages
-Step 6: Step Up the Visuals
-Prototyping, Theming, and Managing your Markup

8. Paper Prototyping
-When to Use a Paper Prototype
-Fidelity
-Creating a Paper Prototype
-Walking Through the Prototype
-Other Types of Prototypes

9. Breaking Down a Layout for Drupal Implementation
Nodes
Blocks
Views

10. Working with Base Themes
How to Choose a Base Theme
Other Base Themes to Try
Creating a Child Theme
Other Things You Should Know About Base Themes
Please, Tell Me More!

11. Prototyping in the Browser

12. Practical Example #1: Using Views to Enhance a Layout
-But I'm Not a Developer—What if I Don't Want to Code?
-Step 1: Create the “Event Categories” Taxonomy Vocabulary
-Step 2: Create the Event Content Type
-Step 3: Create an Image Style
-Step 4: Create the User Profile
-Step 5: Getting Profile Content into the Event Page
-Step 6: Setting Up the Contextual Filter
-Step 7: Setting Up the “Related Events” Block
-So What Did We Just Do Here?

13. Practical Example #2: Controlling Views Markup
-Step 1: Associating an Image with a Taxonomy Term
-Step 2: Create the Event Categories View
-Step 3: Update the Field Settings
-Step 4: Add a Custom Class to Each Taxonomy Term: Name Field
-Step 5: Style Away
-So What Did We Just Do Here?

14. Managing Your Code: Some Modules that Can Help
-Block Class
-HTML5 Tools and Elements
-@font-your-face
-Semantic Fields

15. Working with LessCSS
-Creating Variables
-The Mighty Mixin
-Nesting Behavior
-Compiling the Code
-Working with LessCSS: Organizing Your Stylesheets
-Why This is Awesome (Aside From the Obvious)
-Working with LessCSS on a Team