Portal Bonito

Portal Bonito

Design de sistema de ícones

Projetando um sistema de ícones personalizados para traduzir a fauna e cultura locais em elementos de interface funcionais.
An updated visual identity to accompany a company’s SaaS as it joins the web ecosystem.

Bonito, no Mato Grosso do Sul, é um dos destinos de ecoturismo mais populares do Brasil, operando sob um rigoroso "sistema de vouchers" que exige que todos os passeios sejam reservados com antecedência. O Portal Bonito é uma iniciativa voluntária e sem fins lucrativos que serve como um hub central para este ecossistema, permitindo que os turistas descubram e comparem opções de passeios e atividades.

Devido às regulamentações rígidas, cada passeio deve incluir detalhes logísticos, desde equipamentos obrigatórios, como roupas de neoprene, até infraestrutura específica de acessibilidade. A dependência de descrições apenas em texto prejudicava a legibilidade, e as bibliotecas de ícones padrão (como o Material Design do Google) não eram específicas o suficiente para as necessidades e a biodiversidade da região.

Principais objetivos:

  • Projetar uma biblioteca personalizada de 103 ícones para substituir descrições densas em texto e conjuntos de ícones genéricos e padrão.

  • Desenvolver um estilo visual legível em tamanhos reduzidos (24px), mantendo uma estética amigável e orgânica que combine com a personalidade da região e o restante da interface.

  • Criar metáforas visuais específicas para a fauna única da região (ex: Lobo-Guará, Tucano) e para equipamentos especializados.

  • Sistematizar a biblioteca em 18 categorias claras para cobrir todos os aspectos da experiência turística, desde infraestrutura até a seção "o que levar".

Criando um sistema de ícones simples e culturalmente autêntico

Criando um sistema de ícones simples e culturalmente autêntico

Para gerenciar o escopo de 103 ativos exclusivos, utilizei um sistema visual rigoroso projetado para equilibrar as restrições técnicas com a natureza amigável e orgânica da região.

O ESCOPO

O ESCOPO

O cliente definiu uma estrutura abrangente de 18 categorias, divididas em três tipos de acordo com a função:

  • Infraestrutura: ícones que indicam as comodidades do local (ex: Acessibilidade, Wi-Fi).

  • Itens inclusos: ícones que representam passeios e atividades específicas.

  • O que levar: orientações para a preparação dos turistas.

Como estes ícones aparecem em um layout denso de "ícone + rótulo", frequentemente em dispositivos móveis, a clareza visual era fundamental.

O SISTEMA VISUA

O SISTEMA VISUA

Toda a biblioteca foi projetada em um grid de 24px com 2px de respiro (padding) para garantir uma excelente legibilidade em tamanhos pequenos. Defini algumas diretrizes para manter a consistência em todo o conjunto:

  • Espessura de traço de 1px: escolhi um estilo de contorno fino de 1px. Essa espessura foi selecionada para harmonizar com a tipografia do site, sem ser fina demais a ponto de ficar invisível, nem grossa demais a ponto de ofuscar os rótulos de texto.

  • Geometria amigável: para evitar uma sensação de frieza e rigidez, apliquei um raio de borda (border radius) de 1px nos cantos e terminais. Esse arredondamento sutil cria uma estética mais suave e convidativa, adequada para um destino de ecoturismo.

  • Alto contraste: todos os ícones foram desenhados com contornos pretos para garantir o máximo de contraste e legibilidade em relação à interface.

CONSTRUINDO UMA IDENTIDADE LOCAL

CONSTRUINDO UMA IDENTIDADE LOCAL

O maior desafio foi traduzir a cultura de Bonito em um sistema de ícones de dimensões tão reduzidas. Bibliotecas genéricas eram insuficientes para as especificidades da região, o que me exigiu ilustrar conceitos locais únicos que conjuntos padrão simplesmente não possuem, tais como:

  • Especificidades Culturais: ícones para o tradicional "almoço no fogão a lenha" e para "pedalinho".

  • Fauna Local: em vez de símbolos de animais genéricos, ilustrei a fauna específica da região. Por exemplo, o ícone de "Observação de Animais Silvestres" apresenta um Lobo-Guará, enquanto o de "Observação de Aves" destaca um Tucano, o que também remete ao logotipo do site, trazendo um senso de lugar distinto a um ativo de interface funcional.

Impacto e resultados

O sistema de ícones conseguiu unir utilidade e identidade com sucesso. Ao substituir listas densas de texto por pistas visuais claras, os ícones reduziram a carga cognitiva dos usuários que comparavam detalhes complexos de passeios, tornando o processo de reserva mais rápido e intuitivo. Além disso, a inclusão da fauna e de itens culturais específicos reforçou a marca do Portal Bonito como uma promotora da cultura local.

Aprendizados pessoais

Este projeto foi um mergulho profundo em simplificação e escala. O desafio central foi descobrir como representar conceitos complexos e únicos em suas formas mais simples sem perder sua identidade, tudo dentro de um cronograma realista. Isso me ensinou que diretrizes bem definidas podem não ser restrições, mas sim ferramentas extremamente úteis para manter a consistência e a clareza ao gerenciar um grande volume de ativos.