Responses by Contra Studio.

Background: Located in Medellín, Colombia, Hotel 23 wanted us to create a website that reflected the design and architectural elements of its building, such as the design of its different spaces, the stones, its plants, colors, the sun and the constellations in the night sky above it, among others. The target audience of this project are people in Colombia and abroad who are interested in visiting one of Medellín’s most beautiful hotels.

Design core: We feel that what stands out most on the site are the shapes and textures. We tried to take inspiration from elements we found in the hotel, which has many handcrafted details on each floor as well as distinctive styles in its restaurant and terrace. On the other hand, much of the inspiration for Hotel 23 is its location—it name is a reference to its location being 23 degrees in respect to the sun—and its relationship with constellations. We tried to reflect this on the website with elements such as lines and typography.

Favorite details: The use of shapes and textures that we achieved on all the pages, including the one for the Cala Roca restaurant, which is part of the hotel brand but has a different personality. The animations we added in development give a richness to the interactions that we really like.

Challenges: Managing to synthesize so many different design elements into a proposal that felt coherent throughout the site.

New lessons: The importance of careful research in the design process. The decisions we made at this stage were ones that brought our result to the level we expected.

Navigation structure: The menu is inspired by the stones found in the hotel and the different ways we found to stack the links. Also, the effect on hover is a window to the page the person is about to enter.

Special navigational features: The footer! It‘s another way to access all the pages, and we loved the result.

Technology: We designed everything in Figma. The front end was done in Nuxt.js. For the 360-degree photography, we used PanoViewer.js. The animations were made with GSAP. And the rest of the stuff was done from scratch. Kudos to Jorge Toloza (awwwards.com/jorgecapillo) for the development.