Responses by Carlotta Angius and Alessandro Rigobello, cofounders, Six Socks Studio.

Background: Tela is a Made in Italy fashion brand with ten years of experience. The brand name originates from fabric-weaving terminology, where Tela—in Italian—denotes a plain fabric construction that implies a texture. We started collaborating with the brand more than a year ago, taking charge of its whole content: shooting campaigns, and creating editorials and social media assets. One of our favorite campaigns was conceiving a series of nine portraits with nine different female personalities, each embodying the essence of Tela.

The brand’s audience is women who, beyond age, share a self-confident, nonpretentious attitude and sense of style. Nine is the brand’s lucky number, and that’s why it occurs throughout its media—including the website domain. After building a visual identity for Tela, the next step was to completely rethink its website. We wanted it to be responsive, of course, and have a clean yet unconventional appeal that came more from good taste rather than being too conceptual. We opted for an intuitive, fun-to-use experience by giving an alternative and interactive way to explore the collections and brand principles.

Design core: Tela9.com is a simple and easy-to-approach site, but at the same time, we sought out a cutting-edge design, catchy animations and interactions. It all revolved around two main concepts: one, a visually defined grid that ideally splits the vertical menu from the contents by differentiating it with white and buttery-cream background colors; and two, to not take the first concept too seriously. In fact, some elements break this rule on purpose, like the video player and other images that go behind the menu to create a geometric game with the background. We wanted to create something neat as a canvas and as spontaneous as a mood board without making it messy. Our favorite touch is the playful homepage hero, which enables the user to interact with the two characters of the spring/summer ’20 collection.

Challenges: It may sound trivial, but the most difficult aspect for us was to create a harmonic experience that matched the brand’s language. Tela calls itself a “relaxed tailoring” house, so we created something that’s spontaneous and in a way disengaged but with a high-fashion tailoring approach.

In the near future, we might develop a shopping experience, and add interactions and microinteractions in the site’s ultimate iteration. The playful hero, for example, was made by manipulating and creating animations from photos in the lookbook; when we shot those photos, we had no idea of what the site was going to be like (or if we were even going to be responsible for designing it.) Yet it worked perfectly, fitting the spirit of the project, as well as both our and our client’s vision. Sometimes the best work comes out of experimenting with what you already have.

Navigation structure: Our latest fetishism is lateral navigation. We settled the whole experience around it. Every layout is different to ensure that the user has the most functional navigation possible for the type of content being viewed. Some pages, for example, have a classic vertical scroll—and sometimes a very long one, like on the Archive page. Others are fixed instead, like the Collections and the Contact pages. The first Collection land is horizontal, too, and is attached with a drag interaction.

Technology: Here at Six Socks, we are design-, visual- and style-research explorers, but we always look for tailor-made code and innovative tech approaches. Tela9.com is a Jamstack, static-generated website with a headless CMS attached. We used Nuxt.js to generate pages and serve static content with no servers behind. Animations, interactions and all motion graphics are supported by GSAP, a never-ending animation platform.