I decided that I would mock up all of the wireframes with full images and some filler text. The first one I did was the more traditional web layout.
Already you can tell that this layout is too busy with too many things to look at. The user needs something to focus on and this has too much to look at. Although I do think that the textures that I have used within the site adds a 3D look that jumps out of the screen. I mocked up a wooden plank to have the type laser cut out of it and I think that this works really well. The concept of the found object really comes through in this website design.
Next I took the same effect from the plank for the title in the first web design that I did and applied it to more text over some imagery. I really like this effect of the image of the sky with the text on wood over it. Seasick Steve himself is from California which is known for its blue skies so I feel like this is very relevant. Also I think adding his portrait onto the site in this manner is a lot more effective in contextualising everything for his fans.
Next I tried out adding one of his famous guitars as the key element of the website. I thought that perhaps the guitar could change through out the campaign and reveal something new every time it changes. I used a black background here because it provided the best contrast to the guitar. However I believe that this is now too dark and the colours connote a rock artist and not a folk and blues artist.
Next I paired back the first wireframe and added a design similar to one of those in my initial thumbnail sketches. I also toned down the cardboard textured background which I think looks a lot better because the brown was a bit too muddy and made the page feel dirty. While I want to portray the concept of found objects I still want to keep the website looking clean. I have decided to move forward with this design as I feel that it is the most effective so far and could be developed further to produce the site that I want.
One of my peers found a good program for prototyping websites called Justinmind so I decided that for my final designs I would use this to mock them up fully. At first I struggled to work around the settings of this program but gradually I began to pick it up slowly after experimenting a lot with it.
I tried to develop a page to show an example of a release that might be included in the campaign. So I mocked up a video player and framed it using the wood planks that I had used previously.
All of these initial pages that I mocked up feel too brown and muddy. There is no contrast between the background and the titles on the wood - it is all the same kind of brown colour. So after this I will either tone the background down a lot or remove the texture from it completely. Also with these initial designs that I did I feel like there is no structure to them. It's just a title and an image and nothing else. It lacks information for the user. So I think I need to add some sort of navigation and something that is visually interesting rather than just flat imagery on a page.
To create more contrast and to add something a bit more special to the page I worked on a gif. I wanted to make it look like it was writing itself however all the tutorials I found for after effects were long and confusing. So I compiled a set of images and combined them to build up so it looked like the text was being coloured in. I'm really pleased with the outcome of this gif and when I took away the background and added it to my webpage it immediately made it pop.
Going off my earlier wireframes and mock ups I decided to scrap the design before after in a crit I was told to pair everything back. I decided to create an enter page for the site using the gif and a portrait of the man himself as a precursor to the site. This way people are almost greeted by the artist himself almost like a welcome to the website. I think I will carry this theme of simplicity for the rest of the site with a hint of found objects and quirkiness from the hand-drawn type.
No comments:
Post a Comment