Wednesday, 3 March 2010

Photography Characters

There's a basic story board of the tripod chasing the flash and camera into the text. I want it to add a friendly feel to the otherwise quite structured website. I am keeping the characters simple, using the colour in the website so they don't look out of place. I'm probably going to add some characteristic facial features to them.

Below are three characters I have designed to animate my flash banner.

I found this video randomly. I love how the mouth of the character is in sync with the music as so many flash animation aren't and the subdued colour reflect the emotion of the piece.

Tuesday, 2 March 2010

All About The Naviagtion

Having chosen a sort list final design with my client. I still felt that some alterations needed to be done, especially with the navigation to make the website more interactive. So I had the idea of using a miniature camera that pops out for the words that aren't visible to make the audience want to explore the site. Also it will fit it with the idea I have for my banner (animated camera and tripod). All of the mock ups have helped me come to the final stages of the mock-ups. The two favourites are version 1 and 5 but we have decided to go with 5 because it won't be cluttered and leaves room to experiment with flash animation in the banner.

Original badge that sparked off the idea

A drawing to simplify the lines

Bright, bold easily attracts the audience

Version 1:
  • Red makes the lettering stand out. Also in the Indian culture it symbolises luck and prosperity.
  • Simple navigation arrows that will move with the words to match the navigation.
  • Red border to match the rest of the website.
Version 2:
  • Orange lettering for a softer look.
  • Simple navigation where the sections of the gallery are laid out straight away, changing colour with the page you are on.
Version 3:
  • To make the design more unique I have designed miniature cameras to go at the end of the words instead of arrows. People will automatically realise it's more photos and that they are in the gallery as soon as they enter the website.
  • Small icons. Are they big enough?
Version 4:
  • Bigger more intricate camera. does it clutter the website and take away focus form the title and photos?
Version 5:
  • Red attracts the eye. The clients prefers the red as it is bolder than the orange.
  • We both like the cameras as naviagtion but I am planning to to a flash banner with a camera and tripod so it will probably make it look to cluttered and take away focus from teh photos and title.

We're Getting Some Where

Mock-up 3: I'm going to use her unique ethnic heritage of being half Indian and half Scottish as part of her identity so people will realise she has a connection to both the Asian and Western world in terms of documentary photography. I think the Indian and English title needs to be integrated more. I think the black background works well to make the photo's stand out.

Mock-up 4: I have used the Indian within the banners edges to make the page less segmented and it leads the eye to the navigation to the photo gallery. I am going to experiment with different colours to make the title 'pop' (red or green). I am going to start designing an animated banner and navigation for my interactive flash pages involving a cartoon tripod and camera.

Form doing the mock ups I need the navigation to have some interesting interaction that is simple and easy to use so I'm thinking about navigation that is coming out form the use of the photo and have a camera symbol next to it. You will only see the the text when you hover over the camera symbol. Also the photo gallery will be the home page for the site so the audience will go straight to the photos in minimal time, which will help the client grab the attention of possible 'fans,' clients etc.

Previous Mock-ups

Some of my wireframes.

I feel the following mockups are too plan but they have helped the client and I visualise the site.
Too boxed in. No focus too the page.
Like the photos layout, dont like teh navigation.
Here are a few mocks that I create with Saira (the client) to get a feel for layout. She didn't like the wire frame part of the process as much as she couldn't visualise the outcome.