Loading ...

Responses by Maarten Volckaert, strategy director, and Javier Corrales, interactive director, Cuchillo

Background: AZAB, a new architecture studio in Bizkaia, Spain, resulted from the fusion of two prestigious studios with one ambitious dream—to transcend the local market and find its place among big international players. We created the AZAB brand from scratch, starting with the logo and the whole corporate identity. The ensemble features brutalist aesthetics, using mainly black and white with an important focal point on the typography—customized in collaboration with Zaragoza-based Branding with Type—for the client.

Design features: We have been breaking the rules on purpose, going against all laws of user-interface design: designing without margins, adding and adding overlapping elements and finishing it all with a touch of gigantism. But even then, we didn’t forget to take care of the smallest details. What catches visitors’ eyes the most seems to be the homepage: we transformed it into an infinite gallery where the images follow the mouse cursor and create Microsoft 98–style glitches. Another detail that made us proud is the wavy paragraph in the info section, which gets distorted by cursor speed.

Challenging process: One of the biggest challenges we faced in turning this idea into reality was balancing brutalist and eye-catching transitions while keeping the smoothness and fluidity of all transitions and animations.

Navigation structure: Our concept is that you can access all sections of the website just by scrolling. At the end of each section, there’s a link that takes you to the next section. If you keep scrolling, a loading bar fills up and changes content automatically.

Technology: On the back end, we used a home-built CMS on Rails, which enables us to freely modify all the site’s sections. It is supported by a combination of Amazon S3 and Heroku. We developed the front end in SASS and TypeScript. A big part of this site was made in Canvas; for this part, we used the marvelous PixiJS. Though most of the animations are steered by scrolling speed, we also used GSAP.

azab.es

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In