Notice a few changes to the beta.govt.nz site? We’ve made some colour, font and template changes. Love it, like it or not too sure — opinions will vary, but there is a reason for every design element. Design is a process with the focus on the end result. We’ve had a few queries about the updated design so we thought we’d share our thinking.
Font or typeface?
A typeface is a set of letters, numbers, punctuation marks and symbols. Typefaces share common design features. You’ve heard of Times New Roman, Verdana, Arial, and Helvetica? These are typefaces.
A typeface can have many variations of size, weight and style — each of these is called a font. Eg, 10px Arial Bold is one font within the Arial typeface, and 12px Arial Bold Italic is another. A typeface is a collection of fonts, or a font family.
Our starting point for new typefaces
Our quest to find new typefaces for the website began with this feedback:
Hi there. The font used in the body text on the home page does not look right. The titles and headings look OK but the black text is hard to read. If you select any section and go to that page, the black text is OK. The effect is the same in IE and Firefox.
We took a look at the website on a few different browsers on different computers. Sure enough, on a few browser/device combinations the body copy was looking pretty messy — as though it had been written using a blotchy old ink pen.
We received more feedback along the same lines over the next few weeks, and eventually decided we would have to chuck out our existing typeface and choose a better one (or two).
Our website is all about the content. It’s important that it’s easy to read and that the text “flows” down the page. This enables you to quickly scan a page and find the information you need.
We can help by breaking up the blocks of text into short paragraphs and bulleted lists. Including headings and sub-headings is also appropriate. Using two different typefaces — one for headings and one for body copy, also improves the “readability” of the page.
It’s a complex task, choosing a new pair of typefaces for a website design. Our typefaces had to achieve several goals:
- Go together well — not too similar, not too different, complement each other visually
- Look good on the web and be easy to read on a range of devices (desktop computer, laptop, tablet, mobile phone) and platforms (Mac, PC, Android, iOS)
- Be free — no room in the budget for buying new typefaces
- Any uncommon fonts had to be hosted on our own servers as
@font-facefont kits — no external hosting - Be a small file size
- Have macrons (ā, ē, ī, ō, ū) as part of the standard character set
- “Speak with a voice” that relates to the website
Voice — tone and theme appropriate
Different typefaces speak in different voices, and it’s important to choose the right one.
Picture the classic typeface you see on “Wanted” posters in cowboy movies. That typeface is not going to work too well on a stylish wedding invitation, but for a cowboy-themed fancy dress party invite? Could be just perfect.
To find our “voice”, I asked the team for a couple of words that described the feeling or emotion they felt the website embodied.
This is what they said:
Relief, Understanding, Easy, Clear, Trustworthy, Friendly, Authoritative, Clear, Simple, Up-to-date, Reassuring, Open, Not showy, Useful, Clear, Concise, Happy, Relieved, Clear, Reliable, Friendly, Simple, Trust, Simplicity, Ease.
Two themes emerged. “Clear, friendly, simple and easy” and “trustworthy, authoritative, reliable and reassuring”. These became our two voices for the website — one that would guide our choice of the body copy, and the other that we would use for headings.
Our website has to be available to everyone, regardless of the device they’re using, whether they’re on broadband or dial-up, or accessing it from home or on the go.
I decided we should go back to using a web-safe font for our body copy. This reduced the range of typefaces available to us, but it avoids a range of potential download issues. As well as the display issues we had with our original typeface, it also avoids possible delays caused by using the @font-face technique to load typefaces. Also, there are quite a few mobile devices and browsers that don’t support @font-face at all, including Opera Mini, BlackBerry 4 and 5, and Windows 7 – 7.8.
After some research and experimentation I selected Verdana as our body copy typeface. Matthew Carter designed Verdana in 1996 for Microsoft for use on the web. It’s a wide, open-looking font, easy to read and friendly-looking. We think its voice is “clear, friendly, simple and easy” and it fits all our criteria.
We decided that we were happy to use @font-face for our headings, which gave us a wider range of typefaces to choose from. The presence (or absence) of macrons cut down our list of potentials, as did the need to host the fonts ourselves. I looked at both serif and sans-serif fonts. We tried out a few different combinations, and eventually settled on a serif typeface called Libre Baskerville, by the Impallari Typeface Foundry.
I felt that it reflected the “trustworthy, authoritative, reliable and reassuring” voice we were looking for. It feels trustworthy and reliable with its wee feet (serifs) placed firmly on the ground. Libre Baskerville is a new version of a classic typeface and has been tweaked a little bit to make it easier to read on the screen, at any size.
To style our text, I used two typesetting techniques that every designer knows — the typographic scale and vertical rhythm.
Print typesetters have used the typographic scale for centuries. It provides a set of sizes for headings and body copy that are in harmony with each other. Vertical rhythm is a way of working out the spacing between your lines of text, and before and after headings of different sizes. It creates a feeling of harmony and “flow” within the text on the page.
Both techniques add to the ease of reading of a page. You might not consciously notice when a page of text uses the typographic scale or has good vertical rhythm, but your eyes and your brain will thank you for it.
We replaced the old typeface with our two new typefaces a couple of months ago, and then set to work on the new look & feel of the website.
A new look and feel for Govt.nz
We modelled the original design of the beta site on GOV.UK, it’s been our inspiration and a source of usability research from the beginning of this project.
It was a great starting-point for us, and it enabled us to get the alpha and beta sites up and running quickly. We could concentrate on producing great content, rather than worrying about the design too much.
Once the team had made good headway with the content, they were able to give me the task of re-working the design to give it a more “New Zealand” feel.
The brief was to keep the general structure of the pages pretty much the same – our user research was showing us that they were (mostly) working well —so my re-design should be more of a re-skin, rather than a complete do-over.
The design is quiet, understated, simple, calm and gentle. The aim is to let the content shine, rather than shouting about the design itself - reflecting the New Zealand character as a little bit reticent, modest, and quietly-spoken.
The colours reflect our landscape - the beach, the sea, the sky and the land. I took the colour palette of blues and greens from a classic photo of bunny tail grasses on the beach, and that became the starting-point for the re-design.
I defined the edges of the “pages” with old-school shadows, creating the sense of the website being something of a reference book for Kiwis and visitors alike. Adding a subtle texture to the outer areas of the screen beyond the edges of the page provides some interest to those great swathes of white on a wide-screen. It also dampens down the bright whiteness a bit — making it a bit easier on the eyes. On a narrow screen, such as a tablet or a smartphone, the page edges and background texture disappear, as they are no longer required.
The blue of the header reflects the blue of the sky, maybe on a day when a strong southerly has washed the air clean. The blue of the footer appears almost transparent over the textured background and shadows, like water lapping on the shore. I’ve used a few different shades of green to highlight various elements in different parts of the site and to provide a secondary colour within the design.
New Zealand has more shades of green that any other country I’ve ever visited. The sky is bluer here than anywhere else I can think of, and I hope that my design reflects that in a subtle way.
One of the comments we received occasionally in our user testing was that the previous design was “a bit plain” and could do with some colour or pictures to add a bit of interest, and to make it look less like one of those for-sale URLs you sometimes accidentally come across online. So the final element I brought to the re-design was the introduction of photographs of New Zealand, on the homepage and the first page of each main section or category of content.
The look I was going for is all about Aotearoa, with a subtly proud/iconic Kiwi vibe. It’s a little bit retro, a little bit 1950s, it’s representative of the beauty of NZ, and slightly quirky with a gentle sense of humour at the same time. The photos have white borders and shadows. They look like pictures from your parents’ or grandparents’ box of old photos.
There are two photos for each category page. There’s a contrast between each of the photos we’ve selected. Old/young, urban/industrial, beach/mountains, or sometimes there’s just a contrast of colours. It’s a feel thing as much as anything else, so I created no rules, just guidelines.
All the photos have some kind of relationship with the subject matter of that particular section of the site. Some like the Māori carving and the military uniform on the ‘History, culture and heritage’ page are directly related to the content, and others are more symbolic, and even a little bit fun. We call the combination on the ‘Work and jobs’ page “Boots and suits”.
I found a great source of New Zealand photos on Auckland photographer Andrew Smith’s CubaGallery Flickr page. Andrew takes photos that are simple, serene, and quietly beautiful — and he uses various visual effects to add a retro vibe. His photo treatment and overall look-and-feel has become the guideline/standard for our photo selection. Where there wasn’t a suitable photo in Andrew’s collection I used stock photos from iPhoto and MyChillyBin, and also used a couple of snaps from my own collection. It’s a long process to put together a photo collection, and I’m really pleased with the end result.
Design is a subjective thing. Some of you will like it, others may not. In the end, what matters most is that our visitors find the website easy to use. The design focuses on the readability of the great content that the team has written for the site. “Content is King”, they say, and I agree. Have a look at the design of beta.govt.nz and read some of the content. Tell us what you think.
