Drupal for Designers

Drupal for Designers

Released July 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449325046

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Are you a solo web designer or part of a small team itching to build interesting projects with Drupal? This hands-on book provides the tools and techniques to get you going. Award-winning designer Dani Nordin guides you through site planning, teaches you how to create solid, user-centered design for the Drupal framework, and shows you tricks for using real, honest-to-goodness, developer Ninja Magick.

Table of contents

  1. Drupal for Designers
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. Foreword
  4. Introduction
    1. A Caveat
    2. Focus on Drupal 7
    3. About the Case Studies
    4. Conventions Used in This Book
    5. Using Code Examples
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
    9. About the Author
    10. About the Reviewers
  5. 1. Some Things to Remember About Working with Drupal
    1. A Quick and Dirty Guide to DrupalSpeak
    2. Discussing Drupal with Clients
    3. Organizing Your Files
    4. Life Cycle of a Drupal Project
    5. Implementation Plans: Breaking Up Your Work
    6. And Now We Are Six
  6. I. Discovery and User Experience
    1. 2. Setting the Stage—Discovery and User Experience
      1. Discovery: Breaking Down the Project Goals
      2. Project Discovery
      3. User Experience: Framing the Design Challenge
        1. Getting Your Hands Dirty with UX
      4. Bringing UX Design to an Embedded Team
        1. Study the Organization You’re Working With
        2. It’s Not About Looks
      5. The Drupal Designer’s UX and Design Toolkit
        1. Balsamiq Mockups
        2. Fireworks
        3. Axure RP
    2. 3. User Experience—Techniques for Drupal
      1. User Personas
      2. User Flows
      3. Mind Mapping
      4. Functional Breakdowns
      5. Screen Sketches and Wireframes
      6. Content Strategy Documents
      7. Low-Fidelity Prototypes
      8. Functional Specifications
      9. Paper Prototypes
        1. When to Use a Paper Prototype
        2. Creating a Paper Prototype
        3. Walking Through the Prototype
      10. Non-HTML Digital Prototypes
      11. HTML or Drupal Prototypes
      12. UX Techniques and Drupal: Some Practical Issues
      13. A Further Note on Documents
    3. 4. Putting It in Practice—A Short-Form Project Brief
      1. Real-World Example: The TZK Project Plan
        1. Step 1: Identify the Project Goals
        2. Step 2: Identify the Audience
        3. Step 3: Focus on the Information Architecture and Content Strategy
        4. Step 4: Identify New Features or Technologies You Want to Include
        5. Step 5: Upgrade, or Start from Scratch?
        6. Step 6: Figure Out Theming and CSS Issues
      2. Go Deeper: User Experience and Project Management
        1. Books
        2. Websites
  7. II. Sketching, Visual Design, and Layout
    1. 5. Sketch Many, Show One
      1. Style Tiles: A Way to Explore Multiple Design Ideas
      2. Design Layout: Covering All Your Bases
        1. Greyboxing: An In-Between Option
    2. 6. Working with Layout Grids
      1. Why Use a Grid?
      2. Grids in Wireframing
      3. Grids in Theming
      4. Anatomy of a Grid Layout
      5. Working with Square Grid
      6. But What About All These Presentational Classes? There Must Be a Better Way!
      7. The New CSS Grid Layout Module: The Future Is Now
      8. Going Deeper: CSS Layout and Grid Systems
    3. 7. Putting It in Practice—Setting Up Fireworks Templates for Drupal
      1. Step 1: Set Up the Grid
      2. Step 2: Set Up the Header
      3. Step 3: Create a Single Node Page Without a Sidebar
      4. Step 4: Create Single Node Pages with One and Two Sidebars
      5. Step 5: Create the Other Pages
  8. III. Setting Up a Local Development Environment
    1. 8. The Drupal Designer’s Coding Toolkit
      1. Wait, What? Why?
      2. A Note for Windows Users
      3. The Drupal Designer’s Coding Toolkit
        1. Coda
        2. Less.app
        3. MAMP
        4. Terminal
        5. Navicat
        6. phpMyAdmin
        7. Drush
        8. Git
        9. Dropbox
      4. Working on the Command Line: Some Basic Commands
        1. Commands
        2. That Wasn’t So Bad, Was It?
    2. 9. Installing Drush
      1. Installing Drush
      2. Another Option: Creating a Symbolic Link to Drush
      3. Now the Fun Begins
    3. 10. Getting Started with Git
      1. Master Versus Origin
      2. Setting Up Git for Your Workflow
      3. Step 1: Create an SSH Key
      4. Step 2: Install Git
      5. Step 3: Set Up Your Git Configuration
      6. Step 4: Set Up a GitHub Account
      7. Step 5: Create the Remote Repository
      8. Step 6: Set Up the Local Repository
      9. So, What Happens on a Team?
      10. First Things First: The Git Workflow
      11. And There We Go
    4. 11. Putting It in Practice—Setting Up a Local Development Environment and Installing Drupal
      1. Step 1: Install MAMP
      2. Step 2: Set Up Your Local File Structure
      3. Step 3: Set Up the Drupal Files
      4. Step 4: Set Up the Drupal Database
      5. Step 5: Install Drupal
      6. Step 6: Use Drush to Install Some Modules
  9. IV. Prototyping in Drupal
    1. 12. Prototyping in Drupal
      1. Working with Content and Content Types
      2. Trial by Fire
      3. Working with Content Types: A High-Level Overview
      4. Organizing Your Content
      5. Putting It All Together
    2. 13. Choosing Modules
      1. So Many Modules; How Do I Choose?
      2. Go-To Modules
        1. Pathauto
        2. Views
        3. Context
        4. Webform
        5. WYSIWYG
        6. Mollom
        7. Media
        8. Block Class
        9. Semantic Fields
        10. Fences
      3. Oh-So-Nice-to-Have Modules
        1. Field Group
        2. Link
        3. References
        4. View Reference
        5. Block Reference
        6. Submitagain
      4. I Don’t Need This, but Ooh, It’s Purty! Modules
        1. Views Slideshow
        2. Colorbox
        3. User Points
        4. HTML5 Tools and Elements
        5. @font-your-face
      5. A Completely Incomplete Listing
    3. 14. Making Views Sing—Using Views to Enhance a Layout
      1. But I’m Not a Developer—What If I Don’t Want to Code?
      2. Step 1: Create the “Event Categories” Taxonomy Vocabulary
      3. Step 2: Create the Event Content Type
      4. Step 3: Create an Image Style
      5. Step 4: Create the User Profile
      6. Step 5: Get Profile Content into the Event Page
        1. Setting Up the View
      7. Step 6: Set Up the Contextual Filter
      8. Step 7: Set Up the Related Events Block
      9. So, What Did We Just Do Here?
    4. 15. Making Views Sing—Controlling Views Markup
      1. Step 1: Associate an Image with a Taxonomy Term
      2. Step 2: Create the Event Categories View
      3. Step 3: Update the Field Settings
      4. Step 4: Add a Custom Class to Each Taxonomy Term: Name Field
      5. Step 5: Style Away
      6. So, What Did We Just Do Here?
    5. 16. Getting Started with Drupal Theming: Base and Child Themes
      1. Breaking Down a Layout for a Drupal Implementation
        1. Nodes
        2. Blocks
        3. Views
      2. Choosing a Base Theme
        1. How to Choose a Base Theme
        2. Other Base Themes to Try
      3. Creating a Child Theme
      4. Other Things You Should Know About Base Themes
        1. Clear the Theme Registry!
        2. Working with Regions
      5. Please, Tell Me More!
    6. 17. Making CSS Easier with LESS
      1. Creating Variables
      2. The Mighty Mixin
      3. Nested Selectors and Styles
      4. Compiling the Code
      5. Working with LESS: Organizing Your Stylesheets
        1. Setting Up Color Variables
      6. Why LESS Is Awesome (Besides the Obvious)
      7. Working with LESS on a Team
  10. V. Making It Easier to Start Projects
    1. 18. Using Features
      1. Still More Awesomeness Awaits
    2. 19. Working with Drush Make and Installation Profiles
      1. Step 1: Install Drush Make
        1. Why This Is Lovely
        2. Getting Started with Install Profiles
  11. VI. Working with Clients
    1. 20. Proposing and Estimating Projects
      1. Preproposal Discovery: What You Need to Know
      2. Pricing a Project: Fixed-Bid Versus Hourly
      3. Writing the Proposal
    2. 21. Getting Clients to Love You, Even When You Have to Tell Them “No”
      1. That’s Easy for You to Say ...
      2. The “Professional Relationship” Clause
    3. 22. After the Handoff—The Project Retrospective
      1. Including Clients in the Retrospective
      2. Documenting What You Learned
      3. Documenting for the Community
  12. VII. Sample Documents
    1. A. Project Brief
      1. Hey There! It’s Nice to Meet You.
        1. Who are you?
        2. About your project
        3. Background
        4. Goals and Objectives
        5. Target Audience
        6. Competition
        7. Brand Attributes
        8. Functionality and Technical Requirements
          1. For all projects
          2. For print projects
          3. For web projects
        9. Time and Money
        10. Thanks Again!
    2. B. Work Agreement (with Professional Relationship Clause)
      1. Work Agreement
      2. Terms and Conditions
      3. Payment Notes
        1. Professional Relationship
        2. Deliverables Timeframe
      4. Additional Terms
        1. Rejection/Cancellation of Project
        2. Modifications
        3. Ownership of Artwork
        4. Reproduction of Work
        5. Author’s Alterations (AA’s)
        6. Proofs
        7. Completion/Delivery of Project
        8. Releases
        9. Limitation of Liability
        10. Warranty of Originality
    3. C. Project Proposal
      1. Project Proposal
      2. Section 1.0: Project Background and Objectives
        1. Objective 1: Build upon the history of the Founder’s experience with her prior firms to effectively position The Consulting Firm as a leader in environmental compliance information and consulting for technology products.
        2. Objective 2: Create a blogging and social media engagement strategy that allows the Founder to more firmly establish thought leadership in the field.
        3. Objective 3: Create a website that will serve as a marketing vehicle for The Consulting Firm, and integrate the Founder’s content leadership efforts.
      3. Section 2.0: Statement of Work
        1. Brand Messaging and Positioning Strategy
        2. Blogging, Social Media, and Content Strategy
        3. Logo and Website Development
        4. Client Responsibilities
      4. Section 3.0: Development Process
        1. Phase I: Strategy, Goal-Setting, Requirements and Research
        2. Phase II: Creative Exploration and Design Development
        3. Phase III: Implementation and Testing
        4. Phase VI: Measure and Refine
      5. Section 4.0: Budget Estimate
      6. Section 5.0: The Zen Kitchen Background and Capabilities
        1. Section 5.1: Who Is the Zen Kitchen?
        2. Section 5.2: What Can the Zen Kitchen Do for You?
        3. Section 5.3: Why Choose the Zen Kitchen?
      7. Section 6.0: Terms and Conditions
        1. Payment Notes
        2. Payment Notes
        3. Professional Relationship
        4. Deliverables Timeframe
        5. Additional Terms
          1. Rejection/cancellation of project
          2. Modifications
          3. Ownership of artwork
          4. Reproduction of work
          5. Author’s alterations (AA’s)
          6. Proofs
          7. Completion/delivery of project
          8. Releases
          9. Limitation of liability
          10. Warranty of originality
  13. Index
  14. About the Author
  15. Colophon
  16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  17. Copyright

Product information

  • Title: Drupal for Designers
  • Author(s):
  • Release date: July 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449325046