The wild side
Designing a website as a game
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.
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.
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.
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.
