I've begun to create the wireframes for the website, starting with the home page. Although, during Work in the Web, at Mixd, I was taught to design for the mobile first – however, I completely forgot about that until I begun to write this post.
Based on my research, I sketched out a concept for the home page, including quick links to the main content on the website – the classes, the fitness suite and the pool. Scrolling down, you're able to view details on the membership scheme and the pool – at the bottom there is a contact form. Adopting the modern style of a long one page website, sort of.
The navigation has been designed to be hidden with a hamburger menu – which opens up to reveal the secondary and thirdary pages of the website.
The wireframes in the illustrator document, set up using a twelve column grid, two variants have been created. One with a closed navigation, and one with an open navigation. As the two look very different, in a client situation I would have to show them what both states look like.
Above pictures the navigation in it's hidden state, compressed into the hamburger menu, which is often used to help minimise a page's content – which is useful, as the navigation will be over an image. Removing the navigation will allow the image to dominate the page, becoming the main feature.
The exposed navigation, which features links to every visible page on the website – for quick navigation. The hamburger in the top right also transforms into a X, as an option to close the navigation.
Leave your comment