Hog Royale

Interactive Frontend Experience

Frontend Designer

Interactive Exploration

Nov 2021 - Dec 2021

The Project

The objective was to design an engaging character profile for a HTML project. Our creativity was the limit. What came to mind was my favourite character, Hog Rider, from a game I was excessively (maybe too much) playing at that time - Clash Royale.

Process

The steps I took.

The Approach.

For the initial landing page, I wanted to create an immersive and interactive experience. I designed a start button that resembled the style of the game, complete with a sound effect upon hover. The button led to a tutorial-styled introduction, where the main avatar smoothly faded in from the side and began showcasing the features of the game. To achieve this, I utilized HTML, CSS and JavaScript to design and animate the flow.


I attempted its recreation by mimicking the animated movements along with the unique chatting feature with the user.

Landing Page
Start
Landing Page
Start

The Profile.

Here comes the character profile - the main objective of the project. To create an interactive and engaging experience, the profile showcased a carousel-type display of the character's special attributes and abilities, allowing users to explore different aspects. Additionally, I implemented a uniquely-styled slider with dynamic attributes, which users could modify using simple Vanilla JS.

Landing Page
Start
Scrolling Decks

The Hiccups.

As this was my first Frontend project, I faced several challenges. To overcome them, I conducted in-depth research through online web development documentations and dozens of YouTube tutorials. Eventually after spending hours debugging code and employing problem-solving techniques to tackle the issues at hand, the project was a success.


I presented the project to my class, engaging them throughout the session with consistent interaction. The character profile successfully showcased the interactive elements and captured the essence of the game, leaving a lasting impact on the audience.


Lessons Learnt.

In future endeavors, I would better plan the structure of the designs before starting the development process. This approach would enable me to visualize the designs more effectively and streamline the implementation process.

Check out

PassSafe