Tips for Design when using Drupal

Tips for Design when using Drupal

Meet the new blog post with tips about Drupal web design from our guest blogger Lalit Sharma, SEO consultant who runs a SEO agency.

Drupal is a popular open-source platform loved by many designers. However, there are a few golden rules to follow when designing anything for Drupal sites in order to ensure developers have an easier time coding, maintain production speeds and the client’s pocket remains relatively bulky. A few are as provided below:

Design Tips for using Drupal

Reusable Graphical elements

reusable graphic elements

Implement standardized design elements as much as you can, i.e. buttons, icons, arrows, bullets etc., rather than resizing them according to the sizes or colors of a layout. The themers would appreciate having groups of similar elements grouped together on sprites, so that the same block of code can be reused every time these elements occur. If the elements occur on different backgrounds, place the element on a separate layer with a transparent sprite.

Apply Photoshop tricks with care

photoshop tricks

Just because you can do something in Photoshop doesn’t mean the same is repeatable on the Web. For instance, placing dynamic color overlays that have distinct filters cannot accurately represent over the web. You can only apply opacity to transparent PNG elements or using a percentage in CSS for specific browsers only. Some Photoshop Elements are repeatable using CSS, but it takes much longer to do them on the latter. For instance, if you apply elaborate menus including hover states and background images, this may create a problem if the menu is sliced. It can be done, sure, but it will take much longer.

Consider adding a grid

baseline grid

Grids aren’t really necessary on smaller sites, but using the standard grid fits perfectly into the main principles of using Drupal: standardization, flexibility and reusability. Choose a grid and apply it consistently to enhance the visual appeal and uniformity of the site, as well as to save time. Templates can be quickly set up and will require minimal adjustments at later stages. Placing a grid on the lowest layer of the PNG, PSD or AI file enables you to turn it on and off as necessary. You can pass it along to the web developer, who will apply the same dimensions to build the theme. Alternatively, you might use a grid-based theme.

Configure color settings

color settings

If your settings in Illustrator or Photoshop do not have correct configuration, there may be stark differences once you get on the web. The former suites are color-managed, meaning that you have to apply different settings depending on the use of a project: web, print or photo. There are resources to help you configure your web settings so that there is no color shift once you transfer to the web. Alternatively, use non-color-managed suites such as Fireworks.

Get familiar with forms in Drupal

drupal forms

Drupal comes with inbuilt forms that a designer might be tempted to customize – contact form, login form, comments form and node add form among others. While possible, it’s time-consuming and cumbersome to override the structure of an inbuilt Drupal form. If you’re handling a time-barred project, stick to making CSS changes to the Drupal forms. Consider preserving the order of fields, language and markup. Simply acquaint yourself with the form structures. This is true because certain elements in the forms can be particularly difficult to manipulate. Save time and money by leaving them as they are.


Author Bio: Lalit Sharma is an SEO consultant who runs a SEO house called Ranking By SEO.

He is specialized in link building and other SEO related activities.

You can also find him on Twitter, Google+ and his personal site.

6 votes, Rating: 5

Read also


In a simple and understandable way, Jack Dawson describes what Drupal CMS is, what its advantages are, how it is updated and improved and for what websites it is the best choice.


Creating CTools popups (modal windows) is not a complicated thing, but it has many important nuances. Therefore, this article is devoted to the various nuances of popup creation.


This is a second portion of useful Drupal modules for social networks integration. Hopefully it would be useful for your website!


Need to integrate some social networks to your Drupal website? We've made up a list of the most useful modules for this purpose!


TOP Drupal modules helping you to configure the Views according to specific website.

Subscribe to our blog updates