O'Reilly logo

Drupal for Designers by Dani Nordin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introduction

If you’re reading this book, you’re probably a web designer who has heard of Drupal, wants to get started with it, and may have even tried it out a couple of times. And you might be frustrated because even if you’re used to code, Drupal has thrown you a major learning curve that you hadn’t expected. And just when you think you’ve gotten a basic site together, now you have to figure out how to make it look right—and the whole process starts over again.

Yep, I’ve been there too. That’s why I wrote this book.

This book, which brings together the first three Drupal for Designers guides with some new material, a more logical flow, and better grammar, is for the solo site builder or small team that’s itching to do interesting things with Drupal but needs a bit of help understanding how to set up a successful Drupal project. It’s for the designer who knows HTML and CSS, and is willing to learn a bit of PHP, but doesn’t want to have to learn how to speak developer in order to parse Drupal documentation. Most importantly, this book is for those who want to use Drupal to make their vision a reality, but need help working their minds around the way Drupal handles design challenges.

What I present here are not recipes for specific use cases; although recipes can be useful, experience has shown there’s rarely just one way to accomplish an objective in Drupal. Rather, what I’m offering is context: a way to understand what Drupal is and how it works so that you can get over the hump and start figuring things out on your own. Over the course of this book, I’ll help you understand:

  • How to uncover the information you need to successfully plan a Drupal project (in Part I)

  • How to bring solid UX principles to your team, and what types of deliverables work best with Drupal implementations (in Part I)

  • What types of design documents can help you make your vision a reality, and how to use them (in Part II)

  • How to set up a local development environment, and work with command-line tools such as Drush and Git to make site building easier (in Part III)

  • A few tips and tricks for prototyping solutions in Drupal (in Part IV) and ways to make starting jobs easier (in Part V)

  • How to break down your design layouts, select a base theme, and manage the code that Drupal is giving you (in Part IV)

  • Options for estimating projects and dealing with tough client situations, and some sample client-facing documents to get you started (in Parts VI and VII)

A Caveat

Although this book offers plenty in the way of real-world examples, advice on how to get things done, and other important issues for Drupal designers, its goal isn’t to teach specific project management, design, or site building techniques. Every Drupal designer and site builder has his or her own approach to creating projects, and it’s hard to pin down one “right” way to create in Drupal. The key to appropriate planning and design, in my experience, is:

Knowing what you have to create

This is where the site planning and discovery process, discussed in Part II, is especially useful.

Knowing what you’ll need to do in order to get the job done

This will vary depending on the project, but Parts III and IV will offer some interesting factors to consider.

Knowing how to walk clients through the process

In Part VI, I share some of my experience from years of working with clients, including proposing and estimating projects, handling difficult conversations, and creating effective documentation.

Developing systems that make it easier to start, implement, and hand off Drupal projects

You’ll find a host of ideas throughout this book that will help you do just that.

In the last section, I share some examples of the client documentation I’ve developed over six years of running a design studio and estimating Drupal projects. Feel free to use the documentation in that section as a basis for your own project documents.

Focus on Drupal 7

As you will likely notice once you start getting into the practical examples, the site building examples in this book are focused primarily on working in Drupal 7. The reason for this is simple: although I’ve done a lot of work in Drupal 6, the usability enhancements in Drupal 7, the latest version of the Drupal CMS, have made it my choice for starting new projects. Despite this focus, much of the material in this book is version-agnostic—particularly the parts that focus on user experience, project planning, and design. Even the chapters on setting up a local development environment can be easily adapted for Drupal 6 projects.

About the Case Studies

While we will learn how to install Drupal on a local development environment and get started with installing modules (see Part IV), throughout several of the practical examples in this book we’ll primarily be focusing on two real-world projects. Although this can make it challenging to “follow along at home,” I have two reasons for this decision:

  • I’m working on them currently, and I enjoy being able to do two things at once.

  • Focusing on projects like these, as opposed to a single project made up for the book, gives you the chance to see how these ideas work in the real world, with all the frustrations and moments of unexpected joy that happen in real projects.

For most examples, we’ll be using my portfolio site, http://tzk-design.com, as a model. This project is currently in the process of being redesigned as I refocus my studio, and it gives me a chance to walk you through the actual process of planning, sketching, creating layouts, and theming for a relatively simple site.

I am developing the second project, Urban Homesteaders Unite (UHU), with Tricia Okin of Papercut (Brooklyn, NY).[1] The site was originally conceived as part of Tricia’s MFA thesis (as such, layouts had already been created), and I’ve been working with her to expand on that original idea and turn it into reality.

The goal of UHU is to connect urban homesteaders (e.g., people who are into gardening, food preservation, and other city-hippie pursuits) through home-based events, blog posts, and connecting with other homesteaders in their neighborhood. This lets me get into deeper areas of Drupal trickiness such as Views relationships and working with user profiles in Drupal 7 (cue evil laughing). You’ll see some particularly interesting examples of this in Part IV.

Through these projects, I can show you a typical Drupal design process—from creating the project brief to ideation and sketches to prototyping and applying our look and feel to the site’s theme.

Before we jump into the deep end, we’ll start with some Drupal basics, for those of you who are just starting to learn Drupal. In the next section, we’ll learn some key definitions you’ll need to know to work with Drupal, understand how to break up the work required to make Drupal sites happen, and talk about the different phases that go into a typical Drupal project.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This icon signifies a tip, suggestion, or general note.

Caution

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Drupal for Designers by Dani Nordin (O’Reilly). Copyright 2012 Dani Nordin, 978-1-449-32504-6.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

Safari® Books Online

Note

Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://oreil.ly/drupal_designers

To comment or ask technical questions about this book, send email to:

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

The following folks helped me in various capacities while I wrote this book:

My intrepid editors, Julie Steele and Meghan Blanchette, gave me the opportunity to write the book and helped me make sense of O’Reilly’s lengthy style guide. Thanks also to Laurel Ruma for introducing me to Julie so that I could actually sell this crazy idea.

Todd Nienkerk of Four Kitchens (http://fourkitchens.com) helped me understand how the ideas I’ve used in really tiny teams apply to the work of larger teams. His feedback as a reviewer (as indicated by the many times I quote him throughout this text) was invaluable.

Ben Buckman of New Leaf Digital (http://newleafdigital.com) was kind enough to lend a developer’s eye to the text—including kindly nudging me about my consistent misuse of Master and Origin in the Git chapter. He, Ben Melançon, Stéphane Corlosquet of Agaric (http://agaric.com/), and Moshe Weitzman of Acquia, among many others at meetups and Drupal Camps/Cons, have been exceptionally generous in sharing their knowledge of Drupal development basics with me.

Jenifer Tidwell, a local UI designer in Massachusetts, was kind enough to review the book and provide perspective from a designer who doesn’t know Drupal. If you haven’t read her book Designing Interfaces (http://shop.oreilly.com/product/0636920000556.do), published by O’Reilly, you should.

I’d also like to thank various colleagues and professional acquaintances, in and out of the Drupal community, who were kind enough to let me interview them for this series: Ben Buckman; Greg Segall of OnePica; Richard Banfield of Fresh Tilled Soil; David Rondeau of InContext Design; and Todd Nienkerk, Jason Pamental, Amy Seals, Mike Rohde, Ryan Parsley, Leisa Reichelt, and Andrew Burcin.

Finally, I want to thank my husband, Nick Malyska, for being the most supportive partner I could hope for, and without whose encouragement I wouldn’t have been able to take the time I needed to make this book work.

About the Author

Dani Nordin is an independent user experience researcher and designer specializing in smart, human-friendly design for forward-thinking brands and organizations on the Web. Her projects have ranged from branding and positioning small businesses to redesigning the architecture of content-heavy websites to understanding how busy grad students organize their course workflow and designing online interactions to make the process easier. She discovered design purely by accident as a theatre student at Rhode Island College in 1995, and has been doing some combination of design, public speaking, and writing ever since.

She is a regular feature at Boston’s Drupal meetup and is a regular speaker at Boston’s Design for Drupal Camp. In 2011 she was one of several contributors to The Definitive Guide to Drupal 7, published by Apress, and she wrote three guides for O’Reilly’s Drupal for Designers series; Drupal for Designers, which combines the three guides with new content, is her fifth book. You can check out some of her work at http://tzk-design.com.

She lives in Watertown, Massachusetts, with her husband Nick, and Persephone, a 14-pound giant ball of black furry love cat. Both are infinite sources of comedic gold.

About the Reviewers

For nearly two decades, Jenifer Tidwell has been designing and building user interfaces for a variety of industry verticals. She has experience in designing both desktop and web applications, and currently designs and develops websites for small businesses. She recently worked on redesigning the interface for Google Books. Before that, as a user interface designer at The MathWorks, she was instrumental in a redesign of the charting and visualization UI of MATLAB, which is used by researchers, students, and engineers worldwide to develop cars, planes, proteins, and theories about the universe. She blogs about UI patterns and other design-related topics at http://designinginterfaces.com/blog.

Todd Ross Nienkerk, Four Kitchens cofounder, has been involved in the web design and publishing industries since 1996. As an active member of the Drupal community, he regularly speaks at Drupal events and participates in code sprints all over the world. As a member of the Drupal.org Redesign Team, he helped spearhead the effort to redesign Drupal.org and communicate a fresher, more effective Drupal brand. He is also a member of the Drupal Documentation Team and has chaired tracks for DrupalCon Copenhagen 2010, DrupalCon Chicago 2011, DrupalCon Denver 2012, and DrupalCon Munich 2012. He is currently serving as the DrupalCon global chair for all design, user experience, and theming tracks.

Ben Buckman started programming with the BASIC page in a kids’ magazine, and has been building websites since 1995. In college he studied political philosophy and worked as a web developer. Today his shop, New Leaf Digital (http://newleafdigital.com), specializes in development and assistance for nondevelopers with the Drupal content management system, and development with the Node.js platform. He has also ridden a motorcycle across 35 U.S. states, loves to sail, and is a cofounder of AntiquesNearMe.com. He currently lives in Buenos Aires.

Tricia Okin is a designer who has been based and working in Brooklyn, New York, since 2001, and founded Papercut in 2004. She resurrected Papercut in early 2009 after realizing she wanted to make good work with tangibility and purpose. She also realized she couldn’t and would rather not do it alone in a design vacuum. From there, she called on the best resources she could find and mustered up a gang of wily collaborators with as much passion for being their own bosses as she has.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required