loader
Ibai Fernández

Cinematic Brand Case Study / Elm St.

Elm St.: A Hand-Crafted Digital Stage For An Audiovisual Studio

Elm St. was not meant to look like a generic production-company brochure. It needed to behave like a pitch deck with motion in its bloodstream: cinematic, direct, memorable, and built to turn curiosity into reel views, social proof, and contact intent.

So the web presence was hand-built instead of squeezed into a template marketplace. The result was a bespoke multi-page system for an audiovisual studio in Bogotá, anchored by the line "If it can be seen or heard, we make it" and shaped around one job: sell a creative team through video-first narrative, category curation, and brand atmosphere.

Featured Pieces 18 curated in the source portfolio
Creative Verticals 6 film, TV, music, corporate, ads, animation
Core Leads 3 general, creative, and art direction
Build Model Custom hand-coded, no CMS dependency
Cine Televisión Publicidad Vídeo musical

The hero slot stays visual-first because that was the point of the original site: lead with mood, then let the portfolio structure and the contact path do the commercial work.

What The Website Had To Achieve

Sell Motion Without Auto-Chaos

The site had to feel audiovisual without becoming noisy. That meant a reel-first structure, strong hero framing, and clean pathways into the work instead of forcing users through a cluttered gallery maze.

Separate Story, Crew, Work, Contact

The architecture splits brand promise, team identity, portfolio proof, and contact intent into dedicated pages so the studio can speak like a business, not like a single landing page.

Turn Brand Mood Into Navigation

Typography, dark imagery, category grouping, and lightbox-driven video discovery make the site feel like an extension of the studio's editorial sensibility instead of a neutral web shell.

Close The Distance To Contact

Location, WhatsApp, social presence, and a direct contact form convert artistic intrigue into an immediate next step. The site is not only a gallery; it is an outreach device.

A Legacy Stack Used Deliberately, Not Lazily

Hand-coded brand system

This project bypassed the "just install a theme" path. It was assembled as a custom static multi-page experience using Bootstrap, jQuery, lightbox interactions, a slider layer, and bespoke content curation to keep the brand in control of its own visual language.

  • Responsive multi-page architecture (`inicio`, `nosotros`, `portafolio`, `contacto`)
  • Lightbox-enabled video discovery with Lity
  • Portfolio grouped by vertical, not dumped in a flat feed
  • Custom identity and social positioning for a real creative team
Navigation Layer

Brand story in four clean routes

Home, team, portfolio, and contact pages create a proper narrative arc instead of a one-page compromise.

Video Layer

Reel-first discovery

Work is surfaced through playable entry points and category-specific curation, reinforcing trust through moving-image proof.

Brand Layer

Creative authority made visible

The studio's leaders, location, and channel presence are all presented as part of the sales surface, not hidden in a footer afterthought.

YouTube Showcase Sequence

Featured YouTube Embed

Elm St. Reel

This is the hero proof block: the studio reel that establishes cinematic range, production taste, and the overall visual signature in a single hit.

Current channel reference
Featured YouTube Embed

Noche sin Mañana

The repo explicitly positions this as a hero short film directed by Ibai Fernández. It should be one of the main embedded proof pieces.

Reference video ID: m_G2yF4-5wQ
Featured YouTube Embed

2x2

Use this slot to connect Elm St.'s audiovisual credentials with the broader strategic universe that later evolved into 2x2MKT.

Reference video ID: aN9rRLCpRBs
Featured YouTube Embed

JIT: más allá de la pasión

Television-format proof gives the case breadth beyond pure film aesthetics and shows category range inside the same studio system.

Reference video ID: CEaC_FVD8ZY

A Creative Team Presented As A Cohesive Brand

Director general

Ibai Fernández

Leadership, direction, and the directorial signature behind the studio's strongest narrative positioning.

Directora creativa

Mónica Montúfar

Creative framing and tone control that helps the brand communicate like a studio, not just a service provider.

Directora de arte

Rosangela Picón

Art direction as a visible trust layer, turning the site into a statement of taste rather than a generic project archive.

What This Project Proves About My Work

UX shaped by media behavior

This is an early example of building around how people browse audiovisual work: lead with atmosphere, then make play and contact frictionless.

Brand, narrative, and code in one loop

The project fuses positioning, interface design, and implementation. It is not just web development and not just branding; it is the connection layer between both.

Custom over convenience

Instead of a plug-and-play CMS aesthetic, the studio got a digital surface tailored to its creative identity, portfolio logic, and social proof strategy.

Translate Button