Responses by Porto Rocha.

Background: Design Threads is a research-based project for and by the creative community. As reports on design trends multiply by the year, we noticed a focus on surface-level discussions coupled with a lack of effort to unpack our design context. The social, economic and emotional realities beneath the surface are often left out of these conversations, so the purpose of Design Threads is to make a space for the creative community, designers and nondesigners alike, to dive into those topics.

Prior to the site being launched, there was also a physical exhibition that interrogated some of the ideas laid out in the digital report through interactive installations.

Design core: The digital report is organized into four different “threads” centered around overarching themes that designers and creative professionals face today. These threads are expressed in research, quotes, insights, visual content and interactive elements that all come together through a design framework that is purposefully more neutral. This approach enables the user to directly focus on the content itself, which is the substance of the report and the thing we are most proud of. Ultimately, every design decision was driven by the content.

Challenges: Organizing and curating the overwhelming amount of content and raw data that was captured. Hundreds of participating designers generated a large pool of insightful comments and thought-provoking questions, so we had to sort through this content, connect the dots and help present the information in a deep yet digestible way.

Navigation structure: The navigation structure is chronological to the story that we’re telling. The site offers a horizontal scroll for each thread that leads you to the next. Alternatively, a menu enables the user to jump around subthreads to look for specific topics of interest. One special navigation feature on the site is Posture Check, an interactive 3-D meme gallery that users can navigate with their keypads for a lighthearted break in the report.

Technology: Developed by Bloquo Studio, the site uses Prismic for the back end, NodeJS for the server, Webpack for the module bundler, Express for the web framework, PUG for the template engine, SASS as a CSS language extension and the GSAP animation library. The interactive title cards at the start of each thread and Posture Check were developed by Pedro Sanches using custom elements and web components, PixiJS, Preact and three.js.