%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20){kind=small}
Design de sistema de ícones
Projetando um sistema de ícones personalizados para traduzir a fauna e cultura locais em elementos de interface funcionais.
O Portal Bonito, um portal web sem fins lucrativos de um dos destinos de ecoturismo mais populares do Brasil, precisava comunicar informações sobre passeios de forma ágil. Devido a regulamentações rigorosas, cada passeio possui requisitos específicos, mas as descrições apenas em texto dificultavam a leitura rápida, e as bibliotecas de ícones padrão eram genéricas demais para representar as necessidades únicas da região.
Meu objetivo foi projetar uma biblioteca personalizada de 103 ícones que equilibrasse clareza funcional e autenticidade. Os ícones precisavam ser legíveis em tamanhos reduzidos (24px) para auxiliar na leitura rápida de informações, ao mesmo tempo em que retratassem a fauna e a cultura únicas da cidade.
Desenvolvi um sistema de ícones sob medida para representar a cultura e a vida selvagem da região, ilustrando conceitos locais específicos como "almoço no fogão a lenha" e animais da fauna local, como o Lobo-Guará e o Tucano.
O resultado é um conjunto coeso e visualmente convidativo que preenche a lacuna entre utilidade e identidade, reduzindo a carga cognitiva dos usuários ao comparar opções de passeios e atividades, enquanto reforça a marca do Portal Bonito como promotora da cultura local.
Gostaria de ter uma visão mais detalhada do projeto?
Clique no botão abaixo e leia o estudo de caso completo.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 26" xmlns="http://www.w3.org/2000/svg"><g d="M 36 22 C 36 24.209 34.209 26 32 26 L 4 26 C 1.791 26 0 24.209 0 22 L 0 4 C 0 1.791 1.791 0 4 0 L 32 0 C 34.209 0 36 1.791 36 4 Z M 32.719 13.015 L 17.991 24.139 L 3.263 13.015 L 17.991 1.89 Z M 11.52 12.938 C 11.52 9.371 14.411 6.48 17.978 6.48 C 21.545 6.48 24.436 9.371 24.436 12.938 C 24.436 16.505 21.545 19.396 17.978 19.396 C 14.411 19.396 11.52 16.505 11.52 12.938 Z M 12.282 9.9 C 11.947 10.532 11.719 11.216 11.61 11.923 C 15.605 11.633 21.027 13.814 23.354 16.518 C 23.756 15.914 24.054 15.238 24.237 14.514 C 21.365 11.706 16.32 9.884 12.282 9.9 Z M 12 13.227 L 13 13.227 L 13 14.227 L 12 14.227 Z M 13 15.228 L 14 15.228 L 14 16.228 L 13 16.228 Z M 15 13.228 L 16 13.228 L 16 14.228 L 15 14.228 Z M 17 14.228 L 18 14.228 L 18 15.228 L 17 15.228 Z M 21 16.228 L 22 16.228 L 22 17.228 L 21 17.228 Z M 18 17.228 L 19 17.228 L 19 18.228 L 18 18.228 Z M 21 11.228 L 22 11.228 L 22 12.228 L 21 12.228 Z M 18.99 15.233 L 19.99 15.233 L 19.99 16.233 L 18.99 16.233 Z" fill="transparent" height="26px" id="VcKDk3YmP" width="36px"><path d="M 36 22 C 36 24.209 34.209 26 32 26 L 4 26 C 1.791 26 0 24.209 0 22 L 0 4 C 0 1.791 1.791 0 4 0 L 32 0 C 34.209 0 36 1.791 36 4 Z" fill="rgb(0, 155, 58)" height="26px" id="Qahk8ln9P" width="36px"/><path d="M 29.456 11.125 L 14.728 22.249 L 0 11.125 L 14.728 0 Z" fill="rgb(254, 223, 1)" height="22.248999999999885px" id="hMa9tz8P_" transform="translate(3.262 1.89)" width="29.455999999999946px"/><path d="M 0 6.458 C 0 2.891 2.891 0 6.458 0 C 10.025 0 12.916 2.891 12.916 6.458 C 12.916 10.025 10.025 12.916 6.458 12.916 C 2.891 12.916 0 10.025 0 6.458 Z" fill="rgb(0, 39, 118)" height="12.915999999999984px" id="u025kghC6" transform="translate(11.52 6.48)" width="12.915999999999983px"/><path d="M 0.672 0 C 0.337 0.632 0.109 1.316 0 2.023 C 3.995 1.733 9.417 3.914 11.744 6.618 C 12.146 6.014 12.444 5.338 12.627 4.614 C 9.755 1.806 4.71 -0.016 0.672 0 Z" fill="rgb(203, 233, 212)" height="6.618104531731883px" id="XvNd7Lq7a" transform="translate(11.61 9.9)" width="12.627000000000052px"/><path d="M 0 0 L 1 0 L 1 1 L 0 1 Z M 1 2 L 2 2 L 2 3 L 1 3 Z" fill="rgb(136, 201, 249)" height="3.000046491622971px" id="p1ANm4XEz" transform="translate(12 13.227)" width="2.000025153160138px"/><path d="M 0 2 L 1 2 L 1 3 L 0 3 Z M 2 3 L 3 3 L 3 4 L 2 4 Z M 6 5 L 7 5 L 7 6 L 6 6 Z M 3 6 L 4 6 L 4 7 L 3 7 Z M 6 0 L 7 0 L 7 1 L 6 1 Z" fill="rgb(85, 172, 238)" height="6.999990463256882px" id="ITCHDeSFn" transform="translate(15 11.228)" width="6.999990940094037px"/><path d="M 0 0 L 1 0 L 1 1 L 0 1 Z" fill="rgb(59, 136, 195)" height="1px" id="OeWcFYiXB" transform="translate(18.99 15.232)" width="1px"/></g></svg>)