Prototribe

Prototribe is an industrial design agency that creates parametric models, photorealistic renders and CAD drawings for product owners.

Delivered

Branding, Deployment, Design, Development, Photography

Worked with

Elias van der Linden

Visit site

Prototribe

Identity

The colors represent boldness and the daring character of Prototribe, that's run by young entrepreneurs.

Header

Sofia Pro Black

Subheader

Sofia Pro Black

Body

Karla Regular

Structure

We started off the project with a super fast thumbnail wireframe session, which allowed me to quickly come up with a broad range of ideas for the hero area of the website. That’s where Elias, one of the co-founders of Prototribe and a good friend of mine, picked up the process and worked on the UX and conversion strategy for the entire front page. I was provided with a visual design (not just a wireframe), but this needed some refinement before we could move on to development.

Design

The goal was to create a modern and bold look, fitting the company that’s run by young entrepreneurs. One of my first ideas was rendering a CAD model in the hero area using three.js. I decided to quickly create a demo┬áto determine whether it was a feasible option for Prototribe’s new website. To recreate the look of a technical drawing in three.js and maintaining high performance lower-end hardware proved to be very difficult, ultimately pushing us to go with a basic 3D logo image.

Another focus point were the interaction animations, little details like hover states and the page progress indicator as well as more obvious animations like the preloader were a core part of the design process. After the final design was signed off by Prototribe, I moved on to development on my own.

Photography

Although photography is not something I usually do professionally, I offered to do so for Prototribe. I shot photo’s of the team members as well as the office and workshop to be displayed on the website.

Development

Prototribe’s website is a custom WordPress theme I built from scratch. The front-end is comprised of HTML, CSS and a tiny bit of JavaScript. I used Gulp to compile SASS and to minify and concatenate other assets. On the WordPress side, I relied on just two plug-ins, Advanced Custom Fields as well as WPML (enabling multi-lingual features), all other functionality is custom built or taken from my own library of work.

Delivery and deployment

After finishing development, I set up a new VPS for Prototribe. The server is set up with SSL using Let’s Encrypt, Nginx and supports http/2, so a first page load time stays well under 2 seconds on average.