Kraken Academy
A clean, inspiring landing page designed to attract future divers and showcase the school's unique underwater experiences.
About Project
This project involved designing a landing page for a local diving school aiming to attract new students and promote its unique underwater experiences. The goal was to create a visually engaging and user-friendly experience that reflects the spirit of adventure and safety.
Challenges
Solution
Designing a layout that appeals to both beginners and experienced divers.
Creating a clear structure for different types of diving courses and certifications.
Communicating safety, trust, and excitement in a limited scrollable space.
Balancing visual richness (ocean imagery) with fast loading time and accessibility.
Created a clean and intuitive design that’s easy to navigate.
Clearly structured diving levels so users can choose the right course for their experience.
Added key sections: instructor info, mission, pricing, and FAQ.
Designed a fully responsive layout for smooth performance across all devices.
Used an ocean-inspired visual style to create a feeling of immersion.
Design Process
User Persona
The design process followed a user-centered approach: I began with research, created user personas, mapped user journeys, and then moved to wireframes, visual design, and final prototype.
To better understand our target audience, I created user personas based on interviews and research. These personas represent typical users interested in diving—ranging from curious beginners seeking a new adventure to experienced divers looking to improve their skills or find a trustworthy school.
Julia Adams
Gender:
Age:
Education:
Job:
Internet:
Socials:
Messengers:
Online banking:
"I am looking for beauty in everything”
Female
28
Financier
UI designer
I making user interface design. I has a lot regular customers. I spend a lot of time to manage of get and provide different payments.
Try diving during her next vacation to California
Find a school that feels safe and beginner-friendly
Overcome her fear of the ocean by learning in a supportive environment
Discover a new hobby that combines travel, nature, and personal growth
Too much jargon on diving websites and apps
Fear of deep water and lack of control
Hard to compare course levels and prices
Sites often lack detailed instructor credentials
DEMOGRAPHICS
THE SUBJECT
GOALS
FRUSTRATIONS
TECH
User Flow
To ensure a smooth and goal-oriented experience, I designed a simple user flow that helps users quickly find the right course and take action. From landing on the homepage, users can explore diving levels, read about instructors, check prices, and access FAQs—leading them naturally to sign up or get in touch. Each step was optimized to reduce friction and build trust.
Wireframes
Low-fidelity wireframes were created to define the core layout and structure of the landing page before moving to visual design. They helped focus on content hierarchy, user flow, and essential features without the distraction of colors or styling.
Each section—such as course levels, instructor info, and call-to-action—was planned to ensure clarity and guide users toward their goal.
Logo
Store
Rentals
Learn to Dive
Camps & Lessons
About
Contact
Schedule
Booking Now
See all cars
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
Lorem Ipsum Neque porro qui dolorem
Neque porro quisquam est qui dolorem ipsum quia
01
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e
02
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e
03
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e
04
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore e
Color
The color palette includes two primary colors that reflect the mood and purpose of the diving school website:
Dark Blue – used as the primary background color, it evokes the feeling of the deep ocean and creates a calm, immersive experience, making users feel like they’re already underwater.
Vibrant Orange – used as the accent color, it adds energy and contrast, drawing attention to key elements like buttons, pricing, and highlights. Inspired by the bright colors of tropical fish, it brings warmth and liveliness to the overall design.
Colors
Primary Color
Primary Color
Secondary color
#03335B
#03335B
#03335B
#7CCEF9
Dark Blue
The main color is dark blue, it imitates the ocean floor and takes up the entire background.
#FF9705
#FF9705
#FF9705
#FF9705
Orange
The secondary color is used strategically for headings, pricing, and other key elements to draw attention and guide the user's focus.
Neutrals Colors
#171717
#4E4F54
#949499
#E1E2E3
Orange
Black, white and a range of colours in between, plus gray scale, have been used to maintain the UI frame, including containers, headers, sections, boxes, and the like.
#F9F9FB
#FFFFFF
Typography
Two typefaces were chosen to create a balanced and readable visual hierarchy:
Libre Caslon Text is used for headings. Its elegant and classic serif style adds a sense of trust, professionalism, and calm — ideal for a diving school that values safety and expertise.
Jost is used for body text. This modern, geometric sans-serif font ensures high readability and a clean, approachable look across all devices and screen sizes.
Together, these fonts complement each other to deliver both personality and clarity throughout the site.
Libre Caslon
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Ag
Jost
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Ag
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
For Body Text
Ag
Final Design
The final design combines clarity, emotion, and functionality. With a clean layout, immersive ocean-inspired visuals, and well-structured content, the landing page guides users smoothly through course options, instructor info, and key actions.
Responsive design ensures a seamless experience across all devices, while the visual tone evokes both adventure and trust—perfect for a diving school.
Thanks for scrolling along!
LiudmilaHrynko@gmail.com