The New Hypergram Website - Part 1: Design

Back in 2010, when we launched our first website, we had a relatively simple challenge. Mobile design was only just starting to become a thing, pixels were pixels and you had a choice of 6 web fonts. The site was static, we designed pages then made them work on the internet. In the last 6 years, design for web has encountered development beyond the speed of light, from a static representation of a ‘design’ or range of ‘designs’ on a small selection of screens and browsers, one design for each, to fully adaptive and seamlessly evolving content across a vast array of sizes, setups and devices. Here lies our first challenge.

Soon after, we launched the first version of our CMS, ‘Integrate’ which allowed our hospitality clients to keep their websites up to date. It enabled various, non technically minded managers and staff to add, edit and amend menus, events and venue details with the ease of writing an email. This led us to a wider challenge; to build unbreakable, smart sites with flexibility and ease of use for busy clients.

The new Hypergram site is a culmination of these two long term challenges within our web design process. Ultimate flexibility and adaptability for the user and the continual development of working practice in the design of our sites. It’s a showcase, not only for the work we produce but for the design philosophy behind our web design. This article introduces some of the challenges and solutions we devised along the way. I'll refer back to the brief we set ourselves and try to explain why these decisions were important to both the site and to our web design practice in general.

1.1 Content types and styles — Defining content types and presentation styles for our various skills

Challenge 1
Build a site that showcases the diverse mix of technical and creative that we are renown for.

So much of what we do is visual and, for the most part, this is an easy thing to catalogue and showcase, as we work on projects with an end date but in some cases our work is diverse and evolving all the time. I have overseen the Leeds Brewery brand and its various activities for the most part of my career. For example, our work for this client spans everything from content, social media all the way through to packaging and POS so we needed a way to showcase the ongoing nature of some of our work. Furthermore, some of our technical projects are complex but not particularly visual. We built an entire voting platform and comprehensive CMS from the ground up for our client BIFA last year and we wanted to find a way to showcase the details of this in a more technical light.

Much of the answer to this challenge lies in the flexibility that we have built into our CMS (more on that in another article) but here’s an outline from a front-end point of view.

Content on the site is split into three main categories - individual project pages, journal articles and journal imagery as we’re always experimenting or building on ideas for typefaces, treatments or photographs, not all these relate directly to projects but give a viewer an interesting insight into our daily process. Journal images are a good way to catalogue this without connecting them to a particular project or client.

1.2 Integrating 3 content types, combining on the home page

Broadly speaking, projects are weighted more towards our visual portfolio, we use projects to display the broad range of re-brands, design exercises and day-to-day brand activities that we carry out. Whereas journal articles can be more about the technical aspects of what we do.

The home page brings together all three aspects of the content into one grid to display a snapshot of the diverse range of our work. Be it creative, technical or experimental whilst not over complicating the browsing process. We guide a user through the site with both calls to action and a simple set of arrow icons, the first simply invites a user to scroll with the line ‘here’s what we've been up to’ further down we see if the user want to ‘find out more about us’. We retain manual control of related content throughout the site to further tailor the navigation process.

1.3 Guiding a user through the site.

Challenge 2
Enable any of us to efficiently build flexible, perfectly formed layouts with our CMS.

As a company, we manage over 100 sites for our clients. It's often the case that finding time to keep our own site up-to-date slips down the list of priorities. Anyone should be able to easily update the Hypergram website, from adding new projects through to building new journal articles. Design should be unbreakable, flexible but overall consistent across the board.

We tackled what we like to call ‘surprise text’ with an elegant solution, that not only took care of the practicalities but also helped generate styled journal titles in a consistent manner. Each article has a two colour theme, selected in the CMS and this is applied to the background and typography of the title as well the header banner of the article itself. Each title is styled according to its length so that it fills the available space within the panel. This generates some interesting combinations and whilst this method allows us some flexibility in its style, the overall effect generates a consistent theme. Perfect for busy authors.

It's also worth mentioning at this point that our CMS handles everything to do with images on the site. So that we can serve up an optimum image without compromising on site load or image quality the site serves up a different version of the image. 1 for each of the 5 breakpoints in both retina and non-retina format and 10 versions of every image in total. All we do is upload one big master image at the highest quality we can and the CMS handles the rest. Perfect for busy designers.

The last part of the efficient layout puzzle comes in the form of content regions. Everything you see on this site that isn't a header, footer or sidebar is built using a series of styled ‘content regions’. Most of the content regions are simple tools to build pages, ‘text - one column’, 'image - full width', '3 images in a row' etc but some are more specialised. The home page employs a more detailed region to enable us to easily select and order which projects or journal articles we wish to display.

Content regions on the Hypergram website.

We use templates to control how styles of pages appear. Project pages for example, have the relevant field in the CMS so that we can easily add the required details for the header such as an introduction and meta colour before building the page however we see best. The template for a journal article includes an author at the bottom of the page, pulled from a central ‘team’ but other than this, the articles are built using content regions and nothing else.

The end result: totally flexible and unbreakable layouts within a frame or overarching style for the site that anyone can update quickly, from developers to designers and copywriters to photographers, we can all make super speedy, super good looking amends to the site.

Dave Rushton

Dave Rushton

Creative director at Hypergram in Leeds, Dave specialises in heritage and luxury brands as well as working directly with a diverse roster of clients in TV, hospitality and leisure.