Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Nesse resumo inspiracional da semana, colocaremos sorrisos em nossos rostos ao olhar ilustrações amigáveis pela web.
É Emocional
Emoção é uma parte muito importante da UX: ajuda usuários a sentirem algo quando visitam um site e serão mais engajados, focados e relacionado a qualquer coisa que quisermos comunicar. Se tivermos lido Projetando para Emoção, lembremo-nos da ideia que emoção dentro do design oferece
"uma experiência para usuários que os fazem sentir-se uma pessoa, não uma máquina, no outro lado da conexão"–Aarron Walter
Felicidade por exemplo: sentir-se bem, alegria, prazer. Se um design web prova esses sentimentos, os usuários rapidamente se ajustarão, abrindo caminho para um ótimo relacionamento.
Como promover felicidade entre nossos usuários? Um rosto cartunesco sorridente à moda antiga é uma forma, então, vejamos exemplos!
Rostos Felizes
O quão feliz esse cara é?! Ele faz parte da comunidade do Google Translate: jovem, tecnológico e contribuidor. O uso de formas geométricas simples é algo que veremos recorrentemente nesse resumo. Elas são legais, fáceis de interpretar e relaxantes.
Notável: essas ilustrações são implementadas como PNG–as texturas tornam o uso de SVG impraticável aqui.
O "World's easiest decision" foi lançado para a Conferência sobre Mudança Climática da ONU de 2015. Usa uma textura similar ao das ilustrações do Google Translate, que traz uma atmosfera acolhedora, repleta de personalidade e positividade.
Inspeção mais de perto revela uma coleção enorme de imagens na construção do site–incluindo sprites de animações adoráveis, mais a baixo:
Mais formas geométricas e outro PNG aqui. Essa simples ilustração encontra-se na página 404 de castle.io, aliviando a frustração dos usuários que encontraram links quebrados. Sem sorrisos, mas não seria apropriado na situação.
Se formos totalmente honestos, diríamos que esse polvo poderia estar mais impressionado com um prospecto cadastrando-se, mas o logo da Carbonmade compensa. Esse é o primeiro dos exemplos a usar SVG.
Esse caras, contudo, são super felizes no trabalho. Mascores da Neat, a empresa que limpa nossa casa ao mudarmos, eles estão preparados para ação. A ilustração também implementa SVG bem como a imagem de fundo e primeiro plano, que se movimentam, redimensionam e rearranjam dependendo da área de visualização.
Google foi muito aclamado, ano após ano, pelo Rastreador do Papai Noel. Mais formas geométricas e sacos repleto de "sentir-se bem".
Os macacos em stuffandnonsense.co.uk, inspirados pela clássica propaganda de TV dos anos 1970, não falharão em tirar um sorriso. Ilustrados por Josh Cleland e implementados por Sara Soueidan, são os últimos numa série de ilustrações responsivas destacadas no site Stuff and Nonsense. Reduzamos o navegador e veremos (graças a filtros de SVG) a saturação da cor diminuir, adicionando uma ideia nostálgica.
Mais cenário móvel. Vejamos esse alegre sprite do bysusanlin.com! Rolemos para baixo e vejamos o personagem principal em 8bit alegremente caminhando pela paisagem. Os sprites e o cenários são todos PNG posicioinados com CSS. jQuery customiado muda o posicionamento em alguns pontos de rolagem–logo teremos um tutorial sobre essa técnica...
As expressões na www.passweird.com podem não passar uma ideia de bem-estar, mas a estética cartunesca e grotesca certamente evoca emoções! Seu humor e projeto trazem um sorriso, embora desconfortável.
Há mais: palmas e membros felizes da comunidade nos fóruns do Dropbox. Na verdade, Dropbox sempre defender esse tipo de coisa–ilustrações tem uma função importante na marca, linguagem visual e tom de voz deles.
A loja australiana de livros, Readings, é dotada de esboços energéticos de pessoas lendo livros, criada por Oslo Davis. O banner principal no topo é feito com uma série de blocos, cada um usando o mesmo sprite PNG como plano de fundo. Quando a área de visualização diminui, blocos são removidos, adaptando bem o plano de fundo ao espaço disponível.
Se já usamos o Basecamp (por que não usaria?) sabemos sua paixão por esboços de ilustrações. Eis alguns membros da equipe, mostrando seus sorrisões:
Envato Market
Mais inspiração? Veja esses arquivos disponíveis na Envato Market:
Leitura Interessante
