Hello
I'm Fraser. I'm a Digital Designer and Web Developer, specialising in digital learning.
Thanks for visiting my portfolio. Please scroll to see some examples of my work or email me
Sky Q
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 Sky Q hadn't yet 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.
Shortlisted for the
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 accommodate 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.
Zeiltoren
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 building in Almere, which features
- Animated, interactive diorama
- Full 360° floorplan photos
- Tour video
The navigation is designed to be as simple as possible...just keep scrolling!
Click above to view site
(Note: This was a proof of concept designed for a specific screen resolution. It may not display properly on certain screen sizes)
User Interface Design
I take great care to ensure every new project I work on looks different in some way to the others. Even if those differences are subtle. The three examples below may look very different, but they were all built using the same framework, which I built from scratch specifically to handle navigation elements.
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.
Customer Essentials
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, so would feel completely at home working within.
Love Billing
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.
Price and Packages
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.
Parallax Animation
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.