Posted on

Evaluation of Web Design Application

Doing this task of creating a web page I have learnt a lot of skills and media terminology such as, the importance of above the fold and below the fold, a landing page which is where a link would take you to and the meaning a hero shot gives to an audience to gain their attention.

I can now use the correct terminology for areas I’ve been trying to explain in the past, for example, the menu choices at the top of the page with options to get to other pages is called a navigation bar, the terminology I now know make it quicker and easier to analyse work and know that people would understand what I am talking about.

With never using Wix.com I had a lot to learn making my website most successful it could be. Wix was not very complicated however if I got stuck on any aspects I would go onto YouTube for help.

Below I have added numerous different pages within my website, these would be the landing pages when an option was clicked from the navigation bar.

Next, I was able to add different elements such as ‘buttons’ this would take you to a different option when clicked on. I used this numerous times within the website as it was an element which the audience would find interesting to look for more. There were also options to create ‘strips’. I used this on the news page as I was able to get information on the page without making it big and long. Also I used the ‘interactive’ button as I was able to include sub slideshows within the page to give more information without having to scroll down to get to the information.

Additionally, I was able to add these 2 pop ups, which came up once clicked on the pages and reached the landing page, It was extra information that the audience had to read or see. We may include more of these such as the digipak as this advertises people to buy the digipack and they have to look at it with no choice.

I was able to add in the digipack and music video made on photoshop and premier pro into my website as people would’ve like to see them.

This website task has been very enjoyable and allowed us to be creative with making the projects as well as designing our merchandise, also I feel like my first draft has gone successfully and is beginning to look like a professional music website which I am personally pleased about.

Posted on

Web Page Draft One

Shown below is my first draft of my my webpage. We made a webapge to include our digipack inside of it. This is the product we have produced so far and got feedback from peers and teachers on how we can improve this to get a finalised product.

Click on image to get to the webpage.

I feel like this draft was rather successful, I feel like Wix.com was an easy site to use making our progress quick and effective. Using other tasks and our preparation towards making a webpage we have included many links to other pages within the site.

Giving our webapge to peers feedback we got back included :

Positive:

  • The background images are very effective
  • Clear layout
  • News page is clear, short and effective
  • Images on news page are relative and specific to a certain person
  • Store page is simple and the products are clearly shown with good reveals of the other side when hovered over
  • Clear social media links

Improvements :

  • Prices on all products shown on all pages
  • Stadium names on tour dates
  • Purple box on home page isn’t colour relevant
  • ‘Follow and Subscribe’ next to social media links on home page
  • Make the masthead Jordan bigger and better so its the first thing you look at
  • Make music video bigger
  • Make all mastheads on pages bigger or make them stand out more
  • Center the tour dates

Additionally to this we got feedback from our teacher this included:

  • Match the pink from the digi pack and use other colour palettes
  • The site is to promote the digi pack so need more of it featured on the front page and some in the news section about it.
  • More continuity with the font, could use the digipack font on the mastheads
  • Caption some of the images for the photo gallery or add explanation for the images as a short news story by it.
  • Link the albums to some music, or a listen now option
  • Social media links to their real social media sites
  • Make more made up news stories
  • Book now for the tickets – link to ticketmaster
  • About – needs to be higher up on the menu as it introduces Jordan – use the mission statement and embellish it with some more facts and stats about him
Posted on

Web Page Conventions

Using Screencastify we have created a script about the website of Florence and the Machine. We analysed it in far more detail using the correct terminology for a website. We analysed what was interesting and eye catching about it. We also chose Florence and the Machine to analyse as it is a similar genre to ours and we may be able to take some valuable points to how someone of the same genre will display organise their webpage to bring in the audience. When analysing a webpage, we have to think about AIDA; attraction, interest, desire and action so we are able to attract the right audience. We also have to think about the push and pull theory and the “Uses and Gratification” which are; Entertainment, Social Interaction, Personal Identity and Information and to use them throughout the webpage so more of the right audiences visits it.

The display of this website is far different as it is just one continuous page with little links to other pages and no navigation bar. However as you scroll it does make you stop and visit each site.

Here is Florence and the Machine webpage, click on it to get to the page.

click  on image to get to the main link

Posted on

Website Previous Students Work

Here is my previous students work which I have chosen to analyse

We have analysed a previous students work to give us an insight and ideas of how me and Immy can present our website to make it eye catching to the audience. This could allow us to learn the conventions towards the website. I believe this website can be classed under the category of Indie pop/pop, which relates well to our genre and will be the better one for me to analyse. This is due to the pastel like colours, as well as the main image (hero shot) as this has the colours blue as well as the pink inside of it.

The website XX is very accessible and easy to maneuver around as it has a clear navigation bar shown at the top of the page. Also scrolling down below the fold  you have the option of moving onto tour dates as well as media and upcoming shows.

You were able to scroll down to the about section where you are able to find out information about the whole band in general, but not an individual star of the band which this could of benefited from also could of benefited by having more information about the band to allow the audience to create a bigger picture. Next the presentation of this website is effective even though it could do with more. The font used for the masthead ‘XX’ is followed through with the first letter of the headings. This is effective as it keeps it consistent and allows the brand to be followed through without even being placed there. Additionally, in the Discover section there is a lot of branding within the album covers as the use of the X has been continued throughout it all.

The music webpage has an effective use of mise-en-scene creating a young and powerful atmosphere. This is mainly down by the colours and lighting of the page with bold images included. With the use of the long shot for the front of the music video on the front page which has been carefully edited with the use of colours. The cinematography of this genre is shown through the images  using mid shots which creates the audience to take in the emotion which the artist is letting off, however the only non mid shot is the hero shot which is a wide shot of a person. Finally the use of clothing is chosen carefully, there is a majoirty of dark clothing which allows the colour to be bold around an image this portrays a more youth look as this dark emo look is being taken away by the careful editing of the backgrounds.

Furthermore this webpage fulfills Blumler and Katz uses of gratification through the use of the ‘sign up’ at the bottom of the page as it is a contribution of personal identity.

 

 

 

Posted on

Flow Chart and Preffered Website Template

The template below shows a way of which we would like to design our webpage. Using flowchart we were able to lay it out in the way we believe will keep the audience engaged and interested.

We included important aspects such as hero shots and links which make a webpage flow much more effectively.

We made sure we included different pages which include different things. One of the more important pages is merchandise as this draws in the audience eye and makes it eye catching and engaging to them as they can feel a part of this. We plan to make this big and bold including many features.

After making this we are able to go onto Wix.com and begin to create a website using the templates provided.

We chose this template as it caught our eye with the indie like theme to it especially the pink like colour which flows well with our digipack. Additionally it was a clear and easy website to manouver and work with as it had a clear navigation bar and a clear place to put the masthead giving us a goof place to start.

Posted on

Website Terminology

Moving onto our next project after creating the digipak and music video, we are now creating a website. A website is a collection of publicly accessible, interlinked web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organisation to serve a variety or purpose.

Below I have analysed 2 website home pages whilst using the correct terminology and understand the technical conventions of a website.  I looked into male artists to see how they have set out their websites. This will help with my webpage as we want the main focus to be a male. I looked into how they have brought in their target audience, this was used by the conventions such as leader board as it is big and bold and is the main thing you see first on the page to give you an understanding. Another effective aspect to the website is a hero shot as people can notice who the person is before they read the page. Another important aspect is the navigation bar; this allows people to move around the page easily and look at more about the artist or band.

This was an effective task as it made me take note what was important to include in the webpage. Allowing me to know what needs to be include in the webpage to draw in the audience.

Posted on

Digipack Draft 2

Below is my second draft of my digi pack. Productively making many improvements from the first draft to make all of the pages flow from one to the other.

Using the same idea with the background I have gone back to photoshop blending in different colours to find one that we like. I used the colours made by the shapes on the front page of the digipack.

Below the front page, we have not changed it too much. I have added a new background and made the image of jordan larger as well as making the shapes larger as this fills up the page more making it more bold and effective. Additionally I changed the font and made the ‘O’ bold and full just to make the word unique and clear.

Next the inside right. Here we have changed it loads from the first draft. Due to the first one didnt coincide with the theme effectivly. However, here we have used an image we took of Jordan as well as Immy and layered them and making a silhouette of hexagons which I have made on the inside right page to bring the pages together.
 

We kept this page simple as we have got alot going on the other pages therefore I just used the same colours and made hexagons whilst making them transparent as well to create a glow sort of look.

Finally the back page. We again used the background with different ways of presenting it, but we have blurred this one more as immy has painted a drum kit using pastel like colours which we have placed on to the back. This displays our band as we don’t have an image illustrating all of them.

Additionally we needed to add the copy write paragraph as well as barcode. We also created the sides keeping the same colours but a gradient effect added to it.

We then asked 3 peers for feedback on our digipack and these were our results:

Peer 1 

  • Good use of colour scheme, on the lines of the genre
  • Colours are complementary
  • Right amount of images and illustrations
  • Clear readable fonts

* Jordan could have an outline or larger to make him stand out more

* Add white into drum kit

Peer 2

  • The positioning of the girl following the silhouette works well
  • Good amount of tracks, also displayed clearly

* Less colours in the drum kit as clashes with background

* Dull down the shapes on the front page as they’re bold compared to the low opacity image

Peer 3 

  • Nice use of colours on the drum kit as it follows the colour pallet nicely
  • Pastel hexagons work very well with the theme

* Adjust the gradient on shapes so light comes from same place

 

After the feedback from peers and teachers the main areas we will focus on adjusting are :

  1.  Front cover shapes are too bold
  2.  Make the drum kit more separated from background

 

Posted on

Digipack Draft 1

Below is the first draft of our digipack. I played around on photoshop to get different backgrounds. I did this by using the paint brushes and then stamping them together finishing it off with blurring them together. This was a plain simple back ground which was effective for our shoot.

With the front page I have mostly finished it we just need to play around with trying to make it bigger as I personally find it slightly to small and needs to cover more of the page. Additionally we need to change the font or positioning or Reload as it needs to be

Next the inside two pages. We have used the background technique on these two images, where we have also used the dress on the right hand side. We have a vision on this girl holding a rainbow of some sort or slightly different.

Finally the back page we have used the same types of colours to the other pages so that it flows efficiently. Additionally we have kept our font of our song titles simple as we  want it to be clear and readable.

Below is our teachers feedback done by a screencastify:

Want went well :

  • The background and how it has been done
  • Nice sizing of image
  • Like the way we have placed the different songs
  • Drum kit idea
  • Lower case of jordan

 

Improvement

:

  • Change colours of backgrounds and use it on all the pages using a colour pallets
  • Change image as it isn’t ours at the moment  (maybe no need fro the inner image )
  • Add more rainbows making them bleed accross into insdie panel
  • Fill more of the space
  • Consider a different background to go around the drum kit
  • look at fonts of Reload and jordan

 

Posted on

Evaluation of Shoot

We did a total of 3 shoots towards my digi pack and webpage. We used the white room for two shoots as we were able to gain shots of Jordan and some of Immy in her point shoes and some without.  We also went on a shoot just to get images of Guernsey. We based ourselves at Cobo, where we also went up the guet to get some images which we would be able to use and photoshop to our own style. We got these as our website requires alot of images and we wanted to make sure that we had enough to cover it all.

Below is an image we gained of immy using the white room where it was successful and we can use it effectively in our digipack.

Below is when we went to the guet to get more images for our digi pack we got more scenic images and some images of immy. This shoot was also effective as we got a lot of images.

 

 

Posted on

Production Skills

Within making this digipack I have learnt many more new productions skills to help get my product to the place I want it to be.

Firstly, our vision for the digipack was to have Jordan with something coming out of his eyes as well as something where his face would be. To try and work it out myself I began by looking on YouTube here I found the video shown below. This video was more advanced and here I did learn a lot however I also gained help from an old A level student who has used these programs before. This effect has a positive impact on my indie pop genre as it has the edgy urban look but still has the typical pop close up shot.

With this help we created this as a trial image, we did it on a front facing close up as this was an easy image to learn on however we will instead change it to a side image if possible. We would like to be able to put this into our digipak as we feel the sunset blended into our star image’s face will help convey our genre more due to the use of colours and location.

This image was effective and different and will be used in my digipak or website.

Additionally I have learnt how to over lay the circles while adding a gradient to it to make it more faded in. This was effective as it made shapes not to be so sharp and bold on the page and allows them to fade in more. We chose the baby pink circles up against the blue background as the colours contrasts really well together but also representing the indie pop style.

Finally using Photoshop and indesign we managed to change the photo of our star image to be a silhouette so the girl which we have brightened can contrast and stand out more on top. Also by layering the images on top of one another to make it more effective. We wanted to add colour to this page as it looked a bit plain, so we decided to add the hexagons which is on the opposite page to this page, we made them coming out of the girls hand and made them go small to big as they went onto the next page. This was efficient as it made the two inside pages flow into one another easier.