Patrick Rushton

Summary: In a pause between client work, I found some time to design and build a new website for my employer, Dynamic Zone. The most important goal was to present our creative work to potential clients so I included the portfolio immediately on the home page. Having watched how users tend to immediately start playing with their mouse scroll-wheel when coming to a site, I took advantage of this to implement a playful scrolling navigation for the portfolio.

I implemented a Twitter feed as an easy way for clients to keep up to date with what we’re busy doing. Previous attempts at news sections and blogs had failed because in the midst of client projects, we found it difficult to find time to update our own site. A simple Twitter feed that filters employee’s tweets containing a #DZ hashtag makes it quick and easy to post comments, interesting links and connect with our clients.

I implemented the site in pure ActionScript 3.0 using Flash Builder 4 and created a solid framework using SWFAddress and XML loaders to populate the content, again making it as easy as possible to keep the site up to date and expand on it in the future. Flash was chosen for it’s ability to realise a rich experience in a limited time and alternative content is provided in HTML for devices without Flash support.

The site is only a first step and I’m working on creating more content and experiences to demonstrate to potential clients know how we can solve their problems.

Role: Concept, visual design, branding, Flash development

Tools: Adobe Fireworks, Flash Professional, Flash Builder, SWFAddress, Google Maps API

Link: http://www.dynamiczone.nl

Flash & ActionScript, Visual Design, Web Design & Development

After working with Packt Publishing on their Papervision 3D Essentials book, I was very happy to be invited to work as technical reviewer on their latest book WordPress and Flash 10.x. The book follows the familiar “cookbook” format, with recipes for combining rich Flash features with the WordPress blogging platform.

The book’s authors, Peter Spannagle and Sarah Soward have made it easy for beginners to get started with a run-down of Flash-based plugins that can be embedded in a WordPress-driven site, and goes on to introduce how to create custom Flash components and use them to add richness and multimedia. The book also includes an introduction to Flash timeline animation and explains how to create custom themes for WordPress.

My role as technical reviewer was to check the code samples and correctness of the technical information as well advising on the scope of the book’s content. The book is available now from Packt or from Amazon.

Flash & ActionScript, Web Design & Development

Client: ROC Friesepoort
Format: Flash site, game & map tool

Summary: This site was produced as part of a campaign to recruit students for the ROC Friesepoort schools. Students can signup for an open day or play a game in which they discover which courses match their interests. The school locations which offer the courses are then shown on an interactive map in which the student can find out more about the schools and courses they offer.

Role: I came up with the radar game and map concepts after brainstorming around the central campaign message “dichtbij” which means “close by”. I first created some Flash prototypes to see what was possible using the Google Maps API before developing the interaction design, visual design, sounds and Flash animatics. The final Flash application was created with the help of Actionscript/PHP developer Roy Garnaat who implemented an elegant PureMVC-based framework for the site.

Tools: Adobe Flash, Fireworks, Photoshop, Illustrator, Ableton Live

Client feedback: “I worked with Patrick on an interactive website for ROC Friese Poort (education). Patrick translated the proposition excellently into an effective interactive concept for our target students (14-16 yrs old). He is open to difficult questions and knows how to translate that into improvements of the concept. The world needs more interaction designers like Patrick, who are able to translate strategy into effective and distinctive artwork. Great work, great results!” July 6, 2010

Link: http://dichtbij.rocfriesepoort.nl

Flash & ActionScript, Visual Design, Web Design & Development

Client: Bond van Adverteerders
Format: Flash website

Summary: This website was created to present the interactive advertising and research findings of the IDBC. The project has been put forward for a Spin Award and AMMA Award.

Role: Interaction & visual design, video editing & encoding, Flash/ActionScript 3.0 development

Tools: Adobe Flash, Fireworks, Photoshop, JavaScript

Link: http://www.dztv.nl/idbcpilot

Awards & Nominations, Flash & ActionScript, Interactive TV, Visual Design, Web Design & Development

Client: Amstellyceum School
Format: Flash game

Summary: This game was developed as part of an online campaign to help recruit 10-12 year old students for this Amsterdam-based school. The theme of the game builds on the schools philosophy of helping students recognise their own potential, as “the school that sees more in you”.

Role: Concept development, graphics design, animation and Flash/ActionScript 3.0 development.

Tools: Adobe Flash, Fireworks, Illustrator, Apple Soundtrack Pro

Link: http://www.amstellyceumweb.nl/tool/opendag/tool.html

Flash & ActionScript, Visual Design, Web Design & Development

Client: Inova Fruit
Format: Online viral campaign

Summary: Rubens is a brand of apple grown and marketed by the fruit producer Inova. In order to grow their customer database, this online game was created for users to compete for a chance to win a bungalow in a Landal Greenparks holiday park.

Based on the Ruben’s theme of “Enjoying together”, users can send invitations to their friends who they would like to join them in their holiday bungalow. Filling as many bungalows as possible increases the users chance of winning a prize. The viral nature of the game has lead to an extremely successful campaign with thousands of new users joining in.

Role: concept development, interaction design, illustrations & visual design

Tools: Adobe Fireworks, XHTML, CSS

Press: VakbladAgf: Rubens-appel weer in agf-schap

Visual Design, Web Design & Development

Client: Canals of France
Format: Web landing page

Summary: This concept was created to market a recipe book authored by a company which runs luxury barge cruises in the South of France. The page layout is inspired by the classic AIDA marketing model which describes a common list of events that are often undergone when a person is selling a product or service:

A – Attention (Awareness): attract the attention of the customer.
I – Interest: raise customer interest by demonstrating features, advantages, and benefits.
D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
A – Action: lead customers towards taking action and/or purchasing.

Tools: Adobe Photoshop, XHTML, CSS

Visual Design, Web Design & Development

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 Design & Development

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 Design & Development

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 Design & Development