We’re a small, personal studio designing and programming memorable websites for creative companies and individuals working within the creative and cultural sector. It’s primarily just me working on a project’s design, development and client communication, or sometimes on consultation. On larger projects I’ll also work with freelance developers, collaborate with other studios, or with an in-house team.

Clients will often approach us after seeing our work elsewhere, and they’re often happy to encourage us to experiment with new and unexpected forms of web design and interactivity. Our focus is on the overall user experience – exploring innovative ways to connect the content with the interface and create engaging web experiences.

The project for Torque Editions had been in the pipeline for about a year before starting fully in November 2017. The agreed launch date was set to coincide with an upcoming talk by members of Torque in February 2018. It’s a great example of the kind of projects we work on as a studio – creating new forms of online interaction where the content and interface are unified.

I’ve worked with Sam Skinner, the co-founder of Torque, a number of times over the past three years. Sam is a curator involved in a number of projects, and we initially worked together on a digital environment for his own work. Last year I also worked on a commission to design and build a site for an EU-funded arts project he contributes to, New Materialism.

The brief was to reimagine the published outputs of Torque Editions for the web, but was left quite broad. Unusually, the task was not to sell more copies of the publications, but to make the publications more accessible to a wider audience, including free digital downloads.

The project lasted three months in total, with the design, interactive prototype and development stages taking a month each. Time-wise, the interactive prototyping stage tends to be the biggest variable as we begin to connect the content to the interface and explore the finer details of animation and interactivity.

Initially, to start the process, I will have a face-to-face meeting with the client to outline the brief and requirements. This is one of the most important stages, as it ensures that we are a good fit for the client and vice versa. It sets the tone for our relationship, and ultimately the success of the project.

Throughout this initial process, we’ll interrogate the subject matter and identify what content is to be featured. We will also begin to explore how we might imagine the content in the digital space and the ways we can interact with it. If the client has any particular business requirements, or technical considerations, we'll investigate these at an early stage and consider them throughout the design process.

Typically, research is gathered in a longer and more organic process, rather than on a project by project basis. We’ll work from an ongoing archive of visual references as well as our own interactive prototypes, and references from past projects often feed into future ones. Much of my work is new and experimental, and a lot of the interactive research is self-generated, through testing and experiences from previous ideas and projects.

We began by experimenting with the physical books themselves, laying them out, layering them, photographing them and exploring how we interact with them in the physical world. From early on in the process, we’d decided we wanted to use images of the publications themselves as the primary form of navigation.

For the design, we revisited a bookmarklet we built five years ago [see below], which takes the images from any webpage and randomly scatters them across the page. At the time we were working with a number of photographers, and this was part of an experiment aimed at encouraging the user to experience images in a different context.

We ran the bookmarklet on a layout that contained the photographs we had taken of the Torque publications in a conventional grid. This process presented the publications as connected objects floating in a three dimensional space and we immediately saw potential in developing it interactively.

In the initial design proposal meeting, outline designs were prepared for one idea as well as developing an interactive prototype which the client was able to try. We don't use raw wireframes (where you replace images, text and other content with raw outlines and rectangles), so we work with real content as early as possible.

As interactive design is such a large part of our work, it’s useful to provide a way for the client to engage and interact with, so they can understand potentially complex proposals and have a say on their development. Having worked with the client before, we understood and trusted each other's processes, which led to a relatively smooth transition between the concept and design stage.

In this case we met with the client four times – once for the briefing meeting, once for the initial design stage, once for the developed prototype stage, and once as we were nearing completion, with calls and regular email contact in-between. For the success of a project like this, a trusting client and designer relationship is vital to the design process.

We tend to be working in unfamiliar territory, so regular communication and visual updates for the client are key to make sure we’re on the right track. Since technically complex interactive designs can be time-consuming to produce, I’ll demonstrate them with code without having to fully build them. Often the budget doesn't allow for a large number of detailed prototypes, so we'll send video screen-recordings documenting major developments.

Once I knew the client was happy with our initial designs and prototypes, I refined layouts and typographic detail quite quickly, before building and presenting a more developed prototype with a resolved design two weeks later.

In terms of tools, static designs were prepared in Sketch, and design interactively in Principle. Programming tools include Sublime Text, Chrome and Live Reload. The site is built using Wordpress as a CMS, and uses SCSS and jQuery in the development process too. We are firm believers in the K.I.S.S principle.

At this stage, user testing is vital to ensure the work we're producing is accessible and understandable, as well as innovative. Occasionally we'll observe a user who is neutral to the content and concept. Their interaction with the prototype will often bring surprising results.

We're used to interacting with webpages by scrolling, clicking and tapping. For this project, we wanted to explore the nature of a more passive form of interaction, which was scrolling and navigating a canvas by just moving the mouse or titling your mobile device.

Our primary concern was ensuring a coherent journey between viewing all available publications, navigating to one and reading the details. Because of this, we made the website a seamless experience without page refreshes, utilising an unconventional yet intuitive layout that stays visible as you delve deeper into the site.

The only challenges we encountered were technical and emerged in the prototype stage. While ensuring transitions and animations are smooth across assorted devices and browsers, unexpected constraints can occur, however we identified these early and were able to resolve them.

Once completed, a fully custom website and instructions for managing content were provided to the client, and we also coordinated the website launch in mid February. At this stage the website has only just launched and we're waiting for the verdict, but we've had overwhelmingly positive feedback from early beta testers and on social media. The client is very happy with the finished outcome, and we’re looking forward to increased engagement with the publications with a wider audience!

Want to improve your coding skills? As part of a collaboration with SuperHi, we are offering readers aged 25 and under the opportunity to win a scholarship to their foundation coding courses. Apply here before March 19, 2018.