Guider: Website Engine for Travelers
August 2022
What
Independent project focused on designing a website for travelers and is in the process of development with my partner. Guider allows users to browse available plane tickets for their travel and search tourist attractions at their destination. The design is completed; however, the development using Django is in process.
Why
In an approach to study full-stack development and design a website considering the user's experience.
How
Design
-
Adobe XD
-
Adobe Illustrator
Project
Collaborative
Self-Initiated
Final Product
Final Product - Onclick
PRELIMINARY RESEARCH
Project Goals
Create a website where there will be two sections in web. One section will help users check real time airplane information and another will help users to see tourists’ destinations in destinations they search up.
Background
With COVID-19 restrictions loosening up around the world, people are back to traveling around the world. To join the fervent atmosphere formed by travelers all around the world, Ariel and Jungho decided to create a website where users could check planes in real time and could even receive information on the destination’s tourists’ sites.
User Research - Personas
Traveler who is comparing airlines’ prices
I want to travel around the world, so I would like to know available airlines I could take without going through every individual airline website
DESIGN GUIDE
Information Architecture
Site Map
DESIGN CONCEPT
Style Guide
I have tried to use two different contrasting colors that could catch the users' attention. One had to be a calm color where the users would not be distracted from the content, and the other had to be a symbolizing color for the website. Fonts that were used are common ones and were selected based on readability.
Colors
#2D3A45
#E3F2FD
#F4796B
Logo
Typography
Aa
Heebo
Bold
Aa
Heebo
Light
Aa
Work Sans
Regular
Iconography
Icons & illustrations were all made by myself through Adobe Illustrator. Through this project, I wanted to focused on exploring iconography and illustrations and a deeper dive into getting hands-on experience with the Illustrator tool.
Illustrations
