For the Sky Q project, I was tasked with building a visually arresting, easily controllable toolkit which would serve as a central hub for information. I was part of a team of two and solely responsible for the main framework and the ipad app, as well as some of the content.
Because the project hadn't launched, and was still under very strict NDA, we had to adhere to the brand more ridgedly than ever before, but still find a unique identity for the toolkit.
The content would also be accessed by the Sky Engineer workforce, an offline iPad app version had to also be produced.
I designed two unique user interfaces, depending on whether you were accessing via a touch screen device or regular computer.
The user interface was designed to keep with the theme of 'fluid viewing'. Buttons ripple out from each other like drops of liquid, while icons animate between states.
As menus are opened or closed, the content of the page shifts in scale smoothly to accomodate them.
Even transitioning between pages was designed to be fluid. The background subtly fades between states as the content flows from one page to the next.
I wanted to demonstrate building a webpage which was highly interactive and conveyed a lot of information but was still easy to navigate and didn't leave the reader feeling overwhelmed or confused. This is a single page web-site I built about the Zeiltoren in Almere, which features
The navigation is designed to be as simple as possible...just keep scrolling!
Click above to view site
(Currently under development - May not display properly on certain screen sizes)
I had been aware for a while that, for every new project, I had to duplicate a lot of the same work, which didn't leave much time to try and design anything new. I decided to build a template which would take care of common tasks, such as handling navigation, and allow me to focus on designing an intuitive user experience.
Once I had a version I was happy to work with, I set about shaping it in such a way that colleagues who were not used to working with code would still be able to create and edit advanced interactive media.
This freed up more time so I could focus on the user interface design and make it unique for each project. The examples below, depsite all looking very different, were built using the framework.
This was an attempt to recreate the interface of the Sky Planner as a framework for navigating elearning or slides. It's an interface which every member of staff would be extremely familiar with,
The original of this module was the first project I worked on when I started the role with which I had never been entirely happy. I relished the opportunity to revisit it when it was updated a year later and rebuild from scratch.
The brief for this project was to make the learning as attention-grabbing as possible, So I turned everything up to eleven and included full screen video backgrounds, parallax scrolling page navigation and other animated elements.
Every page was different from the previous page, but I was careful not to distract from the content by still utilising lots of white space.
I love the depth you can bring to a simple photograph by carefully slicing it into layers and then subtly moving the layers. It's a technique I find myself returning to quite a lot. Sometimes as part of a video or presentation, sometimes interactive. Click play below to see some examples.
Myself and a few colleagues visited the Learning Technologies conference in London at the start of 2016 and were asked to present back what we had found to the rest of the team. Rather than try to convey just in words, I had the idea that it would be better to write up my findings on a website and accompany it with videos and links to further reading, which they could then explore at their leisure.