Portfolio site
for Cornish artist
Nicola Bealing

Client.

Nicola Bealing.

Project.

Designed by Diggory Gordon. My job was to build this simple WordPress based website, with subtle jQuery functionality, letting the artists’ great work do the talking.

Involvement.

Build.

Tools.

Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Link.

www.nicolabealing.co.uk

MEKK Bicycles

Agency.

Knight Studios (UK)
SHIFT Active Media (UK)

Client.

MEKK Bicycles.

Project.

Website design for a new high performance bicycle manufacturer, simply showcasing their bike series, ranges and models.

Note.

The live website was built elsewhere and is different to the visuals shown here.

Involvement.

Design.

Tools.

Photoshop.

Magazine: Essentially a blog archive with feature stories…

Events: Clearly showcases upcoming and past events…

Bike park: Each bike park has an overview page, introducing it, it’s location and showcasing all it’s trails and tours, with links to ‘After Ride’ and ‘Services’ available at each bike park (pre and post ride). Each trail and tour is clearly colour coded by it’s level of difficulty, sorted by highest to lowest rated (5 star user rated)…

Generic page template to cover a number of pages…

Location: Relative to Europe, for riders who travel to the region…

Article template for a magazine (blog) post…

Bike parks overview: Introduces all the bike parks I-MTB operate…

Trail: A template to showcase a bike trail, including a map plotting the route, a run through of the trail including videos and photos. Each trail is ranked by how difficult it is and the user can rate each trail from 1 to 5 stars…

Tours: Each bike park has tours that are made up of a number of bike trails…

Some bespoke icons to represent various sections…

A simple social idea for including a Facebook Like Button and Twitter Follow Button in the same space, so the user can follow I-MTB’s social accounts without leaving the site. A bit of jQuery switches out the content on-click of the icons…

A live weather feed (using a local weather station via Yahoo). I had to artwork 47 icons to match every weather scenario the feed outputs. At a glance forecast (hopefully) to communicate the typically good weather in Tuscany, Italy…

The user can rate each trail and tour out of 5 stars. The trails are then sorted from highest to lowest rating…

The trails and tours are clearly labeled by their level of difficulty, from suitable for pro MTB riders down to family friendly trails…

In the grid view the trail ratings and difficulty come together…

Here are a few (of many) of the final set of wireframes…

A couple more initial ideas (wireframes)…

I-MTB
Magazine and
MTB Trail Areas
in Tuscany, Italy

Client.

I-MTB is an MTB hub for enduro, downhill and cross country bike riders. It’s an online MTB magazine and MTB trail areas operator in Tuscany, Italy.

Project.

They needed a website (and brand) creating that showcases bike parks and editorial content. Each bike park includes details of various MTB trails and tours, photos, GoPro videos, other services and booking info. The editorial ‘magazine‘ is a blog for a team of MTB bloggers and riders’ articles, videos and photos. There are various social and live weather feeds. The site is multilingual, covering English, Italian and German.

I creatively directed and/or designed/built everything from the brand identity, to dozens of wireframes (UI & UX), to the final designs (GUI) and finally the template(s) build and content management.

Design.

Follows a tight grid, which is flexible over the different templates for interest and variety. Grid modules (widgets) can be inserted anywhere on the site to suit different scenarios and content flows.

Note.

Some (not all) of the imagery used in these design comps was collated from Google Images, to show the site populated (pre-launch).

Involvement.

Creative Director.
Wireframes. Design. Build.

Tools.

Illustrator. Photoshop. Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Link.

www.i-mtb.com

Knight Studios

Client.

A creative led design studio based in Bath UK, specialising in creating digital experiences for online and physical environments, with a rich history in print and editorial.

Project.

I’ve been fortunate enough to work on a number of high profile projects with Knight Studios, and it was my pleasure to build their portfolio website, based on the original designs Knight Studios provided me with to build out from.

The design follows a tight grid, and in the CMS you have the option to choose a different layout/structure and colour scheme for every project added.

Involvement.

Build.

Tools.

Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Link.

www.knight-studios.com

One of my projects (Club Of The Waves) was shortlisted for awards at the 2011 (and first ever) European Lovie Awards and the British BIMA Awards.

The Lovie Awards

The Lovie Awards are the (European) sister awards of the famous Webby Awards, and the first-ever pan-European award specifically created to embrace the entire breadth of content created for the European Internet – from websites and mobile apps to online video and interactive advertising.

www.lovieawards.eu/winners/

The BIMA Awards

The BIMAs were established in 1985 to celebrate and showcase the greatest interactive work being undertaken in Britain, and have now become one of the most coveted Awards and the biggest nights in the Internet industry calendar.

www.bimaawards.com/2011-finalists.php

My work featured in
Computer Arts Projects magazine

Computer Arts Projects’ "Design for the Web" (issue 153) ran a two-page feature on a website for foursquare called "I Voted", which I designed the GUI for. The article covers an interview with (at that time) fellow JESS3 designer Robin Richards who designed the site architecture & wireframes, and also the project manager at foursquare; Eric Friedman.

Richards says: "Everything had to be clean and clear so that the user understood the design, making for a fun and enjoyable experience reflecting the identity of foursquare."

Friedman says: "The site turned out better than we imagined it would and we were extremely happy with the result… By showing visually that every vote counts, we were able to inspire how people make a difference in an election."

Below is the article as it appeared in the magazine…

Saloni

Agency.

Jotta (UK).

Client.

Saloni. A fashion designer in London.

Project.

My job was to build the site templates and make them content manageable via WordPress. The client can choose from different page templates to add various content from new collections, presentations, fashion items, press cuttings, stockists and a blog too.

Involvement.

Build.

Tools.

Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Face Up To It
charity campaign
& visual petition

Agency.

Bolster Labs (USA)

Client.

LIVESTRONG

Project.

A visual petition spanning a bespoke Facebook page tab, a Facebook app and a separate website, all inviting the public to "add your face", in the countdown to a UN summit… Telling world leaders to ‘face up to’ life threatening diseases. The users’ photos make up a mosaic of thousands of other petitioners, which can be explored and shared.

Campaign message.

Cancer is a global crisis! Join LIVESTRONG in telling world leaders to Face Up To It. This September’s (2011) historic UN summit is our chance to make cancer a global health priority!

Tools.

Photoshop.

Original wireframes prior to the brand identity being designed…

Darren Whittington Illustration

Client.

Darren Whittington is a freelance illustrator, designer and art director. He works for top agencies like Turner Duckworth on branding and advertising for the likes of Coca-Cola.

Project.

Darren needed a WordPress driven portfolio and blog website. I put together some initial wireframes that he designed out from, ready for me to build.

Involvement.

Wireframes. Build.

Tools.

Illustrator. Photoshop. Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Link.

www.darrenwhittington.com

St Ives Surf School

Client.

St Ives Surf School.

Project.

Diggory Gordon was responsible for the great design and branding. Ruaraidh Monies for the photography. My job was to build their WordPress based website.

Involvement.

Build.

Tools.

Coda. WordPress.

Languages.

HTML5. CSS. jQuery. PHP.

Link.

www.stivessurfschool.co.uk