Tiburon: An energetic e-commerce brand web design project.

Alejandro Montes de Oca

3D Designer

Brand Designer

Web Designer

Next.js

React

Spline

Wellness

Tiburon: Moving Forward.

So we decided to live by those words, never stop moving.

const Disclaimer = () => {

  return (
    <section
      className="w-[100%] h-screen flex justify-center items-center"  
    >
      <p> Tiburon is, by now, a fictional brand and a proof of concept </p>
    </section>
  )
}

export default Disclaimer

The Concept:

A brand of workout formulas with a story to tell, a message to spread, and products to sell. They don't simply sell "supplements" they provide you with the energy, the renovation, and the focus for you to keep moving forward with your goals. Achieving what you've been waiting forever to achieve.

Their brand: The freshness of the sea wind on your face, the strength of the waves breaking, the energy of sharks in constant motion, an ocean of power.

Their target: Athletes, performers, professional gamers, gym goers and anyone with a dream to achieve finding themselves burdened with stagnation.

Building The Brand

Brands are represented by many aspects of their public media. Logos, colors, voice, images, words. The basic connection between every person within their target and the brand are the words through which they define the concepts within their minds and hearts, so the first step was to define those words.

There was a key balance between motion and renovation, it had to represent the continuos movement towards a goal and yet relief the audience of the fatigue, offering focus without exhaustion.

The first concept is motion the constant impulse for movement, movement and achievement, the ignition of an inner-flame by the qualities of their pre-workouts, proteins, an power mixes.

The second concept is renovation, the recovery factor that allows you to heal and grow and get ready for another day of constant motion towards your goals without the burden of exhaustion.

Motion without focus or strategy won't take you anywere. The mind most move at the same speed, that's why the third concept is cognition. Processing faster, focusing more, and planning better.

The Stack:

Every project starts with a robust framework. NextJs and React provided the full-stack platform to develop Tiburon's ultimate brand asset while Tailwind CSS provided the framework for styling.

The main keyword for this brand is Motion, and Motion (Previously FramerMotion) was the animation library used to build the scroll triggered animations, microinteractions, and movement that represents the spirit of the brand.

With Spline, I made the 3D models to represent products and interactions with the brand's energy.

The Sections:

Tiburon's site is divided into 4 simple sections for easy and straightforward navigation.

The Home:

The homepage enters with a 3D animation that offers a powerful encounter with the message of the brand and their products. The four brand colors are in full display as the user follows the motion to the top selling subsection just before coming across the reviews of successful customers and information about the different benefits of Tiburon's products.

About:

The about section presents a narrative experience that unfolds as the user scrolls down the different sections sharing the story behind Tiburon. Unveiling the inspiration, the process, and the results as sharks swim freely across the message.

Products:

An energy fueled palette for the users to navigate the list of products, provided with a category selector to filter the results.

Product cards with animated 3D models that react to interactions. Simple information and easy buying process.

Contact:

And to finish a contact section from which the user can feel among the very sharks that inspired the brand.

Mobile Gallery:

Feel free to explore the full website here:

Like this project

Posted Feb 9, 2025

Branding, Web Design/Web Development, and 3D modeling and animation project for an energetic workout supplements brand. Made with React, NextJs, Spline & Motion

Likes

Views