Gateways International: Website Design

Gateways International is a luxury travel agency designed in Figma and built in Wordpress.

web design
style guide
responsive design

Introduction

Since 1986, Gateways International has been a leader in tailor-made tours to Europe, the Mediterranean and Central & South America. The company desperately needed a post-Covid website redesign. I was hired by a developer to work on the project and deliver the best suited refreshed look for the luxury agency.

My contribution

Visual exploration
2 homepage sketches
5 pages design
Style guide

The team

1 x web designer
1 x developer

Year

2023

Moodboard Figma screenshot

Requirements

Home page – featuring at least 12 itineraries, a place for 2-3 testimonials, a spot for PDF brochures.

Itinerary pages – must include the components you see there today, the ability to send a PDF of the itinerary page, or share with someone, print properly is also important.

Request form – emails are sent to the agency for requests, all products are customized.

Components – flexible and editable – itinerary page templates from which to model unique itineraries with various fields.

Target group selling exclusively to travel agents (B2B), yet with customers navigating brochures and the website.

Homepage

Initially, 2 homepage sketches were made, in order to better understand the client's visual inclination.

image representing 2 homepage design options

Style guide

This is the established functionality guide which includes rules on typography, colors, button styles and other properties.

It was made clear in the design briefing that the colours should remain the grey, gold, white, black. The website aiming for a fresh, clean and simplistic look, letting the images of the travel destinations shine.

Moreover, we ensured that the fonts we go for are readable, modern and are easily seen cross-platform.

Typography parameters in Figma
color palette options in figma style guide
button interactive components in figma style guide
elevation parameters in figma style guide

Other UI

All design system elements are flexible for change: from atoms, molecules, organisms, templates, to pages.

custom icons screenshot
Custom icons
input UI screenshot
Input fields
dropdown ui screenshot
Dropdown

Final result

The design is currently in dev mode. Follow the live progress here.

screenshot of the final result

Next project