The wild side

Designing a website as a game

UX/UI Designer
a problem solving mindset
What if... a portfolio had a wild side based on a hide and seek structure?

Video games or board games usually implies some hidden parts to be found only after solving an enigma or a challenge. 

The website encompasses an artisitic side with colorful backgrounds and visual effects. 

The building of this first portfolio was initially planned to be a walk in the park. It was to be a mere platform for my works, plain and unsophisticated. The goal was to show off my works and not waste any time in developing the website. That makes even more sense if you are a great web developer and have the proper tools to make it happen.

Having said that... I gave it a second thought and realized the website was just as relevant as its content and couldn’t be left out of the equation. It was going to be the first thing users will see. Thus, it had to be thought out as a grand display for the great projects I make. And as such, it should be the epitomie of my abilities.

Well, well well... my skills as a web developer are limited to HTML 101. It would literrally take me months to fiddle around just to understand what I'm doing. The creation of the website turned out to be nothing but a pain from the get go.

In other terms, this project highly qualifies as a substantial challenge.


Getting into it.

Even though, my knowledge is scarce I knew that my design skills would help me out. I held on to three essential rules. The website should be :

- Creative
- Innovative
- User Friendly.

To go along with this idea I decided to up the ante by adding my personality to the process. If my own website was not sprayed with a little magic , it wouldn't really represent me quite well. Hence, those three more criteria to consider.

- Original
- Playful
- Remembered

I knew it was going to be a bumpy ride but I had to create my own website even if it meant it won't be as perfect as I imagined it.

I started drawing, sketching, laying out some possible page structures and made some intense reseach. The challenge got spiced up and deserved some solid UX knowledge to hit the nail on the head.

The chart


Were unsure of the on-boarding process


Were uncomfortable sharing instagram handle


Were upset about being directed to APRL's instagram upon completion

Design styles

Colors, fonts...

It was important to achieve a sense of singularity. Breaking the mold was the path to follow. And if I couldn't rely on my developer abilities I knew for sure my design tools would never let me down.

I used all the button interactions as a way to experiment and show off a new learned skill. Also, I didn't want to send the user to another page whenever a button was clicked.

I wanted to give the illusion of accessing different pages when there really was only one. Here are three of the main visual effects that sets the tone of the whole website:


I came across a really sleek design that piqued my curiosity. The designer used a simple mask effect and made a website out of it. You can take a look here on Webflow.

I thought there must have been some magic under the hood. I figured Javascript and a plethora of dependencies were involved. Meaning… out of reach.

After a minute of despondency, moxie took over me. I tweaked long weeks on end and finally recreated the Mask effect with sheer embedded HTML/CSS.


Sliding a page has this very self-satisfying feeling as though performing a magic trick. It wows me every time. When I was little I even suspected David Copperfield was behind its creation...

After all, sliding a page is like sliding a secret compartment of the browser window.I decided to be self-indulgent and thought It could adequately be used for the playroom button effect.


Depth has this great value of bringing up perspective and directing focus on several level. The idea of using depth as a means to allude to the core of the website was an interesting metaphor to consider. I envisioned this idea as a behind-the-scenes effect embodying a sacred gateway to a mise-en-abyme.

Design is diverse and could easily be the flagship for multiplicity. I reckoned UX and UI were two sides of the same coin and could have a role to play here. I sleuthed the internet for inspiration. I went down the usual rabbit hole and came across the most god-like inaccessible thing I had ever seen. The three.js file.

It allows you to contemplate different worlds of unworldly possibilities. The particles were just mind-blowing and I just knew it had to be implemented one way or another.The task at hand was perceived as herculean… and it ended up being herculean.

Any attempt would fail. I was doomed the moment I laid eyes on it.Eventually, Time, reluctantly gave me a hand and helped me see the light at the end of the tunnel.

the look and feel

Be Happy

Throughout the building of the website, the user journey is to be accounted for in order to ensure a pleasant ride.  Many tools can be used but few could spontaneously make someone grin. The full idea was to convey happiness, comfort and magic. All at once.

I knew the picture of a crib would naturally speak to us all and bring forth a time when nothing was impossible. Our fantasy world is unique, personal and full of a positive energy.

I wanted to recreate this peaceful haven with magical floating balls. And from these very balls, it would be able to peek into my projects.


Understood this to be a process to gain access to APRL's community


Still felt uncomfortable sharing instagram handle


Still felt upset about being directed to APRL's instagram upon completion
Colors and Fonts

Colors were to be soft and welcoming. Pastel colors were the most appropriate. After experimenting with different shades, two main colors stood out:

The font selected are PLUMP and SNIGLET. Both are sans serif and are rounded. They are nice andeasy to read.

-PLUMP : Titles, Headings, 4vw.

-SNIGLET: regular, 3vw.


The importance of details is substantial to successfully and seamlessly achieve your goal.I don’t want to dissect each detail one by one as those are the powerful glue that holds the fortress together. Nobody really wants to spoil the magic, right?

I leave you to your imagination to find out why there’s a knitting button or a reference to a famous anime.  Easter eggs are at every corner…

All the goals have been met. My challenge is a success. The final result is close to what I designed originally. The website goes beyond the conventional rules and that's what i aimed for. If you don't allow yourself to go wild on your own projects , where do you experiment?

Few chances are that your client will let you go crazy on their project. I hope the whole digital choreography was pleasant to your eyes and has given you ideas for your futur projects. 


Understood this to be a process to gain access to APRL's community


Understood why APRL's was asking for their instagram handle


Felt fine about being directed to APRL's instagram upon completion

Keep challenging yourself to reach the impossible !