Designing for Drupal

UX & Design
25.05.2023
Designing for Drupal
Mik
Mik
Senior UX/UI Designer & Strategist

How thoughtful UX, component design and structured content create better Drupal experiences.

Drupal gives organisations enormous flexibility, but getting the best from that flexibility starts well before development.

A successful Drupal website needs design, content and technology to work together from the beginning. Information architecture influences how content is structured. Content models influence components. Components influence the design system. And all of these decisions affect the experience for both website users and the people responsible for managing the site.

At Digital Garden, our designers and Drupal developers work collaboratively throughout the project rather than treating design and development as separate stages.

Start with users, not Drupal

The fact that a website will be built in Drupal shouldn't dictate the user experience.

We start by understanding audiences, their needs and the tasks they need to complete. Research, analytics, stakeholder workshops and testing can then inform the information architecture, navigation and key user journeys.

Our UX design process allows us to establish how the experience should work before determining the best way to implement it within Drupal.

This is particularly important for large government and enterprise websites, where organisational structures don't necessarily reflect how users think about or look for information.

Design around structured content

One of Drupal's greatest strengths is its approach to structured content.

Rather than treating every page as an individual piece of content, Drupal allows information to be organised into meaningful content types, fields, taxonomies and relationships.

Designing with that structure in mind makes content more consistent and reusable.

A news article, publication, event, service or person can each have a defined structure, allowing information to be displayed differently depending on where and how it is being used.

This is increasingly valuable as content needs to work beyond an individual webpage — across search, feeds, applications, APIs and AI-powered experiences.

Think in components, not pages

Designing every page individually can quickly create an inconsistent and difficult-to-maintain website.

Instead, we design flexible systems of reusable components that can be combined to create different page layouts while maintaining consistency across the experience.

A component might be a content card, call-to-action, accordion, feature panel, data display or related-content block. Each has defined behaviour, content rules and responsive states.

A strong design system brings these components together with typography, colour, spacing, interaction patterns and accessibility guidance.

For larger organisations and multisite environments, this approach can significantly improve consistency and make future development faster and more efficient.

Consider the author experience

Good website design isn't only about the public-facing interface.

The people managing the website need an intuitive experience too.

Drupal can support sophisticated publishing workflows, permissions and content structures, but unnecessary complexity in the CMS can make everyday publishing harder than it needs to be.

We consider the author experience when designing the content model and components, including what options editors actually need, how fields are labelled, how content is previewed and how much flexibility should be provided.

The aim isn't to give editors unlimited choices. It's to give them the right choices, making it easier to create consistent, accessible content without needing technical knowledge.

Build accessibility into the system

Accessibility is much easier to maintain when it is embedded in the design system rather than addressed page by page.

Components can be designed and developed with appropriate heading structures, keyboard behaviour, focus states, colour contrast and responsive behaviour from the outset.

Drupal can then reinforce these decisions through structured fields and controlled components, reducing the likelihood of editors inadvertently creating inaccessible experiences.

This is particularly important for government and other organisations working to meet WCAG 2.2 AA requirements.

Bring designers and developers together

Some of the best decisions happen when designers and developers work together early.

Designers need to understand the opportunities and constraints of the CMS. Developers need to understand the intent behind the user experience rather than simply reproducing static designs.

Our Drupal projects bring UX, UI and development together throughout the process, allowing ideas to be tested for usability, accessibility, technical feasibility and authoring practicality before they become expensive to change.

It also means we're designing a system rather than simply designing a collection of pages.

Designing Drupal for the long term

A Drupal website should be able to evolve.

New content types will emerge. New services may need to be integrated. Components will change. Accessibility requirements will evolve. And increasingly, website content will need to be understood and reused by search engines, AI tools and other digital channels.

A well-designed Drupal implementation provides the structure to accommodate that change without continually rebuilding the website.

That's why designing for Drupal isn't really about designing for the CMS.

It's about creating a flexible digital system that works for users, content authors and the organisation — today and as its needs evolve.