fraser smith


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.


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 am an experienced Designer, Developer and Videographer / Animator specialising in digital learning content. I have packed the 25+ years since I graduated from Dumfries School of Art, by designing fun, engaging yet functional web and mobile based elearning and digital media content for some of the biggest names in the Home Entertainment and Financial industries
A true multi-disciplinarian, I am skilled in the full Adobe Suite, especially Photoshop, Illustrator and Premiere Pro. As well as this, I have a depth of experience working with HTML, CSS, PHP, JavaScript and all the major modern developer tools such as Git, NPM, Gulp etc.
I am interested in combining many different forms of media to produce engaging interactive content. I'm always looking to develop my skills to keep work fresh for my customers but also exciting for me. As such, I always keep abreast of new technological developments, such as virtual and augmented reality and machine learning, to see how these new technologies can enhance the effective delivery of content.
Away from work, my passions are cycling, music and gadgets. During the first lockdown, I started learning to speak German. In the third lockdown, I started learning Piano. In 2022, as well as continuing these two hobbies, I'd also like to focus on learning React.js