The Shattered Mask

UI, UX, Front‑end

A look into the thought process and iteration done to produce my portfolio. Focus is mainly on the stages before finalization as presumably, so long as I haven’t broken something, the finished product should speak for itself.

Using WebGL was something I knew I wanted to do from the beginning. After some consideration I eventually fixated on the idea for a fox mask as it would help tie into my personal brand.

Sketches of the mask
Render of the initial sculpt of the mask

Quick thumbnail sketches of various designs for the mask were drawn up and I proceeded forward with the one I liked the most. The sculpting was done in Blender using it’s Dyntopo feature to speed things up. Once complete it was retopologized and UV mapped inside of Blender as well without any material applied.

Wireframe sketches of the site
Early version of mask exploring colors
Early version of mask exploring colors
Early version of mask exploring colors

From there design on the site itself commenced. Wireframes were done as thumbnail sketches in tandem with the design itself to simply flesh out ideas. In the earliest stages the mask was a whole piece and time was spent on exploring the look and interaction it would have as that would shape the rest of the site.

Mask broken into six separate pieces

After spending time struggling to figure out how to incorporate the mask into the portfolio overall I finally hit upon the idea to shatter it into six pieces using those as markers for each of the different pieces in the portfolio. This also allowed for each mask piece to act as a visited state for its respective portfolio piece by changing the material.

Final version of the mask with the dark metal material applied

Substance Painter was used to create a dark, rusted metal look for the mask. Baking of the normal map was also done in Substance Painter as it produced much better results than Blender without the need for a cage file.

Ultimately the dark metal was replaced with a mossy marble material as the dark metal didn’t provide adequate contrast against the background. The visited state was set to a gold material helping it stand out from the marble pieces.

Screenshot of Sublime Text 3 with the portfolio project open

The build for the site uses three.js to handle the WebGL interface with bezier.js for easing during transitions between pages. To avoid CPU redraws as much as possible all the animation of elements are done with CSS3 transition and transforms. It’s fully responsive written in SASS and following an OOCSS structure to keep style redeclaration to a minimum.