Nick Watton

Building on a long-term understanding of Scot.Gov requirements, Storm undertook a project to use AI to auto-generate forms from a variety of sources.

As the lead front end developer my primary role was to ensure a coherent front end design, and provide any DOM manipulation JavaScript. In addition, throughout the project daily stand-ups provided the space for me to reflect on the UI, UX and accessibility directions the (backend driven) build was taking, and keeping it honest!

A small UX discussion about visual representaions of a user's journey through a complex chart led to me implimenting the Mermaid charting library which swiftly become a central pillar of the projects UI.

JS, Mermaid, CSS, .Net Razor template integration

Implementations are not currently public.

Mermaid prototype on CodePen

A large scale Scot.Gov project to review the existing online planning permission process.

As the lead front end developer on the project I implementated the Scot.Gov design system, integrated with Storm's own design agnostic scaffold. I was responsible for ensuring that during the process of .Net implementation WCAG 2.2 accessibility standards were maintained, and providing any DOM manipulation or forms related JavaScript as required.

One such custom element was a tool for accurately mapping the boundaries of a property. For this we used the OpenSystemsLab geo-data mapping API, and you can see a test implementation via the link below.

The project is not yet live, but the Scot.Gov Digital Planning team intends to take the alpha service prototypes forward to beta and live, in line with its digital strategy.

JSX, JS, CSS, .Net Razor template integration

Implementations are not currently public.

OpenSystemsLab API prototype on CodePen

Following the Glasgow Life transformation, Storm was tasked with a similar overhaul of the sister site, Glasgow Club.

Glasgow Club has a distinct design language from other sites in the group, so whilst the underlying scaffold is largely shared across the estate, as lead front end developer on the project, I needed to take care that all details of their design were implemented correctly.

Whilst many of the challanges from Glasgow Life had been solved for this build, the scale of tablular data presented for venues and activities proved an issue. Smaller tables (opening times) maintained visual structure and only changed width responsively. Larger tables required a visual collapsing of <td> elements, whilst maintaining DOM structure and coherance for keyboard users.

JS, CSS, .Net Razor template integration

Visit Glasgow Club

Storm took Glasgow Life through a complete digital transformation programme, redeveloping their main web portal, and dedicated venue and event sites.

As the lead front end developer on the project I ensured the design was faithfully implimented, and ensured accessibility standards were maintained.

Interesting challanges included the map view for the venue finder, bespoke Swiper carousel conflicts, and much longer than expected horizontal in-page navigations. However, working closely with the design, UX, and testing teams, all issues were resolved to the client's satisfaction.

JS, CSS, .Net Razor template integration

Visit Glasgow Life

The Historic Environment Scotland (HES) estate comprises some 30+ separately maintained websites, build over many years with multiple technologies. And they all needed to have their cookie banner updated and WCAG 2.2 compliant.

My role was to adapt their existing cookie banner code for compliance (specifically ensuring no interactive elements are obscured), to be standardised for all sites, with configuration options, but without the need for an implementing developer to customise the JavaScript.

Final delivery was with a .umd JavaScript bundle with a configuration object in a <script> tag. I provided extensive documentation for HES developers to use, and was available for support when some implementations where less straightforward and the HES developer needed assistance.

JS, CSS, Markdown (for documentation)

Historic Environment Scotland

Edinburgh Castle

When the COPFS started to return to office work after lockdown, they needed a tool to allow staff to book desk space. I converted paper office layout charts into data, in JSON format, which allowed all offices / desks to be dynamically drawn and interacted with. Booking data was submitted to their existing SharePoint intranet.

As the full application is an intranet, there is no public URL.

View WiP on CodePen

Drone Kick game.

Part of the "One Team. One Standard." British and Irish Lions tour sponsorship campaign.

Written with vanilla JavaScript, this is a simple target shoot game. Gameplay needed to be the same on mobile and desktop so the interaction is necessarily simple: automatic missle direction control and one click to fire.

The game can work in a standalone configuration for conferences, with a leaderboard mode to display the top ten scores on a separate sceen.

Over 64,500 plays in a month, with an average 44 plays per person.

The campaign, for which I also created display ads, was awarded BT Sport Industry Award. Best Ambassador, Influencer or Partnership of the Year.

HTML, JavaScript, GSAP-js, CSS

Drone Kick - Play an archive of the Game

A quiz that selects your funeral song, embedded as a standalone tool within the main Sunlife site.

I include this project not for it's scale or technical merit, but rather because it casts a fun light on a can-be dark subject.

It was a quick and enjoyable project which is still alive on the client site 5 years later. Now that's something to sing about!

HTML, JavaScript, CSS

Take the quiz

CodePen prototype

At Realise I built 10s of campaigns (each with 10-14 individually sized units) for Heathrow. I really enjoy the specific challenges of making banners work. They must be lightweight, and the design and animation immediately engaging. It looks easy but it needs a fine eye for detail and a high level of trust between designer and developer.

These campaigns saw very high engagement, and presented a clean design in a very lightweight package.

I even saved enough filesize to be able to include a subtle particle system in their Christmas campaign to add movement and sparkle.

HTML, JavaScript, GSAP-js, CSS, DoubleClick with dynamic feed

Heathrow Christmas MPU banner, with added sparkle

Whilst at Realise I made probably hundreds of banners for clients like Not on the High Street, Forza Racing, Channel 4, Heathrow, Standard Life, Sun Life... All fun and unique.

Some were simple image and text; there were several with videos, and a few exciting ones where I could get interactive, add particle sparkles or even dynamically create Delaunay triangles in the background. One of my favourites (sadly now lost without trace) was for Channel 4 and had a washing machine with a spinning drum, served under their strict 55kb size limit.

Mostly served through DoubleClick, but also via FlashTalking.

HTML, JavaScript, CSS, DoubleClick / FlashTalking with dynamic feed

C4 MPU XBox One Forza Racing 7. Coded venetian blind (?!) image transition

SLI MPU banner with scenic parallax and plane flight

Lightweight animation sequencing engine demo, on CodePen

I am now a certified developer for DoubleClick banners.

This means I have demonstrated my knowledge and skills to build high quality rich media ads within DoubleClick Studio, with particular knowledge regarding the development of dynamic content creatives.

In addition, I am QA certified for DoubleClick banners, so my builds are more likely to pass their audits first time, and be ready to publish more quickly.

HTML banners

I am a huge Brompton bike fanboy, so when I heard AmazeRealise was pitching to them I had butt in, and quickly knocked up this responsively animated, interactive Brompton bike banner.

Moving through the three main steps in the bike's amazing fold, the user can also customize the paint, just like ordering the real thing (used to be).

Born out of personal passion, whilst the pitch wasn't sucessful, this illustrates how all parts of a team can pull together and produce something unexpected.

SVG, CSS, JavaScript

View on CodePen

I took this React course to refresh and deepen my understanding of the framework. It was super interesting and great fun.

React, a little bit of Next

Course overview and curriculum

When the application my dyslexic son's learning support teacher used was closed down, I remade it for her and her colleagues.

Free to use.

JS, Canvas

View on CodePen

Made during a hack week at Secureworks, with an idea that it could be an easter egg on a 404 page.

A horizontal scolling invaders game, with handrawn graphics. Vanilla JavaScript, using ES6 modules. The first two waves of invaders are hand coded to spell a message (originally relevant as a 404), then afterwards we fall back to an endless random enemy pattern generator.

I revisted this to make a JS13K Games entry. I managed to keep it hand-drawn, although I did need to cut the parallax environment layers.

JavaScript, HTML audio

The original game on CodePen

JS13K entry

My first entry for the JS13KGames competition.

The challenge was to write a JavaScript game in no more than 13k, all in.

I created a shadowy maze which you have to navigate against the clock to find a heart.

JavaScript, HTML audio

Play the Game

JS13K entry

The sound artist Jerobeam Fenderson (oscilloscopemusic.com) creates music that can be visualised through an oscilloscope. I don't have an oscilloscope, so I wrote a JavaScript player that does the same thing.

This is not an animation.

The graphics are the visual output of specially created music, produced by combining the stereo waveforms.

Featured in Steve Gardner's Tiny Web Animation Newsletter.

JavaScript, Audio API

Listen and watch

I co-ran a team building challenge, to paint 3D Easter Eggs, then create a game or interface to use the resultant images.

My primary role was creating the initial paint application, using canvas for the main painting app, and live rendering the result onto an interactive 3D egg.

I also took responsibility for encouraging colleagues to contribue to the project, helping with the egg API.

JS, Three.js, Canvas, SVG

Paint an Egg - No instructions, but you'll work it out!