CERN Website theme

One of the aspects of this project is design and develop a theme that could be used for all Drupal websites within CERN.

A few months ago, we started gathering the requirements for this theme and auditing the various use-cases across the organisation. It became clear the those use-cases are extremely varied; from department websites, to individual’s blogs. The editorial need is also quite broad; from a communication tool around working groups, to simple note-recording. This theme had to work quite hard in capturing this broad requirement, but also putting in place tools to allow for slight customisation for users to make their site their own.

With this in mind, we established some requirements:

1. Provide a design system that feels ‘part of CERN’.
2. Provide a number of tightly controlled opportunities for user configuration.
3. The theme should adapt to small screens.

Let’s have a look at each of these in turn:

Provide a design system that feels ‘part of CERN’

The theme shares several components with the new CERN public site: Typography, grid and typeface. The typeface shown in these concept mockups is the typeface PT Sans. We’re proposing that this is embedded into the web-page – rather than using Arial or Verdana – as the first typeface choice. PT Sans is a highly legible web font, and through its licencing will be freely available for all users to see without incurring licencing costs.

By using the same typeface, typography hierarchy and grid layout, any site that is created will feel like it belongs to the ‘family’ of CERN websites.

Provide a number of tightly controlled opportunities for user configuration

Through our audit, it became clear that sites need to look different for different use cases, but also need to feel like they belong to one another to retain a family feel and build and reaffirm the CERN brand. Answering the question ‘am I in the right place?’ of the user.

To do this, we needed to make sure there was configuration options open to the user to create the site they wish, and to a certain degree, how they want it to look. There are two ways we could do this:

1. Let the users edit the stylesheet themselves
2. Give them tools to make changes without knowing code.

We opted for the second.

We’re proposing the user can change the palette of the theme: choosing a blue palette, green, black, grey or whatever predefined palettes we design. Once selected, the system will automatically apply all secondary tones, link colours, type colour etc. Maybe in a future version, we could create over-rides for these so they could be individually altered. But, for this initial release, we’ll be defining palettes.

Of course, the user is still able to define the functionality and placement of content as they build out their site, as they can do now.

The theme should adapt to small screens

Web content is being consumed on an increasingly diverse screen size. In response to this, the website will scale to fit these screen sizes without breaking or degrading the content.

We’re finishing up the first release of this theme in the next few weeks, and aiming to be integrated for a limited beta test in CERN throughout the early part of next year.

Design concepts

Image showing generic theme palette.

Image showing the same basic design structure but a different palette, masthead background image and department logo.

A further concept that shows how the same design system can be made to look fairly different by a predominantly white palette.