Initially I started working on some different ideas for the website and how they could work to display the different sections that an exhibition website needs to have.
I wanted the website to work landscape on the screen and fit within the screen area, this would make sure that everything is seen as soon as it was loaded.
Working further on the idea of how it cold work on screen and creating the scamp for the website.
This was the way in which I was going to take the website, but as I was mocking it up online I wasn't happy with the results of it and I thought it wasn't a very string idea for the website, it just looking sit plain and boring.
These following design all are mock up of the scamp for the following websites. The idea was the create a website which would have a large content area to display all the information about the exhibition but also to make it interesting and make people want to go along to the exhibition:
After looking back at these time after time, i realised that they were too simple and in fact was
pretty boring to look at. The space was much more awkward than it looks here and made it hard to fit in al the content within the website media format.
So after this I went back to the start and started to think if new ideas and ways in which the website can work. I came up with two new website designs:
Fr this first idea I took the inspiration from the posters within the project and worked around that idea of building up the imagery for the history,this would also include the type that was used throughout the promo material. I did like this design but I thought it was focusing too much on being the same as the printed material, I wanted elements of the same things being used but for it not to look identical. Also working from this design to create the linking pages didn't seem that easy and something that would work efficiently for ease of use with the users.
Creating the above design into a mock up of the website. Here i have tried to fit the content within the screen resolution of 1024x928 as you can see it looks quite squashed and doesnt have the finished look aof the design sheet above. The website needs to be expanding vertically - this will give more room for both the homepage and the content within each of the linked pages.
Final mock up of this design. Here i have expanded the screen length ways to create a longer and thiner website design. The website would basically scroll to access all the information shown.
As a design i feel that this links into the printed material well and looks as though it could actually be a poster / publication design, but it is in fact the website, which i like because it bringing print onto screen and being the fundamental part of it all to work.
This second design I feel is much stronger, the design is still similar to that of the printed material and uses elements of the printed work by including the imagery of the history across the top banner in the design. This would work in way of a slideshow and the images would scroll through a selection of four images to show different images of the history of the BBC Radio. These images will have the gradient as a overlapping colour gradient on the images. This top section also holds the title which is the type present in all promo work and the links to the other pages and sections to the website.
The area below the top banner is where all the links are, this has all the links in form of pictures, each picture is a button which directs the user to the new section of the website. When the user clicks that image the same template above will be sued for that page except the images in the top banner will change to the image of the link for that page. I.e the image for the link of the exhibits on the homepage, will be the top banner image on the exhibit page of the website. This links all the pages together making it consistent across the website and also so the same template can be used and each page will be the same aesthetically across the website, this I feel is important. The section on the homepage which holds the links will become the area that holds all the content on the other pages, this will be split into three columns - taking inspiration from the printed work - making print and digital work all link together.
From the design above i have created the mock up this looks much better in design, i think the previous design was too much like the printed work and was too close in comparison to it, this didn't really leave any separation between the two, but with this design it is still linked in by the use of the 3 column grid and the design aesthetics of it will be the same as the printed work by including the same imagery and the use of the gradient.
This is the wireframe of the website, i would use this if i was to built the website. It measures out all the sections of the website and create a detailed view of the website so the sizes can be used in order to build it.
Individual screen shots of how the website will look.
These first four pages are the homepage, but as you can see the image is different on each one, this is because the banner at the top of the page will act as a slideshow and flick through these images on a loop as the user is viewing the website.
Below are the screenshots of the pages that link off the website:
About - this uses the content about the background of the exhibition. Again you can see the 3 columns have been used which have been created by the use of the 3 lines along the bottom of the page. This makes the webpage more structured and easier to read, but also links back to the printed products and the aesthetical feel is still there and present throughout all the products.
Wayfinding app - this explains how the app shows and displays the category symbols to look out for throughout the exhibition.
Workshops - the information displayed informs the view about the workshops.
Exhibits, brief information about each exhibit.
Visit us - giving information on how to reach the museum along with the map to show the layout of the exhibition.
Facilites - informing the user of the facilities within the museum and exhibition space.
As you can see all webpages include the use of the gradient within the header of the page, each image used in this area is linked to the content of the page and also used as the thumbnail image on the homepage - this links the pages together and makes them consistent across the website - it makes it easier for the users to identify it and the content of that particular page.
From this i mocked the website screen shots up onto a browser window, to show how it would look on a browser on the internet.
Final on screen mock ups of the website:
Because the website is in the format that is shown here - being long and thin, when it is displayed online it will obviously need to be scrolled so the user can see the full page. I have mocked the website up like this on a webpage template because i felt this would give the best overall view of the design of the website.
If i was to mock it up onto a mac screen you would only see half of the web page and it would need to be done over multiple macs to show the full page. This wouldnt have done any justice for the design of the webpages and you wouldnt be able to see the design of it in full.
I think to see the design at its best you need to be able to see it all in one go, presenting it in this way was the best way to show this and communicate the ideas of the design across well.
No comments:
Post a Comment