As announced on Mark Boulton Design's Twitter feed, the Cardiff-based studio has made live an alpha of a new website for CERN. The Large Hadron Collider, searching for the elusive Higgs boson, has ensured CERN has remained in the public consciousness. However, it was deemed that the website was failing its audience, and so Mark Boulton Design, in collaboration with CERN's web team under Dan Noyes, worked on something fit for an organisation at the cutting edge of science. The final release will occur during the first half of 2013.
Mark Boulton Design founder Mark Boulton spoke to .net about the website, its use of imagery, and the omission of CERN favourite Comic Sans.
.net: What were your main considerations going into this project?
Boulton: Our main consideration was the existing site wasn't really meeting the needs of the various audiences who use it. Also, the old site was hand-rolled HTML and CSS—there was no CMS.
This new site represents a move to using Drupal, and therefore spreading the content management needs internally at CERN. Given our experience with Drupal, we know some of the pitfalls, but it was still a big consideration given some of the challenges that lay ahead.
.net: The alpha has plenty of atmospheric and engaging imagery, yet many science sites tend to be quite visually dry. Was your design an effort to get away from that?
Boulton: I think some science sites quickly default to scary language and maths, with little imagery, because explaining—and showing—something like particle physics research in simple language is incredibly difficult. Some of the work that goes on at CERN is very difficult to convey to the likes of you and I in a way we can understand. This is where imagery helps, but also how that imagery is structured: is it decorative—to build an underpinning graphic atmosphere—or is it content, or the starting point of a story?
From the initial research on the project, we discovered people across the board wanted updates from CERN: they wanted to know what was going on. And that includes the general public. One of the issues with CERN's old site is that you can get to quite scary scientific language relatively quickly. It was a goal of the project to effectively funnel people into content that is written, and presented, for them.
So, it was more a process of designing a system where we could dial the 'wonder' of what CERN are doing up or down depending on the comprehension of the audience. High wonder for the general public; low wonder for scientists.
.net: The site has a responsive design—how did you approach that?
Boulton: We have all the usual challenges everyone else has: images, navigation, content—nothing particularly new! Drupal has been a challenge because of the way Drupal structures the markup, but Gridset helped in that regard—especially with the new Sass support—because we've been able to create the responsive grids relatively easily.
.net: You're well known for your thoughts regarding taking the best of all kinds of design and making that suitable for the web, and so are there any lessons from print/traditional design that informed aspects of this site?
Boulton: One of the things we've worked on for the desktop layout is the asymmetry – the logo hangs off the edge of the grid. That's very much a print thing that's been around for decades, but that you see less of on the web. It's allowed us to use a smaller logo because the negative space around it gives it a higher position in the hierarchy. Plus, the grid is a five-column grid at desktop, not twelve. That's a print-related thing, too.
.net: And finally, no Comic Sans?
Boulton: Ha! I'm actually quite a fan of Comic Sans. It's just used badly, but as a typeface, it's not actually that bad.
