Responses by Lorenzo Angelone, UI and movement graphic designer Joris Feitz, UX designer Roderick Goedhart, enterprise director electronic ordeals and Luke Vink, artistic technologist, Dentsu Imaginative Amsterdam.
History: Sustainable plastics manufacturing enterprise PlasticBean is changing how plastic is produced, a person bean at a time. Its website capabilities as a portal that turns the abstract tale of recycled plastic into an comprehensible subject matter, aiming to arrive at likely corporate shoppers who want to reinvent their manufacturing course of action. The internet site showcases how plastic beans are the seeds of what can come about subsequent in the story of plastic.
Style and design main: “One of the most important main capabilities of the site is the 3-D scroll encounter on the homepage,” suggests Lorenzo Angelone. “The customer right away sees what PlasticBean does when going to the web site and will be taken by the tale of the enterprise and its system. We employed the bean condition in the emblem by positioning pictures in the beans’ oval shape—when users hover more than it, the impression will easily fill up its body. We also set the beans inside the button as a microanimation when interacting with the button, the beans will show up in light blue.
“The web-site is also characterised by the way it scrolls,” Angelone carries on. “The web site enables the visitor to seamlessly navigate by means of the website in vertical and horizontal scrolling. This result brings even extra dimension by masking the texts that go from white to black—even masking in entire-width images—to get started a new chapter.
“The previous vital design and style element to point out is the line style,” Angelone notes. “These strains bit by bit animate in when you scroll as a result of the website page for the initial time or open up a pop-up. The lines make certain the proper hierarchy and division, providing users a good visual difference concerning the diverse sections and chapters.”
Favourite aspects: “We are most proud of the scroll interactions within the web site,” Angelone claims. “This begins with the 3-D scroll animation and is followed by the vertical and horizontal scrolls in which the customer is taken by the tale of PlasticBean. We think the web page has a ideal stability between enlightening and authentic with some surprising aspects.
“The next matter we are very pleased of is that everything from brand positioning and id to the translation of that model into this system that was accomplished by our in-house team,” Angelone provides, “a genuine stop-to-close output by Dentsu Creative Amsterdam.”
Issues: “We had just a couple of months to arrive up with a notion and design and create an MVP landing webpage for the official launch of PlasticBean in Singapore although doing the job on the overarching organization Archwey’s web site as nicely,” says Roderick Goedhart. “This was a fully new brand name, so there was not a whole lot of content material ready in addition to the brand name style carried out by our in-house workforce. Photos of products that we received sent weren’t on brand, so we re-produced all of them in 3-D.”
Time constraints: “The MVP launch was a achievement, and the bones were there for the web page,” suggests Goedhart, “so through the start of the MVP, we kept creating and making in parallel to launch the major web-site ASAP just after that.
“Even while we had a restricted deadline, we even now like that we introduced the blue dot from the other internet sites for Archwey and Arch & Hook, Archwey’s sustainable materials engineering enterprise, picking text that turns blue as properly,” Goedhart proceeds. “Small specifics like these might seem insignificant but bring the site to daily life. On the other hand, it shows these websites are joined and that we care for small specifics. Time and price range often influence the closing answer there are continue to pieces of the web page that are inactive, which is unfortunate to see but a fact of performing with new makes.”
Divergent paths: “If we could adjust some thing on the site, possibly we would build the intro in WebGL and not have it be scroll triggered,” Goedhart explains. “We would have necessary additional time, although.”
New lessons: “For most of the development crew, working with Storyblok as the CMS was a thing new,” Goedhart suggests. “I do not know how we would have constructed this web-site devoid of Storyblok and the simplicity it offers to create a tremendous-reactive internet site, not to point out that the shopper can improve modules on the website dwell. In our eyes, there is not a different CMS out there with this versatility.”
Navigation structure: “The story of upcycled plastics is one particular that we are commonly uncovered to in our daily lives,” suggests Joris Feitz. “Therefore, we preferred to produce a site that not only informs website visitors about this procedure, but also immerses them into the brand’s mission from the incredibly begin. The navigation through the web page balances a good line between visually desirable layouts and detailed solution information and facts, when our top rated-level navigation follows the common construction of a traditional brand name website with sections like Brand, Merchandise, News and Get hold of Us that make it easy for people to discover the most important webpages.”
Unique navigation capabilities: “We balance the rest of the webpages amongst simple-to-navigate modules that really do not have to have excess interaction from end users past conventional scrolling behavior,” Feitz points out, “like the numerous data sliders and the products carousel or easy popups that preserve and place the emphasis on comprehensive solution data.”
Technological innovation: “The website was designed in TypeScript and Respond, working with Following.js as our framework of selection,” says Luke Vink. “To make the model id stand out, we produced tailor made animations employing GSAP and its ScrollTrigger performance to achieve the homepage’s intro sequence, the many horizontal scrolling elements and the tailor made developed results, this kind of as the masked beans and blobs. The website’s content is managed with Storyblok, a impressive headless CMS that enables authors to edit content with a genuine-time, completely functional preview of the dynamic web page.”
Look through Assignments
Click on on an image to look at additional from every single challenge
