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:

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 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.

5 votes, Rating: 5

Read also


Nowadays services which provide out-of-box html-themes gain popularity. The question is whether it is that easy to use them as a basis for...


One can easily be lost in the variety of Drupal themes. Find out information about the best and the most significant of them.


It’s not a secret that the most important page of any website is a landing page. How to create a good landing page for your portal - this is the topic of this blog.


SASS - is a meta-language based on CSS, intended to increase the level of CSS code abstraction and Cascading Style Sheets files simplification. 



When attending an internet-shop any experienced internet user can easily figure out what he's dealing with – cheap box decision or professional shop with deep development.

The purpose of the...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime