Click, scroll and interact with these four websites that mess with the cursor

Your cursor is pretty much always the first thing you look for when landing on a website (except on mobile, of course), albeit often subconsciously. So when someone decides to play with the usual format of a black and white pointer, it’s glaringly obvious. In turn, websites that do this – whether it’s through changing the actual shape of the cursor, playing with what happens when you interact with it or changing the behaviour of the site based on cursor position – are often invitations to interact, explore and play. For this month’s Double Click, we speak to five designers for whom the cursor plays a major role in one of their projects.

Jack Wild: isjackwild.com

The concept of digital designer and web developer Jack Wild’s website is simple really. Every click causes a bomb (your cursor) to explode, sending the content of the website into further disarray. The idea arose as Jack wanted the focus of his portfolio to be on interaction and physics. “The element of surprise was very important and I really wanted to play with people’s expectations by building a site which on the surface appeared to be nothing more than a list of text,” he explains. While an earlier iteration toyed with doing something with more embellishment, it was actually Jack’s then studio mate, Jake Dow-Smith who suggested stripping it right back.

Looking back on the design process for the site, Jack sees this idea of keeping things simple as one of his biggest learnings: “I think I needed to go through the process of trying out everything to realise that Jake’s comments were the right advice to listen to. Don’t be afraid to ditch a load of stuff you spent a lot of time on! It was quite a few years ago that I made this site so I think now I’d reach that point quicker, but I still end up ditching a hell of a lot of design and code I make.”

Crucial to the success of the design is the cursor itself as it “[gives] visitors a clue that there was more to the site than meets the eye, and it’s surprisingly effective, people seem to just ‘get it’,” Jack says. On mobile, while the cursor isn’t visible, the fact that users have to touch the screen (and therefore trigger the interaction) serves the same purpose. Although simple, how the site functions hints at Jack’s priorities as a designer and developer, and the kind of work any client can expect from him.

Jack’s top tips:

1. Start with gathering all the content, and then edit the hell out of it. Most of the things you think you need to include you actually don’t, and most things can be communicated in a more concise and clear way than your first drafts.
2. Then start with the structure, wireframes are really important for this and I’ll always start with pencil and paper so I can try loads of layouts without being precious — the messier and rougher the better! Then I’ll eventually move onto my computer and iterate until it’s done.
3. When you’re building things less structured, such as a stand-alone fun interactive element (for example the Interactive header I did for Bloomberg in December), sit away from your computer somewhere and list loads of quick ideas which pop into your head (just a few words for each one describing the core concept). Write them down even if they seem really dumb. You’ll quickly end up with loads of possibilities to choose from. I’ve got quite a lot of past experiments to draw from so most new ideas somehow evolve from things I’ve already done or by combining things I’ve worked on in the past.

Bruno Tome: brunotome.dev

When designing his site, web developer Bruno Tome wanted to go back to his roots as a graphic designer and create a one-pager that mimics a poster. “That’s why I had the idea of using the crop marks on the corners to look like an exported PDF right to print,” he explains. Then there are the typefaces designed to “roll” like a printing press and the series of custom typefaces designed by Bruno Rodrigues to represent the look and feel of each of the websites contained within Bruno’s portfolio.

Impossible to miss on Bruno’s site though is the cursor which is oversized and controls a cross-section of black and white, inverting the site as you move around it. The decision to use only black and white stemmed from the fact that Bruno specifically sticks to the muted colour palette in all of his work because he thinks “that drives us through an infinite path of imagination!” And the decision to keep it as a simple landing page linking out to each of the websites he has built was made because “I truly believe the live websites should speak for themselves” he explains. “Those who visit my portfolio should only focus on the full experience of scrolling and moving the mouse to have always two sides, the black and the white theme.”

Bruno’s top tip:

1. This question is quite odd for me because, to be honest, I don’t think I have the knowledge neither the experience to answer it. But as a user, I think we should think first as a user, every kind of user. Everyone should be able to enjoy this amazing digital era. However, the purpose of the website should be taken into consideration as well. I know it’s hard to combine these two things, accessibility and innovation, but that’s why we have designers.

Shauna Buckley and Simon Sweeney: otheroffice.net

While Bruno allowed the aesthetics of his work to guide the design of his portfolio, for Shauna Buckley and Simon Sweeney AKA Other Office, it was their process that provided the inspiration. “We wanted the site to reflect how we work,” they say, “there’s just the two of us and we sort of circle round projects at the same time and approach them from different perspectives so we spent some time thinking about how to visualise that in the context of the internet. At some point, we said to ourselves Other Office means ‘other mouse’ and that was the starting point.” In turn, upon landing on Other Office’s website, you are presented with two pointers, connected by a single black line that rotates and extends depending on your position.

Then, when discussing how the two cursors could cause confusion, they landed upon the idea of connecting images with their captions using the line. “The idea that the cursors are working in tandem meant that where they both landed would be interrelated,” they explain. “The design then had to follow the rule that if the mouse was pressed, the link under both cursors had to go to the same place, so the layout and navigation tumbled out of that thought process pretty swiftly.”

If they had more time, they tell us, they would have loved to have invested more time in the mobile version of the site and what the tandem behaviour could be, “maybe some sort of my multi-touch interface would have conveyed the same connection or even needing two devices to view the site fully or something would have been interesting to explore.”

Other Office’s top tips:

1. At the minute we’re trying to approach websites as an extension of the person publishing the site (usually our client). We try and get a sense of their process in whatever work they do. If they’re an artist and they use collage, building up layers upon layers over time to create a final image, we note that and try and apply that process to the medium of the website. We take those verbs and pose them to ourselves as a question. How could a website make a collage? What if a website could talk? That type of thing.
2. Usually, we find that in replicating our client’s process through the lens of the internet the output speaks more closely to who they are and what they do than something that is just “nicely” designed. I guess we’re hoping that if we can communicate something about them via interaction or behaviour, we’ll be taking advantage of the medium in ways we couldn’t elsewhere. In the same way that you might choose a certain foil for the cover of a book.
3. Of course, many clients simply want something that is nicely designed so how visible this process becomes sort of a sliding scale.

Jaan Sarapuu: beyondmatter.eu

Beyond Matter is “an international, interdisciplinary project, organised by ZKM (Zentrum für Kunst und Medien) on the revival of past landmark exhibitions, the documentation of current exhibitions and the dissemination of documentation along with actual artworks – both materially and immaterially present – in innovative ways,” explains Jaan Sarapuu, who was part of the team at AKU who designed and developed its site. With such rich material to build upon, they needed a design that would uphold the same level of intellect. Thus, a combination of a floating “aura” (the dot that follows your cursor) and an X, Y, Z-axis fitted the bill. The latter stemmed directly from the visual system for Beyond Matter and “is designed to express movement and transformation and embrace the transitory nature of art and technology.” The logomark and mouse interaction are a tribute to Walter Benjamin’s concept of aura: “the artworks’ presence in time and space.” As a result, “the website combines the concept of the aura with visitor’s interaction, this, in turn, creates endless compositions of which some work, some don’t, some are excellent and some complete failures – thus encouraging the spectator to take the role of a participant.” These elements are very much the team’s favourite part of the build, Jaan explains, because “we feel that the combination of the two create an overlaying space of their own and embrace the ideas we wanted to express while designing the identity.”

Through designing the site, Jaan tells us he’s learned how important it is to plan and sketch but to also leave room for experimentation, saying that “some ideas just can’t be reached before the development phase and come to you after you really understand and have played around with the possibilities.” This means you need to be flexible, not just so that you can incorporate new ideas but so that you can adapt when the things you had planned don’t work out how you expected them to. “Some ideas might not be feasible just because it’s impossible to get them to work on a specific browser (or version even) so you have to be ready to compromise when these hurdles appear,” he concludes.

Jaan’s top tips:

1. Know your client.
2. Consider everything as an experiment.
3. Sketch in code, especially when working on experimental projects.