Pentagram is one of the world’s most lauded design firms — and it’s not every day we get to do work that picks up where Pentagram left off.
The Digital Garage Group — a leading Japanese technology firm with businesses in the areas of IT, marketing technology, fintech, and investments — asked Paradigm to create a website for its Digital Architecture Lab (DAL) team. This group of multi-disciplinary designers conducts research into cutting-edge technologies (including web3, AI, and NFTs), produces media content, and calls on the government to make reforms. They have been tasked with finding digital solutions for some of today’s most challenging social problems.
The website had to showcase DAL’s new brand identity, which was created by Pentagram’s Giorgia Lupi. You can see her talk about the project here. We took Lupi’s 25 colored parallelograms, called “soft pixels” — which represent “dynamic, empowered communities of diverse individuals” — and we brought them to life on the DAL website through animations and interactions.
The brand guidelines that Pentagram developed were detailed, and we followed them right down to the specifications for the angles of the corners on each of the soft pixels.
The most challenging part of the project was creating the interactive animation on the homepage, so it is the feature we’re most proud of. Paradigm proposed the animation and, in discussion with the DAL team, we decided the images in these soft pixels should represent Japan, including pictures of a zen garden, a temple gate, and tea ceremony.
It was important to display the new brand identity, but the core purpose of the website was to highlight the team’s articles and thought leadership pieces. Even though the DAL team wanted the design elements to be engaging, we were asked to keep them relatively restrained — not too wild or distracting. To give one example, we suggested using soft pixels to create images of four DAL team members on the homepage, then we added a subtle scroll-driven animation.
For some of the other interactions to work the way the DAL team wanted, we customized the plugins we were using. One of these was the hover effect. Initially, the featured images for each blog post appear as squares, but when you hover over them in desktop view or click on them in mobile view, the square mask turns into a soft pixel.
We also had to take different approaches to how we showed animations on different devices and browsers.
Since the most important page on the website is the blog, we wanted to make sure the articles would be easy to search, so we set up a search function on the site and an extensive tagging system for the posts. We also set up all the technical SEO aspects to ensure it would be easier for people looking up related terms in search engines to find them.
Joseph Park, Digital Architecture Lab’s content lead, passed on a succinct message of gratitude of our work: “We genuinely appreciate Paradigm’s efforts in catering to our requirements.”
