Richard Hallows

Senior UX Developer specialising in design systems and CSS architecture for Agile product teams, start-ups and creative agencies.

Web

Barnardo’s Design System

Colour guidance

I co-created the Barnardo’s Design System with a UX Designer. It’s a set of principles, guidance and example implementations to help other designers and developers build accessible and usable digital products for Barnardo’s, the UK’s largest children’s charity.

In this conference talk the UX designer and I explain how we worked together, and some of the innovations in our approach.

The design system itself is built using Gatsby, a static site generator powered by React and Webpack.

Stylelint

The plugin documentation page

I co-created stylelint, a modern CSS linter. It’s built using PostCSS and written for Node.js. It has over 150 built-in rules for linting styles in stylesheets and JavaScript. It’s used by companies worldwide, including Facebook and GitHub.

I co-built the stylelint website using Phenomic, a React and Webpack based static site generator.

Inside Abbey Road

Inside Abbey Road Studio One

At Stink Digital for Google Creative Lab, I implemented the CSS architecture and frontend build system using PostCSS, SUIT CSS and gulp for the Inside Abbey Road experience.

I also led the HTML and CSS development for the editorial content within the experience.

Webby Award Winner & FWA Site of the Month

Digital Production Office

Marketing website for DPO

I consulted on the CSS architecture of Sargent Disc’s suite of web apps, which are used by the British film and TV industry to financially manage productions.

I co-built the design system of Angular components using CSS Modules, PostCSS and Webpack.

Mentos Fresh Filter

Mentos Fresh Filter Home Page

I led the development of the HTML and CSS, using SMACSS and BEM notation, for Mentos’ Fresh Filter responsive website at Stink Digital for BBH London.

I used progressive enhancement techniques to ensure the site adapted well to differences in resolution, screen size, input type, network speed and device speed.

FWA Site of the Day

Offline

Geox Amphibiox

Amphibiox Home Page

I developed the responsive interface for Geox’s Amphibiox website using stylus, HTML and JavaScript, at Stink Digital for SMFB.

I unobtrusively incorporated resizeable Flash-based interactive video content so it was available on as many browsers and devices as possible.

Cannes CyberLions & FWA Site of the Day

Offline