Making of “The Preposterous Official Website

Oct 18, 2018 04:47:56 PM

share with

Introduction

After 5 years from my last award winning personal website (a daily life dashboard updated in real time with silly information) it was time for a new fun challenge. I needed a new portfolio that would stand out and inspire others. Nowadays the digital space is crowded more than ever; brands, products and personalities, all scream to be seen by their audiences like in a 4am yellowfin tuna auction.

When it comes to personal websites, differentiating yourself from the mass yet creating audience, is quite a challenge. Being ignored is just a swipe away. As tradition, I wanted to make something different, unconventional and unique. I wanted a space to portray my personality and my wide range of skills, be weather resistant to volatile digital design trends and fun, explorative, heavily interactive: a long-lasting platform to build and evolve upon.

I wanted a space to portray my personality and my wide range of skills, be weather resistant to volatile digital design trends and fun, explorative, heavily interactive: a long-lasting platform to build and evolve upon.

The Role

I am the Swiss Army Knife in my personal projects. A creative commando shooting bullets to each aspect of the production, from the idea and art direction to the UX, Design, Illustration, Animation, 3D modelling and programming.

The Vision

Core Idea

The idea was to create my own medium, a place to host experiments, mini apps and games as well as more conventional work case studies.

This medium took shape into an hyperbolic, caricatured personal computer.

Following an operating system anatomy with windows and folders, allowed me to depart from a traditional page based layout.

This approach brings one simple yet powerful benefit: multitasking. The user can adapt the interface to their own style, opening everything at once, minimizing for later, reading side by side or consuming one thing at a time. That’s why there isn’t one layout but many, many layouts as per many users. There is beauty in giving a clean canvas with tools and observe users creating their unique version of your art.

App Ideas

I wanted my apps to be a reflection of myself. They had to include art, music and personality. The selected ones were a set of synthesizer and drummer, a tool to vandalize statues, a meme generator, a grumpy cat bot and a personality game with no end.

The Visual Identity

The visual identity is where the fun begins. After identifying the core values in personal, satirical, hilarious, timeless, hacky and brave, I shaped a visual identity inspired by the “prehistoric computers era”, with elements inspired by the first Macintosh and Windows operating systems.

The color palette is deliberately rudimentary, with a primary bright yellow, magenta and blue, fluo-aqua, black and white. I also included shading through old school pixel art patterns, which were the actual reproduction of the ones found in MacPaint 1984.

The development

How

With my high demanding full time position in one of the fastest paced agencies of Australia, I knew from the beginning that committing to a personal project of this size would be challenging. I had to come up with a realistic plan to aim to. 2 months prototype, 4 months MVP and 6 months V1 launch. This helped to keep the focus and prioritize the development.

System

The design’s modularity helped sectioning the progress in quantifiable chunks. The first and most important area was the OS itself; it had to lay foundations for the apps to come and be solid enough to host all the functionalities planned.

Make it Scalable and Enjoyable:

I built the OS with an interactive component based (you could say “a la React”) principle in mind, where each component’s look and behavior are encapsulated together. However, I didn’t want to rely on existing frameworks. I wanted to focus on the project rather than the burden and overhead of adopting something that most likely would have been way too complex to build and maintain.

My framework is completely custom and grew in parallel with the other apps when more features are required.

Make it Quick:

Another challenge was to solve the loading time that could have affected the website. The solution was to develop the apps as standalone “Javascript executable”, mimicking how actual operating systems work. Only when opened, the app requests all the needed dependencies, scripts, images, fonts and stylesheets. This made a 50Mb website loading in 0.1 seconds and enabled an incredibly pleasing experience for such a content heavy site.

Make it Fast:

To ensure butter-smooth 60fps animations and 3D interactions, an Activity Monitor was built to keep track of each app and direct processing power usage wisely.

Keyboard & Drummer

The keyboard synthesizer uses Web Audio API. Its vintage sound was modeled with inspiration from the timeless Prophet 5. It has a track sequencer and pitch modulation built into each key. Through the display interface, the user creates the sound by adjusting the mood of a pistol shrimp, the loudest animal on earth. Using the same technology, the drummer allows the user to create a beat. It features quantization, trimming, looping, bmp modulation and live recording.