Designing for Drupal

Design thinking
25.05.2015
Designing for Drupal

Drupal is an open source CMS or "Content Management System" that enables users of all skill levels to create and deliver content and experiences within web, mobile, commerce and social applications. As a powerful and fully scalable feature content management system, it uses modules via an expansive and supportive open source community to ensure it is ever flexible and upgradable.

Get to know your CMS and what your limitations are, and you can maximise the potential that your design has for creating an innovative, impressive and seamless experience.

 

Know your CMS

When designing for Drupal, having a clear & concise understanding of what you are working with will play a huge role in the way you design and organise your designs.

If you poke around into any Drupal website you will see that the majority of them use a combination of Content Types displayed using Views.

  • Content types allow you to “build” types of content that can be used and reused across your website in many areas.
  • Views can display these content types in a variety of ways across your Drupal website.

Having a good understanding of how these two core Drupal functionalities work side by side is a huge advantage to a designer working with Drupal.

 

What sort of website are you creating?

Ask yourself, what sort of website are you trying to create? What features and functionality do you wish to see? What sort of content do you want to display? How do you want to display it?

Having an answer to these sorts of questions should aid in the design process - making it easier to understand where content is going, how it is displayed, and what it will look like.

 

What are your limitations?

If you have ever worked with developers or a development team and you are a designer, you will quickly become familiar with what makes their job a lot harder. Not understanding your limitations (or project scope) will cause delays, frustrations and can brew bad blood in any design agency.

As a designer it is your responsibility to understand which CSS frameworks and themes your developers may use. Knowing what your limitations are will change the way you approach your design and will actually make your job easier, and theirs too.

 

Create elements, not layouts.

In the Web Design industry, time is everything. Creating a style guide or collage of elements not only creates consistency in design, it saves time. Giving developers a reference point of all the elements and their attributes allows developers to simply consult designers for advice on new layouts and elements, rather than send the project back into the design phases and eat up more time. By doing this you are making sure the at least most of the elements that your Drupal site can offer, will have a style. The majority of Drupal websites will have:

  • A header
  • A footer
  • Headings (h1-h5)
  • Body typography
  • Links
  • Lists
  • Block quotes
  • Image styles
  • Admin tabs
  • Block headers
  • Buttons
  • Read more 
  • Input text style
  • Tags
  • Pagination
  • Basic Node Page Layout Style (margins)
  • Table Style
  • Error Message
  • Status Message
  • Warning Message
  • Help Message
  • Default Profile Layout
  • Blog title and Byline
  • Breadcrumbs

 

Keep it simple

Having a simple approach to all your projects will ensure you have a clean vision and restrict clutter and wasted time.

  1. Design a homepage
  2. Design a content page
  3. Design a mobile layout for both
  4. Create your style guide

Once you have done the groundwork and research and you are ready to start the design phase you can start by peicing together your homepage. An intuitive and engaging design will ensure users will keep using the website, and hopefully purchase services, read all the information or request more information.

Then comes the content page. This should be one of the more interesting pages that the website contains - a page to showcase complicated content types, unique views and displays or listings etc - think "events, blog, services, members".

When you and your client are pretty happy with the look and feel, it is a good idea to design a mobile layout (320px container is a good start) to see how the components and elements will work on small devices. Remember: your components and blocks will snap top to bottom, left to right.

If you've made it this far then you should have most of your elements created or designed.  You should have a good understanding by now of the typography, colour palette, buttons, forms, imagery etc, that you are going to use.The rest you can design into your "style guide" which has the other components and elements that your design involves.

With a comprehensive and well thought out style guide, you should be able to create the rest of your pages using the elements that already exist - this will create consistency, reduce development time and will save you creating elements later, that you forgot to design.