Patrick Rushton

Client: CHANCE for Nepal
Format: Web site

Summary: This website for was designed to reflect the non-profit organisation’s values and get their message across to existing and prospective sponsors in a clear and simple way. The site is a great example of how standardised XHTML and CSS can be used to deliver content which is fast to download, browser-independent, and easy to update.

The layout follows a number of web conventions so that users can immediately identify how to use the site. Main navigation is kept simple: horizontal tabs, with the current page highlighted in a way that connects it to the content area. After leaving the homepage, a breadcrumb trail indicates the user’s current location in the site hierarchy.

The client had limited budget for this project and I wanted to give them the maximum return on their investment by ensuring the site can be easily updated and is future-proof. Most of the content including the navigation is editable text, styled using CSS, meaning that the client can expand the site and update the content easily without having to employ the skills of a dedicated designer.

As a charity that supports children with disabilities it was especially important for the site to be fully accessible. Semantic markup, well labelled images and unobtrusive JavaScript ensure that the site is accessible in screen readers, as well as being browser/device independent. Text can be resized using standard browser controls without breaking the design layout.

Role: interaction design; visual design; front-end development.

Tools: Adobe Photoshop, XHTML, CSS, JavaScript, Mootools JavaScript Library

Client feedback: “Absolutely brilliant. You have done the most amazing job and I cannot put into words how delighted and appreciative I am.”

Link: http://www.chancefornepal.org

Visual Design, Web & Mobile UX

Client: VPRO
Format: Red button interactive television show
Platform: UPC Netherlands
Broadcast: Each Saturday evening since September 2007

Get the latest Flash Player to see this player.

Summary: Whitenoise is an interactive music experience on VPRO’s 3VOOR12 channel. The application developed in collaboration with Do-Tank integrates live DJ mixes by Dave Clarke with images taken from the photo sharing website Flickr that pulsate to the beat.

By entering Flickr ‘tags’ into the application viewers are able to influence the selection of pictures that are broadcast. According to which particular tags are entered a whole new selection of pictures can be drawn from the Flickr database.

The application was showcased at the Cross Media Week, Picnic event in Amsterdam and has won a SpinAward in the category of Best Interactive Video Concept.

Role: interaction design; graphics design; project management; front-end application build.

Tools: Adobe Fireworks, Flash, Flickr API, Mistral eTV-Studio

Press coverage: Broadband TV News: Whitenoise mixes it up for UPC Nederlands

Interactive TV, Visual Design

Client: Tchibo
Format: iTV Shopping Portal
Platform: UPC Digital, Austria

Get the latest Flash Player to see this player.

Summary: These designs were created to pitch a concept for a shopping service on UPC Austria’s interactive portal.

Role: Concept development; interaction design; visual design

Tools: Adobe Fireworks, After Effects

Interactive TV, Visual Design

Personal Project

Summary: Since I couldn’t find a media player that suited my needs, I decided to design my own. Together with a friend who is an expert .NET web application developer, we made a media player that uses album covers as the core of the interface. You can browse through your music the same way that you would through your CD collection, and sort them into categories and create playlists. A SmartPhone application provides remote control and browsing from any Windows Mobile device.

Role: Concept development, GUI design

Tools: Adobe Fireworks, Microsoft .NET

Visual Design

Summary: These mockups were created for a friend to help him with a sponsorship pitch for his media kiosk. The idea was to place the kiosks in skate parks with cameras installed with motion detection functionality that my friend had developed. Skaters could then use the trackball interface to browse through recordings of their tricks and send them to a phone via MMS or upload them to a webpage, blog or email.

Role: GUI design; concept development; logo design.

Flash & ActionScript, Visual Design, Web & Mobile UX

Summary: This experimental site was developed as part of an investigation into user interface techniques. It uses DHTML, VRML, Flash and Agent technology to deliver a rich user experience.

As an educational aid it enables students to learn about the history of an area of particular geological interest. The interface features a draggable timeline, customisable land map, and 3D interactive rock samples.

Role: Concept; GUI design; 3D modelling, front-end development.

Tools: Adobe Photoshop, Flash, Autodesk 3D Studio Max, Bryce 3D, DHTML, JavaScript, Microsoft Agent

Flash & ActionScript, Visual Design, Web & Mobile UX

This is a selection of flyers which I designed for various club nights where I also DJ’d. Created in Adobe Illustrator.

Tools: Adobe Illustrator

Visual Design