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 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, 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 that 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 of understanding 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 series of books, Iâll help you understand:
How to plan and manage Drupal projects successfully (in the Planning and Managing Drupal Projects guide)
How to more effectively create visual design for Drupal by understanding what Drupal is spitting out (in Design and Prototyping for Drupal)
How to break down your design layouts to turn them into Drupal themes (in Design and Prototyping for Drupal)
How to get started with version control, Drush, and other ninja-developer Drupal Magick that can make your life much easier working with Drupal (in Drupal Development Tricks for Designers)
In this second volume, Design and Prototyping for Drupal, weâll start digging into the practical design challenges that Drupal presents, and look at some strategies for dealing with them. You will learn:
Strategies for sketching, wireframing and designing effective layouts for Drupal
How to break down a Drupal layout to understand its basic components, and where those components are coming from within Drupal
An introduction to working with layout grids and the 960 grid system to facilitate efficient wireframing, layout and theming
The basics of Drupalâs theming layer, including what to look for in a base theme, and how to create a subtheme to hold your customizations
Strategies for managing the markup that Drupal produces, including the markup that comes from Views, the powerful module that helps organize and display the content in your Drupal site
An introduction to LessCSS, which can help you organize your CSS and theme your site more efficiently
Before we continue, itâs important to make a distinction between visual design and theming. While many themers can design and vice versa, visual design (as defined in this guide) is the act of creating a set of visual standards that will control the way the site looks. This could involve something as simple as picking out colors and font choices for the site, and creating some standards for laying out type, boxes, etc. More often, it involves creating visual mockups in a program such as Fireworks or Photoshop.
Theming, on the other hand, is the process of implementing those visual standards across the siteâs template files, using HTML, CSS, and PHP. While theming can (and sometimes does) happen without visual design, design is what truly brings the message home to the clientâs audience. When well constructed, and implemented by talented themers, a siteâs visual design is an important factor in whether the site meets the clientâs business objectives.
Theming, as a distinctive job description, seems relatively unique to the Drupal universe. While many other CMSs include some idea of a theme layerââthemeâ being defined as a set of customizable templates through which content is displayedâwith many CMSs, designers either appropriate an existing theme to create their design, or they hand finished design comps off as either images or HTML files to a developer, who integrates those files into the websiteâs structure. While this can also be done in Drupal, itâs not advised; Drupalâs theme layer has a level of complexity to it that makes simply modifying an existing theme problematic. For this reason, many Drupal designers will turn to themers, also called âFront-End Developers,â to help them implement their designs, particularly if they include any kind of fancy stuff.
One thing I must emphasize about the Drupal design process is that it often involves getting into codeâbut not always. As mentioned before, many excellent Drupal designers never touch a line of code; however, those designers always have developers who help them implement their designs. If you want to design for Drupal but donât have access to developers, well, youâre going to need to learn code and site building in Drupal. Thereâs no way around it if you want to do good work.
The good news, however, is thatâs part of what youâll learn about in this book. While Iâm not going to provide you with a recipe for a generic promotional site, or guidance on how to install Drupal, what I will do is show you how I figured out some of the stickier design and implementation challenges for a couple of real world projects, which will give you an insiderâs look at what itâs like to design and prototype in Drupal.
This guide assumes that youâre at least somewhat familiar with Drupal, particularly Drupal 7. If youâve never worked with Drupal at all, you might find some of the examples confusing. If you need to get started working in Drupal from the ground up, I recommend checking out NodeOneâs excellent âLearn Drupal 7â training series. The series, located at http://nodeone.se/blogg/learn-drupal-7-sceencast-series-summed-up, will walk you through the basics you need to get started building your own site. Donât worry; Iâll wait for you.
Get Design and Prototyping for Drupal now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.