PHP

Brickly


Design

The site (this site) was designed as a portfolio of my work, so it’s very important to me that it is extremely creative and clear to use. Various mood-boards and UX designs were trialled.

Certain browser animations can be complex, fast, and smooth, and the design principle was to engage visitors through immediate and fulfilling illustrative animations. These would not be frivolous, but serve the role of a UI while create a clear UX pathway.

Development

By leveraging SASS, styling which would previously have required javascript can be accomplished easily with CSS. Furthermore, package management and a modern built environment allow better automatic support of older browsers, and quicker prototyping.

The site uses many animations which must be synchronised and sometimes reversed, for which I used the Anime-JS library. Since page transitions were also largely taken over by javascript, much of the site effectively became an state dependent app. Fortunately the power of ECMAScript 6 (compiled into vanilla JS though webpack) meant that the project could move from a functional to object oriented paradigm with appropriate encapsulation, abstraction and inheritance.

I Talk to Strangers


The client

The client was a entrepreneur responsible for starting and maintaining various social change projects, including I Talk To Strangers which became Speak Freely. A small site was needed to sell the badges which facilitate this campaign, which would allow the orders to be fulfilled automatically by the badge manufacturers.

Design

Having worked with this client in the past, I knew a tactile sense would be needed. However, I am no fan of skeuomorphic design. Instead I used a proprietary font I had created on a pervious project, which was produced from scanning an analogue typewriter, the layout keeping all information and CTA in a minimal single column, embellished with reactive imagery.

Once it was clear that a payment gateway would be needed, and the project was on a tight deadline, I opted to use the flexible e-commerce platform WooCommerce. The software is easily customisable in house avoiding the need for expensive 3rd party dependencies on such a small project.

Development

Development required a trade off between how robust the customisations to WooCommerce were, and how much time I had been given to work on this project. While sacrificing multi-lingual features, the site remains extremely accessible for all devices, including screen readers.

In order to keep page load times down given the image-heavy layouts, I kept all imagery with a restricted palette, allowing the use space-saving of 16-bit PNG images. And of course, all the content is served up using the latest in responsive media handling.

Find Enlight


The Client

The client was a zine producer who wanted an online outlet for their weekly collections of media. The requirement was delightfully difficult- my client had virtually no understanding of modern UX, and seemed to dislike the homogeneity which most modern sites adhere to.

Design

Full page video and animation enabled scrolling of the current collection greets the visitor, with simple archive navigation. The current UX reflects several drafts, including a working mockup site.

While underway, the client added various requirements- the site now had to be comment enabled, with permalinks for individual items and post descriptions. Not an usual request, but difficult to integrate late in the day. My solution was to have a sliding area to the right which contained the individual item’s meta.

Development

We looked at various platforms, but came back to WordPress since it could handle the custom taxonomies and complex queries needed to generate our content. These taxonomies formed the base of the project, since we needed to create collections of individual posts which themselves would have any of the attributes of a post itself. Once this structure was in place, the rest of the development continued smoothly.

Since the project uses Roots/Trellis to manage deployment, updates can be easily pushed from development machines without the need for myself as a dev logging into the production server. This has made applying new patches to the theme very easy.