Steve Mannion's adventures with Adobe CS, HTML, CSS and JavaScript

At A Glance

A project bringing collections of data together for greater convenience and analysis. From chronologies to ranked tables and statistical results - categories include People & Politics, Culture & Entertainment, Sport & Recreation and Travel & Transport.

This is a personal project reflecting my interests in statistics, data visualisation and the subjects covered as well as my skills in web and information design.


DUAL Group & My Legal Indemnity Shop

For DUAL Group I created the UI for this site, administered with Umbraco CMS and powered using Angular and a Bootstrap framework, providing a choice of legal indemnity quotes for residential property transactions.

The presented screenshots and artwork for My Legal Indemnity Shop include wireframes and prototyping in-browser based on initial user needs and technical requirements, plus examples of the CSS customisation per client.


UI Designer working with one Developer


The National Archives

Between 2011 and 2015 I was a Designer and Developer at The National Archives providing graphics, CSS, HTML, jQuery, UI and UX expertise for a variety of this large government organisation's microsites and one-off projects contained within the main website.

Go to webpage


I created and/or curated much of the imagery for this online resource of historical records, also providing layouts and CSS.

Visual Studio
Open Slideshow

The Design Collection: A UI Journey

A presentation demonstrating the process behind creating the UI for The Design Collection, showcasing a portfolio of rarely seen heritage designs held by The National Archives.

Mac Terminal

Go to webpage

The Design Guide

A blog post I wrote for The National Archives detailing my initiative to document the redesign of the website that began in 2013. I devised an online Design Guide as a set of instructions for how content should be arranged and displayed on screen.

Go to webpage

Records and Research

I provided layouts and CSS for the extensive Records section including Research Guides, also creating and/or curating much of the imagery.

Go to website

Image Library

This was developed by Bright Interactive with a style guide and mock-ups I provided to indicate both UI and UX preferences.

Personal websites


An extremely ambitious multimedia project I have been working on since 2004 to provide a series of DJ mixes for each year from 1990 to 2009 with a lavish website providing details for each mix.

Freaky Trigger

I created and maintain a responsive WordPress theme for this popular pop culure blog which has been active since 1999.

UK Chart Hits

I created a new Music section for my site including a series of pages listing every UK singles chart hit since 1952 accompanied by a Spotify playlist for each year.

Graphical Works

We Need To Talk About Walter

Experimental artwork/poster design.

PieChArt 1

Poster design and experiment in colour coding and arrangement.


Artwork for self-made mash-up DJ mix collection.

Self portrait

Trace of photograph in Illustrator using blended paths.

Mind yourself

Poster design heavily inspiread by an old Ryohei Kojima poster seen on ISO50.

Let's have an adventure

Experimental artwork/poster design.

Ultramix promotional artwork

Poster design featuring triadic colour combinations allocated for each edition of the series.

Experimental poster designs

A series of four.

Typeface concept

Characters drawn from scratch in Illustrator using a small selection of curved shapes to ensure consistency.

Blood on the dancefloor

Experimental artwork heavily inspired by the work of Olly Moss.

Ghost Food promotional artwork

Original logo created with Illustrator and animated using Premiere.