Buckle up! We’re diving into the world of travel website design

Travel is a saturated market when it comes to websites. The first ever travel website was created in 1994 – only three years after the launch of the world wide web – and was essentially a directory of hotels around the world. Since then, our understanding of what constitutes a travel website has changed. They can merely be, as they were originally, online destinations to help facilitate travel through booking flights or accommodation. But they can also be websites dedicated to the art of travel and to the spirit of exploration. Some of these websites are not there to sell you anything, but simply to share with you personal stories of discovery. Within this however, it has become increasingly common for brands to fall prey to cliché designs that prioritise form over function and style over substance. In such a crowded area of the web, presenting your content so that it defies convention is crucial, and hearing from other designers on exactly how they achieved this is invaluable. As such, for this month’s Double Click, we’ve reached out to five studios and brands that are doing interesting things in this space: Avaunt Magazine, CC Magazine, West Coast Tasmania, Equinox Explore and Trippin.

Avaunt Magazine: www.avauntmagazine.com

Avaunt is a London-based magazine that “aims to satisfy those with a restless imagination”. It specialises in short-form and long-form journalism that investigates the world’s most remote and inaccessible places, the latest discoveries in design and technology, and issues connected to the environment. But it’s not just the writing that makes Avaunt a desirable destination for travel – it’s also a visually stunning publication. Slickly designed and featuring jaw-dropping photography of some of the world’s most beautiful and rugged landscapes, it takes a more conventional approach to the subject, but does so with style. Avaunt is a great example of a travel website that isn’t necessarily breaking the mould, but manages to stand out through its high-quality content and unwavering commitment to exploration in all its forms.

In recent years, Avaunt has become a go-to in the world of travel publishing, and it was important for the team behind it to have a website that could match the ambitious editorial found in its pages. So they called in Bristol-based design and development studio Kaleido Grafik to fulfil their vision. “The brief was simple: To take Avaunt’s beautifully crafted physical magazine (designed and art directed by Matt Willey) and translate this into an online experience that centred around readability and ease of use,” explains co-founders Pete Dungey and Miles Gould. “The site couldn’t just be reflective of the latest issue, it had to be an overarching brand experience that merged all of the issues and themes into one space, without conflict.”

Most important to the design team was that the website do justice to the beautifully-crafted stories that can be found in abundance within the magazine itself, “retaining an intrinsic synergy with the printed page”. To do so, they “utilised typographic sensibilities” such as using Henrik Kubel’s Avaunt Stencil for large headings, A2-Type’s Antwerp face for body copy, and Typewriter font for captions and headings. “Matt Willey also redrew a softened version of his MFred typeface for feature headlines and pull quotes,” adds Pete and Miles. Elsewhere, they did what all good designers do and created a strict grid for the website that they could break as and when needed. This helped to replicate the diverse range of editorial layouts found in the magazine. “It felt important to do this so that each article layout felt authentic to the story,” they explain. “Furthermore, the design needed to translate seamlessly across all devices, so the responsive design was crucial to the success of the project, particularly when considering the long-form nature of much of the content.”

They continue: “It’s important to define what’s unique about the brand, product, or destination. Take the time to immerse yourself in the content and explore how you can craft beautifully designed experiences and artful expressions that capture those unique traits to surprise, prompt action and leave a lasting impression.”

Pete and Miles’ top tips:

1. It’s important to be conceptually ambitious from the start with key features across the site – it’s better to push the ideas and pull it back later if the technology, budget or client isn’t there yet.
2. As a small team, we like to work in an interconnected way, fusing deep understanding of brand experience, design, content and technology. It’s at the crossroads of these where the best results materialise.
3. Evolving technology has the potential to help us create, connect, play, and work – what new ideas can we bring to the site to elevate the digital experience? This is an ever-changing aspect of digital design that fundamentally changes the way websites are designed and built. The sites we work on today are more advanced and engaging than even a couple of years ago, and it’s technology (and new ideas of how to utilise it) that is the driving force behind that.

CC Magazine: www.ccmagazine.es

CC Magazine was created right at the start of 2020, just before the pandemic began, by creative director and strategic consultant Cecilia Camacho. Born from her love of travel, the magazine also covers culture, art and design, and serves as the publishing arm of CC Studio, a company that Cecilia founded the year before in 2019. As a continuation of her interests, and her passion for exploration, she says it was crucial, when designing the website, that it “reflect the great diversity that I come across when I travel”. It needed to be able to accommodate a wide range of imagery and visual references and connect them in a way that felt “simultaneously natural, elegant and modern”.

As such, Cecilia chose a vibrant design that could keep up with the contrasts created by the content. Working with Barcelona-based graphic design studio Ana Mirats, she developed a changing colour palette that allows the website to remain fresh and engaging, providing a beautiful canvas for the various articles that can be found throughout. They also forged a “typographic dialogue” and juxtaposition between the classic and timeless font Helvetica and the modern font Ogg-Roman, giving a sense of versatility. “The design had to work in favour of the content, making it pleasant to read and not detract from it,” explains Cecilia. “Another important factor that we were very aware of was the relevance that the photographic content would have in our magazine. In terms of design, we approached the reading as if it were a printed magazine: pleasant and dynamic.”

CC Magazine is a website that keeps you guessing and the pair worked hard to make it this way. Alongside the changing colour palette and contrasting typography, the articles themselves are presented in different layouts, according to the text, imagery and subject. “An initial guideline was that every time you went into the magazine, this would offer you a different aspect. That it would always surprise you,” says Cecilia. “That’s why we thought of a vibrant palette of colours that change randomly, and four types of layouts that alternate depending on the type of content. When they discover it, a lot of people write to us to tell us they love it.”

Cecilia’s top tip:

We each have our own method, so I can only tell you what works for me. In my case, it all starts with the construction of my mental moodboard. From there, I observe and analyse all those references I have compiled, as well as my competitors. That analysis allows me to set my strategy and determine what my positioning will be. And with these aspects well defined, that’s when I go down to the details and define the site’s structure and the key elements that I would like to incorporate into the design. The risk of repetition is very high, that’s why it is key to keep up to date with everything so you can provide something new and not be a mere copy. We firmly believe in the importance of strategy in any project and in working with a team that understands what you like and what you want very well.

West Coast Tasmania: www.westcoasttas.com.au

Tourist boards aren’t often known for their thoughtful designs or eye-catching aesthetics, and it’s easy to end up with a product that feels glitzy yet soulless; sun-kissed landscapes and smiling faces that are ultimately lost in the sea of other tourism websites that offer pretty much the same thing. West Coast Tasmania, however, truly breaks the mould in this regard. When you land on its website, the first thing you’re presented with is a near-full screen video montage of some of the most beautiful views around Tasmania’s rugged west coast, framed by an enticing red and yellow border which sets the tone for the overall colour palette. It feels rich and characterful and nothing like what you were expecting.

Designed by New Zealander studio Sons & Co., and branded by Australian agency For The People, the West Coast Tasmania aesthetic strikes a great balance between the contemporary and the retro. “The illustrations are reminiscent of bygone travel souvenirs, like sew-on rucksack patches and suitcase stickers,” says Sons & Co. founders Matthew Arnold and Timothy Kelleher. “Meanwhile, the large-scale typography references business signs commonly seen throughout the region during the early European settlement and late 19th century mining boom; and the photography is dark and moody, defying the stereotype of sunny, smiling tourism imagery.”

Speaking on the inspiration behind these design choices, Matthew and Timothy explain that they were heavily informed by the unique history and location of the region. “The west coast is a World Heritage Area with significant natural and cultural value. It’s beautiful, but it can be hard. It’s a long way from anywhere, the landscape is intimidating and the weather harsh.” However, embracing these aspects of the area transformed them into selling points, rather than things to be avoided. They go on: “By not shying from the ‘negatives’ – isolation, darkness, untamed, unforgiving and inhospitable – an unconventional beauty is revealed, which appeals to – and provokes – people who have a determination to take the path less trodden, to see what it feels like to stand on the very edge of the world.”

These characteristics are tangible throughout the website, which is honest about the reality of life in the west coast. It’s also upfront about the region’s confronting modern history, which includes “European settlement, convict times, mining, and subsequent environmental controversy”. Some tourist boards would avoid spotlighting these less glamorous elements, but here they are made a part of the region’s imperfect story – which is in turn a part of the local population’s story, and it’s very clear that the locals are a major feature of the branding. In fact, during the making of the design, it was decided that the system would be open source, allowing local businesses to create their own branding using the various typefaces and graphics. Matthew and Timothy say this is their favourite feature of the site: “There’s a tool to help anyone make their own west coast-style logo, which is fun. It’s a sort of open source brand, free to use and adapt.”

Matthew and Timothy’s top tip:

In some ways it’s easy to make an attractive, usable website because these designs already exist in abundance, and it’s not too difficult to be original, as anything goes. But the trick is to make things that linger in the mind.

Equinox Explore: equinoxexplore.com

The Equinox Explore page is not for your “typical tourist”. Designed by Base Design partner and digital director Mirek Nisenbaum, the website is primarily conceived around the idea of providing physically intensive excursions to “special and sometimes far-flung locations”. This, Mirek expands, is to attract the target demographic of the project, the existing gym members of Equinox’s line of London-based fitness clubs. Launched immediately prior to the Covid-19 pandemic in spring 2020, Mirek says that it was “perhaps the worst time for a travel initiative to go live” as it “meant that it wasn’t continually populated with content or used to its full potential”. There was even a whole adjacent website – which “incorporated daily schedules and a communication tool solely for use on excursions” – that ended up being scrapped, But now, with things opening up and travel being back on the agenda, the Equinox website offers a stylish route to holidaying for the health-conscious traveller.

Taking into account the two poles of the website’s focus when approaching the design aesthetics, Mirek explains that “we aimed to combine both the romantic imagery and language associated with travel with the technical and precise information required by the fitness-focussed, detail-oriented consumer”. When entering the site, you’re met with a snappy catch-phrase – “Travel for all who want it” – and a striking image of silhouetted hiker’s walking up a mountain at dusk. Simple and effective, the opening page is purposefully uncluttered: “The immersive nature of travel is represented through large, seductive imagery that draws in the traveller, while boxes of information acting as contextualising devices provide specifics at a glance.” The project also involved an element of adapting on Mirek’s part, with many of the design features of Equinox’s pre-existing, well-established visual language. “Parameters like bold all-caps type, a black-and-white colour scheme, and a predetermined layout format guided much of the design”, he tells us, “but we were able to adapt this language to create a site that is more image-driven and feels more closely connected to the world of travel.”

Discussing the most intuitive feature of the website, Mirek lands on the website’s aforementioned contextualising devices, which “work on multiple levels”. “Scrolling down the homepage the quick and easy-to-read information changes to show the details of the particular itinerary displayed. When clicked to view more details of each excursion, the box reappears to the righthand side of the screen, once again updating automatically to provide specific information about nutrition, accommodation, day-to-day breakdowns etc. as the user scrolls past the visually driven content on the rest of the page.”

Mirek’s top tips:

1. Start with a high-level concept that relates to the core of the brand. Think carefully about the target audience, and how they will view and interact with the site, rather than pile in features that might not be useful or relevant.
2. It’s also important to keep the ideas original and specific to the particular client. Taking ideas from existing sites and trying to apply them to others is never a helpful or rewarding approach.

Trippin: https://trippin.world/ – website relaunching 10 May

Centred around the concept of creating a broader “global-community” the Trippin site is one with people at its core. Leading off this sensibility, the Brooklyn-based Alright Studio wanted to bring the new Trippin site – launching on 10 May – “into a more functional and people-centric world”. “We wanted to instil a sense of discovery into the visual language and pulled cues from physical objects within the travel world”, the studio says. Realising this with a focus on “dynamic typography” inspired by authentic, location specific postcards and “visual cues” taken directly from maps. All these elements, the studio says, combine to capture “the essence of exploration”.

When approaching the design, there were three core elements that Alright Studio translated, the first of which being this idea of “exploration”. Describing the content architecture phase as “particularly demanding”, the studio sought to draw connections between things as disparate as locations, activities, and offerings. “It was important”, the studio expands, “that at no point in the site did you run into a dead end without a way to continue virtually travelling the world”. Secondly, essential for the studio to focus on was “ease of use”. Explaining the old Trippin site to be “a big visual splash”, but “deceptively limited”, Alright focused on “creating a larger, more robust CSM to make the design fully scalable”. And finally, perhaps the most theoretical element was “incorporating the real world”. Putting themselves in “the shoes of the traveller” the team was keen to consider the logistics – where and how the traveller would use the site. “We particularly focused on optimising the platform for mobile and creating one-handed tapability so that people can navigate the platform whilst on the move”, Alright explains, “we also ensured performance would allow accessibility across the board; even on the crappiest coffee shop wifi”.

With the site being the studio’s biggest yet, the team describes it as a “bit of a logistical beast”, and there are certain intersections and small details they would have considered much earlier on in the process, namely, the wireframes. “We noted that over the months-long design process that really small polish notes fell through the cracks earlier on.” But, the positives of the site firmly outweigh the small tweaks that could be made in the approach. A feature the team is particularly proud of is the detailed and innovative tagging system. The site allows for a continuous journey, through “taggable and searchable terms that are linked through content relationships. It was such a challenge to map all the tags and the ways they will interact to encourage our overall sense of exploration.” The Alright Studio team concludes: “Both the visual design and the way they fit together behind the scenes were tiny joys, but big victories.”

Alright Studio’s top tips:

1. Always start with intention. Not a new concept, but you’d be surprised how little attention is often paid to keeping a clear narrative from strategy to wireframes to visual design all the way up to finalised build.
2. Grid rules! You don’t know where you can break them and cut up your negative and positive space until you know where you stand with your grids.
3. A bit of due diligence on your client and your relationship with them. Websites are unpredictable and can quickly go off the rails in both appearance and timeline very easily; make sure you’re comfortable with your client and collaborate well — only then will you reach the best solutions.