profile

Alejandro Rodríguez Sanz 👋

A Passionate Graphic Designer 🖥️ & Frond End having 8 years of experience.

PORTFOLIO
INTERACTIVO

Discover my projects through an immersive interactive videogame experience.

Project details

Client For:

Meraki Films

Services:

Design & Maintenance

Web Meraki-Films

Overview

The Meraki Films website was conceived as a cinematic digital experience designed to reflect the studio’s artistic vision and storytelling philosophy. The goal was to create a portfolio that feels immersive and emotionally charged — merging elegant minimalism with strong visual rhythm to mirror the brand’s cinematic DNA.

Developed entirely with HTML, CSS, and JavaScript , the site combines smooth transitions, fullscreen imagery, and subtle motion effects to evoke the feeling of entering a film sequence. The layout emphasizes wide visuals, clean typography, and fluid navigation, creating a platform that’s not only visually appealing but also fully optimized for performance and accessibility.

Content and Visual Approach: The website was designed to showcase Meraki Films’ projects in a visually immersive way. Each section acts as a frame — balancing narrative and image composition. I focused on maintaining a cinematic hierarchy, where each video or still captures the emotion of storytelling. Every visual asset was color-graded and optimized to preserve atmosphere and texture across devices, ensuring that the experience feels consistent whether viewed on desktop or mobile.

meraki-films-detail-1
meraki-films-detail-2

Challenges

Designing the Meraki Films website required combining technical precision with emotional storytelling. The main objective was to make every scroll, transition, and element contribute to a cohesive cinematic narrative, while keeping performance, clarity, and responsiveness as top priorities.

Visual Storytelling:
  • Challenge: Translating the essence of film — movement, light, and emotion — into a static web medium.
  • Solution: Implemented smooth parallax effects, soft fades, and dynamic image transitions to replicate the pacing and depth of a film sequence.
Responsive Design:
  • Challenge: Maintaining a cinematic layout and visual balance across different devices and orientations.
  • Solution: Built fully responsive structures using CSS Grid and Flexbox , ensuring that aspect ratios and composition integrity are preserved on any screen size.
Performance Optimization:
  • Challenge: Large images and background videos can slow down loading times.
  • Solution: Applied lazy loading , next-gen formats (WebP/MP4), and minified code to achieve smooth loading without compromising quality.
Brand Identity & Tone:
  • Challenge: Balancing modern minimalism with the emotional and artistic nature of filmmaking.
  • Solution: Designed a neutral yet cinematic color palette — black, white, and warm light tones — combined with elegant typography and breathing space to enhance storytelling.
Navigation & User Flow:
  • Challenge: Guiding users naturally through the portfolio without breaking immersion.
  • Solution: Implemented smooth scroll, anchor-based sections, and subtle hover interactions that feel intuitive and cinematic, keeping the user emotionally engaged from start to finish.
banner-shape-1
banner-shape-1
object-3d-1
object-3d-2