First Website

I used wix.com to create my website design. I wanted to keep the website colourful, interesting and useful for potential audience members. We have distinguished that audience members for this music video are middle to older teenagers, and after having conducted some audience feedback surveys, I have noticed that girls seems to be more interested in this type of video than boys do, though, the music is of a more neutral gender preference.

My website includes navigation tabs for:
-Home
-The Band
-Listen + Watch
-Tour Dates
-Gallery

Homepage
The homepage consists of the band title that is incorporated around the background. I have chosen an photograph that I took on a Canon DSLR camera of a girl jumping in the air. The backdrop is a simple landscape of the sea which is a common theme within our music video and so nicely ties together. The question asked is who the legs belong to that is in the photograph. Is it the girl character in the music video? Or another person entirely different? The shoes worn by the girl add to the quirky and indie type of music that Oh Wonder produce. They are floral and so stand out amongst the background. I like the constructive features of the background how the wall at the bottom of the page is parallel to the horizon of the sea, and also how the land in the distance is also in line with the wall. The white box almost acts like a frame around the most prominent features of the photograph on the homepage. I have chosen to use a dark turquoise as the colour of 'Oh Wonder' because it compliments the other colours used in the photograph. It also compliments the colour of the jeans and ties in nicely with the rest of the composition. The tabs at the top of the homepage are also turquoise. I decided that depending on the page that the browser is currently on, that tab will turn white. For example, if someone clicked on 'Gallery' the word gallery will turn white, while the other tabs are left turquoise. There are four buttons in the top right of the homepage that are hyperlinked to the band social media sites including YouTube, Twitter, Instagram and Soundcloud. I also chose the images used on these tabs to not be the general site icon, but instead to add to the 'alternative' and indie theme that the band carries, I decided to make the icons look as though they are hand drawn and 'doodled'.
Lastly, there is a button on the homepage that says 'Listen to our music'. If you were to click on this link, it will take you to the 'Watch + Listen' page on the website. I chose to add this button because the best way to get to know a band is to listen to their music.

The Band

The Band page consists of a short paragraph about the real band Oh Wonder. I have chosen to add images of the two characters in the music that we created.  They will be familiar images to audience members who have watched our 'Drive' music video. The background of this page consists of a close up 'gif' of a record player that is moving. This ties in with the musical theme of the website.

      :top of page

:bottom of page

Listen + Watch

The Listen and Watch page consists of three music videos. One is the music video that we created for our coursework. The other two are music videos that the band have created and that are featured on their YouTube channel. Therefore, when you click on the music video to watch you, you can be redirected to the band's music video where you are then able to watch their other videos. The two videos I decided to feature are 'Lose It' and 'Without You' which are the two most recent music videos that the band have created. I have edited the image of the videos to stretch across the scene so that the width is larger in comparison to the length. I have separated each video with a white blocked line that carries out the theme of the white lined frame on the homepage. The same background is featured as on 'The Band' page of a record player.

     :top of page

:bottom of page

Tour Dates:

This page is simply to provided information of tour dates and next to the dates is a box that can redirect the customer to buy some tickets. This page would be how I would want this to look, however, baring in mind this is not the official website, I have provided fake dates and locations and have not hyperlinked the boxes that allow customers to buy tickets.

I have again used white as the font which highlights the dates. I have also featured the white box that is featured on the homepage to provide an ongoing theme throughout. I have animated the lines between each dates to appear after the user has clicked on the page. I have also provided an image of the front cover of my digipak that I created in order to give the potential customer a further understanding of the band. The background of the record player gif remains the same.

Gallery

The Gallery is my favourite page because it provides a clear understanding of who the band is. The images I have decided to add to the gallery page are familiar images of locations used in the 'Drive' music video that we created and some other photographs that we decided to take during one of our lessons specifically to feature on this page. Having taken over 50 photographs, I decided to feature only 2. These photographs include the one of the feet and the daffodil in the centre of the composition and the photography of the two figures, the boy facing with his back to the camera and the girl facing to the side. There are also some landscape images shown of sunsets and one that is featured on my digipak. The background of this page is of an acoustic guitar being played, a piano, a violin and a cello. 

      :top of page

:middle of page

:bottom of page

Music Video

Our final music video:
Drive- Oh Wonder

Vlog Update

Final Digipak

I have completed the final edit of my digipak. It consists of two photographs that I had taken myself of Salcombe estuary in the sun, and a photograph of a country gate that I took on one of our shooting locations. The last photograph is the front cover image which is the dream catcher that makes an appearance in the music video for 'Drive' that we created. The dream catcher gives a rather indie vibe to the digipak which complements the genre of the bands music. I decided on the font of the front cover to be simplistic and basic in order to compliment the dark tones of the dream catcher in the foreground, as well as contrasting to the blurred light background of the image. The text is inline with the portrait structure of the dream catcher to visually extend the length of the cover. The word 'Drive' is the name of the album. It is written in a dark grey colour to contrast the black that 'Oh Wonder' is written in, in order to distinguish the two words from one another. I have included 3 lines of song lyrics from the song, "All we do" which is on Oh Wonders album. Each line is on a different panel of the digipak. This is because as the digipak is being opened, each line will be revealed one at a time in order. The font of this writing is a type of handwriting font in order to give the impression that the artists wrote the lines. It also adds a homemade nature to the digipak which compliments the nature of the band as artists. I have used one extended photograph stretching across the three panels in the middle because it looks rather effective. It is a simple landscape image of Salcombe estuary that I took one morning. The panoramic image works well with the size of the digipak. The two song lyrics on either side of the panel are written to compliment the photograph that they are written on.


The back panel has a list of the songs that would be included on the CD. They are all songs included in Oh Wonders new album including 'Drive' which is the song we used in our Video. The photograph in the background is made transparent in order for it to be easier to read the songs. I decided to use the beetle idea that I used on my digipak draft because it combines well with the nature of the album being about a song called 'Drive'. The text staggers around the beetle combining the overall image together well.

Digipak Draft

I created a draft of a potential digipak before working on the final product so that I had a reasonable idea of a potential final piece. I found it difficult to sketch what I really wanted the digpak to look like. After having finished the draft I believed that the images were too focused on our music video for Drive  as I wanted the digipak to resemble the band and their music, not just the one track. Here are some photographs of my digipak draft.

This is the front cover, resembling a sunset in the distance of a long single road.

 This is an extended image that spans over two covers of the digipak which I think looks rather effective. The figure standing on the beach looking out at sea is the girl character in the music video that we created. I decided to add a sunset into this image because the first shot of our music video is of a sunset. 

The back of the digipak shows the outline of a beetle which compliments the theme of the digipak being 'drive'.

This is the centre of the digipak. The centre block is where the CD would be placed.

When creating this digipak draft, I felt as though I could make a massively better version if I were to use computer technology to help me. I liked that I had hand drawn a draft of the digipak to aid my coursework and give me a better sense of how I want to lay out my final digipak. Although, I know that my final edit will probably be entirely different to this draft, and my final edit won't be so based on the one song 'drive', but will be a digipak suited to fit all the songs that the band have written.