Some of my work as Senior Digital Designer/Developer for Imperial College London. There is a lot more, but here are some of my favourites. Further down you can see some of my UX and IA work.
Design and implementation of a new monthly email for Imperial's alumni. Template had to be editable and sendable via Outlook and be focussed on Desktop clients – hence the nested table approach. HTML/CSS, PS/AI.
Templaye includes various exchangable headers for different campaigns, such as fundraising, news, profiles, etc.
A bumper to brand Imperial's iTunesU videos. Created with Stephen Coe and Martin Sayers. Music: Marian Mueller. Filming: Karsten Seipp, Martin Sayers. Ferro-fluid "operator": Stephen Coe. Direction and editing: Karsten Seipp. Making-of video: Martin Sayers. PS/AI/AE/PR.
2010 update of the Imperial College London student blogs -- a desk with 'living' students and lots of hidden gimmicks, powered by Box2D. See a making-of video here. HTML/CSS/JS/AS3, C4D/PS/AI/PE/AE. [Offline]
The landing page of Imperial's undergraduate prospectus. Art direction by Beth Elzer. Winner of UCDA awards. AS3/JS/CSS, AI/PS. [Offline]
A simple tool that allows image cropping in the browser. Implemented into tiny MCE to support web editors in everyday tasks, offering context-sensitive image sizes and easy cropping and embedding. AS3/JS/PHP.
The landing page of Imperial's first student blogs -- a zip line with talking polaroids. Winner of EduStyle and UCDA awards. AS2/JS/CSS, AI/PS/PE/AE. [Offline]
Online representation of photographer Victor Gonzales, featuring a drag-and-drop CMS to 'plant' the picture garden. Part of my M.A. 2007 final project. Published in Webdesign Index Vol 9 (2011). HTML/JS/CSS/PHP/AS2, C4D/AI/PS/PE/AE.
Pairs game for the online catalogue of tuning gear vendor SCSS. Screenshot shows start screen. AS2/PHP, C4D/AI/PS. [Offline]
There is lots of more work to show and I will add it later to this page. Really.
Some bits and bobs of my UX work. Again, there is more, but most of it is awaiting publication or still un-scanned on paper prototypes or in sketch books.
Wireframes for the 4 applications of BackPat. Far left: Text selection. Left: Multiple selection in a list. Right: The Pat-into-place technique to move the browser bar to the thumb. Far right: Map and image zoom. Short paper. Long paper.
Visualisation of finger sliding when touching the screen of a 4.7 inch phone in various locations while walking. From left to right: Left index finger, left thumb, right thumb, right index finger. Note: Users are not used to touching the screen with the right index finger and therefore tend to slide on the display during the touch process. Paper out soon.
1 + 2: Visualisation of recorded horizontal user swipe data for left- and right-handed users. A: An early sketch of a thumb-optimised interface. B: An annotated paper prototype. C + D: The final interface at start-up and launched. Read the paper.