screenshots

Here are some screenshots of the site;

The Xbox department:


A Game's Page:


The Euro Homepage:

mock-up for a games page

This is a mock-up I made for the products to be displayed on, it features a trailer, description and a series of screenshots for the product:

w3schools

During the creation of the site, sometimes I get stuck when trying to make something happen on the page, fortunately there's a website called W3Schools which offers an extensive amount of tutorials, ranging from HTML to CSS to PHP. Their tutorials have helped me on numerous occasions, so I thoroughly recommend them to anyone who is stuck whilst coding.

site mock-ups

I have created some mock-ups for the site, my favourite is number 3, so I will be designing the site to that template.

development - site layout

I have created an ideal layout for the site, this is where I will place certain aspects of the website. Now I will create some graphic mock-ups to this layout.

research: existing site layouts

All the sites have navigation underneath the title bar, with all but two, including ShopTo, having secondary navigation down the left hand side.

ShopTo is also very heavy with its promotions, running down both sides of the page. Most of the other sites only have 1 side of promotions, or they are placed above the main content in the center of the page.

Only ShopTo and Zavvi have promotional background images, these are a good promotional tool, but add extra page file size, and as the images are clickable links they can be frustrating if the user accidentally clicks on the image.

ShopTo

research: existing site layouts 2

HMV


LoveFilm


Play


TheHut


Zavvi

research: existing site layouts 1

I have been looking at existing websites, and have taken note of the layouts used in each of them.

Amazon


eBuyer


Game


Gameplay


Gamestation

research: existing websites

Online shops like ShopTo are very popular in the modern day, as the ease and quickness of purchasing online is often more appealing to a gamer than visiting a store in town. Because of this, I feel it is important to take note of these sites and see what they do similarly and differently to ShopTo, which can help influence what to include in my redesign.

Amazon

Play.com

eBuyer

theHut

Zavvi

LoveFilm

GamePlay

Game

GameStation

HMV

independent project

For this project we have been tasked with creating some work for a client of our choice. We get to choose all the aspects of the project, and focus the work on an aspect of digital media of which we want to further ourselves in.

My idea is to re-brand a current website. The site I have chosen is ShopTo, an e-commerce site which sells video games and peripherals. The site is popular amongst gamers in the UK as it offers cheap products with free 1st class delivery, however, the site looks a bit amateur, with lots of flashing gifs running down the sides of the page with no real organization. The main page, especially, is very long and has too much content for a homepage, the user has to scroll all the way to the bottom of the page to find contact information.

The graphics used, although not too bad, also don't look too savvy, something which many websites have presently. The way in which I would redesign this page would be to condense content visible on the screen, and make the entire page more streamlined and look more professional.

the music

In my piece all the pedestrians are wearing MP3 players, and to get this point across I have found some royalty-free music from the site Incomputech, after Guy's recommendation.

I have used the track Monster Promenade in my piece

work in progress

The deadline is on Thursday and there's still plenty to be done! I have finished creating all the graphics, and people walking animations, now I just need to piece it all together and hope for the best.......

sound

To create an authentic high-street I sought after some sound effects to give added realism, and found this site, this site, this site and this site which give free sound effects. I have used some of the sounds from there, as they are suited to what I needed.

making a squiggly line

Giles showed me a technique in After Effects on how to make a line have the squiggly look. Using pre-comps and expressions you can achieve this.

First I made duplicates of each buildings and made alternate ones. Then I loaded these into After Effects and made a composition for each building. I set the length of these compositions to 18 frames, and at 9 frames I made one version of the building end and the alternate version start, giving a distorting look.

I then placed this pre-comp into my composition and enabled 'time mapping', then, by alt+clicking on the stopwatch for the time=mapping effect it enables 'expressions'. I chose the loop-out expressions which just constantly replays the pre-comp to give the drawing effect at a lot less effort!

slight change to the idea

After discussing my idea with the tutors it has been decided that instead of focusing on the driver, I will instead focus on the pedestrians walking down the grungy street. They will all be wearing youngish clothes and have MP3 players to truly stereotype to the younger generation. One of these pedestrians will have the thought bubble, the thought of walking down a nicer street with less pollution, and will witness someone re charging their car when they exit their thought, which will give them happiness.

roobarb and custard

I showed Andrew my idea, and he suggested a few things I can do to them.

One of them was to include a de-saturated sphere covering most of the visuals, except for where the action is happening. This will give it a stylish look, and will draw extra attention to the areas which need it most.

His other suggestion was to create it in the style of the Roobarb and Custard show, hand-drawn images, with squiggly animation, and uses selective colours. It's a very appealing aesthetic and cartoons are synonymous with people's childhood, which will attract the attention of people in the 'generation y' age bracket.

look n feel

I have created a mock-up of what the high-street will look like in Illustrator. I quite like the look of this, the gradients give the images that extra edge to them.

idea

I have come up with an idea for the E-On brief. After spending so long trying to promote ALL the future tech E-On offers it was suggested that I focus on just one aspect of it.

The idea is to have someone driving in a shoddy, polluting car down a busy high street, where they run out of petrol in their car, as the needle hits the bottom of the meter money escaped from the driver as they have a glum look on their face. Then they have a thought bubble and the camera zooms in on it.

In this thought they are driving a clean electric car, in a high street which is rid of dirty petroleum cars. The events mirror themselves and the electric car runs out of juices, as it does this the car pulls up outside the drivers house and they recharge the car using a charge station.

Sounds of loud car horns breaks up the thought as the driver looks in their mirror to see an angry van man stuck behind them stationary in the road, the car then drives off.

some inspiration

I've been looking at existing videos on the web to help with some potential ideas and I've found a few which were particularly good.

Orange - Blackout


This advert by Orange is quite ironic in that it tells the customers to turn off their phones, but the message is that when the blackouts in New York occurred people still managed to get by without power, and have a good time too. It's a very inspiring piece which promotes humans ability to adapt to most circumstances.

Dirk Greenhouse


I quite like the style and insanity of this animation series, however, as was pointed out by the tutors, it has been done a lot, with a faux pas 'superhero' saving loads of money by turning off a dripping tap.

Coalition of the Willing

Coalition Of The Willing from coalitionfilm on Vimeo.

This video was suggested by Giles as it features a collaboration of lots of animators who are advertising the message in the video. I particularly like the style at 2:05, it's very charming and captures a 'vision' of the future really well, with its use of shiny gradients on the elements.

a few ideas

I've been having a lot of ideas on what to do for this project, but the ideas haven't produced results. I'm still thinking of ideas for both E-On and ArjoWiggins, although I think I will focus on the E-On one from now on.

E-On

I'm leaning towards doing an animation, as I don't feel comfortable enough/have a strong enough idea for a really successful filmed piece.

I've had various ideas for this brief which entail...

- An animation based in a 3D town. The camera would follow someone driving through town in their electric car to their house, where the camera would then revolve around the house showing off all the energy-wise installations that E-On offer. I started creating a brief mock-up of part of it which I uploaded to YouTube (excuse the music, it was added for dramatic effect...)

- A nice video promoting the electric car, with all the visuals made from everyday material which is then animated. Giles suggested this video for inspiration.

- A spoof 1950's vision of the future in reverse. It would be of a future society looking at our current-day planet compared to their super-tec planet set in the future, mocking the error of our ways in using and abusing unsustainable energy and energy consumption.

- Recreate a Mario/Sonic hybrid game, where the player literally 'saves' energy from the clutches of energy hungry enemies (such as washing machines and tv's, with the main boss being a large energy bill). It wouldn't be an actual game just a video of it, as I would have no idea how to do something like that!

My few ideas for the ArjoWiggins briefs were...

- A recreation of iconic images made entirely out of ArjoWiggins paper.The video would show the person creating an unknown piece, then at the end of the video it would all come together and resemble a famous image set in a stage, such as ET flying the bike



- Another idea I had was for someone to create a person made from the paper, then when they leave the room the paper-person comes to life (through animation) and interacts with objects in the room.

disney brief

I was thinking of choosing the Disney brief, as animation is a favourite of mine, but after discussions with the tutors it's probably best I steer clear, as I have no previous experience in character development and the probable extensive theory and connotative work that needs to go into the development of the character.

choosing a brief

I have been looking at the briefs and the ones that are taking my interest are the Disney, E-On and ArjoWiggins briefs.

The Disney brief requires you to create a lead character for an animated series.

E-On want a piece that promotes energy saving to a young generation.

ArjoWiggins want a piece that links their paper with the creative process.

I will look at the briefs in more detail and decide which one to go with.

new project: d&ad

We have begun a new project, which is to produce one of the D&AD Student briefs and submit it for the competition. A list of the briefs are on the D&AD website.

I will look over the briefs and select one I like the look of.

processing video

the code

Here is a download link for my code, and the images with it: http://www.sendspace.com/file/dtvrw5

visualisation

Here's a little visualization I knocked up depicting what the sketch would look like in real life.

deciphering the code

As my code is very much finished I thought I'd post some of it up and explain what certain bits do.

void setup()
{
frameRate (30);
shoe = loadImage("shoe.png");
size(640, 480, OPENGL);
int counter =0;

hint(ENABLE_OPENGL_4X_SMOOTH);
hint(DISABLE_DEPTH_TEST); //These two bits help with making the sketch run faster

for(float x=0; x<8; x++)
{
for(float y=0; y<6; y++)
{
Nike particle = new Nike();

particle.target.set(x*random(70,95), y*random(70,95), 0); //Sets out a grid for the particles, which then fill that grid when drawn
particle.pos.set(x*random(70,95), y*random(70,95), 0);

particles[counter] = particle;
counter ++;
}

}

opencv = new OpenCV( this ); // Initialises the OpenCV object
opencv.capture( 160, 120 ); // Opens a video capture stream
}

That's the setup.

for(int i=0; i {
Nike particle = particles[i];
if(brightness(img.get((int)particle.pos.x/4, (int)particle.pos.y/4))>15)
{
particle.vel.add(random(-2.7, 2.7),random(-2.7, 2.7), 0);
particle.alph-=50;
}

if(brightness(img.get((int)particle.pos.x/4, (int)particle.pos.y/4))<15)
{
particle.vel.add(random(-0.2, 0.2),random(-0.2, 0.2), 0);
particle.alph+=0;
}

This bit of code, placed in the draw setup, tells the sketch to look for areas in the difference image where the brightness is more than 15, if it is more than 15 then it adds a random value from -2.7 to 2.7 in velocity to any particles that are in the area of brightness. It also takes away 50 from the alpha value of that particle.

As well as that, if the brightness is less than 15 then it adds only a slight velocity value, but then adds 0 to 'alph' ('alph' is set to 1) so that the particle slowly fades back in.

alph+=1;

if(alph>255)
{
alph=255;
}

if(alph<0)
{
alph=0;
}

This bit of code in the Nike class sets the 'alph' parameters so that the values never get so high/low that the particles wont disappear/reappear when their required actions are performed.

the particles...

As my frustration grew ever so much during this period of development I thought I'd showcase some of the terrible results.

Mouldy Wotsits



Pollution



Melting Simpson

further progress

After deciding on the final background image I started work on the particles again. I have now made them look more 'misty' and have therefore removed the use of gold in them, as the background image now features that colour. It took A LOT of tweaking to get an image I was happy with, and I think it looks very effective.