Executando verificação de segurança...
7

[UI Design] Pare de usar esses ícones hoje!

Turma, assunto hoje é ícone.

Percebi que na maioria dos projetos de DEVs/Designers iniciantes existe alguns problemas, que talvez eles não saibam identificar.

Os ícones fazem partes desses problemas. Sabe quando você descobre os sites mágicos que deixam vc baixar um milhão de ícones diferentões, tipo o www.flaticon.com, e aí você sai baixando os mais legais que encontra. No fim, a sua interface fica estranha;

A bagunça é causada pela incoerência dos ícones, mas relaxa que vou te dar a "call" pra você sempre baixar os ícones delicinha pro seu projeto 😋.

Primeiro ponto é saber os temas/tipos de ícones.

Contornar e preencher

Na maioria das vezes você vai encontrar dois tipos de ícones, ícones contornados (sem preenchimento), e ícones preenchidos.

Quando os ícones do sistema não estão preenchidos, eles são definidos por seu traço. Um traço mais grosso adiciona uma sensação de peso e massa, fazendo com que os ícones preenchidos pareçam mais pesados. Um traço mais fino implica leveza, dando aos ícones não preenchidos um estilo mais leve.
Design Material.

Ícone não preenchido

ícone contornado

Ícone preenchido

ícone Preenchido

Olha só, é importante saber que: A espessura do traçado dos ícones contornados pode ser ajustada para complementar ou contrastar a espessura da sua tipografia.
Existe uma expessura ideal de ícone que é 2 dp Para manter a legibilidade.
Essa espessura de traçado é recomendada para a maioria dos ícones:

ícone em espessura de 2 dp

Agora se liga como os ícones contornados em 2dp permanecem legíveis em todos os tamanhos e aplicativos.

Vários ícones em espessura de 2 dp

Resumindo, se você optar pelo não preenchido, ultilize esse tema em todo o seu projeto, e vice-versa. E você vai ter mais coerencia no seu design.

Simples né?

Estou estudando UI Design, e estou usando o TabNews para documentar meus estudos e de alguma forma ajudar alguém que se interesse, fique livre pra me dar dicas ou me apoiar 😎

Carregando publicação patrocinada...
1

Brabo d+ johnatan, de fato eu como dev acho muito top manter um padrão de utilização de icones, pois deixa em minha opinião a aplicação com uns aspecto mais agradável, sem parecer uma sopa de letrinhas de icones saca, e uma biblioteca de icones que nos últimos tempos que me chamou a atenção, por conseguir lidar bem com a questão que você citou de ícones contornados(sem preenchimento) e com preenchimento, foi a Phosphor Icons, a qual recomendo caso queira dar uma olhada, ela é muito massa.

1
1

que legal, não sabia desse principio de design, sempre ficava em duvida de qual espessura seria mais adequada, hora ou outra eu sempre voltava a editar o icone pois não havia gostado do resultado final por achar q ele estava muito fino ou muito grosso

1

Boa dica!!
Gosto muito de usar ícones sem preenchimento e monocromáticos por trazerem uma "leveza" e simplicidade para o design.
Mas isso muda de tempos em tempos é claro, depende das tendências do mercado...😄