Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Grandes Sorrisos e Rostos Felizes no Design para Web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Good Golly, Gradients All Over the Web
Examples of HTML Email Worth Opening

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.

httpworldseasiestdecisionorgen-us
http://worldseasiestdecision.org/en-us/

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:

sorry

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.

Octopus

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.

Neat

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".

httpsstuffandnonsensecouk
stuffandnonsense.co.uk

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.

Leia mais sobre a ilustração em Stuff and Nonsens

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...

httpwwwpassweirdcom

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.

httpswwwdropboxcomplans
www.dropbox.com/plans

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:

Order Taxi Theme
Order Taxi Theme
Turtle - Responsive 404 Error Template
Turtle - Modelo de Erro 404 Responsivo
Flat Pixel - Illustrated PSD Template
Flat Pixel - Modelo PSD Ilustrador

Leitura Interessante

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.