After spending a few weeks planning and creating our own webpage, Izzy and I are very happy with what we have achieved and accomplished for our final product. We have managed to incorporate the same colours into our webpage as we did for our digipak. Even though our first draft was alright, we feel like we have made it look so much better as a whole from the feedback we got given from our tutor and peers.
These are the things we have changed and improved:
- We have changed the colours on the front to match our digipak.
- We have changed the “about” section the the front page and added things about the artist into it.
- We have added links to the artists social medias and links to the ticket master from the tour dates section.
- We have added a news page with images and writing about what has happened in the artists life.
- We made sure everything was linked to each other so it all made sense.
- We have added an image for the background for a few pages.
- We have also added a gallery at the end of all the images taken whilst shooting the music video and the digipak.
- We have made the titles bolder and stand out more by adding in a white outline against the blue.
- We have changed the colour and font of the titles and the UK tour dates to make it clearer to read.
We have changed a lot of these from the first draft but overall we feel it looks so much better and looks like a complete webpage.
Click below to see our webpage.
Whilst creating our webpage, we came across a lot of things we didn’t know, some of them being not knowing how to link things to each other, how to make an image appear big by clicking on the smaller image and many more. Wix is a website that I haven’t used before so it was a challenge to try figure out how to use it but it gave us an easy and simple start by allowing us to choose a template to work from. I liked the fact we can customise our own merchandise and make this webpage our own by adding in our own photos, changing the colours and the font. Down below is a slideshow I created showing what I have learnt whilst producing a webpage.
I created a post on Piktochart to help visualise what softwares, hardwares and online resources we used whilst producing our music video, digipak and webpage. Here I have discussed the technology we used and how they impacted on us whilst in the making of our music video, digipak and webpage.
After creating the digipak, we had to create a webpage that supports the digipak and the music video. My group and I sat down to discuss what we want on each page; photos, links and writing. This is what we have produced so far, it is not yet done and there needs to be a lot done to it to make it how we want it to look.
We gave our first draft to our teacher so she can give feedback on it. This is what she suggested:
- Match the pink and use more of the other colours from the digipak.
- The site promotes the digipak, so we need some hype on the front page and some news about it.
- More continuity with the font- follow the lead from the digipak throughout the site.
- Add captions or some news about the photo gallery.
- Link the albums to some music; link now.
- Social media links to their real social media links.
- Have some news stories made up for the news page.
- Book now-link to ticketmaster.
- About section needs to be higher up on the menu as it introduces Jordan- use mission statement and embellish it with some more facts and stats about him.
We had to do a screencastify on a professional website, we chose to use Florence and the Machines website as it is the same genre as our genre and we liked the way it was set out. This website has so many aspects of a conventional webpage and has a lot of individual and originality to make it stand out. When analysing and creating our own webpage we have to think about AIDA (attraction, interest, desire and action) as it is the key concept to remember to meet the audiences needs. The push and pull theory and the Blumer and Katz “Uses and Gratifications” (Entertainment, Social Interaction, Personal Identity and Information) must also be used throughout to draw the audiences attention so our website will be visited regularly.
This was a very helpful task as it made us notice things we would have missed if we hadn’t have done this. We noticed many new things whether it being something small or something big which will help us design our own webpage so we could include every little detail to make is as good as it can be.
Here is our screencastify and script of us analysing Florence and the Machines website;
After spend a lot of time trying to see what shapes/colours and illustrations will work we finally agreed as a pair what we want the final result to look like.
I went home and looked up different drum kits and came across one like this. I used this as a guideline for drawing my own. When I was happy with the outline I then used watercolour to paint in each section. After being happy with how it turned out I then out it in Indesign against the red and pink background which turned out looking good.
To help us create a website, we made a template to help us follow and know where to put things. It also gave us an idea on what it will look like afterwards. We included the flashpage, leaderboard, new album releases, about the artist, tour dates and the merchandise within our website template.
Our next step was to sign up into wix.com and choose our template that we thought best fitted our genre. We decided to choose “indie.music.blog’ as it has similar colours to our digipak and music video.
After listening to the feedback that we got given by our teacher, we went back onto Indesign and thought about how we could improve it. The feedback was very helpful as it told us what section of the digipak was strong and what sections weren’t so we could improve them more.
This is the final result:
- We changed the background of the front and the back cover from a blue/green colour to a blue and pink pastel colour.
- We changed the inside left background cover from a blue/green colour to a blue colour.
- We changed the inside right cover from a stretched picture of the dress to a pattern of different coloured hexagons.
- We added a silhouette of Jordan on this inside left with a brighter version of the girl.
- Instead of rainbows, we added a trail of the coloured hexagons you see on the inside right so it flowed better and smoothly.
- I drew a drum kit and painted it in watercolour using the pastel indie pop colours.
- We changed the fonts of the songs and the album name to a stronger and readable font and changed the colour to white.
- We got rid of the image instead Jordans face on the front cover as it wasn’t our own photo and it looked too crowded.
- We also added the album name into the spine.
We then went around and asked 3 peers what they thought of our improved digipak. This is what they said;
- Really good colour Scheme.
- Colours are very complementary.
- Good range of photos and illustrations.
- The font is very clear and readable.
- Maybe add white into the drum kit to continue with the colour scheme.
- Maybe make “jordan” stand out a bit more.
- Colour scheme is good.
- Silhouette works well in front of the textured background.
- The pastel hexagons works really well.
- Maybe less colours in the drum kit as some of the colours clash with the background.
- The picture of the front cover looks too clear/sharp compared to the faded background.
- Calming colour pallet.
- The movement and dynamics of the girl throwing the pattern works well.
- Maybe adjust the gradient on the shapes so the light source comes from the same place.
- The colours on the drum kit clashes with the background.
In the making of producing our digipak, I came across some skills which I have learnt on Indesign and Photoshop which has helped us create a digipak fit for our target audience.
I went away and drew a picture of a drum kit and experimented with different colours to see what works for our genre and our target audience. This is the final painting. I then went into Photoshop and spent some time cutting it out so there wasn’t a background so it would fit nicely on the back cover background of our digipak. I thought this would fit our genre and our band image. The colours and the drum kit convey the indie-pop genre and the brand image we are trying to create. Some themes we are trying to convey are: mysterious, urban and young.
We spent sometime looking and experimenting with different colours on Indesign. We chose to have the light blue and light pink to flow continuously through the didigpak as we feel it best represented our genre.
We wanted to have a few shapes within our digipak so we looked at different shapes and put the colour in to see whether it would go with our theme. We decided to go with round circles and hexagons for our front cover and put a gradient on each shape so it would blend into the background making it look more 3D and less blocky.
We created 3 hexagons, each one with a different colour; white, blue and pink and copy and pasted them to create a continuous flow of hexagons from the girl which we cut out in photoshop and added a blue/white effect on her so she could contrast with the silhouette of the boy in the background. We added a drop shadow to the silhouette to make him stand out and look realistic.
After doing a lot of research into digipaks for our genre and band we have created our first draft for our digipak. It is no where near finished and will have to have a lot done to it to make it perfect. We spent many hours on Indesign and Photoshop playing around to see what colours/shapes/fonts and images is appropriate for this genre.
please click to see clear image
We gave this into the teacher to see what feedback we got given to improve it;
- The background on the front page is good.
- Rainbows work well.
- The shapes work well on the front page.
- The tracks are good.
- The lower case of jordan is good.
- Similar backgrounds as the front cover on all panes but different colours.
- Own image to put on his face.
- Maybe put the girl on the right hand side horizontally with the rainbows bleeding onto the left hand side.
- Make more rainbows.
- Don’t forget to add onto the spine.
- “Reload” is too heavy.
- Call a track something to do with the lady so we understand why she’s in the digipak.