Archive for the ‘Portfolio’ Category

Mar
28th
2010

Duncton Web Form

The Brief

Duncton wanted to create an online version of their car finance application form. There’s a lot of fields that need to be filled so the form needed to be as concise as possible.

The Challenge

From a slick form design by Bart, our designer at Ardent Creative, I built the form in HTML and CSS. Then added the neccessary jQuery for form validation and popups. Once complete I designed the login and your work pages in the site style. The most challenging aspect was to show two forms within one page with separate validation and a third within a popup.

Duncton Cost Quote FormThe Result

A clear concise application form supplied to the client as HTML, CSS and jQuery for the Duncton technical team to implement on their site.

Mar
27th
2010

Freedom Treks

Website Design - Freedom TreksThe Brief

Freedom Treks specialise in cycling and walking holidays for groups and families. The site should clearly differentiate between Walking and Cycling holidays. The original site was entirely static and the new site should be able to manage hundreds of holidays with a wealth of detail.

The Challenge

The shear number of holidays available posed the first issue. How do you effectively show 21 holdiay destinations, 11 holiday categories, 5 difficulty levels and over 140 holidays?

Each holiday needed to be described in detail including pictures, summary, dates, prices, itinerary, map and travel options and any other information. This needed to be handled effectively with as few clicks as possible.

Freedom Treks Holiday BrowsingThe Result

The entire site is content managed so we let the pictures speak for themselves and kept the type simple using cufon to incorporate a bold helvetica typeface.

We wanted to show off the beautiful shots taken on the holdiays. Pictures are more enjoyable to browse and much easier to differentiate. This creates a more enjoyable browsing experience  and makes it easy to find or re-find a holiday amongst the abundance available.

The holiday detail page uses tabs to structure the content whilst keeping the essentials (images, price, holiday type, duration and type) on show at all times.

HTML, CSS & Javascript - Mackenzie Smith HomepageThe Challenge

Quicker access to more information. Less clicks and a move away from template pages located on the Vebra server. The site needed to look and feel as one entity.

The Result

Clean, slick nagvigation with jquery tweaks to make searching and browsing for properties as effortless as possible.

Pretty forms.

Improved Search.

Larger images,  more information in list view and detail view.

Location pages boost search engine visibility whilst offering another outlet to show properties available in the area. A carousel of latest properties was deployed here to show them effectively.

Microformats used for contact details, allowing anyone with a microformat plugin to download the contact information direct to their contact list. Microformats are important and becoming more widely used. They allow for information of a certain type, for example contact information, to be indexed by search engines and are a large conrtibution to the move towards a sematic web. This is just one of the ways we are futureproofing sites for evolving technologies.

Website Concept - Hardens Restaurant GuidesThe Brief

This concept visual was created as a pitch for Harden’s in collaboration with Neil Barton of diginoize.co.uk.

rich colours and fine photography to convey the exclusivity and confidence of the company. The heading image can be changed according to the season or event.
Advertisement

A 250 x 250 pixel advertisement will be visible on the homepage and sub level pages of the site. Placed just before the fold it is clearly visible to the user but does not take priority over Harden’s main content.

Get Started

Based on an intuitive step-by-step process users enter a location and select from the “cards” below to search in any way they wish. Selecting a card will then prompt the user to add further criteria to refine their search. By showing the “search by” categories with relevant imagery users will quickly identify what the site is about and what it has to offer.

The “get started” area will be remain on all pages within the site but with only the ‘search by’ titles showing (not the images) to save space.

In your Area

Most users will invariably want to know about restaurants in their local area. This quick visual search will find restaurants and provide quick links to reviews in their area. Remembering a user’s location
on return visits offers a level of personalisation not offered by Harden’s competitors.
This area will be used on sub level pages to display the main page content such as reviews, search results, or text pages such as About Harden’s.

Quicklinks

Bolder ‘nuggets’ of information are used here to promote activities, events or other prominent features from Harden’s

Find Out More

It is important to have a dialogue with the customer beyond the search, map, or link functionality of the page. Dialogue is used here to describe Harden’s to the user reinforcing the page imagery and leaves no question about the site’s purpose. Brand messages have been highlighted in red encouraging the user to
find out more.

On later pages this area could be used to display tips, offers or further information regarding the site.

Site Map

A full site map for accessibility and SEO offers complete site inter-linkage and promotes keyword use.
Quicklinks Lists

Forming part of the footer on every page these lists offer ‘nuggets’ of interesting information to encourage users to browse further into the site once they
have completed the task they came to perform.

The Challenge

The Result

Mar
20th
2010

Benjamin Hubert Studio

Benjamin Hubert HomepageThe Brief

Benjamin Hubert is one of the UKs most successful young product designers. Ben needed to update his original Flash website to an easily manageable HTML site but keep the slick animation and feel of the original.

The site needed to focus on the project work and images with minimal copy but still be easily indexed by search engines.

The Challenge

Website Design for Benjamin HubertBy far the most challenging aspect of the site was to keep the animation from the original Flash site. From a homepage draft design from Ben we worked closely to add that extra bit of polish and finesse to make the design come to life.

Ben needed to be able to easily update the site by himself using Dreamweaver.

The Result

Website Design for Benjamin Hubert - Bio pageThe result is an engaging and slick user experience showcasing Ben’s project work to its best. The site makes extensive use of the jQuery javascript library for many elements including accordion style navigation, rolling images custom scrollbars and form validation.

Mar
20th
2010

All About Bounce

Website Design - All About BounceThe Brief

All About Bounce hire bouncy castles and costumes for parties in Surrey, Sussex and Hampshire.

Bouncy castles are FUN! That’s a pretty good start for a brief! Natalie had a logo and flyer designed already, so it made sense to use them for style ques. visitors should be able to view all available products for hire with all relevant details.

The Challenge

Bouncing is all about getting as high as possible… isn’t it? So a cloud and sky based theme was used to add further weight to the company brand and separate the site from its competitors.

The Result

Silly, bouncy, informative and very search engine friendly. Big buttons keep the site simple and kid-friendly and prompt involvement from the user at every turn. The site holds its own against the larger companies out there, and as its built on WordPress it’ll be easy to add further functionality at a later date.

Expect some more acrobatics from this site in the near future.

Mar
20th
2010

Kate Reid Films

Website Design - Kate Reid ProfileThe Brief

Kate Reid is a highly decorated cinematographer based in the UK. Kate needed a website designed to display all of her project work within various formats.

The Challenge

I rebuilt the site from an original by Ardent Creative  to W3C standards. Maintaining the site was becoming a chore and Kate needed to manage all of her video clips from her end. The previous site involved a very time-consuming method of video embedding. The challenge was to allow her an easy way of uploading video from her end whilst maintaining the quality of video she had been used to. Using the .flv (Flash Video) format meant the user didn’t have to download the entire clip before they could watch it.

Website Design - Kate Reid HomepageThe Result

A beautifully simplistic site that allows Kate to upload all of her material to one place. Kate uses a multitude of video editing software to produce her work. Given this we created a content management system to allow her to upload video in .flv format from her computer at home. This was important as it allowed her control over quality from her end. The was produced before YouTube began to offer HD video, an obvious rework would involve a feed direct from a YouTube account.

Mar
20th
2010

Elite Encounter

Website Design - Elite EncounterThe Brief

Elite Encounter is a company specialising in high quality escort services for businessmen.

The Challenge

The site needed to appeal to businessmen, refined, modern, burlesque, classy and above all sexy.

The Result

The site was kept clean, informative and seductive without becoming sleazy. WordPress was used as a content management system so that the site owners could update page information including prices, images, testimonials and copy.

Mar
20th
2010

North Downs Walk

One of my good friends, Darren Cooper, was involved in a serious car accident and was saved only by the fact that he was airlifted by the Surrey Air Ambulance to King’s College Hospital, London with time to treat the injuries sustained.

Website Design - North Downs WalkThe Brief

Darren wanted to give something back to the Surrey Air Ambulance and so set about organising a walk to raise funds for the charity.

The brief was simple: Advertise the walk and get people to donate!

The Result

The result is a highly informative site that displays all the necessary information whilst being highly search engine friendly. Using the Surrey Air Ambulance logo colours we were able to reinforce the link between walk and charity.

In 2008 the event raised over £7500 pounds for the charity and this year’s walk hopes to raise even more!

Mar
20th
2010

Henry Doulton

Website Design - Henry Doulton ActorThe Brief

Henry Doulton is the stage name of actor Henry Everitt. Henry needed a site to showcase his acting and modelling ability.

Website Design - Henry Doulton ActorThe Result

A clear succinct display of Henry’s acting credentials with video showreel, photo gallery and profile.