Adelle.ninja is an experimental portfolio site I designed and developed for/with Adelle Lin, a spatial designer from Melbourne Australia.
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.
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.
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.
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.
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.
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.
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: