Prototribe is an industrial design agency that creates parametric models, photorealistic renders and CAD drawings for product owners.
The colors represent boldness and the daring character of Prototribe, that's run by young entrepreneurs.
Sofia Pro Black
Sofia Pro Black
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.
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.
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.
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.