Research: Websites-learning

Me and Sofia looked at different ways we can make a website for our band, by looking at free website 'creation' sites that will be easy to use to make the basic 5 pages of our website.

1.) This website is called Moonfruit, it is a popular website that is used by many businesses to publish website for their company, as you can see, Sofia made a account to access the design layout to have a look.

This is the layout that would be used to make the home page.

This is another website that we went on to see the layout format. As you can see the home page has got an image going across this is where you could have the bands image.

This website is called 'Wix'. As you can see we are given the option to choose a layout of our choice to customise. The first box looks quite appealing as it has the general layout that we wanted for our website such as were the navigation bar is going to go.

Yola, was the last website we looked at. It had quite a contemporary  design that we could use. The only issue was that we wanted a full sized image of the band rather than one that is small next to the bands name. At the bottom it seemed to have a very similar layout to 'Rebecca Ferguson's' website which was that you could enter news feed etc at the boxes below.

After looking at the possible website templates me and Sofia decided that it would be a good idea to use 'Wix'. The reason why I chose this website is because it was easy to use and had clear templates that you could customise for each page, as well as little animation pictures you could add to the side as part of the 'design.' 

Construction of magazine advertisment

(Click to enlarge each print screen)
Starting of the magazine advertisement
To edit the picture me and Sofia wanted to use for the magazine advertisement we started of by using a picture editing sight called 'Pic Monkey'.

Here I have uploaded the picture and used the editing techniques as followed:

• Brightness and Saturation-slightly
• Cross process to give a 'orangy' glow and make the Autumn leaves stand out
• Boost was used with a medium sized brush to highlight what they are wearing and hair colour so it pops.
• I cropped some of the images from the side on the left hand size because I didn't want to leave that much space behind them were you could see the building
• I used dark edges in a deep orange/brown to add a 3D effect and have a focal point on the band only.

 InDesign

 Me and Sofia were originally thinking of using InDesign for constructing a music magazine. We realised that using Photoshop instead would give us more options of 'creativity'. We chose Photoshop also because we were more used to creating projects on there and familiar with the tools.Whereas on InDesign there was some complication with the 'size' of the image which meant that we couldn't edit. It would have been nice to experiment on a different construction sight except for Photoshop to show are versatility in design.

We started the task

  by first making a background copy and a few new layers in A4 paper size on Photoshop.

The background colour that we used is a mustered yellow/orange. As you can see from the draft and questionnaire we think it will be a good idea to use 'earthy colours' as suggested.

The next step was creating a 'new layer' (Layer 1). We opened up the image and had to cut and paste it on to the background layer (which has been duplicated). If we wanted to edit the size and where it should be placed, we pressed 'transform' to bring it to the middle.

We then wanted to add a border at the bottom and top of the image. We clicked on the 'shapes' button on the side which came up with a 'rectangular' shape (Layer 3). We then had to 'right hand' click on the layer to get 'layer style' where we used a bevel effect to the frames. We then looked at the colour scheme, me and Sofia thought that a gold colour would compliment the Autumn leaves and make the picture look more 'grand'.

To get the same effect we duplicated the layer.

Then dragged it to the top. Already you can see that it looks more like my first draft of the magazine advert.

Me and Sofia thought it would be a good idea try and experiment with different design techniques to see if we could add other effects. We clicked on the 'paint brush' option which gave us 'stamp' options that looked like leaves.

Sofia suggested it would be a good idea to use this effect but in the in a darker colour the same colour as Alice's jeans. Here you can see I tried to use the tool to create a 'leaf' effect as it looks like it is falling.

After some consolidation we thought that maybe we should put on the title of the band and other texts before putting any other design features.

Here me and Sofia were looking at different fonts for the title of our magazine advertisement. Here we have tried a font called Palatino Linotype which is quite 'elegant' going with our audience's choice on what font to choose.

Here we are trying to see how different fonts would look with the format of the magazine advertisement. 

After some audience feedback on what we had constructed so far of the magazine advertisement, me and Sofia decided to change the background colour of the background. The audience said that he positives of the old background were that it went with the 'theme' of nature, but it looked slightly 'plain' and 'bland'. This is why I suggested that we used a 'gradient overy' on the background layer. The colours that we looked at were browns and whites to go with the 'earthy' theme still. After we had decided on the gradient pattern, we had to drag it across the page to get the right shade. This was done numerous times so that we got a effect that went from dark to light but also had some white peeping out.

Here you can see a number of changes already to our magazine advertisement. First of all the background gradient is in the right pattern and goes gradually from dark to light then back to very dark shade of brown. The reason why we left the background like this is because the colour effect made it seem more 'professional'  and darker colours such as 'brown' would more likely to be associated with Soul/RnB music. We also changed the borders on the page to a similar colour as the background, as some of our audience feed back from students suggested that the gold now looked 'odd' with the brown background and that 'attention went on the borders rather than the picture for the wrong reasons.' Sofia suggested that we tried a new font as we mutually decided to go against the 'convention' of having elegant writing just for Soul/RnB music, we still wanted the 'elegant' feel to the title but something 'different' and 'quirky' that went with their image and personalities, we didn't want to be too stereotypical therefore we went for this font (above). About 5 members from some audience feedback suggested that we try this font because it looked slightly 'retro' whereas the other looked 'too classical'.

We changed the font colour to black to experiment as black often goes with everything.

Here we used a slight effect on this layer by right hand clicking on the layer (the font) to create a 'under shadow'. But we realised it didn't make the font look that different, not the way we wanted anyway. 

We then right hand clicked again on the font layer and looked for the bevel effect. We quite liked the way the righting matched with the borders of the picture and made it look a little '3D'.

While looking at the 'bevel effect on the title layer, we then clicked on 'gradient' again and then 'blend mode' and scrolled down the list till we found 'overlay' this effect instantly created mixture of colour change within the text gradually. It was quite a clever way to show how the writing starts of with a dark colour then becomes lighter. We felt it still went with the theme.

Me and Sofia were contemplating what way we should present the information of the magazine advertisement. We then referred back to our first drafts once again were we used 'rectangular shapes' to look like 'strips' to present the information. I got this idea originally after looking at one of Madonna's magazine advertisement on one of her albums. The strips at the bottom gave a nice effect and I felt it was a 'simple' but effective way of presenting the idea. To do this on Photoshop, we had to create a 2 new layers and use the 'rectangular shape' equipment and draw it on to the background layer (which has been duplicated). Then we chose the colour, we wanted a 'creamy' colour from the start to make it look like 'coffe paper' in a way and also because browns and creams work well together. We then right hand clicked on each of the layers and clicked on 'shadows' this gave it a more 3D effect and was much like Madonna's magazine advertisement. We wanted one layer to be shorter than the other to look more like a 'notes' effect.

Here you can see we created a third layer which is smaller and also changed the angles of the shapes (by clicking on transform) again to give it that 'notes paper' effect. We are hoping to use writing in each of the boxes.

After some audience feedback of 4 people including a teacher they said that the font 'blendid' in too much with the background although it was a good effect. They suggested that we changed the colour of the font to make it 'stand out more'. Taking their feedback on board, me and Sofia started looking at different colours that would go with the theme. Sofia stated that 'black' would look good and it's a very basic colour. I thought that we should try and use a colour that matched with what is on the picture, this is why we chose a deep purple. It's still a dark colour but you would be able to link Soul/RnB with the colour.

Here you can see that we have started to add text to the boxes below. We clicked on transform to make the text fit with the boxes.

After looking at a few fonts we decided that we would go for a simple looking font a bit like Times New Roman, we didn't want everything to match like the title otherwise it will be 'unconvetional.' The text was the date of the album would be realised, it is important to make sure that it was bold.

Adding another text layer we changed the font size again to fit the smaller box.

For the last text layer we made sure the text font was bigger and bold.

This print screen is showing how we are adding the record label in the top left hand corner so that the attention is still on the main picture and text.

After some audience feedback of our final product, it was suggested that we change the colour of 'album' and the name of the album cover 'Unified Visions' so that the audience can link that Unified Visions is the name of the album. We changed it to the colour purple because it was closest to the title colour so it nicely links.

Planning of ancillary tasks: Draft of magazine advertisment and website

Click to enlarge the drafts
This is my first draft of the magazine advertisement showing how I am are considering the layout, Sofia has a different draft then me but hopefully we can combine our ideas to suite the magazine advertisement.

The writing on the top is as the audience suggested 'elegant swirly' on the top of the magazine advertisement. The picture is supposed to be a mid shot, with the  information about the album on the bottom of the magazine advert. The audience also suggested that the there should be 'more focus' on the main picture to make it more effective. That means that the background is going to be earthy colours to go with the theme of the website and what the audience wanted again. In general the layout is quite similar to one of the magazine adverts that I did a analysis of, which is the Madonna one. I quite liked the way the grey boxes at the bottom  looked like magazine strips selling her album so I was thinking of following this style which would look effective when presenting little information. Other conventions include the record label name on the top left corner of the page.

This is the Madonna magazine advertisement that I thought would look good if we followed similar layout and conventions for our own magazine advertisement.

Website draft-

Home page and Biography

Note: I have split the pages into two sections

The home page is going to have the normal conventions you expect to see on a website such as the main image of the 'album cover' and the navigation bar on top of the page with each of the pages. The background colour for each of the pages should be consistent and go with the magazine advertisement. The colour scheme is browns, orange and gold-ish colours. The biography is quite basic, it will have a picture of the band and and another box containing information about each of them. You have to click on each of the names to see each of the biography.

Gallery and Video

The gallery will have a basic box with arrows to indicate 'next' and 'previous'. The designs next to the side will be quite basic with a few rose designs to go with the 'nature' aspect.

The video page will show are finished video as well as the title. On the side will be be information about the record label etc.

Tour dates and Contact

The Tour dates page is also going to have a image of the band on the side with another box saying what days the band are preforming in the UK such as the O2 in London. The contact information for fans to tweet and Facebook about the band is also available, they can post any 'peronal messages' which the band can read.

Planning ancillary tasks: Photos to use and not use for both ancillary tasks

We took photos for our ancillary tasks on a different day from the filming. We thought that the schools 'quad' would be a good place to take the pictures as it had a perfect natural setting with the autumn  leaves and the treed in the background. We told our models (the day before) to bring in the clothing style which was quite 'Soul/RnB' like dark colours, a leather jacket to add 'edginess' etc.
Possible photos to use for magazine advertisement

1.) This photo is a mid shot of the band. I think that this photo is quite useful in showing a natural expression of all three members of the band as they have a 'laugh'. As you can see the picture will have to be coped slightly because you can see the bin in the background which makes the photo look 'tacky'. We will have to use photo editing to make sure we darken the edges, not just for this picture but for the rest.

2.) This picture is a mid shot again, showing how the leaves are falling on the band. The reason why I chose this picture is because it looks as if the band are posing for a photo shoot and looks as if they are day dreaming. I have learnt that not every magazine advertisement has to have the artist making eye contact. The only thing that would let the picture down is the fact that you can see a window in the background.

3.) This is a long shot of of the band. I think the tree behind them and the autumn leaves gives it a 'warm' effect, but the building in the background will have to be cropped out or darkened in the background so most of the attention is on the band. I will have to make sure I brighten the picture. The facial expressions on the two of the band members are smiling whereas, the other band member (Alice-right) is pulling a funny face. I think this is a good way to show their personality as 'fun'.

4.) This is one of my favorite shots. I think that this picture will be an effective magazine advert because of the unusual shot angle. It is a mid shot at a low angle because of the band members pose. The colour contrast within the band members (dark colours) works well with the Soul and RnB music as well as contrasting with the autumn leaves. The shot angle means that you cannot see the building in the background too much. A nice contrast with colours to make their outfit colours and hair colour stand out would be a nice effect.

5.) This image is quite similar to image 4, the thing that is different about it is that Jess (far left) is looking as if she wants to say something. I think it look quite effective because it gives a good effect which works quite naturally with the other band members.

Possible photos to use for the website

1.) I have chosen this image to be featured on the website as part of the 'gallery' or on the side of another page. I think this picture along with picture number 2, 3, 4 and 7 (bottom) look one of which taken as part of a photo shoot of their new album, so the fans would be interested in what happened 'backstage' of the video and shoot. We would like to add an effect to some of the pictures but only slightly because we want it to look natural. We will crop out the unnecessary items in the background such as the 'bin' and try and crop out as much as we can of the building.

2.)

3.)

4.) This long shot of the band should have a effect such as 'sophia' because it would look more authentic. The reason an effect would look good on this image is because it already looks dark so we could just emphasis the 'nature' look and make it look more different to the rest of the pictures.

5.) We have chosen this picture again as one that could possibly go on the front of the home page because we wanted the audience to recognize the album image with the web page, to advertise current news of the alum coming out. This would be much like Emeli Sande's website were the first page changes according to the latest song releases (the picture is of her new album). An effect that we could possibly use for this picture is make the contrast more sharp so the leaves in the background stand out as well as Alices's (right) trousers, hair colour stands out. We could also use a 'focal effect' to make sure that the background is slightly blurry from the rest so it makes the band look more 3D.

6.) 

7.)

8.) This is a close up picture of Genelle (lead singer) as you can see she is pulling smiley pose which sort of looks as if she is day dreaming. We are thinking of using close up photos such as this one and number 9 (below) as part of the gallery which would connote that Genelle is in a photo shoot because of  the white background. Image number 9, gives a more retro effect as it seems she is looking 'at someone' from the side;   Much like The Beatles picture at number 10. This means that we will have to take close up individual pictures of the rest of the band mates so it seems like there looking at the camera and to each other. This will probably go on the 'gallery' on the web page.

9.)

10.) 

Photos not to use

 

1.)

2.)

3.)

Pictures 1, 2 and 3 cannot be used in our ancillary tasks because they're blurry especially 2 and 3 when the leaves are falling. The other problem with these pictures is that one of the band members in each of the pictures aren't making eye contact quite distinctively which doesn't look natural.

We have decided to use one photo for the magazine advertisement as it will be more effective. After some audience feedback of 5 people, we have decided to go with picture number 5 as the magazine advertisement and the home page on website. Most of the audience, to sum up, said that this picture was were 'the money was being made.' Others said that the layout of Genelle being in the middle and Alice and Jess being on the side was 'effective.' This was what we were aiming to do, as most representations of Soul/RnB/Jazz singers are 'black' but by using 'white' band members it creates a 'nice' contrast and diversity.

Editing individual photos for the website gallery 

Sofia did the actual editing on these two photos of Jess and Alice (below) while I gave her tips on what effects would look good. In reverse I edited the magazine advertisement photo while Sofia told me what effects would look good. (Magazine advertisement photo editing is on the 'construction of magazine advertisement post). 

We started of by uploading the pictures onto Pic Monkey. (Click to enlarge all photos)

Process of editing

• •  We decided to crop this image as the image was too wide and the white curtain makes the image look unprofessional.
  •  Then we added the Daguerreotype effect as it gives a retro feel towards the picture and makes the image look less pix elated.
  • We also added a mascara to the model as we wanted her eyes to be the main focus of the image.
    
    

Process of editing:

• We first cropped the image as the original picture was too wide
• We then added the Daguerreotype effect by clicking on the effects button which got rid of some the white patches on the curtains. We thought this effect was also good as the black and white effect gives the image retro feel.
• We then added a mascara as the models make up did not show up much as the Daguerreotype effect made he make up blend in with the image.
  
  
  Individual concert photos that we will not use
  
  
  
  19.) The reason that we have decided not to use this photo is because it seems a bit random where the instrument is placed although it is humorous. The shot is a mid shot which is a good effect.
  
  
  
  20.) This is also a mid shot of Alice, but as you can see the image is blurry and so it would look unprofessional. 
  
  
  
  21.) Here is mid shot of Jess, it is quite a natural looking shot but I think the fact that she looks so serious and is looking down makes it unnoticeable and ineffective.  
  
  
  
  22.) This is a long shot showing Jess playing the keyboard. The problem with this shot is that you can see that in the background the curtains in the hall are in the way and makes the image look 'messy'. There is also a problem with the quality of the image as it is quite blurry and it is unclear whether Jess is making eye contact or not. You can also see one of the band members is the background which doesn't have a good effect.
  
  
  
  23.) This is a mid shot of the lead singer Genelle. As you can see it is good that she is making eye contact but there is too much of the background in the image, we could crop it out but it will mean the image size would be too slim for the website gallery and her hand may get cropped out.
  
  
  Band performance photos we will not use
  
  
  
  24.)
  
  
  
  25.)
  
  
  
  26.)
  
  
  All three of these images are a long shot which is good as it shows the band as a 'whole' and you are aware of what band member plays what instrument in the band. 
  Unfortunately, we are unable to use any of these performance based pictures of the band because as you can see most of them are 'blurry' which means it will look unprofessional on the website gallery. 
  In image 24, you can see that two of the band members (Jess and Alice) look unready, in image 25, non of the band members are making eye contact. Lastly, image 26 is quite clear in showing the 'formation' of the band as it is in a 'triangular' shape but again on the left and right hand side band members (Jess and Alice) are closing their eyes.