Developer: Railson Goncalves (raigonlab)
Sky-Fly is a modern, responsive website designed to promote aerial flight experiences. The project allows users to explore different flight experiences, view inspiring visuals, and easily get in touch to book their own adventure.
The target audience includes tourists, adventure seekers, and individuals looking for unique outdoor experiences. The website focuses on creating an emotional connection through visuals while maintaining a clean and intuitive interface.
The rationale behind this project was to combine design and functionality in a simple but effective way. As a designer and artist, I wanted to create something visually engaging while also applying solid front-end development practices. This project represents the balance between aesthetics and usability.
source: https://ui.dev/amiresponsive?url=https://raigonlab.github.io/sky-fly
Purpose
- Showcase flight experiences in a visually engaging way
- Encourage users to explore and book
Primary User Needs
- Understand the experience
- View images and inspiration
- Contact easily
Business Goals
- Increase booking inquiries
- Build a strong visual identity
- Deliver a smooth user experience
Features
- Responsive navigation
- Gallery
- Contact form
- CTA sections
Content Requirements
- Clear descriptions
- Strong visuals
- Simple booking flow
Information Architecture
- Navbar with clear navigation
- CTA buttons placed strategically
User Flow Desktop
-
User lands on homepage
-
Explores flight experience. A seamless silent background video showcasing the flight experience.
-
Views gallery
-
Goes to contact page
-
Submits booking request
-
Error page 404
User Flow Mobile
-
User lands on homepage
-
Hamburger menu
-
Explores flight experience
-
Views gallery
-
Goes to contact page
-
Submits booking request
-
Error page 404
Wireframes were created using Figma for mobile and desktop layouts.
Visual Design
- Minimal and clean layout
- Strong contrast and readability
-
Dark, modern scheme focused on clarity and contrast:
-
Background: #111
-
Accent: #054385
-
Text: #ccc
-
Overlays: rgba(255, 255, 255, 0.05)
Clean, minimal, and easy to read.
- The website uses Inter, sourced from Google Fonts, to provide a clean, modern, and highly readable typography across all devices.
- Font Awesome was used for scalable and consistent icons throughout the interface.
Wireframes were created to define layout and structure across devices, starting with low-fidelity wireframes, which are simple sketches focused on basic layout, content placement, and user flow without visual details like colors or typography.
| Page | Photography |
|---|---|
| Home |  |
| Gallery |  |
| Contact | |
| Target | Expectation | Outcome |
|---|---|---|
| As a user | I want to understand the experience | so I can decide if it's for me |
| As a user | I want to see visuals | so I can feel inspired |
| As a user | I want to contact easily | so I can book quickly |
| As a user | I want responsive design | so I can use any device |
| As a user | I want a 404 page | so I know when something is wrong |
| Feature | Description |
|---|---|
| Navbar | Responsive navigation across all pages |
| Gallery | Image grid showcasing experiences |
| Contact Form | Allows users to submit booking requests |
| CTA | Encourages user interaction |
| 404 Page | Custom error handling |
| Favicon | Branding element |
| Thank You | Confirmation page |
- Payment integration
- User accounts
- Weather section
- HTML5
- CSS3
- Bootstrap
- Git & GitHub
- GitHub Pages
- Figma
- Font Awesome
- ChatGPT / Gemini / Claude
GitHub Projects and Issues were used to plan and manage the project.
All testing details are available in:
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the Code and automation section drop-down menu, select the Pages.
- In the build and deployment area, choose from source "deploy from a branch" and after in Branch choosse the main branch and root and save.
- Once this is save, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment (he take me more less 5 minuts for appear the link).
Live link: https://raigonlab.github.io/sky-fly
- Bootstrap Documentation
- Code Institute materials
- ChatGPT (debugging & explanations)
- Markdown.2bn.dev
- Fonts.google.com
- Images generated with AI tools
- Icons from Font Awesome
- Video from Pexel.com
Special thanks to my mentor Tim Nelson for his guidance and support throughout the project, also Tindy and Fernando Gonçalves for all support.