Final Changes to website

On Monday, we listed out all of words that we felt were key representation of the artist's start image.

(cool, street, groovy, funky, chill)

The purpose of listing out these words was to make sure that the whole group were clear about the kind of image that we are trying to communicate. We could then work on our individual projects and have a clear idea about the kind of message that we wanted to communicate.

In all the lessons so far this week, we got on with out own individual tasks. This is for the deadline we have set for all of the products at the end of this week. I continued to work on the website trying to improve it the way I want to as well as taking into consideration the feedback that we got form the focus group. There were points that I thought could improve the website, but there were also points that I thought wouldn't. I filtered through these and used:

1) Changing the social section 

the focus group told me that the social section of the website wasn't super clear and to make them stand out more. I changed the colour of the box to a lighter pink so that the black of the icons would contrast more.

2) The glowing video at the top could fit more with the digipack, may change it to a picture of him

I took out this video and replaced it with on the continuous line drawings that were used on the digipack. 

I took the original picture of the drawing and used photoshop to make it more animated, change the colour and take out the background. This would make it fit into the websites aesthetic more.

Original

Edited

3) Some more pictures in the gallery

Before the focus group I wasn't happy with the gallery as I felt like it looked completely out of place so I decided to change the whole thing anyway. I took all the images off and re-edited them to fit more into the key representations of the star image that we had agreed on. I took inspiration out of ASAP Rocky's albums and covers so that it would fit the genre conventions of rap.

What I did was I took the photographs that we took originally from the photoshoot and used photoshop to colour them to look like these photographs and to fit into the aesthetic of the website. This is the first photo I came up with.

Focus group- feedback

franki zat focus group feedback- final from Victoria Bird on Vimeo.

Notes from focus group feedback

-Digipak

• Difficult to look at 
• confusing with colours 
• More contrast with colours
• Titles at back are too small- titles don't stand out
• Wacky techno vibe, Genre: Electronic, squares make it electronic 
• Name makes it german
• Something on the spine of the digipak
• It looks foreign 
• Album covers could be more linked to the other products

-Website

• Go well with the digipak 
• Website suggest rap?
• Make the social buttons stand out a bit more
• Easy usage, 
• More pictures in the gallery 

• the balls linked to the digipak
• Have picture of him 
• More content on the home page
• Social tab looks out of place- put them in a line

-Music video

• -Colour scheme is consistent 

Focus Group: 'Glowed Up' - DigiPak

Alen's photograph

Alen' s photo graphs

Focus Group: 'Glowed Up' - Website Screen recording

Focus Group: 'Glowed Up' - Video

Glowed Up for Focus Groups from Alen Guseynov on Vimeo.

What is a focus group?

By definition a focus group is 'a group of people assembled to participate in a discussion about a product before it is launched, or to provide feedback on a political campaign, television series, etc'

Focus groups:

• Are measured in Qualitative data-. This is data that includes opinions and feelings
• Used to refine the products. the feedback given may or may not be taken into account by the persons hosting the focus group about the product being reviewed.
• Require contributions who reflect the target audience. (Age/gender/occupation)
• Usually include 8-10 participants. This number ensure that it's a small enough group so that everyone has a chance to speak, but large enough so that people don't feel on the spot.
• Have questions prepared ahead of time
• Encourage all participants to speak
• Usually have a scribe or someone recording the session so that the group can look back upon the feedback once they have heard it.
• Also have a facilitator that ask people those questions. They make sure that they hear from everyone and politely redirect talkative people. This insures that the group get a wide perspective of their products.

In focus groups make sure you avoid:

• Closed Questions- yes or no answer. 
• Leading questions- value judgements, implying how good something is in a question.

Phil showed us this video to reinforce, what not to do in a focus group.

Website editing

This weekend, I spent a few hours working on the website. The different is not extremely noticeable, but I did complete quite a lot.

Firstly, I fixed the anchors (these are the names of the strips that change as you scroll through), I named them and assigned them to each section of the page. Scrolling through, there would be a slight delay and the text wouldn't change fast enough. It took my a while to figure out how to place the anchors so that it wouldn't delay, but also when you clicked them it would go to the correct section of the page. 

where I learnt how to enable the anchors 

I then worked my way through and changing colours and adding new strips. I used Mac Miller's website as inspiration of the kind of pages that I wanted to include. I tried to keep a repetitive colour scheme, matching up text, boxes, borders and images whilst keeping in the colours that we decided as a group. 

MAC MILLER's website

I experimented with parallax scrolling, but this did not work because we are using block colours as our backdrops for each strip. I used 'fade in' effect instead which I may change if I can.

To keep consistency, I added a 'fade in' effect to all of the text including the anchor. I experimented with the length of time and tried to find one that would fit which I applied to the individual text bars. 

I also felt like this effect was quite similar to how we had the balls glowing in the video. So it translated across products.

On Mac Miller's website, the main title is in a different font and not placed in the header, but in a different section. Tried to experiment by changing the font but it didn't seem to fit. So I ended up changing the effect. Now it glows as well as fades in, which is quite literal for the the theme of the video. 

Then for the social media section of the video I found each individual icon for the social media that I wanted to use. I sized them up and tried to blend them into the colour scheme. Unfortunately, it didn't match as the icons were too dark, so I put a box behind it so that it would appear. 

I wasn't able to find one for iTunes that matched the pattern of the others so I had to use the white one. Hopefully we can find one that matches later on. 

I also changed the sign up box to a nicer preset because the other one was a bit too comprehensive for the genre conventions of a rap artists website. It was more for a big corporation.  

I used icon8.com to find these icons and download them

Finally, this is what I came up with:

frankizat website-27/11/16 from Victoria Bird on Vimeo.

Some idea's that I have for the future of this website is to change some of the backgrounds to videos or images. For example, I could export the footage that we have of the balls glowing and add that to make it more visually appeal. But I do want to try to keep a consecutive pattern in colours as well as minimalism. I would have to try and see if I and the group like it.

Performance cut

This is the final performance cut that we made:

bird performance Recover 1 from Victoria Bird on Vimeo.

Finishing up performance cut and starting the rough cut

I was not here on the Wednesday lesson, the group whilst I was gone synced up all the footage that was fell out of sync and finished the last few seconds of the performance cut.
On Friday, I came into the edit suite during my free.

I duplicated the timeline and started to set up one that we were going to use for our rough edit of all the footage will all three elements in it. Because in the previous lesson we had issues with the sync, it took quite a while to fix because we had synced up all the other clips on a separate timeline. The issue was that when we tried to bring the synced up clips across to the "cut" timeline (which included our performance cut) they synced up clips would overlap that edit of the performance cut. Anna came in and we spend about half an hour trying to figure out how to get past this.

struggling 

Eventually we figured out that we had to move all of the clips that we had edited into the first and second video tracks.

(Anna's photo) All of the clips are scattered around the timeline and in different video tracks. To solve it we moved all the clips in to V1 and V2.

We then locked the tracks so that they would not be overridden when we brought in the synced up tracks.

(Taken off google)

Then we were able to have a full timeline to set up so that we could begin editing. By this time it was the lesson. And Alen and I continued to edit whilst Alec and Anna worked on the digipak and website. Between us we discussed how the edit should flow and specifically where we could bring in other elements and keep the cut interesting.

Anna's Computer - Website

Alen and I working on Hugo's dance sequence.

We decided that the first thing we wanted to bring in is Hugo slow motion dance sequence, to do this we had to go on Adobe After Effects and add and Echo to the footage. This as well took a while because if we exported the edited footage in normal speed out of After Effects and brought it into Premier Pro then changed the speed, the footage would then be laggy. So we had to add the echo and then slow it down in after effects, then export and convert the footage which we then were able to bring in Premier Pro. Learning about this issue took quite a while as when we encountered another issue. The echo time would would look shorter when the film was slowed down, unfortunately because of the limitation of after effects abilities we could not watch the slowed down footage until after rendering, exporting and converting. It meant we had to do a few trial and error test to try to figure out what settings we need the echo effect to be on for the effect to be obvious. We ran out of time for the lesson unfortunately because the whole process took so long and we had to do it 3/4 times.

rendering the second trial 

For next lesson we took a photograph of the settings that for the latest export that we did and we can estimate how much we want to increase it by. Then we can start editing Hugo's dance footage into our cut.

the echo time

Making the performance cut

Although I was assigned to do the website, we didn't like the first cut that we had made. So I decided to create my own performance cut which took about an hour and a half. I then found Anna and we worked on it together. This was on the Tuesday.

Then on the Wednesday morning during our lesson, we went over this as a group. We decided that we would use Anna and mine's cut to progress forward. We then spent the rest of the lesson trying to complete the cut with the group. Then Phil was talking about how important the sequence in which we cut the clips together and because of the slow and normal motion. We can use the effect of this to our advantage if we cut it to the feel of the track.


He also showed us a measurement of the digipak:

We did encounter issues with some of the footage going out of sync. Therefore Alen took over and started to sync everything back up again and we worked on the website.

Drawing up brief plans for our website

Anna and I planned and she drew these plans of what the website will look like.

happy and ready to start building

Looking at similar websites

Before we started creating our websites (which Anna and I were assigned to create) we found 8 websites that are similar to the ones we want to create. This way we'd have a rough template to follow and some visual aspects we'd like to include in our own.

The websites we found were:

Anderson Paak

From this we took that we wanted to use similar font and double up on lines and shadows.

Chance the Rapper

Although we didn't like the background for chance the rapper's, we liked how you could scroll through the whole website on one page.

Vic Mensa 

We didn't really like Vic Mensa's website. We thought it was a bit plan and we want to make ours more interesting and professional looking 

Craig David

We liked that the page was continuous, but we didn't like the colour scheme that he had chosen as well as the types of photographs and text. It does not fit with the genre convention.

Flume

Flume's website was cool, because of the video footage as the background, but it did not suit our style.

BADBADNOTGOOD

This website gave us inspiration for fonts and the minimalism. Although instead of having really small images and text they would be bigger.

THE INTERNET

We really liked this website, decide what we would keep this one in mind whilst designing ours, but not focus on in completely. 

Goldlink

this website was our favourite and we decided that we wanted to use this a tool of reference to help us through the process of making the website. We liked the continuos page, we like the colour scheme and the change of colours, but we especially liked the art work on the main page. We decided what we wanted to do something similar in the style of continuous line drawings. Perhaps an outline of Franek's face 

The website and digipak photoshoot

To add more content to our website and digipack we did a photoshoot with Franek. We booked out the photography studio and asked Evelyn to set up some lights and the camera. Alen then took over to shoot franek. Alec and I directed Franek as well as holding up the reflector on to Franek's face. Here are some photographs of the shoot. 

All photographs taken by Evelyn.

The products we got out of these photographs are going to be edited by me and Alen and then put on to the website when they are done. They may also be used by Alec on the digipack