Adelle.ninja is an experimental portfolio site I designed and developed for/with Adelle Lin, a spatial designer from Melbourne Australia.

The Story

I met Adelle in Tasmeen, a design conference in Doha, Qatar. There, we talked a lot about design, technology, games and a bunch of other stuff. Adelle was definitely one of the coolest people in the conference. Later that year, Adelle asked me if I was interested in making her portfolio site. Rather than wanting a normal, straightforward site, Adelle wanted to turn the idea of a portfolio site upside down by incorporating some insights unique to her background like architecture and game theory. Obviously, I took on the project!

Concept and Design

The design and user experience of the sixte is based on two main ideas. First, the design incorporates video as the main descriptor for a project, presenting these in a way that is dynamic and playful. Second, the user experience is based on seeing this portfolio website as a game, and not just as content.

The home page of the site shows all project as full-width strips in which the project videos move horizontally. As they move across the screen, the leave a visual trail of their path. Available videos are fully visible, while locked videos as more transparent and unclickable.

Home-Page

When the user enters the site, only a limited number of videos are unlocked. Most of them can’t be accessed by the user. As the user starts seeing projects, they start unlocking related projects. When they unlock a project, the project video is no longer transparent in the home page, and a node in the node map flies in, mapping the relationship of that project.

Opening-Project

At the bottom left corner of the site, the user can find a node map containing all available project and their relationships. The nodes are connected to other nodes, showing the relationship to other projects.

Node-map

Technology

The site is built as a client-side application. Backbone.js is used for most of the front-end functionality. Posts and pages are represented through Models while Videos and pages are represented as views. Backbone.js was instrumental in organizing the logic and flow of the application.

These elements interact together with a couple of other custom javascript objects such as a cookie handler, an options handler and a video/canvas handler.

D3 is used for the node map at the bottom left of the page. A lot of tinkering around was done in order to get the right look and feel. Dat.GUI was very helpful for that.

Foundation and SASS used for most of the front-end styling and HTML5 structuring. The site relays heavily on modals, which are implemented through Foundation.

Mustache templates are used for front-end and back-end template rendering through the usage of the Javascript and PHP Mustache libraries.

The backend is built in WordPress, with custom post types for projects. The code is structured very differently from your typical WordPress projects. Procedural programming is avoided in favor of a more object-oriented approach, by creating classes for things like post types and views.

Process

Here you can see some of the initial sketches and ideas for the site.

Because so much of the technology used in the site is so new, we decided to incorporate prototyping as an important part of our process. Through prototyping, we were able to see if our ideas would work and how well they would translate when they were implemented in the final design.

Take a look at some of the prototypes:

Prototype #1 – Prototyping/Testing Multiple Videos Playing in Youtube

Prototype #2 – Prototyping/Testing Video Horizontal Animation

Prototype #3 – Prototyping/Testing Video Horizontal Animation … again

Prototype #4 – Prototyping/Testing Node Map