Matt Layton

About me

Hi! I'm a web engineer with more than
10 years experience.

I'm passionate about creating beautiful user interfaces which rigorously conform to web standards.

I care a lot about user experience and making the web accessible for everyone.

Got a project in mind? Get in touch at mattlayt@gmail.com

I've always been excited and inspired by the possibilities of the web and the reach it has. At this point I honestly can't imagine doing anything else.

I specialise in front end development, paying particular attention to user experience, accessiblity, semantics, component API design, and authoring CSS at scale.

Working for Neontribe, I've been able to work on a multitude of social good projects as well as a couple of larger corporate ones, each with a unique set of challenges.

I've worked with a lot of programming languages over the years but feel most at home with JavaScript and React, which continue to evolve and excite me.

Work & Experience

Education

Hobbies & Interests

Projects

Allegiant Air

https://www.allegiantair.com

Most of my working life has been spent on the Allegiant Air project.

Based in Las Vegas, Allegiant Air are the ninth-largest commercial airline in the US.

I've gone from working for them as a Drupal CMS engineer to building UI's with a JavaScript based MVC framework (JMVC) to finally using a modern JavaScript stack which includes ES6, Webpack, GraphQL and React.

A design opportunity came when a new front page was needed. This is the version which got adopted:

Reusable Component Architecture

My passion lies in building scalable components which allow for high composition but still work in isolation. For Allegiant, I maintain a component library, which we refer to as Boneyard — it provides the building blocks for all of our applications.

Components include; buttons, form fields, layout, carousels and collapsible regions.

Built in React, each component comes with a well considered prop API and is supported by a configurable theme which allows for heavy customisation.

Luke Burroughs Portfolio

http://lukeburroughs.herokuapp.com

The Brief

To create a highly visual site on all devices — rethinking the stacked nature of mobile content — to find a means of seamlessly integrating web, tablet and mobile experiences.

Drone.io is a CI (Continuous Integration) platform which listens for pushes against a Git branch before, in our case, deploying them to a DigitalOcean droplet endpoint. This automation makes adding or modifying content simple — upload a few project images, update a configuration file to reference them, write descriptions etc, commit the changes and Drone.io will take care of the rest!

Through the power of Node and Express, the optimised production files are served using Forever and an Upstart script ensuring that the site continues to serve even after disruptions or reboots on the host environment.

Throughout the build, much consideration was taken to ensure that the mobile experience felt a core part of the end-product and not an add-on. This meant taking time to experiment with web fonts, scalable backgrounds and vectored glyphs as icons to ensure a crisper look on high resolution screens and an equal experience across all platforms.

The Technology

Initially starting as Jekyll development, the site was rewritten as a SPA (Single Page Application) in Google's AngularJS framework. Mostly, two factors lead to the decision to migrate platform; firstly, well, it's just newer so why not?

More importantly though, being completely JavaScript driven meant we could avoid Ruby complexities such as the Ruby asset pipeline for production optimisations.

“We need to make mobile a core part of the end product — not an add-on feature.
Already having a knowledge of JavaScript, said optimisations, including script uglification, minification, contatination and image compressing have been set up as Gulp tasks”

Daybook

Daybook is a digital diary prototype aimed at helping to improve communications between people with learning disabilities and those that support and services.

By learning some Adobe Illustrator basics I was able to design a logo, icons for topics, feelings and entry type.

Users were guided through a series of screens where they were able to choose from one of the available topics, a diary entry type (text, image or video) and whether the experience made them feel happy or sad.

Since some of our users had never interacted with a touch device before, I felt it was important that interactive elements provided haptic feedback.

Buttons achieved this by animating between two visual states; one with a drop shadow and one without.

Melville's Bridge Logo Design

Business Objective

Supporting housing for 16-25 year olds and helping them through transition to full independence — mainly, though not exclusively, focused on care leavers.

Eastern
Attachments

Eastern Attachments are manufacturers and suppliers of agricultural and construction loader, telehandler and forklift attachments.

Their current website, developed but not designed by myself, has aged and no longer reflects the success of their business.

I was asked to come up with a more modern design which considers best web practices, such as accessibility — which is not optimal in their current implementation.