OUGD504 - Studio Brief 4 - Final Website & Evaluation

Desktop Site

Below is a video of the website that I created in a prototyping program called Justinmind. I used a video so you could see all the animations and events that I used to make the site more dynamic. The final website works really and I am pleased that I did use the software to mock it up as it makes it a lot clearer to see where the hover animations are rather than using still images. It also means that if I was to create this site for real, I could hand this over to the coders and they would have a clear view of what goes where as well as the interactions that need to appear. 

Mobile Site

For the mobile version I simplified the site down to the key elements. I added the fixed pre-ordered button to all of the pages which would redirect to the store. I also worked with the hamburger icon which is widely recognised as a menu bar for use on mobile sites to minimise and expand the navigation. If I was to do a tablet version of the website I think that I would just use a slightly smaller version of the desktop website, perhaps using the hamburger icon in the navigation bar. 

This brief was my first time tackling digital design and web design, so I am quite proud that I managed to successfully complete the website. Initially I struggled with coming up with a campaign idea for the release of the album and so I focused on the design rather than the concept. However when I came up with a concept finally it made everything a lot easier to do. 

I really liked experimenting with the laser cut machine using different types of wood. Also I quite enjoyed experimenting with creating the gif for the enter page. I haven't had much experience with 2D animation so the final result was really pleasing. 

I think after reviewing my website and development that I need a lot more practice with this sort of digital design. It took me a while to get used to the constraints of web and digital design. The layouts that I produced weren't very dynamic so if I had more time or if I was to do this brief again I would have played about more with the animations and making the site more interactive. Although I did manage to teach myself how to use a prototyping software for the construction of the site that I haven't used before. This meant that I spent a lot of time trying to work around this software which could have had a detriment to my final design as I spent less time developing it and more time trying to animate the hover overs etc. 

Overall in this brief I think that I have managed my time quite well. I aimed to get most of the website complete for the final crit with Only and I achieved this which meant that I got a lot from my feedback. 

Although I felt bittersweet about my final website. I was pleased that I had completed it however I felt like the site itself could have been a lot more polished . I'm not sure whether this is down to lack of time or lack of knowledge about digital design. 

OUGD504 - Studio Brief 4 - Final Crit with Only

We had our final critique for the digital design brief with Only studio. There was a lot of general feedback that other people received that I thought was relevant for me as well. Such as to remember to check whether the fonts are web compatible - some fonts are not available for web use. My custom Seasick Steve font wouldn't be compatible either so I would have to construct eps files similar to how Only did on the Lost Village website. Also he recommended that certain heading sizes should be set for the site ranging from H1 to H6, H1 being the biggest heading size and H6 being the smallest heading size. Then on top of that there would be the paragraph text size. This makes the type on the website a lot more streamlined and cohesive throughout each page. Another reoccurring theme that seemed to come up in everyone's critiques was that there should be a constant button throughout the site for the visitors to be able to preorder the album. 

The specific feedback I got on the other hand was also very helpful. Tom said that he liked the contrast between my hand drawn typeface and the cleaner one, he mentioned that every font like this should have a contrast. But he also mentioned about the accessibility and readability of the type used within the laser cut elements and that I should check it against a site called snook which would test its compliancy (from AA-AAA).

As the current wood that I am using on the site was just a mock up until I laser cut the real more distressed looking wood I will have to try this out once that I have done the laser cutting. 

When I talked about my concept for creating a buzz on social media as well as in the 5 main target countries. They said the idea of a treasure hunt was a good one however the QR code method may come with flaws. Questions were asked about whether it could be scanned more than once to win a prize or whether people would go on social media and spread the word so lots of people would take advantage of this. Also my idea of giving out physical merchandise wouldn't be economically viable or create enough interest for the event. Samples of the new album or cover art would be a more gradual way of building anticipation. 

OUGD504 - Studio Brief 4 - Treasure Hunt

For the campaign itself I wanted to do something that wasn’t just digital to include the older part of the target market who aren’t that tech savvy. I feel that if fans could find something in the real world and then take pictures of it they would be more likely to post about it on social media and therefore create buzz about it. I wanted to use the concept of found objects as well. So I thought that doing a treasure hunt of sorts to find QR codes so that the fans could find samples of the new album or win prizes. This would involve lots of little objects scattered around the 5 main cities of each of the 5 target countries where people could find them and scan a QR Code to found out something about the album. Above is an example of what someone might find - I laser cut a QR code into a piece of wood that links to his website. Below the QR code is a hashtag that would prompt the people who find these objects to  post their find on Twitter or Instagram and get the hashtag trending.

Also when the QR code is scanned and a sample is found it will make more people want to go out and find it for themselves to hear the sample track. Below are some mock ups I did of how they may appear in the target market cities. 

OUGD504 - Studio Brief 4 - Lasercutting Wood

I found some old wood in my garden and was inspired to try and laser cut on them in order to make some pieces to put onto the website to make it look more rustic and authentic. So I took my custom made typeface to the wood cut facilities and got it engraved into a piece of wood.

The end result is really effective, because the wood that I found had been painted and then 'aged' in my garden it created some really nice neutral colours to contrast the burnt type. I quite like the asymmetrical-ness of the plank it adds to the quirkiness of the piece and reflects Seasick Steve as a musician in my opinion.

I also tried to create a mock up of the sort of thing that could be found on the treasure hunt and they would scan the QR code to find the prize. However I didn't set up the file correctly the first time so it only printed out the outlines and not the filled parts. So I tried to print over it again after I had fixed the problem but I misaligned it. I'm pretty disappointed about this because the fixed QR code and it looks really good.

I tried re-doing the QR code on a scrap of wood in the wood shop and it worked with no issues. But unfortunately because it goes across the knot of the wood it doesn't actually scan. 

I also tried a more decorative piece to represent the album. I cut it out of plywood so originally the colour of the wood didn't look right at all - it looked too clean in comparison to all the other laser cuts that I had done. So I tried to distress it myself, I used indian ink and then sanded it back for the first stage. I then took it home with me and stained the wood with coffee. I'm really proud of how well this aged the wood in such a short about of time. 

OUGD504 - Studio Brief 4 - Website Development

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.

OUGD504 - Studio Brief 4 - Interim Critique

After designing some new campaign site ideas I still felt a bit lost as how to advertise this campaign and take it outside of the website onto more traditional media. My concept for found objects was strong but I was unsure how this could translate into a suitable campaign to gain interest.

As soon as I showed my website ideas someone said that the layout was similar to that of a normal website - not a campaign one - because I hadn't summarised the information and links that were on there. So this is definitely something that can be easily rectified.
Also I explained how the first thing that I did was create the custom typeface from Steve's handwriting and though it was a weird priority my peers said that it was very effective and that it captured the essence of the man himself, which adds to the whole experience.
They particularly liked my site where I used his portrait with the curved type - as it seemed approachable and intriguing. They liked the use of the black and white photo of Steve saying that it makes it more personal and immediately relates you to him. One person suggested that I could perhaps animate the type so that it looked like it was writing itself when on the website. I think this is a good idea because otherwise the front "enter" page of the site would look very static and not that attractive.

After getting some initial feedback on my website designs I asked about things that I could do for the campaign. One of my peers said that they had found that bands like U2 set up flash events where they will have pop up gigs or appearances only advertised an hour before they happen. I feel like this is suitable for U2 because of their recognition but with Seasick Steve he isn't that well known so it might not create the same buzz of activity.
I also ran my idea of having a pop up installation in the city out of found materials - like a little shack or a little bar that would make people want to approach and explore what its about. Steve himself drinks on stage so I thought that a bar might be quite appropriate and my peers said that this might just work.

But my favourite idea from one of my peers was to create an easter egg hunt of sorts, scattering objects all over a certain city from one of the 5 main target countries (Germany, France, UK, USA and Australia). Then people would have to find these peculiar found items in order to win gig tickets, merchandise or a track or album for free. This is a brilliant idea as it would create a buzz of interest around the cities and prompt people to use a hashtag or go out and get involved with a campaign that's not just digital. I thought of using QR codes to do this, so say there was a little plank of wood with a QR code, you could scan it and get the link to your prize. Obviously these QR codes would have a limited number of scans.

After this critique I feel a lot more confident about this brief, I was a bit iffy before as I have never really tackled digital design or design for screen. So having some positive feedback has helped a lot.

OUGD504 - Studio Brief 4 - Thumbnail sketches and Wireframes

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. 

OUGD504 - Studio Brief 4 - Website Design Research

I searched for some musician's websites that were similar in genre to Seasick Steve and who also had a unique element to their music.

I found Rivers & Robots first of all. Their site is really simple in terms of the layout. It uses muted and neutral tones to give a calming feel to the website, reflecting the acoustic nature of their music. One aspect that I really like about this website is the subtle little details that make the site a bit more aesthetically pleasing. Like the zig zag cut off of the main panel, making it look like it is a piece of fabric. Also the subtle lined shadow on the title lifts it off the background making it look again like an embroidered piece on some fabric. This makes the site seem natural and rustic which is probably the kind of vibe that you would get from the band. 

I also looked at Noah and the Whale's site because they have very similar folky style music to Seasick Steve. Their site was the definition of too simple in my opinion. They had no information on the website what so ever - just links to their social media accounts over an image of the band. However this does show how minimal some bands websites can be, just being purely visually rather than informative. 

The next site that I came across was Regina Spektor's, I really like how she uses multiple textures like the paper and fabric in the background. However I feel like this look with the script typeface and imagery combines to be a bit too much - it feels really crowded. Although I do like this use of the paper and the textures - it relates to my found object concept for the website. 

Additionally I found Red Hot Chilli Pepper's site really interesting because it had lots of interactive elements to it based on the colours of each of the different pages on the navigation bar. (See below for examples)

The layout of the different pages is very ordered, in a 3 by 3 grid this gives it a really clean and contemporary look. Paired with the use of the monotone thumbnail images and contrasting colours it makes the site vibrant and exciting for the user. I feel like this vibrancy really suits the Red Hot Chilli Peppers but with Seasick Steve I wanted to keep the colours fairly natural reflecting wood and paper to show his humble origins. 

OUGD504 - Studio Brief 4 - Campaign Research

Lost Village Festival

I was really inspired by the Lost Village website that Only showed us within the briefing. I love the use of a custom typeface with different variations of letterforms to make it look handwritten in every title. Also the minimal layout of text over imagery as it adds a mysterious quality to the site making the user want to know more and want to keep scrolling. 

Rudimental - We are the Generation

When looking for campaigns that other artists had done while advertising a new album I found that Rudimental had enabled his fans to create their own custom album cover on his site for his new album. They can upload an image and the title is applied over it to become a new album cover. The title of the album fits this perfectly as it allows "the generation" to show everyone who they are. I thought that this was particularly effective as people would want to share their creations with friends which would prompt people to go to Rudimental's website to make their own or even be interested in the album itself. I don't know whether I could use something similar for Seasick Steve, though it would generate a lot of social media interest somehow I don't feel like it is him, with his humble personality.

Arcade Fire - Reflektor

In preparation to promote their fourth studio album, Arcade Fire experimented with some guerrilla marketing techniques. It started with chalk and graffiti tags spelling out the album’s title, Reflektor, in major cities, followed by the appearance of posters in the same locations, revealing the album’s release date. The tags spread across social media, and even courted controversy when journalists questioned the safety and environmental impact of the “vandalized” buildings.

Then, Arcade Fire announced a series of small shows as their pseudo-band, The Reflektors, and asked audience members to dress up in fancy attire. The action, although reflective of the album and the pseudo-band, resulted in bad PR.

I feel like this campaign was really successful because it generated a lot of interest and hype before the launch of the album using fairly simple methods. This sort of style of guerilla advertising would really suit Seasick Steve's style. 

OUGD504 - Studio Brief 3 - Design Boards

OUGD504 - Studio Brief 4 - Seasick Steve Concept Idea

After having a good look at Seasick Steve's work I feel like I have got a really good concept to base the campaign around. Because he uses found objects to make his guitars I thought that I could use found objects to construct the new campaign site. Like pieces of cardboard for the banner and footer or a bit of metal for the navigation bar. I really think that this will build up to show the essence of Seasick Steve and his music.

I also thought that I could create a custom typeface out of his hand written type that he has used on some of his albums to give it that personal and humble vibe that Steve portrays. 

Below is the full font that I created using paintfont.com. Although some of the detail has been lost in this process I am really pleased with how it came out. It's very quirky and unique like the man himself while still being readable.

Below are some of his custom made guitars, most of the parts of these guitars I could probably find, especially some wood and bottle caps. Perhaps on the site the bottle caps could be the buttons and I could laser cut the title into a plank of wood to be the header.