When we started the Lab at the beginning of April we launched our website and filled it full of information, however we focused on the functionality and content rather than the design.
Six weeks in we’ve decided to spend a little time making the site look lovely, and with the help of our designer Ross this is now a reality.
We’ve made major changes to the styling of the site, this includes layouts, fonts, colours and a bunch of other stuff.
The site is now fully responsive and will look great on whatever device you wish to use.
The homepage is now laid out in the style of a single page site but with links to articles, projects and profiles. This means that from the first page users can find at least a snippet of every section of the website.
It was important for the name of the Lab to be big and bold on the landing screen. The font and style of the name has been designed to work alongside the Met Office master logo and echo the brand colours and font.
The hierarchy of the message was the focus on the ‘home page’. The Met Office Informatics Lab visually overarches the whole page (and site) and we used three short words to portray the purpose, at-a-glance. The words and titles are designed within boxes to help make them more flexible – the type can be used over busy background images but still retain legibility.
Working out the ‘running order’ for the information was also important. To do this, Ross noted down sections and sketched out possibilities.
I flowed the information in to the new theme and shared screen grabs of how it looked.
It worked out easier for me to see what Ross thought the blog would look like to help explain his ideas. To do this, he mocked up pages and then we discussed any elements that would be too tricky or time consuming to implement.
The colours throughout the site mirror those used in the four get involved icons. We’re toying with the idea of introducing these colours to the team photos. The border colour could mirror the persons area of expertise. This could be too subtle … but it is often the subtleties that make a good design great! Let us know what you think!
Our website is built using jekyll which means we can host the site on a simple file server without the need for server side code to be executed. This is great because it gives us a very simple infrastructure to look after.
There are a few draw backs when using a static site generator though, like how to handle contact form submissions for example. Luckily with the use of static sites on the rise there are lots of excellent services popping up to deal with these things for you, such as Formspree for form submissions or Disqus for comments.
We hope you like the new site, why not contact us and let us know your thoughts!