Luis Sandoval
0 %
Loading

Building a flexible WordPress experience for the next generation of entertainment.

WordPress Custom Theme ACF Modules
Responsive Front-End Interactive Components
View Live Site Scroll to explore
Client
HDR10+ / Samsung
Agency
5ivecanons
Role
WordPress Developer
Development
Custom WordPress Theme & ACF Modules
Focus
Responsive Development & Interactive Experiences
The HDR10+ website shown on desktop and mobile: a dark, cinematic homepage with a 'Colors the way they were intended' headline, streaming partner logos, and a crystal award trophy in the foreground.

/ 01 Overview

HDR10+ needed a website that could make advanced display technology feel cinematic and easy to understand. Working with the team at 5ivecanons, I built the custom WordPress implementation, turning the approved experience into a responsive, maintainable site powered by flexible ACF modules.

/ My Role

Theme: Custom WordPress theme and page templates

Content: Reusable modules built with Advanced Custom Fields

Front-end: Approved designs translated into responsive components

Motion: Animations and interactive elements integrated into the build

Devices: Desktop, tablet, and mobile layouts

/ 02 The Challenge

The design was rich, cinematic, and full of motion. My job was to keep all of that intact while making it responsive, fast, and practical for a content team to manage in WordPress.

/ What Had to Work

Rich visuals

Support a visually heavy, interactive experience without losing responsiveness or performance.

Reusable parts

Turn custom designs into WordPress components that could be reused across many pages.

Editor freedom

Give content editors flexibility while keeping every module visually consistent.

Complex content

Make technical topics for entertainment and gaming audiences manageable inside the CMS.

The experience A walk through the homepage I built from the 5ivecanons design: layered hero, entertainment and gaming cards, streaming partners, and the adopter program.

/ 03 Custom WordPress Development

I built a custom theme instead of bending an off-the-shelf one. That kept the markup clean, the components predictable, and the site easier to maintain as it grows.

/ What I Built

Theme & templates

A custom WordPress theme and page templates shaped around the approved design.

Responsive front-end

Layouts that hold together on desktop, tablet, and mobile.

Media & motion

Video, imagery, and animation wired into components rather than bolted onto pages.

Editor usability

Clear, structured fields so the content team can update pages with confidence.

Custom development The HDR10+ Adaptive section: tabs swap the room around the same TV to show how the picture responds to its viewing environment.

/ 04 Custom ACF Modules

Pages are assembled from approved building blocks. With Advanced Custom Fields, editors can create and update pages while styling and responsive behavior stay consistent.

Sections that make up the experience, as seen in the project media:

  1. 01

    Hero banners

    Full-bleed media with a layered headline and call to action.

  2. 02

    Feature cards

    Image-led cards for the Entertainment and Gaming paths.

  3. 03

    Partner carousel

    Streaming-service logos with previous and next controls.

  4. 04

    Comparison slider

    A draggable SDR vs. HDR10+ video comparison.

  5. 05

    Tabbed demos

    Interactive tabs for tone mapping and HDR10+ Adaptive scenes.

  6. 06

    Logo wall

    Adopter logos paired with a registration call to action.

  7. 07

    Product search

    Filters for certified products by type, manufacturer, and feature.

  8. 08

    FAQ accordion

    Expandable questions and answers.

  9. 09

    Forms

    The adopter registration form, restyled to match the site.

/ 05 Before & After

From a bright, list-driven site to a dark, cinematic one. The redesign was led by 5ivecanons. My part was making it real in WordPress.

Side-by-side comparison: the previous HDR10+ homepage with a white header and stacked colored news bars, next to the redesigned dark homepage and mobile screens with cinematic imagery and glowing gradient accents.
Homepage The previous homepage (left) and the redesigned experience across desktop and mobile (right).
The adopter registration form before and after: a plain white form on the left, and the redesigned dark form with outlined fields, checkboxes, and a gradient 'I Agree' button on the right.
Adopter registration The same form, rebuilt to match the new design system.
Comparison slider Visitors drag a handle across the footage to compare SDR with HDR10+.

/ 06 Interactive Experience

HDR is hard to explain and easy to show. So the site lets people see it: tabs, sliders, and animated charts turn technical ideas into something visitors can try.

/ In the Build

  • Rich imagery and full-bleed video
  • HTML5 animation, including animated tone curves
  • Interactive tabs, sliders, and carousels
  • Intentional scrolling and visual transitions
  • Entertainment and gaming content in one system
  • Responsive layouts for every screen
HTML5 animation Dynamic Tone Mapping: each brightness tab redraws the tone curve and swaps the sample footage.

/ 07 Audience & Message

Who it speaks to

  • Entertainment and gaming companies
  • Technology partners
  • Movie enthusiasts
  • Gamers looking for a better picture

What it says

HDR10+ uses dynamic metadata and tone mapping to optimize compatible content for the viewer’s display.

/ 08 Visual Showcase

The HDR10+ site on desktop flanked by two mobile screens, showing the Dynamic Metadata comparison slider, tone mapping chart, certified product search, and FAQ accordion.
Responsive development The same modules adapting from desktop to mobile, including product search, tone mapping, and FAQs.
Three grayscale wireframes of HDR10+ pages showing layout blocks for the hero, streaming carousel, tone mapping, dynamic metadata, and gaming benefits.
Wireframes Page structure from the 5ivecanons team, which I mapped to reusable modules.
UI/UX style sheet: Bratome and Montserrat typography, a six-color palette (#009EFF, #00FF97, #FF6700, #0A0A0A, #353535, #FFFFFF), and gradient and outlined 'Learn More' button styles.
UI/UX styles The design system I implemented: type, color, and button states.

/ 09 Outcome

  • A custom WordPress implementation built for this project
  • Flexible content management through reusable ACF modules
  • Consistent presentation across different content types
  • Responsive behavior on desktop, tablet, and mobile
  • A maintainable foundation for future updates
  • Support for an immersive, visually rich experience

/ Recognition

A crystal Netty Awards trophy engraved 'Best Website, 5ivecanons, Winner 2024', shown under the HDR10+ logo.
Netty Awards 2024 The site won 5ivecanons the Netty Award for Best Website.

/ 10 Reflection

This project was a balancing act between an ambitious visual experience and the everyday needs of a WordPress CMS. Building around reusable ACF modules let me protect the design system while giving the content team an easier way to keep the site current.

/ 11 Credits

Client: HDR10+ / Samsung

Agency: 5ivecanons

My role: WordPress Developer

Development: Custom WordPress Theme and ACF Modules

Live website: hdr10plus.org

Next project

TiVo — custom ACF template for a SaaS platform