Drupal Web Design

The first step to designing a Drupal website is to find out exactly what you, the client, wants.
note: If you're not sure that you want a Drupal site, then contact us so we can help you decide upon the best content management system for you!

Establish the requirements for your Drupal Website

Gathering as much information at the beginning is key:

  • What the website is for.
  • What the main goals of the website are.
  • Branding and style choices.
  • Who it’s aimed at.
  • Other websites that the you like
  • Functionalities that certain websites have that you need.

All of this helps to build an initial picture which can then be discussed further.

'Wireframing' your Drupal Website

Once you have a solid idea of what you want, the next step is for us (or you) to wireframe it.

This consists of gathering all of the elements that each page of the website needs, and drawing them out in to ‘wireframes’; basic drawings that outline the required elements on each page.

This is then sent back to you, and with a bit of back and forth, everyone agrees on exactly what needs to go where.

Ideas and Inspiration

The next step is to gather ideas and inspiration.

Go over your ideas on how you want the site to look. By reviewing some of the websites and other media that you personally like we can start to understand how you'd like the website to 'feel'

After that it’s a good idea to look at competitor sites to see what you’ll be up against, and how you can improve upon them. 

Creating a 'Moodboard'

By creating a moodboard of images, colours and elements that suit the site we can establish if the client is happy with our design direction. It’s a good talking point and an avenue to garner further specifics as to what the client wants the website to look and feel like.

Designing your Drupal website

Once we're confident that we have a good idea of what you want, our next step is to start designing it!

It’s best practice to start with the homepage and the mobile view first.

This is because the mobile view is the most basic form of the website, with only the absolutely necessary elements and without the potential design elements of the larger views, that while make the site look great, aren’t necessarily needed on mobile and save on mobile data.

Once you have the mobile site designed, you can then translate that to the larger breakpoints.

Usually a portrait tablet view, landscape view, then a laptop sized screen and finally a large desktop screen. This is then sent over to the client for feedback and approval.

Once everyone has agreed on the desktop design, it’s then down to the designer to translate the style throughout the other pages of the site. Always referring back to the wireframes as the other pages are drawn up

Presentation of the web design

Once all pages of the website are designed at all breakpoints, the designer will upload each view to a presentation tool such as Invision. This allows the client to see each design just as it would appear once the site has been developed. Invision allows the client to see each page and each breakpoint at the correct size and avoids any confusion that may otherwise be caused by viewing on different sized screens or with different browser settings.

Packaging the design up for Drupal development

Now the client is completely happy with the designs, it’s time to package up the files ready to be passed on to the development team. This entails having each file labelled with the correct colour codes, the right fonts, sizes, weights, rollovers and any other relevant instructions.

These instructions are then transformed into the development of content types, templates and a well thought out hierarchy of information.

Creating a Design System

The final step is to create a Design System.

A Design System is a collection of repeatable components and standards guiding the use of those components, based on the design of the site. The Design System is a set of rules laid down by the designer that anyone involved in the project must adhere to.

This is an effective way to guide all future additions to the website and maintain brand consistency. In addition to that it’s a great way to save time and costs in the future, as any additions to the site are already determined, and the content just needs to be applied within the set rules.

If you'd be interested in having us complete some Drupal Web Design work for you, please contact us today to begin a discussion.