Five Golden Rules For Drupal Designers

Drupal is one of the most popular CMS in the world, and second only to WordPress, probably. You certainly know this. You also probably know why: unlike WordPress, Drupal is a more complicated system to master, and you need to see a lot to use it effectively. This applies to both the work of developers and designers. However, nothing is too complicated if you choose the right approach to learning. In this article, we will talk about the five golden rules that our Drupal web design company team uses. Explore this, and your design will be much better.

#1 Repeatable Design Elements

In most standard cases, you don’t need to reinvent the wheel, as it’s often better to use standard cloned design elements. These are buttons, arrows, icons, and much more, which you have undoubtedly already worked with. Use them as much as possible because later, it will be very convenient to work with a group of such elements simultaneously, using the same code block.

If some objects are placed on different backgrounds, just put them on a separate layer with a transparent background.

#2 Don’t Be Fooled By Photoshop’s Promises

One of the common mistakes newbies make in Drupal web design is the tendency to think that what they draw in Photoshop will look exactly the same on the website pages. However, this can create many problems in the future. Here are some examples:

• the dynamic color overlay is unlikely to be as delicately displayed on the site page as you see it in the Photoshop workspace;
• transparency on the site only applies to transparent PNG-type images (CSS can fix this, but not in all browsers, which is unacceptable for business).

Some Photoshop tricks can be reproduced online using CSS, but it takes a lot more time and resources. For example, you can make a drop-down menu display text or change the color of an object when you hover over it, but it won’t be easy. Also, again, this won’t work on all browsers and devices, which is clearly a bug.

#3 Don’t Rule Out The Grid

For some reason, many designers ignore the grid. Yes, on small sites, this element is not always necessary. BUT! Grid is an element that is one hundred percent consistent with the main principles of Drupal web design, namely: standardization, the flexibility of your design, as well as repeatability of elements, which we have already written about above. At our B2B digital agency, we always use the grid when designing websites. This allows us to make the site more pleasing to the eye, easily work out the logical structure of the site and save a lot of time and resources.

Let’s look at a simple example of exactly how this works. When developing a design, our collaborator usually places the grid on the bottom layer of the file (it can be a PNG or an AI project, whatever). If necessary, the grid can always be turned off, but it is always there, so we can quickly solve standard tasks when creating a new template. Later, such a template can be passed to the developer so that he would use the same scales. An array of such templates is quite easy to grow, and if you do it once, you will have to spend much less time on the basis of the design in the future since everything will already be at hand.

#4 Correctly Adjust Color Settings In Photoshop Or Illustrator

Most likely, designers work in these two programs. Also, a similar problem occurs for those who use their counterparts, for example, CorelDRAW. If you choose the wrong options when setting up the color, when you transfer the design to the site pages, the colors you choose might look different. This often happens if, for example, a photographer begins to master web design. The fact is that in the programs mentioned above, different color parameters are used for various purposes: web, printing, or photo.

We often use Fireworks in our work. This resource does not require such complex color settings as AI and PS and allows us not to worry about incorrect palette transfer when transferring to the Internet. Fireworks are not the only ones. There are other tools with similar functionality. With a little search on the Internet, you will definitely find the right one for you.

#5 Make Friends With Drupal Forms

And we are back to process standardization again. Drupal comes with a lot of standard forms, such as comment, contact, login, etc. fields. Drupal also allows you to customize these templates for yourself; however, unfortunately, this will not be easy. Yes, the creators of Drupal themselves did not look for easy ways and did not allow their users to do so. But that is why this CMS turned out to be so exciting and compelling.

Okay, but what if the project is on fire, and the standard form does not fit? This is where the CSS comes in. We already said that modifying templates with CSS also takes time and effort, but it’s easier than customizing standard Drupal forms, trust us! Managing form elements is very difficult, so you’d better leave everything as it is and bring beauty with the help of CSS.

Let’s recap!

So, here are these five simple rules for good design in Drupal. It is clear that a designer needs talent, a sense of taste, and a remarkable imagination to do his job well. However, Drupal web design is also a complex technical process that should never be forgotten. You may have noticed that most of our advice is about the technical side of this sparkling coin. To create an outstanding design, you must not only imagine it but also know how to implement it. That is why these tips and guidelines exist. Let’s repeat them one more time: standardization, flexibility, and repeatability of elements. By following this, you can create something really worthwhile. Dare!