• Awwwards Site of the Day
  • Awwwards Developer Award
  • Awwwards Mobile Excellence
Branding Editorial Naming Video Website

Steel, the ugly and visceral product that sustains civilization. How can we successfully position such a raw material on digital for people who insist you can’t sell steel online? 

By showcasing its hidden beauty. We carefully crafted video product teasers and inspiring photography and encased it on a highly impactful website that demands attention. Jewellery brands take notes: steel is the new thing, rust included. 

⮑ ● Visit website Ferro.pt
ferro-fullscreen@2x
Branding

Ferro branding aimed to be like the material itself —Ferro means “steel” in Portuguese— strong, consistent, vigorous. A custom typeface was created for the logo and PX Grotesk secured an important role in brand communication. The type logo is aided by a minimized version of the mark, with the F as the symbol.

  • Fig. 1

    Typography

  • Fig. 2

    Tote Bag

  • Fig. 3

    Catalogue

  • Fig. 4

    Brand Pattern

  • Fig. 5

    Fleet of cars

  • Fig. 6

    Brand

  • Fig. 7

    Tshirt Application

Drag me
Art Direction

The art direction was, from the start, interested in accurately representing a product that is more often thought of in abstract terms than actually seen. Photography and video then sought to present the product on both micro and macro scales. Curiously, the overarching shapes of the material itself ended up removing the object from its associated universe, resulting in something that reads more like a piece of art — which we took as a conspicuous sign and used it to display the material’s beauty. The macro-scale provided just the opposite effect, and we used it for the necessarily very grounded showcase of the range of products.

Fig 8.

Overview of the theater

Ferro Overview of the theater
Fig 9.

Identity application

Ferro Identity application
ferro-slide-01
ferro-02
ferro-03
ferro-05
ferro-04
Fig. 1 of 5

Colours for each category product

Colours for each category product

The Website

The main focus of the website is to present the range of products. Intuitive and direct navigation allows the user to enter directly into the product ranges slider, which presents all the sub-ranges, technical features and possible applications of each of them. The homepage mirrors the Ferro universe, with the corporate video playing in the background. In the About page, it is possible to experience a 3D version of the logo, with a mousemove effect.

Website loading animations

Sound

We created succinct videos for each range, showcasing the details of the particular products. The main video is complemented by voice-off and custom music. The song sought to fill the space with an electronic sound featuring several loops. These loops were then reused to complete the navigation experience on the site itself, alternating between different pages.

Play
Ferro Sample EN — by Rodolfo Jaca, Bunnybride Productions
  • 0:04 Ferro Sample EN
  • 0:04 Ferro Sample FR
  • 0:04 Ferro Sample PT
  • 0:04 Ferro Sample Loop I
  • 0:04 Ferro Sample Loop II
They loved it →

“From the beginning we understood that working with Büro was starting a journey with a group of very talented people that understand design and creativity as a tool to solve complex problems in an innovative yet simple and meaningful way. With a true interest in understanding our business model and objectives, we get used, with a smile on our face, to do not feel dumb when complex problems were turned into practical, clean but still spectacular solutions that should have been obvious to everyone from the beginning! This mixture of natural talent and approach, together with long-lasting relationships they have with top quality suppliers, open ground to the production of unique final arts both in the digital and print formats. Thanks Büro!”

Nuno Teixeira Pires — CEO