Scott’s Abbotsford

Posted on January 7, 2013 by fundenis

This is a series of interactive exhibits for the visitors’ centre at Abbotsford House, in the Scottish Borders. Abbotsford is a historic house near Melrose, which is famed for being the residence of historical novelist and poet, Walter Scott.

Architectural Designs

One of the centrepieces of the exhibition, this interactive piece gives visitors the chance to explore some of the fascinating sketches and plans that were used to build and decorate Scott’s Abbotsford.

Visitor Feedback

Visitor feedback is important to the visitor centre at Abbotsford, and they were keen to gather this feedback in a rich and engaging way. Visitors are taken through a series of questions to guage their reaction to the exhibiton, and profile their demographic.

After they have offered their opinion, they can investigate the trends of previous visitors, through a live infographic.

Ballads and Folk Tales

The Ballads and Folk Tales piece was designed to showcase a range of ballads and poems read by local people near Abbotsford.

Users can access audio excerpts of the poems through the touchscreen interface, as well as finding out information and viewing traditional artwork of the period.

Javascript Rich Media Widgets

Posted on March 13, 2012 by fundenis

As part of their forward thinking web strategy, the NHS commissioned these interactive widgets to replace Flash based versions which were now starting to show their age.

In collaboration with Antbits, I produced these non-Flash versions of the widgets, using HTML, XML, CSS, Javascript and jQuery, designed to be viewable on the increasing number of devices which cannot view Flash content.

Flash widgets for the web have a natural (and well established) workflow, which enable them to be built and embedded by a designer, independent from the web page around them.

This presented a new challenge, as we had to establish a similarly natural way to embed Javascript widgets which allow them to be deployed and updated quickly (separate from the often long lead times that can be required for “everyday” web development tasks).

The widgets have now been built in such a way that they can be “embedded” anywhere on a page using just a few lines of code, similar to the way we would embed Flash content.

They can be reused and customised using parameters, all from the same codebase.
NHS were extremely pleased with their first ever rich media web content to be built with web standards, and are planning to commission several more in the future.

Address to a Haggis

Posted on March 6, 2012 by fundenis

Visit the live site

This piece was commissioned by Scotland.org, to be featured on their website as part of the 2012 Burns Night celebrations.

A work of user-generated animation, the app gave users a chance to upload their own face and see themselves reciting the famous Robert Burns poem, “Address to a Haggis”.

Working with the Whitespace design team, I was faced* with the task of bringing the storyboard for the poetry sequence to life, as well as the development of the facial upload interface itself.

To add to that, the project had be turned around in little over a week to get the finished piece out in time for the Burns Night celebrations.

The interactive animation was created using Adobe Flash, (currently the only feasible technology with which this kind of functionality can be achieved) making heavy use of the inverse kinematics tools to animated the puppets in the poetry sequence.

A deliberately lo-fi art style was used, which thankfully didn’t require complex lip synching. I decided the best approach for this was to move the mouth dynamically, using code to analyse the sound wave and move the jaw accordingly.

*Pun not intended

Homepage Takeover

Posted on October 20, 2011 by fundenis

Halifax Intermediaries is one of the most popular sites for financial advisors in the UK. For the launch of their new online mortgage system, the brand needed a striking advertising piece on their homepage, in support of a high profile online and offline campaign.

Full control over the corporate homepage was given, a rare departure from the usual constraints of online advertising.

Taking the cue from the offline counterpart, I designed the layout and the motion, also sourcing and integrating the eye-catching imagery.

I was also in charge of developing the piece, utilising flash, javascript, and still image elements. These elements synchronised together, to result in a slick animation, which appears fully integrated to the viewer.

The campaign was very warmly received by the client, and the versatile “shining light” animation concept has been carried through to be used on every subsequent Halifax Intermediaries online campaign.

Little Book Of Money

Posted on October 20, 2011 by fundenis

Scottish Widows’ Little Book Of Money is a yearly offline publication, offering independent financial advice on personal finance matters. The client were very keen to make the book work as a digital product, in an effort to capitalise on the improved reach and measurement of success.

New footage of the famous Widow was specially shot to be used in the book, a company first for an online campaign.

My expertise was used to build the overall Flash framework of the site; to source and integrate engaging animated transitions between content; and to integrate the rich video footage at our disposal.

The site’s content was maintained with the use of an innovative XML solution, which allowed for rapid updates without having to re-publish any Flash assets.

The digital ‘Little Book…’ was produced at almost half the cost of the print version, delivered in half the time, and achieved increased audience engagement.

The site was also nominated for a DADI award (Financial Services Website or Campaign).

APB Website

Posted on October 20, 2011 by fundenis

Internationally-renowned games developer Realtime Worlds required a marketing site to promote their high-profile MMO, APB, pre-launch. The game featured a fully immersive world, in which gangs of criminals and law enforcement vie for control of the city of San Paro.

The objectives for the website were to showcase the game’s explosive gameplay, while also promoting the extensive customisation options offered.

My role on the project was to implement the overall Flash framework on which the site content was overlaid.

Much of the motion design and interaction design was carried out as part of this framework, as well as optimising the heavy graphical content of the site.

A large focus of the site was the video content, which required a custom-built video player, using advanced controls and interactive elements.

Although the game itself had mixed levels of success, the site met with positive reviews and some great usage figures: 1,239,532 unique visits in the first three months from 192 countries; 5,060,285 Pageviews; 15,000 visits a day on first week of launch; 326,000 video repost views on youtube.

The site was also nominated for a DADI award (Best Interactive Entertainment Website, Game or Campaign).

Exhibition Brochure Site

Posted on October 20, 2011 by fundenis

Colony of Artists is an annual exhibition that takes place in Edinburgh, featuring a diverse group of local artists.

The group required a site which could showcase the range of artwork on display, while also making it easy to navigate between the array of venues.

The resulting site is a one-pager that packs quite an array of up-to-date web technology.

CSS3 and jQuery were used to power an interactive map and parallax background effect. @font-face text was employed to bring vivid typography to the site, with minimal load time. The customary HTML Google map is also embedded for navigation.

Because the site is coded with web standards, it loads super-fast, and looks great across a range of modern devices.

Panic The Cat

Posted on October 20, 2011 by fundenis

Visit the live site

Who Is Panic the Cat?

Panic used to be a normal kitty – until the day his owner left him to fend for himself on a Newcastle council estate, while she ran off to London with dreams of being a popstar.

Left alone with nothing to do but read piles of fashion and gossip mags, Panic grew up to become a bitter and twisted fashion expert.

In 2011, Panic was hired by Facebook game “Beautytown”, to become their voice of fashion – dishing the dirt on the biggest names in the world of entertainment.

How did the campaign work?

Every day for a month, Panic released a new celebrity put-down video. The videos were promoted daily through Facebook, along with other blog content from the character.

Visitors to the site were shown the most recent video, and given the option to view videos for the previous days.

Users were given exclusive access to tomorrow’s video by sharing the site through Facebook and Twitter.

And what was your input?

Coming in just after filming had finished, I was tasked with editing the videos and syncing them with the separately recorded voice-overs.

I then built the website that incorporated the video, audio, images, and social media components, and made them all play nicely together.

What’s the technology behind the site?

The site was built using Flash – this decision was made because the majority of the content was video and audio, and required a degree of copy-protection. The wide ranging penetration of Flash Player was also a factor in the decision.

Javascript was used to provide the social media integration, and we used a PHP script to access the live images by proxy.

Club Website

Posted on October 20, 2011 by fundenis

I didn’t know you were into cricket…

Yeah I’m not really to be honest, they don’t play it much in Ireland.

I was really interested to a website for a sports club, though, and it was a good opportunity to do some work with friends of mine.

WordPress then… isn’t that for making blogs?

Although it was invented for blogging, the wide range of plugins (and general ease of use) make it great for any site with a high turnover of content.

The guys at the club found it really easy to get into WordPress, and the site is now kept much more up to date as a result.

Any other improvements over the old site?

Thanks to their new online signup, the club has opened up a whole new way for new members to join the team.

The team have now got into using Twitter to send out brief club news . They also find it’s good for posting scores from matches as they happen.

As well as that, the site is now super easy to find online. Try searching “Edinburgh Cricket” and you should find Edinburgh Academicals right at the top of the results.

Ideasgarden

Posted on October 20, 2011 by fundenis

Who or what is Ideasgarden?

Ideasgarden is the online home of art director, creative consultant, and all-round inspirational genius, Simon Philips.

What’s with the massive clock?

The concept behind the site is, “there’s always time left to think up another idea today”. The clock is a live timepiece, and it’s linked to a countdown elsewhere on the page, which shows us exactly how much time is left to think up this great idea!

There’s a lot of images on there, how are they updated?

Simon and I came up with a great way of using Flickr to do the heavy lifting – storing all the images and providing the “back-end” of the site.

Now all he has to do is edit the images and text on Flickr, and the changes go straight onto the live site.

Photography Portfolio

Posted on October 19, 2011 by fundenis

Who is Corinne Macdonald?

Corinne is an Edinburgh based photographer, gaining attention recently for her vivid and creative portraiture projects.

How did you approach the design of the site?

When the imagery is this good, the emphasis is on how best to present it.

I figured it was best to keep everything as simple as possible – plain text, loads of white space, robust navigation.

It’s usually really hard to keep portfolio sites up to date isn’t it?

Yeah but this portfolio is different – it’s powered by Flickr. The site has been built so that Corinne simply updates sets on Flickr, and they will automagically appear on the live website.

It’s probably the easiest imaginable form of content management.

How did you manage to integrate Flickr into the site?

Flickr has a great set of APIs. In this case I used their REST format to access the required gallery and load it into the site.

The site uses Flash to display the images (chosen for it’s natural copy-protection mechanism), and HTML for the surrounding content.