When I looked on the website for Seasick Steve I found it didn't reflect his personality or his music at all. There was nothing wrong with it a part from that it lacked character. So I decided to do some wireframe sketches to start with to alter the website for the campaign.
I started out traditionally with some sketches of some of the ideas I came up with after looking at some campaign sites and musician's sites. The first layout was a very structured site idea, similar to the one that he has now but stripped back a bit. I had this idea of using a plank of wood for the titles and laser cutting the text into them. This would add to the humble roots of the man himself as well as giving the site an edgy and unique touch reflecting his music style.
The second idea is even more minimal - stripping the site back so that each element is revealed as the user scrolls down. I do like this idea as it is like the user is exploring the site one element at a time. Also the use of a bold title on the wood plank would look very effective as an enter page of sorts. However I feel that it does not give enough room for information about the artist or the new album.
Taking my concept of using Seasick Steve's guitars quite literally I thought that I could create a themed page for each of the guitars throughout the new album release campaign, revealing a bit more of the album with each different guitar.
The final idea was once again a more paired back version of Seasick Steve's original website once again with an enter page. I thought I could include a portrait of the man himself because nothing says more about him than his own image. And then as you scroll down the site it would reveal a newsfeed of all of his events and social media pages.
Next I made digital versions of the thumbnail sketches that I created to use as wireframes for templates of possible website designs using the 12 column grid that Only supplied. I started out with desktop website designs as I feel that I can easily take the main elements of a normal website design to translate it into a mobile website design or a tablet website design.
I started by plotting out my first, more traditional layout which uses columns to separate the different parts of the website, similar to the layout of the site already. But I have used a large title over the top of the site to stop it feeling so modular. The circles on the side bar would be the navigation buttons. I planned on using bottle caps for these to match the found objects them as well as paper textures for the main body of the website.
Next I tried one of my more paired down approaches - to just use images and contrast them with text on objects over it. As a wireframe this looks rather empty but I hope when images are added that it will flesh out the design a bit better. I might add some more pictures onto this layout in order to add a bit more interest or information as I do feel that it is lacking at the moment.
I went back to the traditional layout and decided to try and simplify it a bit more. So I took the navigation bar and moved it so it was across the top rather than down the side giving the main body of images and text a lot more space to breath. This immediately looks like a huge improvement to how it was before. I also feel that this layout would be a lot clearer for the reader because of this extra space, the navigation bar on my original wireframe may have been confused for an image. Also it wouldn't have been easy to navigate.
I also came up with some wireframe concepts for the mobile site as I figured if I had the smallest screen size layout and the largest then I could always work out the in-between screen sizes from this. For the design I thought that if the top navigation bar was static and then you could scroll down infintely without having to worry about scrolling back up to the top. Also I used the hamburger symbol to pop down into the navigation bar although I am starting to think that it should drop down to be the full screen rather than a little corner as it would be harder for people with larger fingers to click on just one of the elements in the list.
No comments:
Post a Comment