Maraey

Redesigning the Resort Experience Online

UI and page structure

context

Maraey is a large-scale sustainable development project that required a digital presence aligned with its environmental and cultural positioning.
 The visual identity had already been defined by Studio Venturas, and the challenge was to translate it into a cohesive and responsive website experience.

my role

  • Translating brand identity into digital layouts
  • Structuring long-form and institutional content
  • Creating visual hierarchy for complex information
  • Designing responsive layouts
  • Ensuring consistency across pages

team 

The project was developed collaboratively at Studio Venturas with a multidisciplinary team:

Visual Identity:                               Camila Sugai 
Custom Icons:                                Camila Sugai
WordPress Development:           Giovanna Ornellas
UI and Page Structure:                 Érika Soares

applying the brand in digital

The main challenge was balancing institutional credibility with the project's environmental sensitivity. The layouts were designed to create breathing space, emphasize landscape imagery and maintain clarity across dense informational sections.

visual identity

The interface was designed in Figma following the established visual identity, with a strong focus on clarity, trust, and emotional safety, essential aspects for an Ethics Line and whistleblowing context.

color strategy

Deep green tones anchor the visual system in nature. Rather than using bright or saturated greens, the darker shades communicate environmental preservation with maturity and long-term vision, avoiding a superficial “eco” aesthetic.
The warm sand tone introduces a human and territorial dimension. It references the local landscape of Maricá, earth, sun, and natural materials, while adding warmth and balance to the darker base.

components

The button system reinforces hierarchy through contrast and restraint.
 Solid styles highlight primary actions, while outlined versions support secondary interactions without visual noise.

typography

Previous

Payment flow