Layout and (white)space

It’s important to use a lot of whitespace. Whitespace makes a design look professional. It’s better to have too much than too little whitespace. 

Use consistent pixel distances when it comes to spacing your elements. I use steps of 4 pixels. So all my elements are spaced with 4px, 8px, 16px, 24px, 32px, 64px etcetera. As a default I use 24px to space items on screens that are smaller than 800 pixels wide. If the viewport is wider I use media queries to increase the spacing to 32 pixels.

Also, it’s not always necessary to use the full width of a screen. If you have a block of text and display it full width on a large screen, it becomes unreadable. It’s better to limit the width of the block and centre it.

Keep it simple

Don’t distract users from the main goal. What is the most important part of the page or element you have developed? Is every button, text or icon moving the user towards that goal? If not, remove it.

Also pick two main colours and stick with them. It’s advisable to create up to five different shades of the primary colours you’ve picked. A complete colour palette could look as follow:

• Near black (hex code 222222)
• White (hex code FFFFFF)
• Green (hex code 75C03D)
• Light green (hex code E7FCD8)
• Dark green (hex code 304A1C)
• Blue (hex code 17C0F2)
• Light blue (hex code D6F4FD)
• Dark blue (hex code 0C5469)
• A contrasting colour for the main action button or call to action (hex code F2A000)

Picking the right fonts

Just as with colours it’s best to stick to a maximum of two different fonts. You can differentiate by using one font for the headings and buttons (I use Work Sans on this website) and picking another font for the body text (I use Merriweather on this website). If you go over to Google Fonts you can choose out of more than 1000 font families. If this overwhelms you, sort them based on popularity. This will give you the most used font families, which indicates that they are usually good fonts. You can then host the fonts locally on your Drupal website.

Don’t try to reinvent the wheel

There are a lot of common patterns users are accustomed to, such as the logo on the top left of a website or a button below a form. Trying to experiment with the standards usually ends up in a hard to use end product. 

Just imitate your favourite websites or apps (don’t blatantly copy them though). What colours, fonts and layouts are they using? You can find inspiration on sites such as Dribble, Screenlane or Page collective.

Make your text readable

Follow these guidelines to make sure everyone can read your text:

• The size of your main text should be at least 16 pixels. You can make an exception for labels or buttons but try to stick to this rule as much as possible.
• The font weight should be a minimum of 500. You can use a lighter font weight only for large headings.
• Make sure the contrast ratio of the text on a background is a minimum of 4.5:1. You can check the contrast ratio with tool such as the WebAIM contrast checker.
• Limit the width of a text block so that there are a maximum of 75 characters on one line. If the lines run any longer than that they will be hard to read.

Let me check your work

Hopefully you, as a Drupal developer, found these tips helpful. Want me to look at your work and give you some pointers? Leave a comment below.

Also don't forget to subscribe to my Drupal newsletter.