Wolf&Whale.

The wolf and the whale.
A dualism in nature.

Wolf&Whale is a consultancy founded in 2014 that designs apps and software for disruptive, design-driven brands. We partnered with them to take their web and brand experience to another level.

Ideation.
Sitemapping.
Content Strategy
& Structure.
Wireframes.
Exploration.
Design References.
Moodboards.
Design Direction
& Style Tiles.
Look and Feel.
Creation.
User Interface Design.
Visual Design.
Prototyping.
Interaction & UI Motion Design.
Credits.
okalpha.
Alexis Benoliel.
Timothee Hatton.

Bringing the creative concept of this dualism into our process.

We needed to bring the creative concept behind the brand name into the design of the website: ensuring visitors understood the brand story and the two energies between the Wolf and the Whale.

Whilst we had a lot of fun exploring and playing around with this dualism, we needed to ensure the skeleton of the site and the user experience was sound. At this stage we begin to consider interactions and how things work or move, including interaction references at various interaction points to align on how vision for the end product.

Stylin'. Style tilin’.

We did a whole lot of exploration by creating what we call style tiles. We designed a magnitude of different routes, with various executions, and experimented with different layouts. Some were image heavy, some were more type-driven. During this phase of the project, we worked closely with the Wolf & Whale team to define the design direction. Quick-fire exploration and being able to see how different elements work together is crucial in landing on the best possible experience that encapsulates the brand. What worked well, was the creative freedom we were given to have some fun with bold, sometimes a bit out there, ideas and executions.

Rein in the exploration.

With a defined direction, we got into crafting the initial design layouts. We, again, explored multiple routes, eventually landing on a clean, minimal look and feel, that grounded the hyperlink-inspired blue and custom lettering. We extended the flat, quirky simple graphic language into a minimal, modern UI that made Whole & Whale's work the hero. We integrated the key brand display typeface into the look and feel in a way that was still usable and legible for large areas of text. All of this became the basis for the animation 'easter egg' that added another dimension to the project.

Move, b#tch! Show me the way.

We showcased our vision for how things move, interact and transition on the site, through the exploration of interactive prototypes. Using Principle for Mac, we were able to clearly articulate how we saw the product interactions.

Working with friends.

We worked closely with our good friends and frequent collaborators at okalpha to bring the animation easter egg to life… Some punchy, visual eye candy left hidden on the site for curious visitors to find.

We also worked closely with our development team, Alexis Benoliel and Timothee Hatton on this project to deliver high quality, pixel-perfect product. A key part of the implementation phase, on our side, is sourcing quality developers and managing them on behalf of clients. We worked closely during the development phase to ensure the design vision had been implemented in the right way and tested the work on different device sizes to ensure the experience matches that vision on any device size.

It's responsive! Obviously.

As with all our web projects, we took mobile and tablet and designed them with the defined look and feel for the brand, ensuring the product functions as best as possible across any screen size.

Already getting some love.

The site was recognised on Awwwards with an Honourable Mention (23 May) and Site of the Day (4 June). Big thanks to Wolf&Whale, okalpha, Alexis Benoliel and Timothee Hatton for all the great work on bringing this together.

Great work doesn’t evolve from a One Night Stand.

This project has been the start of a great partnership between our two studios. We have since gone on to partner on multiple projects.

Hello.
00.
Please update your browser to view this website.
Turn your device please.