My Website Designs

To begin with I was stuck in what Iwanted to do for my website design, until when I was looking through some of my old work and I had noticed that I had previously created something that I would be using as my logo, and the basis of all of my designs for both the website and business cards.

As I said in the Business Card blog, I used the colour wheel logo that I had previously created.



Here is the background that I had created for my website, and as I have said previously I made the fade to white to draw the viewers attention to the contents.









Here is what my website will look like when I have the content, however I have changed a few things that are currently on this screen.

To begin with I moved the buttons from the left to lining up with the 'M' in Marie.

I then changed the bundle of images from a slight mess to an organised selection of images, I changed this due to quite a few comments that it made everything looked messy, and therefore when I made the change it made my website look more organised, like I am.

I also changed the text from wheat I have here to something that is more professional. And I made the text and the images be inline with each other to carry on with the organised feel of the website.

Each of the other pages had the similar layout, with the images and links on the left and writing on the right. I did not want to add loads of writing on my website as that might turn some people off, instead I want my work to speak for itself. Within all of the pages I will have the copyright symbol with my name next to it, and then a link which will say 'contact me', this will then open a new window where an email page will show up, with my email in the receiver, this means people will be able to contact me, without me having to display my contact details.

On the Print page I will have snippets of each of my different print pieces and then as the viewer clicks on them a lightbox will appear over the screen with the full version of the piece, and using 2 buttons 'next' and 'previous' the viewer will be able to click between each of the pieces without having to go out of the lightbox. The way I will achieve this is by looking up about lightboxes, and what kind of coding I will need whether it be HTML, CSS, Javascript, or all of them. After doing some research I found this website which helped me find and use the code I needed. http://www.huddletogether.com/projects/lightbox/

On the Motion page I will have a similar set up to the Print page, also I want to have the lightbox for my videos, I know that would take some different coding in comparison to the image lightbox, but I will research into what I will have to do do make it happen.
After doing some research I found this website which helped me code everything I needed. http://videolightbox.com/

Lastly on my CV page I will have an image of my CV on the left hand side, with a 'To Download Click Here' on the right, this means whoever was looking at my site, they would be able to download it with no problems.

My business Card

To begin with I was stuck in what I wanted to do for my website design, which meant I couldn't create my business card design until I had something to work with. That was until when I was looking through some of my old work and I had noticed that I had previously created something that I would be using as my logo, and the basis of all of my designs for both the website and business cards.

I began with sticking the logo in the top left hand corner, and using the colours I had previously placed within the logo I decided to extend the ones that are the lighter versions. I chose to use this logo for my website because as a designer I use the colour wheel to decide which colours I want to use and which colours I will use together, therefore I thought it would make sense that I use a colour wheel as part of my logo.

As shown here I extend the colours, but then I made the extended colours fade to white. I chose to do this because I thought having the colours fade out the viewers eye would follow and then see the content.

Here you can't see the fade as well as what you would see on the website, however, I wanted to make the card represent myself, and I feel that I am very colourful, and therefore my business card and website will be colourful. There was only one change that I made and that was the 'M' in the middle of the logo I changed it to a white 'mt' with a black outline.

Comments and Changes I have made

During my 'Crit' session with Mark, I had different comments about my work that I would have to change to meet what he wanted, for example the stylising of my animation, people said that it was too simple to work with the original artowrk that I had been given originally, therefore to make my animation more effective I would have to stylise my animation better, to have it better suited with the original artwork.

Here are the changes I made:

I changed the hedges from really simple 2-dimentional 'blobs' of green to semi-3-dimentional hedges that I had created using a photo of Glynde place where the festival was taking place. I felt that stylising my animation using a familiar place to the festival would give my animation a bit of depth.

The next change I made was to the hills and the grounds of the festival. Using an artist style I was able to make my hills look more stylised. I also cut out some of the flowers out from the original artwork logo, this is so I can place them all over the grounds and the hills. The flowers are to be used to stylise to animation as well as I will be using them for subliminal messaging.

I then changed the style of the tents, as I had been told that they were to simple for the animation. The way I changed them was to put shadows of them to make them more 3-dimentional.

The last change I had made was to the trees. To begin with I deleted the old tress to start fom scratch I then, using the same artist as before as a basis, I used different tools such as the pen tool, the eliptical tool and the paint brush tool.

After making all of these changes I found that my animation was stylised to how the client wanted it and therefore ended up being a more successful animation then what I had previously had made.

Mock-ups for mobile website

Here are the mock-ups that I had created for the mobile website.

I first had to decide what part of the site I wanted to create, and as one part of the site would be more popular, I decided on a section that no one else would think of, which was the Information Section. Which conequently is a very important part of the whole site.

I began by looking at the original colours and the sun beams, which gave me the ideas for the background, I used the sun strokes that had been created and extended them, as shown here.

I also had to make the logo as it is here, and to begin with there was a white background to it. To make the white background disappear I used photoshop to select the parts I wanted to delete, I used the magic wand tool to do this.

I also got the colours from the original artwork, this is so I can keep in tune with what the client would want.

Moreover, I wanted to make the mobile website as simple as possible mainly because this is supposed to be used on a mobile, and therefore if the site was complicated then it will load slower than if the site was simple. To make the site load faster I made it as simple as possibe.

How I made the Butterfly Animation

I had to begin with cutting out the butterfly from the original artwork that we had been given, this is so I can animate the butterfly away from the background.

The program I used was Photoshop, and the way I did it was to cut each of them out seperately, therefore I begin with one wing. I started with using the magic wand tool to select the right parts, I then transfered over so I was using the brush tool whilst the selected area was masked, this then allowed me to be very precise with what I was selecting.
The next step was to get out of the masked selection and have the normal selection, and when in the normal selection I then delete the background to just have the wing. The last thing I did was to make the artboard the same size as the wing.
I then repeated the same process with the other wing and the body as well, until I had each section saved seperately.

After cutting out the parts of the butterfly, I then imported them into Adobe After Effects where I would be able to manipulate them.
I first had to think about how I wanted to make the butterfly fly, and I couldn't really think of a good way, until I remembered I could use the puppet tool. The puppet tool, in After Effects, is where you can place tacs over parts of the wings or anything, and then you can manipulate the tacs that you want to, so I placed tacs all around both wing, and I made the outside ones move, as what a butterfly does.
However, doing that I found that my butterfly looked really weird and didn't look like a real butterfly at all, I therefore had to find another way to make my butterfly animate like a real butterfly.
I went onto the internet to see if there was any tutorials on how to animate a butterfly, and I found this link, which explained exactly how to animate a butterfly in the way that I originally wanted.
http://layersmagazine.com/animated-butterfly-in-after-effects.html

This technique showed me that I should used the 3D layer tool, which is situated in the layers section, I selected that for each of the layers of the butterfly, I then had the 2 wings be parented with the body. Parenting means that the objects that are being parented will do the same and the parent object, therefore if I move the body in any way the wings will move the same way as if they were each all together and not on 3 seperate layers.

After finding out how to make the wings flap like a normal butterfly I then had to make the butterfly move in the same way as a real butterfly, very twitchy and not in the same place for long. So using the position keyframes I made the butterfly move and twitch like a real butterfly would.

I then had to add the background and all of the different components that I would be having within my background. The way I created all of my different components was by using Illustrator. I had a look back into my sketchbook to see what designs I have come up with I then re-created them using illustrator, and due to the simplicity factor that I have always wanted to create it did not take me long to come up with the Illustrator designs.

The different components that I have to create are:

• Hedges


• Hills (front and back)


• Tents


• Signs (sandwich boards or billboards)


• Trees


• Sky (background)


• People (to populate the festival to make it look like it is buzzing)


• Stages (with lights, speakers etc)


• Performers

I then imported each of these components to After Effects, and I had to move each of them in different ways, to make it look like the butterfly was traveling through the hills towards the festival, and then traveling through the festival to see all of the different parts of the festival.

The way I achieved that was by using the keyframes for both the scale and the position sections of the layers. I had to move each part seperately, which made it quite difficult and time consuming, however when I finished I found that it looked really affective with the butterfly in place, and it made it look like the viewer was travelling around this 3 dimentional animated world with the butterfly and finding all of the different parts fo the festival and all of the wonders within it.
After creating this animation I felt very proud in what I had done, it was also a big learning curve into how long some things take to make, and how short some things take to make. For example I thought the animating the butterfly would take ages, and at first it did, until I found the easier way, which then became a very short period of time to make it.
The next learning curve I had found I made was that I should not stay with my first option and if something does not work then I should find an alternative. The part of this process I was talking about was making the butterfly animate and making it look like a real butterfly.

My pitch to Mark

For my pitch I composed an animatic of what my animation would look like and roughly how long it would be, using a storyboard that I had previously created, as well as having a very short mock-up of what the beginning of the animation would look like, this would then give Mark an indication of what I would be creating for him. And finally I created about 5 different mock-ups of the mobile website that they wanted us to create, and for my section I decided to do the Information that people would need.

Here are the examples of what I had shown within my pitch:

My Storyboards:






I created this as alternative to the butterfly, however, I did not feel that this idea was as strong as the butterfly idea, and therefore I did not proceed with making it.

This is to show an animated version of what the festival will look like as a whole from a different point of view, a butterfly's point of view.

This is hopefully to be placed at the end of all of the other Meadowlands promo videos, this is so there can be some continuity between each of the different styles of videos, this will also give us an oppotunity to show the different sponsers as Mark asked for.

From each of these storyboards I made an animatic to show the timings of the animations when they are complete, also to demonstrate what they would look like when placed with music.

Brief Mock-up of animation:

The comments I had got from everyone was that they liked the animating butterfly, and Mark thought that maybe I could make an animated butterfly for their website, I therefore had to figure out how to make the butterfly fly, and look fairly realistic.

Mock-ups of each page of mobile website:

This is what the website will look like when the phone is vertical:




















The comments I had for my website mock-ups were that they are a good design, however, the logo was too big, therefore I would have to make it smaller to make the website design work better.

Video and Music Research

Here are some videos that I have found that are able to give me ideas to what I would like to do for my videos.

I feel that each of these videos here are very helpful, because they are able to give me ideas into what works and what doesn't work to promote a music festival. Also these festivals attract people who are around a similar age to who Meadowlands would liek to attratc (Target audience)

Reading Festival:


Latitude Festival 2011:


Latitude Festival 2010:


Music:

For my videos I will be using music to help my storyies come to life, also it has to be copyright free, as it will be distributed, and I would not have had permission from the arists.
To do this I had 2 ideas, my first idea was to use copyright free music from the bands that will be performing at the festival, this is because I will be having animals or people hearing the music from the festival, and then going towards the festival where the music will get louder.
Secondly, I can get a few pieces of music from a copyright free website, that I could add in to my animatics for my pitch. The website I have found to do this is:
www.soundjay.com/free-music-2.html and the pieces of music I have chosen are:

Barn Beat and Destination. I chose these 2 because I felt that they fitted in nicely with what I was trying to convey.