Nike React 270 Bauhaus — Classic design for today's world

Journey logbook · 2023

Nike × Bauhaus: a concept website for the Air Max 270 React

A concept website for the Nike Air Max 270 React Bauhaus edition that honours the Bauhaus movement and the fusion of art and function in the shoe. First designed in 2019 and remastered in 2023 with UX/UI, animation, sound design and 3D renders.

Client:
Nike Bauhaus
Summary:
Classic design for today's world
Results:
Super Cool Web
Fields:
UXUI + Visuals
Year:
2023
Role:
Designer
Tools:
Figma, Blender, Adobe Creative Suite
Website:
Interactive prototype ↗
Recognition:
Awwwards mentions

The challenge

Create a Nike Bauhaus Edition website that celebrates Bauhaus design and the harmonious blend of art and function in the Nike Air Max 270 React, while embodying Bauhaus principles.

This is a remaster of a project I first did in 2019, with a similar goal but a more holistic approach. More than four years later, I wanted to capture the essence of a design movement that is still extremely relevant, just as the first edition was for me.

Nike React 270 Bauhaus — project image 1
Nike React 270 Bauhaus — project image 2
Nike React 270 Bauhaus — project image 3
Nike React 270 Bauhaus — project image 4

The goal

Express gratitude to the Bauhaus visionaries and celebrate the dedication of the Nike team, fusing boldness with Bauhaus principles, and give users an outstanding experience in line with Bauhaus design.

Nike React 270 Bauhaus — project image 5
Nike React 270 Bauhaus — project image 6
Nike React 270 Bauhaus — project image 7
Nike React 270 Bauhaus — project image 8

The solution

A comprehensive approach that brought together UX/UI design, After Effects animation, sound design for the animations and 3D rendering. Thorough preparation for development, 3D models from external partners and close work with the developer made sure everything worked.

Immersing myself in both sides — Nike and the Bauhaus — the design answers the questions that came up along the way: how to embody Bauhaus ideas and principles, where the inspiration comes from, what the cultural context is, why it is relevant, how to connect the concepts with the product and what the customer experience should feel like.

Nike React 270 Bauhaus — project image 9
Nike React 270 Bauhaus — project image 10
Nike React 270 Bauhaus — project image 11
Nike React 270 Bauhaus — project image 12

The outcome

  • UX/UI design: user flows, strategy, reference gathering and visual creation.
  • After Effects animation connecting the brand and its iconography.
  • Sound design for the animations.
  • 3D rendering to showcase the results.
  • Development hand-off: visuals, iconography, typography and prototypes organised with the developer.
  • Collaboration with external partners for the 3D models of the sneakers and the Bauhaus chair.

Try the interactive prototype.

Nike React 270 Bauhaus — project image 13
Nike React 270 Bauhaus — project image 15
Nike React 270 Bauhaus — project image 16

Why Bauhaus?

This project pays homage to a design movement that is still relevant almost 100 years later. It is a thank-you to the people who shaped that way of thinking, and to the designers at Nike who created a product that is both bold and respectful of the Bauhaus.

Keep reading

About this project

What did Lander Zaro do on Nike React 270 Bauhaus?

A concept website for the Nike Air Max 270 React Bauhaus edition that honours the Bauhaus movement and the fusion of art and function in the shoe. First designed in 2019 and remastered in 2023 with UX/UI, animation, sound design and 3D renders.

What was the challenge?

Create a Nike Bauhaus Edition website that celebrates Bauhaus design and the harmonious blend of art and function in the Nike Air Max 270 React, while embodying Bauhaus principles.

What were the results?

- UX/UI design: user flows, strategy, reference gathering and visual creation. - After Effects animation connecting the brand and its iconography. - Sound design for the animations. - 3D rendering to showcase the results. - Development hand-off: visuals, iconography, typography and prototypes organised with the developer. - Collaboration with external partners for the 3D models of the sneakers and the Bauhaus chair. Try the interactive prototype.