Hello

I'm Fraser. I'm a designer and developer of web and mobile apps, specialising in digital learning.

Thanks for visiting my portfolio. Please scroll to see some examples of my work or get in touch via the menu at the top.

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 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.

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.

A bit about me

I'm a web developer, and user experience designer, specialising in digital learning content. In the 20+ years since I graduated from Dumfries School of Art, I have been designing fun, engaging yet functional web and mobile based elearning and digital media content for some of the biggest names in the entertainment and financial industries

A true multi-disciplinarian, I am skilled in Photoshop and Illustrator as well as HTML, CSS, JavaScript and all the major modern developer tools such as Git, NPM, Gulp, Bower etc.

I am interested in combining many different forms of media to produce engaging interactive content. As such, I am also highly experienced in the production of video and animation. I'm always looking to develop my skills to keep work fresh for my customers but also exciting for me. I have recently started looking into the production of virtual reality content for the web and look forward to producing some results very soon.

Away from work, my passions are cycling, music, gadgets and all things Dutch. A few years ago, my wife and I fell in love with the Netherlands and we are currently learning Dutch.

Still want to see more of my work?

Some sections are currently disabled but are coming soon.

Animation and
Video
Photography
and Illustration
Writing Testimonials Case Study