[MÚSICA] [MÚSICA] [MÚSICA] Oi gente, tudo bem? Bom, o meu nome é Tuanny e hoje nós vamos falar sobre iconografia. Antes de falarmos sobre iconografia, eu acho interessante a gente ressaltar um ponto que foi comentado no vídeo passado sobre a importância de trabalharmos com grid e linhas-guias antes de iniciarmos qualquer projeto. Uma dica importante é que elementos alinhados são sempre mais harmônicos. Nós sabemos que as coisas na natureza não são separadas por linhas. Quando você vê uma passagem, você não vê a separação por linha entre os planos, entre o primeiro plano, segundo plano, a gente não encontra isso, porque linhas e ângulos são convenções humanas para manter o senso de ordem dentro de um sistema e isso não é diferente no design de interfaces. Percebe como as linhas são importantes? Elas guiam a nossa leitura de forma bem natural. A iconografia é a linguagem mais universal que existe no mundo. Já percebeu quantos ícones estão presentes no nosso dia-a-dia? Os ícones são essenciais quando nós nos encontramos num aeroporto, num metrô ou até mesmo navegando num aplicativo de rede social. É incrível quanta informação, quanto valor agregado está presente dentro de uma figura tão pequena quanto o ícone. A linguagem iconográfica é uma ótima forma de chamar a atenção do usuário, na verdade, de fazer com que ele escaneie a tela de uma forma mais rápida. Então, ajuda ali, contribui para uma melhor leiturabilidade. Se tratando de contexto, o que é importante pensar, enquanto lidamos com interfaces visuais, é que o usuário não está isolado utilizando nossa aplicação dentro de uma bolha. Nós estamos competindo com distrações externas, tanto quanto distrações internas, como as notificações de outros aplicativos no celular. Então, fazer com que as informações sejam entendidas, sejam escaneadas de uma forma mais rápida é fundamental e os ícones desempenham muito bem esse papel. É claro que quando eles são bem utilizados. Mas, cuidado. Não quer dizer que você deve acrescentar ícones em toda a interface. Use ícones com moderação e com sabedoria. Ícones que sejam universais, entendíveis pela maioria das pessoas. Relação aos estilos, existem vários. Os principais são: outline, aquele que só possui a bordinha. O set de ícones do IOS é totalmente outline. Filled, é uma trend, é um estilo recente mas que tem feito bastante sucesso, é o estilo outline mas que tem sombreamento próximo às bordas. O estilo solid, o set de ícones do material design utiliza bastante esse estilo, é aquele estilo que é todo preenchido, não tem borda. Flat icons geralmente utiliza cores mais chapadas e sombreado na diagonal. Hand-drawn é aquele tipo de ícone que parece que foi desenhado à mão. Skeumórfico é tipo de estilo que mimetiza bastante a realidade. A UI do IOS, há alguns anos atrás, tinha bastante essa pegada mais skeumórfica. Fixando uma iconografia para aplicativo, seja ele mobile ou desktop, é interessante que você tenha em mente qual o estilo que você vai aplicar. Para que possamos garantir consistência, é importante que a gente baixe um set de ícones só. Vários designers disponibilizam os seus sets de ícones e todos eles têm a sua própria identidade, têm o seu próprio estilo, o que fica mais fácil, você não fica utilizando ícones de diferentes estilos porque pode causar a impressão errada para as pessoas que utilizarem o seu aplicativo. A iconografia padrão do IOS é outline, a iconografia padrão do Android é filled e todos eles, ambas as plataformas, disponibilizam os ícones mais utilizados. O set do material design é muito mais amplo do que o do IOS. A primeira boa prática é: defina o tamanho dos ícones, seja ele 12 por 12, 16 por 16, 24 por 24, 20 por 20. Defina, porque o set de ícones, pelo menos os principais, precisam ter esse tamanho pré-definido, porque fica mais fácil na hora do dev exportar esses ícones, porque eles têm o mesmo tamanho. A segunda boa prática é hierarquia. Os ícones de navegação, por exemplo, podem ter o mesmo tamanho, como eu já mencionei, 24 por 24, por exemplo. Só que no decorrer do aplicativo vai ter uma hierarquia de ícones: há lugares que que você vai precisar de ícones um pouco menores; há lugares que você vai precisar de ícones um pouco maiores. Então, só para você ter uma ideia de que, dentro da interface, existe essa hierarquia. E ícones que são utilizados com propósito, como o de navegação, por exemplo, precisam ter a mesma linguagem gráfica: se o ícone é todo outline, os demais serão também outline. Agora, se você quiser destacar uma mensagem, um ícone relação a outro, como o exemplo que vai aparecer aí na tela do Airbnb, você vê que os ícones de navegação têm o mesmo tamanho e eles têm o mesmo peso, o mesmo balanço visual: todos eles são outline, a linha tem a mesma espessura, eles pertencem ao mesmo set de icons. O que é importante salientar aqui é que, por exemplo, em outras partes do aplicativo, como esse aqui onde nós temos placeholder, o ícone se apresenta de forma diferente, ele se apresenta de forma preenchida, ele não deixa propriedades básicas como as terminações mais arrendodadas iguais aos outros ícones. Porém, nós percebemos que ele se apresenta de forma diferente, a gente vê uma hierarquia de ícones. Esse ícone tem um peso muito maior relação aos ícones de navegação e todos os ícones que forem parecidos com esse, todos os outros placeholders também terão a mesma identidade que ele. Tamanho ótico. É importante pensar em tamanho ótico, porque as formas geométricas que nós conhecemos não têm o mesmo balanço visual: o quadrado, o círculo e o triângulo, por mais que eles tenham o mesmo tamanho, eles têm distribuição de massa diferentes. Por exemplo, no triângulo a gente vê que a distribuição de massa no topo é bem inferior relação à base. Por que que isso é importante? Porque em alguns casos a gente pode alinhar normalmente o ícone, mas mesmo assim ele parecer desalinhado por conta desse balanço. É o famoso clássico do botão de play, onde o triângulo, se alinhado corretamente, parece desalinhado, mas se a gente alinhá-lo oticamente, ele vai parecer mais alinhado. Então, como é que a gente resolve esse problema? A gente pega o triângulo, coloca um círculo atrás dele e alinha o círculo com círculo. Daí ele tem ali essa distribuição de massa melhor. Use ícones com moderação. Para reforçar a mensagem, não permita que tudo dependa exclusivamente de ícones. Você pode perguntar também: " mas e o Google Docs? E esses aplicativos para edição de texto? Todos eles são guiados por ícones". Sim, eles utilizam bastante a iconografia, a gente sabe também, por exemplo, dentro do Google Docs tem o b que significa bold, tem o i que significa itálico, tem a impressora que significa imprimir. Nós sabemos disso, mas se você repousar o mouse sobre esses comandos, você vai ver que vai aparecer uma dica visual dizendo o que realmente ele faz. Então, dicas nunca são demais, elas são importantes. Não abra mão das labels. Desde que as interfaces visuais na máquina surgiram, nós vemos que eles se apropriaram de metáforas do nosso dia-a-dia do escritório, por exemplo, a pasta, o folder para indicar onde os arquivos são colocados, a lixeira para indicar os arquivos que não têm mais utilidade. Enfim, existe uma série de metáforas que desde sempre foram utilizadas e mesmo assim, quando a gente repousa o mouse nelas, aparece a dica visual. Então, isso é interessante. Se você quiser saber mais sobre esse assunto, tem site bem legal chamado History of Icons, que eu deixo aqui abaixo para vocês darem uma olhada. Se eu quisesse que vocês aprendessem apenas uma coisa desse vídeo, seria defina o estilo para o set de ícones que você vai utilizar no aplicativo e mantenha consistência, porque é muito estranho quando a gente entra num aplicativo e os ícones estão de forma diferente ou com estilo diferente ou com tracejado um pouco mais grosso, um pouco mais fino, fica bem esquisito mesmo. Então, eu espero que vocês tenham gostado do vídeo e até a próxima.
