Web Design

The Team

The Creation Process

As the web design team, it was our task to build a website that would reflect the Maastricht Collection while meeting the requirements and ideas of fellow students and showing a unified website.

The structure

Though we worked individually, we made every decision together, in person or online, whether small, such as the placement of a photo gallery, or big, for example the colours for the whole web page. We chose the ‘Flash’ theme because it seemed compatible with our ideas, and offered us useful options for making and showing the collection. Parallax scrolling was one of the most important elements we wanted to use, therefore we needed a theme that allowed us to use it. This feature was something that not just we wanted, but the other groups requested as well. It is a kind of scrolling that is aesthetically pleasing as it adds depth to each page. We worked with five main pages: Home, Collection, Children’s corner, About us, and Contact us, and added sub-pages where necessary. In these cases, we used drop-down menus in order to stay consistent, but to be able to find the sub-menus easily as well. Our main goal throughout the whole website was to make it easy to read, navigate and find what one is looking for without too many clicks.

We used full width pictures as headers on the theme pages where sub-themes follow each other vertically. These pictures worked as chapters of a book. Though white was not part of our original colour palette, we used it in the headings as this colour was the one that stood out the most from the pictures we used.

Parallax scrolling
previous arrowprevious arrow
Wireframe of the Homepage: globe, media and text
Wireframe of the Homepage: media and text
Final header on the Homepage
Final globe on the Homepage
Final media and text on the Homepage
Final media slider on the Homepage
next arrownext arrow

The colours and fonts

When it came to the colours, we wanted to use the colours of the Limburg province, which are white, yellow, red, and blue, and metallic colours that resemble the objects we worked with in the collection. The palette went through multiple changes as we started to build the web page with the contents. The metallic colours would have been difficult to use in the texts and the headers, and were not easy to read, therefore we only applied them in the logo. The initial, bright colours of Limburg province became softer and lighter, and these pastel colours resemble the original ones, but are comfortable to see on the screen, and match perfectly with the objects. Each colour had its own place on the website depending on what is easy to read and/or what looks most aesthetically pleasing. Though first we started to work with a dark background, we changed it into a light one while building the website by popular request.

We chose the fonts to work with based on what looks aesthetically appealing when used together and what is easy to read. We used Garamond, which is a serif font, and gives a historical feel to the headers, and Montserrat, which is a sans-serif font, and gives a more modern feel for the body text.

previous arrowprevious arrow
First colour palette including metallic colours
Second colour palette
Final colour palette
next arrownext arrow
Logo sketches

The name and the logo

The initial name of the project was ‘Limburg Collection’, but after talking to Sjoerd Aarts, a senior curator at Centre Céramique, we changed it to ‘Maastricht Collection’, because most objects were found in the area of Maastricht. As we wanted to create a logo that represents the whole project, and that is easy to recognise, we came up with the idea of using the bridge, which is the symbol of the city, and could represent the connection between the past and the present. The bridge has arcs that resemble the ‘M’ and the ‘C’ when turned horizontally. We came up with different versions regarding the colour and texture of the bridge, the letters ‘M’ and ‘C’ , and the text that says ‘Maastricht Collection’ under the symbol, and tested them on the web page. We first used the basic colours of the colour palette, but these versions were flat and did not match the colours of the website. For the final version, we used the one where the bridge and the text was dark, and the letters were from the metallic colours to give more dimension to the logo. This type of bronze was the one that appeared more often in the collection and matched the colours of the website.

Final logo

The visuality

While our main goal was to build a website where navigation is easy, we also wanted to add a few elements that would make the web page more interesting and engaging. We put the emphasis on the visuality, and included many opportunities for pictures (static pictures, galleries, and slideshows), videos, timelines, games and interactive elements, such as an interactive map of Limburg, and the embedded 3D models from SketchFab. While some elements were already built in the template, for some, we needed to buy plugins, which for example gave us more opportunity to customize the colours or add hyperlinks. The Lightbox plugin allowed us to click on the images and make them bigger, while the slideshow plugin allowed us to present the pictures in a more interesting and organised way. The initial idea of the timeline was to be a vertical one that could work as a separator on the middle of the theme pages between the text and the media, but as we started to build the page, we changed the conception, because the horizontal position gave us option to show all the objects, while in the case of the vertical one, it would have been too long. We used a plugin that allowed us to change the position of the timeline and the colour, and add more multimedia to it.

It was important throughout the whole website to use multimedia that has good quality and show consistency. In the case of the pictures, we set a minimum of 300 dpi. The embedded models came from SketchFab and had the same settings, regarding size, alignment and background.

Overall, this project was a learning experience in which we translated a collection into a website.