![Você está visualizando atualmente Design de ícones: um guia para iniciantes [+ Recursos]](https://innersite.com.br/wp-content/uploads/2023/01/place-posts.jpg)
Ícones: você os viu, clicou neles, tocou neles. Você provavelmente interagiu com alguns para chegar a esta página sozinho.
Em um nível básico, os ícones são apenas pequenas imagens. Mas, na verdade, eles desempenham um papel importante na experiência do usuário , ajudando-nos a entender e usar interfaces digitais. Os ícones tornam as telas mais eficientes, limpas, fáceis de usar e alinhadas à marca. Um ícone envolve muito mais pensamento do que apenas pegar qualquer imagem e reduzi-la.
Neste guia, ensinaremos como começar a criar seu próprio conjunto de ícones. Abordaremos:
- por que os ícones são tão importantes
- sete práticas recomendadas para projetar ícones
- recursos para ajudá-lo a criar seu conjunto de ícones.< /li>
Vamos nos aprofundar.
Por que os ícones são importantes?
Os ícones podem parecer um conceito relativamente novo, mas os ícones foram usados pela primeira vez pelos antigos gregos para retratar divindades religiosas e figuras sagradas em pinturas desenhadas à mão. A alfabetização era incomum na época, então a maneira mais fácil de divulgar os ensinamentos religiosos era por meio de imagens em vez de texto escrito. Isso criou uma sensação de familiaridade e reconhecimento para os seguidores religiosos.
As inovações tecnológicas de hoje trouxeram ícones para o mundo digital, onde são usados em softwares e sites interfaces do usuário. Os ícones transmitem significado e solicitam que os usuários tomem uma ação usando menos espaço na tela do que o texto. Além disso, a substituição de páginas com muito texto por símbolos reconhecíveis torna muito mais fácil para o usuário entenda e navegue.
No entanto, os ícones funcionam melhor quando projetados corretamente. Apesar de seu tamanho pequeno, não é difícil criar ícones que confundam ou desencorajem as pessoas a usar seu site ou produto. Em seguida, compartilharemos algumas práticas recomendadas para ajudar você cria ícones que são… bem, icônicos.
Práticas recomendadas de design de ícones
Embora tenham mudado para mídias diferentes, os ícones do século 21 são projetados de acordo com os antigos princípios icônicos gregos : simplicidade, legibilidade e clareza. Elas formam a base das melhores práticas de design de ícones hoje.
Como a maioria das coisas em design, essas práticas não são regras rígidas e rápidas. Considere Considere-os mais como diretrizes gerais que você deve seguir na maior parte do tempo, embora possa precisar quebrá-los ocasionalmente. Confie nos seus instintos para decidir o que é melhor para o seu conjunto de ícones.
1. Determine a finalidade de seus ícones.
A primeira coisa a fazer ao projetar um conjunto de ícones é formar uma compreensão abrangente das tarefas em seu site ou produto. Você vai querer saber o que seus ícones representarão ou solicitarão que seus usuários façam antes de criá-los, portanto, crie uma lista de casos que exigirão um ícone.
Por exemplo, se você estiver criando um conjunto de ícones para um site de entrega de comida, você pode querer ícones que incentivem os usuários a iniciar um pedido on-line, adicionar itens à sacola, escolher uma opção de pagamento, escolher complementos e assim por diante. Seus ícones precisarão ser projetados explicitamente para sua finalidade.
2. Use uma grade.
Quando chegar a hora de começar a desenhar, comece com uma grade. Uma grade garante consistência de forma, tamanho e posicionamento de objetos com seus ícones. Seu processo de design será muito mais direto se tudo for dimensionado corretamente.
< p>Certifique-se de que as linhas do seu ícone estejam alinhadas com as linhas de grade. Isso mantém a aparência de seus ícones consistente e evita quaisquer efeitos instáveis de desalinhamento. Manter a grade também evita manchas ao renderizar os ícones, já que as larguras das linhas sempre serão números inteiros.
Como mencionado, pode haver momentos em que você precise quebrar a grade para fazer um ícone parecer melhor. Tudo bem, desde que você não o faça com muita frequência.
3. Mantenha seus ícones simples.
Os ícones são, antes de mais nada, funcionais. Eles existem para ajudar os usuários a completar uma meta, e qualquer decisão artística vem em segundo lugar. É por isso que você deve tentar fazer com que cada ícone em seu conjunto seja o mais simples possível, com detalhes suficientes para transmitir seu significado.
Muitos detalhes podem ser confusos. Se o design for muito complexo, seu público não poderá reconhecê-lo rapidamente pelo que é. Aqui está um exemplo de Material Design de um ícone ocupado e excessivamente detalhado:
Claro, parece bom quando ampliado na tela. Mas reduzido para 24 x 24 pixels ou menos, esses detalhes serão perdidos e será mais difícil para os usuários identificá-lo como um barco. Eles eventualmente chegarão lá, mas é preciso mais esforço mental, e isso por si só já faz uma grande diferença em sua experiência.
Compare isso com um claro e direto ícone:
Menos detalhes podem tornar um ícone menos interessante visualmente, mas ajuda no reconhecimento. O ícone acima contém detalhes suficientes para que a maioria de nós saiba que é um barco. Mesmo quando reduzido, o significado é claro porque as linhas são grossas, mínimas e auxiliadas por muitos espaço em branco. Este ícone é claro para todos os usuários, incluindo aqueles com baixa visão, um princípio chave de acessibilidade .
A melhor maneira de criar um ícone reconhecível é começar com formas simples como círculos, quadrados e triângulos. Forme uma versão aproximada de seu ícone com as formas principais como base, antes de adicionar detalhes.
Além de incentivar a simplicidade, começar com formas grandes torna seus ícones mais consistentes em estilo e mais facilmente escalável.
4. Torne seus ícones reconhecíveis.
Desenhar ícones é um ato de equilíbrio. Por um lado, seus ícones precisam ser simples o suficiente para serem traduzidos para tamanhos menores, conforme mencionado na última etapa. Por outro lado, você precisa inclua detalhes suficientes para que os usuários possam reconhecer sua função.
Ao refinar seus ícones de formas básicas e adicionar mais detalhes, considere se um usuário iniciante pode entender intuitivamente seu significado. Por exemplo, se você está projetando um donut, ele precisa se parecer com um donut e ser reconhecido como um donut. O ícone não deve ser apenas um círculo com outro círculo dentro dele. Em vez disso, considere adicionar granulado – um marcador de identificação padrão para uma rosquinha.
Também ajuda a conduzir pesquisas relacionadas aos seus ícones. Continuando nosso exemplo de aplicativo de entrega de comida, você pode realizar pesquisas para ver quais imagens são comumente associadas ao cenário que você vai criar. Talvez você faça uma pesquisa aprofundada em sites semelhantes e descubra que um ícone de fogão é comumente usado para representar receitas. Isso significa que você deseja projetar seu ícone para corresponder a esses resultados, pois os usuários farão associações semelhantes.
Neste estágio, também é essencial decidir se seus ícones serão simbólicos ou literais. Por exemplo, você está criando um ícone que é uma bifurcação ou um ícone metaforicamente relacionado a uma bifurcação.
Por exemplo, um ícone de coração normalmente é usado para indicar que você gosta ou ama um determinado pedaço de conteúdo. O significado deste símbolo é compreensível e fácil de entender.
No entanto, o significado por trás do ícone de uma nuvem é mais metafórico. Você não veria imediatamente a imagem de uma nuvem e pensaria que clicar no ícone solicitaria o download de arquivos de bancos de dados digitais online.
Observe que existem alguns ícones que, com o tempo , adotaram um significado essencialmente universal em interfaces de usuário. Por exemplo, um ícone de lupa quase sempre representa uma função de pesquisa, um ícone de carrinho de compras normalmente representa o carrinho de um usuário em uma loja online e um ícone “X” geralmente fecha a exibição quando clicado. Lembre-se disso ao escolher ícones — use ícones comuns quando apropriado e evite-os fora de seus contatos normais, pois isso pode confundir os usuários.
Bons ícones também são reconhecíveis por todos os grupos de pessoas, independentemente de sua demografia. Se você tiver um público global, mas você estiver usando imagens centradas no Ocidente, não conseguirá atingir seus usuários que não estão familiarizados com os símbolos ocidentais.
5. Procure coerência visual.
Se você está procurando dicas de design de ícones, provavelmente está projetando um conjunto de ícones, não apenas um ícone. Todos os ícones em seu conjunto devem parecer relacionados entre si. Eles devem compartilhar qualidades visuais como espessura do traçado, preenchimento, formato do canto, estilo (por exemplo, plano x tridimensional) e esquema de cores. Estabeleça regras para seus ícones que você segue em todo o conjunto – isso é especialmente importante se houver vários designers trabalhando no conjunto.
Vejamos um exemplo do Envelope. Observe como o esquema de cores é consistente para todos os seis ícones e como eles têm a mesma forma e tamanho, independentemente do que está dentro do envelope. Esses ícones são retos e preenchidos.
Este ícone definido por Phosphor Icons, por outro lado, é contornado, arredondado e vazio. O objetivo desses ícones é denotar funções de bate-papo, e você notará a consistência do design: eles são todos do mesmo tamanho, espessura de linha, formato de borda e cor.
Aqui estão algumas regras a serem aplicadas em seu conjunto de ícones para uma estética limpa e coesa:
- Tente usar números inteiros sempre que possível para evitar problemas de renderização. Isso se aplica a ângulos, arredondamento de cantos e espessura de linha.
- Evite desenhar formas e curvas à mão em favor de ferramentas de precisão (por exemplo, a ferramenta de curva no Adobe Illustrator). O olho pode detectar se a forma de um ícone está um pouco errada.
- Para ângulos, use 45 graus (ou múltiplos de 45 graus, como 90 graus ou 22,5 graus).
- Alinhar os traços do seu ícone com a grade de pixels para evitar imprecisão quando a imagem for dimensionada.
- Limite o número de pesos de linha a dois, se possível, três no máximo. Qualquer outra pode ser confusa e excessivamente detalhada.
6. Adicione personalidade.
Percebo que passei muito tempo discutindo regras técnicas para o design de ícones. Mas isso não significa que você não pode exercitar seus músculos criativos para torná-los únicos!
Se seus ícones fizerem parte da marca reconhecível do seu site, eles devem se parecer apenas com seus ícones. Vamos dar uma olhada em alguns ícones do aplicativo de navegação Waze.
Esses ícones adotam um estilo colorido, expressivo, quase caricatural. Isso transmite uma estética divertida que se alinha com a interface e a marca do Waze.
Os ícones do Google, por outro lado, são mais simples. O design simples é funcional e direto, mas a cor ajuda a distinguir diferentes categorias de lugares.
Waze e Google Maps são de natureza semelhante — ambos fornecem direções aos usuários. Embora seus serviços se sobreponham, seus ícones são exclusivos de sua marca e, portanto, reconhecíveis.
7. Teste seus ícones.
A única maneira de saber se seu conjunto de ícones é realmente eficaz é testá-lo com pessoas reais. Isso não precisa ser superformal — tente mostrar seus ícones a um amigo ou colega de equipe e pergunte o que eles acham que é cada ícone ou diga a primeira coisa que eles pensam quando o veem.
Como todas as coisas de design, não espere acertar seu conjunto de ícones na primeira tentativa. Você provavelmente terá que repetir seus designs antes de terminar com um conjunto que se sinta confortável em lançar. Consulte nosso Guia definitivo para testes de usuário para obter mais dicas para esta fase de o processo.
Recursos de design de ícones
Há uma variedade de recursos disponíveis para ajudar no processo de design de um conjunto de ícones para seu site. Você pode usar esses recursos para fazer referência a outros ícones para inspiração ou baixar conjuntos de ícones pré-fabricados que você pode personalizar para atender às necessidades do seu site e marca.
1. Material Design
Material Design é do Google plataforma de código aberto que fornece informações sobre tipografia, acessibilidade na web e outros guias digitais. Você pode baixar ícones e personalizá-los de acordo com as necessidades da sua marca.
2. Streamline Icons
Streamline Icons apresenta mais de 30.000 ícones pré-projetados que estão disponíveis para download. O pacote gratuito “Essential Icons” apresenta símbolos comumente usados para funções de e-mail e música, e o “Ultimate Pack” pago inclui ícones de nicho, como símbolos de viagem e ecologia.
3. Nucleo
O Nucleo permite que você selecione, personalize e baixe ícones em seus aplicativo. O preço varia dependendo do número de usuários em uma conta.
4. Animaticons
Animaticons oferece downloads de ícones animados, que podem dar ao seu site uma experiência de usuário única. Você pode escolher entre cinco conjuntos de ícones diferentes com preços que variam de grátis a US$ 5.
5. Recursos de design gratuitos
Grátis O Design Resources oferece vários pacotes de ícones para baixar e usar em seu site, como ícones da barra de guias do iOS. Alguns conjuntos são gratuitos, outros são pagos e você pode filtrar os ícones por sua compatibilidade com seu software de design favorito, como Illustrator, Figma ou Sketch.
Ícones são elementos necessários do seu site.
< p>Em última análise, ícones bem projetados são essenciais para criar uma experiência de usuário perfeita.
Você deseja que os visitantes do seu site aproveitem o tempo em seu site e concluam a ação desejada, seja comprando um produto ou se inscrevendo para um boletim informativo.
Os ícones podem ajudar você a guiar os usuários por diferentes processos, eliminando a necessidade de grandes quantidades de texto explicativo. Imagens reconhecíveis também facilitam a interação de usuários de todo o mundo com seu conteúdo.
Se você dedicar um tempo para entender a finalidade dos ícones em seu site e projetá-los, mantendo a consistência estilística, seus usuários ficarão encantados, se divertirão realizando ações em seu site e desejarão continuar voltando.
Projete seu primeiro conjunto de ícones.
Em última análise, ícones bem projetados são essenciais para criando uma experiência de usuário perfeita. Você quer que seus usuários se divirtam e concluam a ação desejada, seja comprando um produto ou se inscrevendo em um boletim informativo.
Não importa o site ou aplicativo que você está criando, os ícones provavelmente representarão grande parte sua interface, por isso é importante entender o que torna os melhores ícones bem-sucedidos. Como designer de UX, seu objetivo principal deve ser transmitir os significados de seus ícones da forma mais clara possível, enquanto injeta um pouco de criatividade quando puder.
