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

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.

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

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

Summary: This commercial was produced as part of a multimedia recruitment campaign to attract students to the ROC which is the largest college in the Amsterdam region. The ad is being shown in cinemas within the college’s catchment area, allowing potential students to be well targeted in the weeks leading up to the open days.

Role: I animated the commercial using Adobe After Effects, making use of 3D layers in Photoshop CS4 Extended to animate the podium element which I modelled using Autodesk Maya. I also created the background music, sound effects and treated the voiceover to produce an audio mix suitable for the cinema.

Tools: Adobe After Effects, Photoshop Extended, Autodesk Maya, Ableton Live

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

I had the pleasure of helping Paul and Jeff with the book as a reviewer / proof-reader, and I can testify that it is very comprehensive. What I particularly value about the book is that it can be read as an introduction for beginners, but also serve as a reference guide once you’ve grasped the main topics.

Beginning with the basics of setting up Papervision3D inside your development environment, the book takes you through the essential elements of primitives, materials, and cameras before moving into advanced topics including animation, effects and performance optimisation.

There are some free sample chapters available on Jeff’s blog, and the book can be ordered directly from Packt, or from Amazon.

Although I modelled this from scratch, I have to admit to getting a lot of help from some video tutorials. However since it kept me busy for over a week, I figured it would only be fair to post the results here.

Tools: Autodesk Maya

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

Tools: Adobe Photoshop

I based this campervan on a small toy version which really helped when modelling from various angles. I chose to use Maya’s smooth-polygon modelling rather than NURBS with a view to creating a low resolution version in Papervision 3D. This was exported as a DAE object to bring into Papervision. I had to experiment with using null objects and grouping hierarchy to get the wheels to turn on the correct axis. The next step is to add some geometry to fix the z-sorting issues around the wheel arches and try burning out some textures.

Tools: Autodesk Maya, Adobe Flash, Papervision3D