ghostfood.uk/Design
ghostfoodtv@gmail.com

Even more
interesting than
it looks

25 years of UX-UI design and
web development by
Steve Mannion

UBS

Crucially this role has allowed me to overlap UX-UI design with front-end development so I could continue working across both disciplines to develop working prototypes from designs, create an online Design System for both my team and other developers as well as collaborate with developers on the final product, monitoring it for design consistency, efficiency and accessibility.

As well as producing great graphics and disciplined design I love working with HTML, CSS and JS every day. At UBS I've led the front-end development, maintenance and explansion of a tech-support platform called My Hub, in both internal website and mobile app form, broadening my knowledge of Angular, React and Typescript in the process.

Daily use
HTML & SASS
VS Code
Figma
React
Angular
Typescript
Git & Gitlab
Occasional use
Adobe CS
Sketch
Visual Studio
image

Statjam: At A Glance

A project bringing collections of data together for greater convenience and analysis. From chronologies to ranked tables and statistical results - across categories such as People & Politics to Culture & Entertainment, Sport & Recreation to 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.

Tools
HTML & CSS
JS & jQuery
Bootstrap
Adobe CS
image

BP Educational Service

As a contractor with EdComs (now EverFi) from July to December 2017 I produced UI mock-ups, guidelines and components (including iconography and decorative imagery) plus a homepage car70 in browser for BP's Educational Service website which went live in April 2018.

The site offers educational resources for schoolchildren and young adults. This project involved working with sophisticated brand guidelines for a large global corporation and an impetus to provide a responsive website with a modern, dynamic look and feel.

Daily use
Illustrator
Invision
HTML & CSS
Occasional use
Javascript
image

EdComs

Work as a contractor with EdComs (now EverFi) from July to December 2017 included the design of websites and email templates for BP and Start Profile plus website components for the Premier League's Primary Stars initiative and Public Health England.

Daily use
HTML & CSS
WordPress (inc. PHP)
Sketch
Illustrator
Photoshop
InDesign
image

Flight Centre

I joined Australia’s leading travel agency in Summer 2018 in my first Design Lead role to modernise their UK website in both UX and UI respects, improve task management and workflow within the team. Directing a Senior and a Junior UX/UI Designer in delivering research, wireframes and design mock-ups of sections of the site to be redesigned, I also liaised with stakeholders and developers equally to achieve SEO-orientated B2C outcomes.

This role also required greater time with and focus on tools such as SessionCam and Google Optimise from which to determine best approaches to the user experience via A/B testing and analytics.

Daily use
HTML & CSS
Sketch
Occasional use
Drupal
Zeplin
SessionCam
Google Optimise
image

DUAL Group & My Legal Indemnity Shop

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.

The UI for this product was developed over four months working from the original specifications but flexible enough, via CSS, to accommodate later changes and new features.

Daily use
HTML & CSS
Bootstrap
Node JS
GIT
BitBucket
Occasional use
Angular
Umbraco
SourceTree
image

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 aty of this large government organisation's microsites and one-off projects contained within the main website.

Daily use
WordPress (+ PHP)
Adobe CS
HTML & CSS
Occasional use
Visual Studio
GIT
PyCharm / Python
Basecamp
Trello
Google Analytics
image

Ultramix

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

jQuery
HTML & CSS
Adobe CS
Sony Acid
Sony Sound Forge

MUSIC with GhostFood.uk

I created a Music section on my site featuring a customised video 'jukebox' allowing randomised play of YouTube playlists I created and update along with my collection of Spotify playlists and lists of favourite tracks across a range of categories.

JQuery
HTML & SASS
Bootstrap
Adobe CS

Freaky Trigger

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

The site was redesigned from scratch in early 2023.

WordPress
PHP

Graphics on Flickr

Business beermats / Commerce coasters

Shameless self promotion but a rare foray into designing for a physical object.

Illustrator

BeBreeZee weather icons

A set of flat colour icons available to buy on IconFinder and in use on the At A Glance website.

Illustrator

Walter

Experimental artwork/poster design.

Illustrator

PieChArt 1

Poster design and experiment in colour coding and arrangement.

Illustrator

Abominotions

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

Illustrator
Photoshop

Self portrait

Trace of photograph using blended paths.

Illustrator

Mind yourself

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

Illustrator
Photoshop

Ultramix promotional artwork

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

Illustrator

Let's have an adventure

Experimental artwork/poster design.

Illustrator
Photoshop

Experimental poster designs

A series of four.

Illustrator

Typeface concept

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

Illustrator
Lightroom

Blood on the dancefloor

Experimental artwork heavily influenced by the work of Olly Moss.

Illustrator

Ghost Food promotional artwork

Original logo created with Illustrator and animated using Premiere.

Illustrator
After Effects