Propeople Blog

A regular dose of fresh news, events, products, Drupal development resources and more.

February 23, 2012

Designing for Drupal: Tools and Resources

Drupal is one of the leading Content Management Systems in the world. It's market share is continuously growing and because of that, Drupal draws more attention, not just from web developers but also from web and graphic designers. We came up with a list of tutorials, tools and other brilliant resources every web designer who wants to get more familiar with Drupal CMS may find useful. Enjoy!

Articles & Tutorials

Designing for Drupal Dos and Don’ts

“If you are a graphic designer creating comps (compositions) for a Drupal site, here are a few DOs and DON'Ts to follow. Not only can they make theme developers happy, but also they can speed production, saving the client money in the long run...” check it out

 

Design for Drupal: A Template Approach

“We came up with a list of elements inherent in 90% of Drupal sites, some basic, and some Drupal specific, to serve as a tool to make sure every last element had a style, including ones that were not obvious in the initial designs. Here is our list...” check it out

 

Drupal Website design: Why is it so special?

“Over the years Drupal has become the first choice for web designers all overs the world, its features and its usability make it every designer’s delight. Also since it can be adapted to any circumstance and is practically free to use, my guess is that it isn’t going anywhere for times to come...” check it out

 

Powerfull Web Design made easy with Drupal

“The Drupal content management system (Drupal CMS) is highly flexible, user friendly and provides a wider range of functionalities that are not possible with several other content management systems. Drupal provides comprehensive control over each aspect of the website, thus merging the functionalities of website design and site management. With Drupal website design tools, it is possible to make the following modifications...” check it out

 

Drupal for Web Designers. Part II

“I love drupal for the simple fact that you don’t need to be a php guru to create e-commerce sites, directory sites, portfolios, blogs or almost any type of website, you can do almost anything without writing a single line of code with drupal. This is possible because of a large amount of great modules that add to Drupal functionality. But it’s not really about a huge amount of modules, it’s more about the basic ones that give you the freedom to do what you want...” check it out

 

Is Drupal Good for Design? What do You Think?

“Drupal has a reputation for being strong in functionality and having a strong community, but weak when it comes to design. In deciding which cms to use, it is important to make the right decision, especially when considering design features. The following will cover how strong Drupal is from a design perspective and how to improve design if you are using Drupal...” check it out

 

Drupal Theme Design Tutorial 1 - Designing Comments & Comment Forms

“There are many tutorials and documentation pages regarding Drupal theming, so these studies are not going to be ground-up discussions of theming basics. Drupal theming is not easy! Without a basic understanding of the Drupal Core system you are going to become hopelessly lost. These studies are meant for people that are familiar with Drupal already...” check it out

 

Drupal Theme Design Tutorial 2 - Mega Menus

“One of the best things that has come out of the last year or 2 has been widespread use of what are called "mega menus." Mega menus are basically large navigation blocks that show up upon rollover of a primary navigation item. The goal is to show lots of options or tiers within this area. So instead of displaying everything up front or within a series of nested drop down menus, you get everything in one nice package...” check it out

 

Design a Drupal Business Theme in Photoshop

“I’m going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this tutorial we’ll cover basic Photoshop techniques, such as styles, slicing, guides, layer structure and much more...” check it out

 

Tools & Modules

 

Design

The Design project provides a home for designers and themers working with Drupal. A place to share your findings with others. Instead of scratching your own itch, contribute to solve problem spaces that are common for all designers and themers, so everyone can design and deliver better Drupal sites. check it out

 

Outline Designer

“The Outline Designer is a user experience module that makes book management more intuitive. Essentially it overlays on the admin book outline page so that you can use AJAX to build and edit site outlines much faster then Drupal traditionally allows.” check it out

 

DesignKit

“DesignKit is a small API module lets themes provide options for customizing colors and images. Themes can use entries in their .info file to specify what color variables should be made available.” check it out

 

Fit Text

“Fit Text is a jQuery plugin to make font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Fit Text is a perfect choice while developing cross-platform websites (scalable for all those nifty devices and displays).” check it out

 

CSS Options

“The CSS options module enables theme developers to easily expose some options around the included CSS within the site via the theme settings form. This module does the housekeeping for managing the inclusion of conditional CSS within the site so the theme developer can focus on design.” check it out

 

Visual Website Optimizer

“The Visual Website Optimizer module allows automatically includes the VWO javascript in your site's pages. Visual Website Optimizer is an easy to use A/B split, and multivariate testing tool. VWO uses small snippets of javascript inserted into the head each page to perform its tests; the Visual Website Optimizer module for Drupal automates the configuration and inclusion of those snippets.” check it out

 

OM 2 HTML5

“OM Base Theme helps reduce your custom theming work, making it easier and less time needed to develop a highly customized theme, unlike other base themes (with so many files and theme settings which can only be a huge baggage to carry later on), OM Base Theme has optimized codes to a minimum. As a result, you can easily migrate any existing web design templates to drupal since there's not much css overriding on a very simple base theme.” check it out

 

OM Tools

“This module is a theming enhancement tool designed to work with all themes, but works best for OM Base Theme. Add classes to menu items, blocks, nodes; change stylesheet based on browser size; change the look of your user, search forms, etc.” check it out

Books
 

Front End Drupal: Designing, Theming, Scripting

“Drupal is now the world’s #1 open source content management system: Thousands of individuals and organizations are using it to build and update Web sites of virtually every kind. As Web designers and developers adopt Drupal, they need ways to quickly customize the visuals and interactivity of their sites. Drupal offers powerful tools for doing so, but little guidance on using them effectively. Front End Drupal is the solution. In this book, two expert Drupal developers cover everything you need to know to create great visual designs and state-of-the-art interactivity with Drupal’s behaviors, themes, and templates.”

check it out

 

Design and Prototyping for Drupal

“Itching to build interesting projects with Drupal, but confused by the way it handles design challenges? This concise guide helps small teams and solo website designers understand how Drupal works by demonstrating the ways it outputs content. You’ll learn how to manage Drupal’s output, design around it, and then turn your design into a theme. In the second of three volumes on Drupal design, award-winning designer Dani Nordin takes you beyond basic site planning and teaches you key strategies for working with themes, layouts, and wireframes. Discover how to use Drupal to make your vision a reality, instead of getting distracted by the system’s project and code management details.”

check it out

 

Drupal 7 Themming Cookbook

“The greatest strength of Drupal lies in its design which, when employed correctly, allows developers to literally handcraft every aspect of a site, so that it looks and performs exactly how they want it to. While it is reasonably straightforward to download a Drupal theme and install it, doing anything beyond that is not. Using custom themes requires familiarity and experience with Drupal's theming system, especially if you want to easily administer and maintain your themes. Drupal 7 Theming Cookbook provides a plethora of recipes that enable Drupal template designers to make full use of its extensibility and style their site just the way they want it.”

check it out

 

Drupal 7 Themes

“Drupal 7 Themes is an ideal introduction to theming with Drupal 7. If you want to create a striking new look for your Drupal 7 website, this book is for you. This book is a revised, updated and expanded edition of Drupal 6 Themes, rewritten specifically for Drupal 7. This book will show you techniques and tools to help you improve the look and feel of any Drupal 7-powered website. Starting from the basics of theme setup and configuration, you will learn about the Drupal theming architecture and the PHPTemplate engine, and then move on to modifying existing themes and building new themes from scratch. You will find out about tools to make your theme development easier.”

check it out

Videos
 

Introducing to theming basis for Drupal 7

 

The basics of content type design in Drupal

 

Responsive Web Design with Drupal

 

Drupal Design Patterns

 

DrupalCamp Ohio 2011: Responsive Design is Easy

 

Drupal for Designers: Talking to Clients about Drupal

 

0 Responses to this post

Communicate!