Oh shit

Here we go

Lets go

Chat with Vargas AI

Figma
Visual design
Gestalt principles
Brand
Design systems
Responsiveness
User experience
User testing
User flow
Analytics
content strategy
3D
Cinema4D
Protopie

The challenge

Underpinning a successful campaign with a dynamic and impactful landing page. The aim was to capture and intensify the raw essence of firefighting within a digital narrative that not only resonates with, but also profoundly engages fire safety professionals.

campaign

campaign

see more

see more

see more

see more

the Campaign

This creative journey, from conceptualizing a fiery beast to its digital realization, was marked by a series of captivating campaign creatives. Display ads were the stepping stones, progressively bringing the flaming beast to vivid life. These visuals showcased the beast in various fiery iterations, setting the stage for its ultimate digital incarnation.

Motion design

motion design

see more

see more

see more

see more

motion

Animating the fiery scene was a challenging task. Utilizing Adobe After Effects and Blender, I brought the fiery scene to life.

With After Effects, the fiery beast was animated to display a dynamic range of movements, from subtle flickers to roaring flames. This created a visually stunning and engaging scene that captured the intensity of a real blaze.

the beast

blender

In Blender, the focus was on creating a lifelike animation of the firefighter standing defiantly in front of the beast. The firefighter's movements were meticulously crafted to reflect determination and bravery.

Fireman

Design system

Atomic design

see more

see more

see more

see more

design system

The design system for the landing page was developed with a focus on consistency and scalability. Each element, from buttons to typography, was designed to contribute to the overall thematic and visual coherence of the page.

The use of a fluid type scale ensured that typography was responsive and visually harmonious across all devices. This approach maintained aesthetic consistency and enhanced readability, regardless of screen size.

fluid type

mobile

A mobile-first approach was crucial. The design and functionalities were optimized for mobile devices, ensuring that the experience was seamless and engaging, even on smaller screens.

webflow

no-code

see more

see more

see more

see more

webflow

I built the landing page in Webflow, allowing for smooth integration of animations and interactive elements. Webflow's powerful platform enabled a seamless design-to-code process, ensuring high performance and reliability of the final product.

results

success

see more

see more

see more

see more

Success

The landing page was a resounding success, marked by impressive metrics. These statistics not only demonstrate the effectiveness of the design and animation work but also underscore the impact of a well-executed digital campaign in the fire safety sector.

2x

Conversion rate compared to previous campaigns

40%

Growth in organic traffic

Next

Next

Next

Next

see more

see more

  • Matt Taylor
    Associate Creative Director

    Jon is one of those rare unicorns...a talented designer that can bring it to life in code...very passionate about solving problems...He's a valuable addition to any team...

  • Alyssa Lemon
    Front-end Developer

    I remember meeting Jon...with the depth and breadth of his pure fascination, energy and incredible mastery of the digital space...His portfolio speaks for itself...any company that snags Jon will be propelled above and beyond just for his presence...

  • Rebecca Henderson
    Associate Creative Director

    Jon is an excellent collaborator and coworker...In a very short time, Jon added a uniquely robust UX design approach to our agency...