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