Skip to content
Ma Friend
ES

Colombina

What is Colombina on the internet?

Colombina is a food company the country knows through its brands. We designed and implemented its entire product catalog, browsable by category and country, with nutrition information for every product, without taking the spotlight off the brand campaign.

Screens

The brand
The brand
The catalog
The catalog
The company, beyond the product
The company, beyond the product
What we heard
The portal can’t choose between campaign and usefulness. Investors, suppliers, customers, and people looking up nutrition facts all land on the same domain.
What we recommend
Brand video first, catalog right after. One CMS for many sections. Product search in the header. Keep Flama, the brand’s own typeface.

Reading

  1. 01

    Blue leads, products add color

    Logo and menu sit in blue on white. Each category flips that: a saturated background with the product cut out on top.

  2. 02

    Video, then catalog

    The first screen is video. The product catalog starts below it. Campaign first, then utility.

  3. 03

    One CMS, many sections

    About, sustainability, news, jobs, investors, suppliers, and customers share the navigation without being the same kind of page.

Decisions

  • The brand speaks first. The catalog comes right after.
  • Product search lives in the header.
  • On mobile, the menu, logo, and extra options don’t compete with the video.

On the web

We designed, developed, and implemented the full product catalog.

React with a Laravel CMS. The catalog front end uses Bootstrap, jQuery, and Owl Carousel.

Visibility

Catalog by category and brand with nutrition information, plus news, sustainability, jobs, and sections for investors, suppliers, and customers, with a country selector.

Visit site

Palette

  • Colombina blue · #1428BFBrand, headlines, menu
  • Light blue · #384FFFInteraction
  • Red · #E22307Accent
  • Green · #78B13FSecondary signal

Typography

  • FlamaProprietary brand voice

Related