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.

Flash Inspired Photography Websites

http://www.andrewfphotography.com/

• I like this site for its smooth use of flash from each section (the dark grey part of the page moves up and down)
• I like the simple use of black white and grey
• The white title works well to draw your attention to his name

http://www.jessicahilltout.com/

• The 'hand made' feel makes it feel personal
• Also the polaroid shots make the photos look 'real', again emphasising the personal look.

http://www.bottlebellphotography.com/about.aspx

• Simple yet has a good impact with the flash introduction. Also lets teh viewr know what the website is about whilst offering tehn an interesting form of interaction

http://www.tomhoops.com/latest.html

• Simple, clean cut design with a bold edge.
• My favourite part of the website is the typography for the logo

http://www.krijtenberg.nl/

Social networking
Many photographers have a page on Facebook, or a Flickr or Twitter account.

Flash
Flash-based websites can be beautiful and effective, freeing the web designer from the limitations of HTML and CSS. The downside is that they’re expensive to create, can take time to download and aren’t good for SEO. Often used by pro photographers who will send their url to interested parties and need a spectacular showcase for their images.

HUGE photos
Photography websites are naturally dominated by images. A recent trend is to display large photos for maximum impact.

Sophisticated design
Photographers are visual artists and need the design of their websites to reflect this. Good design often works in the background by making websites quick to load, easy to navigate and search engine friendly.

Content over design
No matter how good the design, content is king. It may look pretty, but if it doesn’t inform and entertain, your visitors won’t return. Some of the most popular photography websites are nothing more than a free Blogger blog.

Arts and Organisation website

Some of Saira Macleod's photography.

My second brief entails designing and coding a 5page website, validated against WC3 standards with at least 3 interactive flash pages, widgets and banners of various sizes. I will need to include-

• Diary/journal page in CSS/XHTML that will draw on a MYSQL database using php.
• Server side scripting and database
• CSS and XHTML will work as the frame work for interactivity
• I need to consider the data that my application needs to store, key operations that the application must perform
• The client must be able to update their journal
• Display their art form
• And finally the site should be a tool for gaining further fans, customers and visitors.

I have chosen Saira Macleod, a documentary (2ND year photographer at Nottingham Trent) to be the client for my website. She currently networks both in person and digitally but wants to take digital networking to the next level with a website that focuses purely on her photography with a minimalist edge to the overall design. She uses facebook, twitter and blogger to network and track her photographic journey. See http://sairamacleod.blogspot.com/

At the moment we are discussing design plans, aims for the site, accessiblity and interactity for her site so I will keep you all updated of it's progress.

Same Place, Different Camera.

I took another random trip back to Ye Old Trip today and ended up getting some random photos that I think might make my website more homely and more welcoming. The idea of these photos was for the audience to see people interacting other traditional English food.

Not all of the photos are amazing because I only had a camera phone on me.

Maybe use but the backgrounds a bit fuzzy. Photoshop will definitely come to my aid.

Too bright but I like the composition or beer, food and logo.

Beer close up always good when advertising a pub...

I think this is the best photo out of the selection of camera photo pictures that will probably work well with my menu page.

Content for Ye Old trip

These are a few of my favourite photographs of my photo shoot of Ye Old Trip. I chose Ye old trip for it's historical contribution to Nottingham's history. It is a real life trading place that is built from hundred of years worth of mysteries and local stories passed down through the generations. I want to be able to recreate this mysterious, rustic history through my website to give people a feel of it's rich atmosphere.

Clock-Maybe use for opening times.

Beer an intrigal part of the pub.

The armour will give people a sense of fun a mystery.

Use the store as an extended page as to what the pub offers.

The most important selling factor. Ye Old trips infamous beer.

Maybe a background picture or logo?

Classic english.
Direction page along with a google map?

The Classic exterior from different angles.

Next step-Mock ups!

Random Nottingham Typography

These photographs are taken of typography around Nottingham. I wanted to get a sense of what made Nottingham's architecture different and how it can influence the typography I use in my websites to make them less generic.

Emphasising a letter to create emphasis.

Classic typography

Graffiti

Classic typography used in a signs. I really liked the old, warn down buildings.

Scruffy graffiti used for public messages.

Biblical text, aged

A broken texture creates new meaning.