Refract screenshot laptop


Design and template creation for the Refract Mac/PC app

Work Type

Design & Development


  • UX
  • Illustrator
  • HTML5
  • CSS

The brief

Amongst other services, LDL produce e-learning assets for their clients. With one of their largest clients in mind, LDL created an application to allow the re-purposing of their graphic, audio, animation and video libraries in a multitude of ways.

I was approached to provide a design overhaul of the app, streamline the UX and create HTML/CSS templates for their talented team of developers to hook-up to the code.

The approach

The idea behind the design was 'Content is King'. So I decided the focus of the app should be the white canvas area, allowing the imported assets and workspace to be given centre stage. The colour scheme of the app is dark and subtle, with clear icons and familiar UI elements. The 'Refract' logo is based on the refraction of light through a prism, and uses punchy bold colours.

Refract screenshot 4

The result

The app is extensively used by the client. Its easy-to-use layout and powerful features (with more added regularly) have gone down a storm.

Refract screenshot 4

Working with Ben is always a pleasure. It is great to see him work his magic on an initial concept, create a considered design and then deliver robust, pixel-perfect templates.