Background: Stone and Style’s target audience for its site was its clients and end-users. The project was a little different from the typical web production aiming for clear KPIs, users and brands. The clients told us they wanted a strong, unique and architectural website.
Since the term architectural is abstract and has a broad interpretation, I broke it down. I decided to cut out the process of “designing to building,” which is changing from 2-D to 3-D. When I put this into the actual business and philosophy of the client, the story of how it generates its products from gemstone—which you can see on the homepage’s first view—came up. After that, all that was left to do was to actually create it.
Favorite details: The details I want you to see are the 3-D marble and its animations in the homepage’s first view. The animations communicate Stone and Style’s product process of birthing the gemstone’s core through polishing and disassembling it. The marble—a Voronoi-segmented, 3-D object—draws the user's line of sight right to it and generates interest throughout the entire page. I also used Voronoi segmentations for sliders and transitional animations.
Challenges: Achieving the objectives while reducing the load of the website was the most significant subject and challenge at the same time. In this case, the client’s thoughts, the concepts, and the context that underlies them were of utmost importance. However, if you push this too far without explanations, users will be left behind. Therefore, I designed the interface to be as user-friendly as possible while keeping the critical parts simple and clear.
The website is not large-scale but has continuously updated specifications, including multilingual capabilities. I used Wordpress for its CMS because of the operational capacity. However, if you use it as it is, the heavy load is caused on both the front end and the back end. It took more ingenuity and time than I expected to make it practical as much as possible.
Time constraints: Actually, the constraints were more of a good influence. I think it was more important to have instantaneous power than stamina in this project.
Technology: I used Wordpress for the CMS. In terms of plug-ins, I installed WPGlobus for the site’s multilingual function and StaticPress for the static operation. On the front side, I used GSAP, three.js, barba.js and Webpack.