University blogrolls

It’s all in the design

Posted on: 16 January 2012
No Comments »
Filed under: Communication, Design, Identity, Redesign, Responsive design

Since being at the helm of the University’s website,  we’ve done a lot of tweaking of the existing design.

We’re now at the point where we need to make some real change to how we communicate with our target audiences visually. It’s an obvious conclusion to make but hard to implement without certain building blocks.

Visual language, what language is that?

Screenshot of Grid layout from BBC GEL

Screenshot of Grid layout from BBC GEL

An essential to any web designer’s toolkit is understanding the visual language. This is communication via design rather than text alone. Visual language includes the building blocks necessary to make up a design; the grid for harmonious changes in layout, the colour palette that will be different to print, (screen colours aren’t the same as those on paper). The typography? Style of image cornered or straight edged? Colours, block or gradient? Overlay, hint of shadow? From the days of the “Barley” web page layout  the BBC has always employed its own visual language, the only way it can ensure it’s brand is consistently represented across the many BBC websites. Now called the Global Experience Language it is an excellent pointer in how a visual language supports design and brand. The University needs one and fast. Like many institutions, we have brand guidelines and although they refer to print, on the whole it’s enough for us to interpret the brand into an online design and visual language; our first step forward.

So what does it look like then?

We have several major target audiences we talk to: students enrolling for degree courses, academic and research communities, B2B business and Government and there’s a smattering of B2C with short courses. Four fairly distinct target audiences alongside themes like international and sustainability all glued together by our brand values: courageous, connected, generous, rigorous and sustainable as well as being London centric.The same look and feel isn’t going to work for all these groups. The bread and butter of the University is selling degree courses and that has to be our primary concern and with it a student facing interface that does just that. Our secondary concern is the least developed areas within the University, no less important but less impactful at the moment. Five years from now, revenue generation from the B2B side of the University may well be high on the agenda, so introducing an interface for this area is a prudent move.

Responsive design

Screenshot of a single column interface for mobile devices

Screenshot of a single column interface for mobile devices

The International Data Corporation (IDC) estimates that by 2015 the most frequent way to access the Internet will be through mobile devices  – not quite time to ditch the laptop but check back in 2020 and let’s see. In the meantime, we need interfaces which work across a multitude of screen resolutions and sizes. Responsive design is a way to manage this by inserting a media query into the code behind the design, which says if your interface matches these dimensions, then show this particular design. When we say design, what we’re really talking about is a layout that functions on various devices. If you’ve accessed the website on a handheld device, you can see that you have to enlarge parts of it to read it and this results in a rather cumbersome user-experience. We need to refer back to our grid and the various modular layouts we employ, standardly left hand for navigation, middle for content and right for related content. Shift all that into a single column and there is a lot of scrolling, but with a few tweaks here and there you’ll have an easier interface to manage on a handheld device. Move up to more screen space, like that of an iPad, and you’ve got a bit more room for creativity. This of course takes time and won’t happen immediately but it is on our list.

Out with the old and in with the new

There’s been a lot of talk about the visual identity of schools and what they mean in the market place. After discussions with business teams, it was concluded that a one-stop-shop approach was the best way to get business into our services. The same is true of courses; many students don’t see a school as a “subject area” any more. Schools of study are no longer the sign-posts they used to be with commercialisation of our services and a blanket University offering as part of the brand.  There are exceptions which require support, Westminster Business School has a niche market and to compete with other business schools could well do with its own defined web presence. Fashion and film courses are known to be market leaders leading to some very impressive careers.

How do we put all this together?

Research and testing is the most obvious option. However, time and resources are not on our side so some best practice and limited research and testing will help point us in the right direction. We are committed to producing a new design by the end of March. Its deployment will have to come post March as there will be much which requires changing in the present site to accommodate a wider grid and visual language.

Latest posts by Nicholas Laws (see all)

Leave a Reply