Archive

Archive for the ‘Visual Design’ Category

Dynamic Zone Website

July 6th, 2010

Dynamic Zone Website

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 built the site using 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 how we can help solve problems for our clients communication and branding.

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 & Mobile UX

MTV & Nickelodeon On Demand Channels

February 26th, 2010

Client: MTV Networks
Platforms: UPC Netherlands & Cablecom Switzerland
Format: Interactive On Demand Channels



Comedy Central Splash ScreenComedy Central Main Menu

Summary: These portals provide UPC viewers with on demand access to MTV and Nickelodeon television series. The viewer can enter the portals either by pressing the red button while watching the linear channels, or via the main UPC On Demand menu. The screens are designed to express the MTV and Nickelodeon brands and present available content in a dynamic, easy to navigate menu structure which supports both free and paid TV shows.

Role: Visual design (Photoshop), set-top-box application build (Mistral eTV-Studio)

Press: Piet Boon: Vanmorgen zijn ook MTV en Nickelodeon On Demand begonnen bij UPC, Broadcast Magazine: UPC breidt Channel on Demand verder uit

Interactive TV, Visual Design

ROC Friesepoort

January 30th, 2010

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 & Mobile UX

UPC Fiber Power Game

December 21st, 2009

Client: UPC
Format: Red button i-Ad

Summary: During the broadcast of UPC’s commercial on the Netherland’s RTL channels, digital viewers are invited to press the red button on their remote control to enter an interactive microsite. The set-top-box application allows viewers to play a game in which they race against UPC’s new Fiber Power high-speed internet connection, and the slower ADSL competitor. The game is a fun and interactive way to communicate the message that Fiber Power is so much faster than ADSL. The viewer can also browse through product information and request a brochure.

Role: concept; interaction & visual design; animation; application build.

Tools: Adobe Photoshop, Mistral eTV-Studio

Interactive TV, Visual Design

IDBC Advertisers Portal

April 14th, 2009

Client: IDBC
Format: Interactive television portal



Summary: I designed these mockups to present a concept for an interactive television advertising portal.

Tools: Adobe Photoshop

Interactive TV, Visual Design

IDBC Website

February 27th, 2009

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

Flash & ActionScript, Interactive TV, Visual Design, Web & Mobile UX

Amstellyceum – online game

February 6th, 2009

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: start game

Flash & ActionScript, Visual Design, Web & Mobile UX

Rubens Apples – web campaign

September 27th, 2008

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 & Mobile UX

SpongeBob Squarepants gets interactive

September 26th, 2008

Client: MTV Networks
Format: Red button interactive tv show

Summary: In the weeks leading up to Nickelodeon’s SpongeBob Marathon Weekend, viewers were able to vote for their favourite episodes by interacting during the daily broadcasts. While watching an episode of SpongeBob, the viewers rated each show using their remote controls. The votes were collected up and the top 100 shows broadcast during the SpongeBob Marathon Weekend.

The application has been overwhelmingly successful and received over 100,000 votes. It has also been entered for a Spin Award in the category Best Interactive Video Concept.

Role: storyboard & interaction design; graphics design; application build.

Tools: Adobe Photoshop, Mistral eTV-Studio

Press: Medianieuwtjes.nl: Nickelodeon pakt groot uit met Spongebob, Telecompaper: UPC zet rode knop in voor SpongeBob Top 100, MediaNed: Wat is de beste aflevering van SpongeBob?, HD Nieuws: Rode knob-actie bij UPC

Interactive TV, Visual Design

A Week on the Water – web landing page

May 3rd, 2008

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 & Mobile UX