Kairos is a travel guide and research website using its influence to recommend and assist in researching the best locations to visit around the globe.
The travel enthusiasts asked me to design and develop a responsive web product that is compatible with the three major device sizes: desktop, tablet, and mobile device. I began by collecting their content, developing design wireframes, and building the web product with semantic HTML, CSS Grid, and Flexbox.
Client: Kairos (2025)
Deadline: 5 Weeks
Software Usage
-Figma
-Miro
-Visual Studio Code
What I Accomplished:
-UX & Responsive Design
-HTML & CSS
Kairos’ Content Collection
Kairos’ content is divided into their primary services to users: locating somewhere based on many prompts to recommend, assisting in planning, and blogging helpful tips and tricks for a successful before and after their trip. For this content collection process, I used Miro to document information before the wireframe implementation.
Click here to view more of Kairos’ content collection.
What Was The Thought Process Behind The Design Wireframe?
The wireframe was inspired by a mobile-first design approach to correctly align the desktop, tablet, and mobile device sizes. Having this in mind, I used UI elements that best fit this responsive approach, such as cards to display information and tab menus for content filtration. These UI elements allow the design layout to maintain its appearance but expand more visible information, creating a smooth transition between devices and increasing user satisfaction.
How Did I Develop Kairos’ Responsive Website?
Their five (5) webpage website was responsively developed by:
Semantic HTML
CSS Grid & Flexbox
The layout of this website primarily relied on these two frameworks, as I used CSS Grid to divide each section into a named section, creating a straightforward approach to organizing each row of graphics, titles, descriptions, and information cards. CSS Flexbox was helpful in placing and aligning UI elements correctly.
Interested in viewing more of Kairos?
