oceanica
![An iPhone resting on a green platform in front of an archway with tall palm leaves in the backdrop](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Desktop-1.jpg&w=3840&q=75)
![An iPhone resting on a green platform in front of an archway with tall palm leaves in the backdrop](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Mobile-1.jpg&w=1920&q=75)
About
Oceanica is a conceptualised company which offers luxury travel resorts and activities around the world. Logos, assets and responsive templates (for 5 breakpoints) were created using Figma, including prototypes to simulate a booking screen. A responsive Web page from these was then built using React with SCSS, Babel and JS, compiled as a production build using Webpack and then shipped using Vercel.
Design Decisions
Luxury and allure were key factors behind the message of this brand. The font used symbolises the nature of the sea and open waters; vast and spacious yet defined and affirmed, further reinforced by the semi bold and bold weightings, broad shoulders and wide leading. The logo of a wave is simplistic and therefore easily memorable; it's character parallels that of the typography leveraged and against the rich black backdrop rings true the message of style and class, with its elliptical nature replicating that of the shape of the Earth and the wave line flowing into the brand name. The background calligraphic words carry this theme throughout the page with its swashes leaning on an axis akin to the Earth's own orbit, as the user is enveloped in this magnetism during their journey.
Typeface
- 04 Regular
- 05 Medium
- 06 Semi Bold
- 07 Bold
Branding & Assets
Mockups
![5 templates of a website design](/images/Oceanica/mockups/OceanicaTemplates.png)
Prototypes
![6 screens showing prototype interaction](/images/Oceanica/OceanicaPrototypes.png)
Screens
![A mockup of a website on a Macbook](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Mobile-2.jpg&w=3840&q=75)
![A mockup of a website on an iPad](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Mobile-3.jpg&w=3840&q=75)
![A mockup of a website on an iPhone](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Mobile-4.jpg&w=3840&q=75)
![Different sections of a web page on four iPhone screens, laid side by side](/_next/image?url=%2Fimages%2FOceanica%2Fmockups%2FOceanica-Mobile-6.jpg&w=3840&q=75)
Available for agency and freelance work