Seções iMasters
Design & UX + E-commerce

12 elementos criativos de design que podem inspirar a próxima geração de UX – Parte 01

Após uma manhã em uma reunião incrível com o meu amigo Derric, eu fiquei inspirado por muitas de suas ideias e por tudo o que revisamos para revistar algumas das tendências emergentes e algumas discrepâncias criativas que estão abrindo nossos olhos para o que é possível. E eu resolvi dividir isso com vocês neste artigo.

Abaixo, você encontrará quatro, dos 12 elementos únicos e excepcionais de arte e layout criativos, bem como algumas dicas das melhores práticas que estão impulsionando o campo. Esperançosamente, alguns deles irão inspirar as direções do seu design também!

Ao total, os 12 elementos são:

  1. Produtos flutuando no background
  2. Tipografia é o design
  3. O infográfico como a ferramenta de comunicação primária
  4. O contador de histórias vertical
  5. Revele o app e o resto seguirá
  6. A interatividade perfumada
  7. Fluidez impecável em qualquer resolução
  8. A marca como um personagem de desenho
  9. Inspirado por impressão + design de papel
  10. A mensagem irreverente
  11. Foco na caixa de entrada
  12. Luz & sombra

1. Produtos flutuando no background

Aqui está uma página bonita do Hugh & Crye Shirts, mostrando uma das suas roupas: 

Mas veja o que acontece quando o produto é tirado do contexto da foto e colocado para flutuar no background (cortesia do designer Chris Svetlik): 

Digno de nota, certo? Tem algo sobre a textura que me dá vontade de esticar a mão e agarrá-la. O design minimiza a distância entre o produto e a interação com a tela e, na sua instância, o drop-shadow adiciona ao impalpável, a qualidade física da conexão entre o browser e a camiseta.

Aqui está outro exemplo do mesmo princípio funcionando no site da Makr Carry Goods, criadores de algumas bolsas lindas:

A bolsa não grita “me agarre”, como a camiseta acima (bom, pelo menos para mim), possivelmente devido à falta de sombra, mas o efeito ainda é claramente um diferenciador. Ele está mais uma vez evidente abaixo, em um ótimo design da marca Tinkering Monkey:

Eu espero que mais fotografias de produtos sigam nessa direção, permitindo uma experiência mais imersiva na visualização de mercadorias na web.

2. Tipografia é o design

Sites minimalistas têm alavancado o poder da tipografia por anos, mas ela está, finalmente, amadurecendo graças às atualizações massivas na renderização web de fontes e alguns layouts geniais de designers experientes.

Abaixo está um exemplo do site Girlfriend NYC, cujo espaço em branco é o mais elegante e sugestivo que eu já vi:

Outro ótimo exemplo vem do Infinvision, que adiciona arte ao design da fonte e conta uma história incrível, através de seus direitos autorais e de ilustração:

Eu estou animado para ver mais desse tipo de trabalho no mercado. Que ele saia dos portfólios dos designers e vá para os conteúdos dos websites, produtos e softwares. Acredito que esse momento seja propício para os criativos, para que eles possa trabalhar dessa forma com o cliente certo. Quem sabe algo para mobile?

3. O infográfico como a ferramenta de comunicação primária

Na última década, os infográficos têm sido adicionados a websites, muitas vezes vivendo em blogs, ou seções de artigos, fora da história primária do produto/marca. Bem, não mais.

Nos últimos anos, têm acontecido movimentos notáveis para tornar o infográfico o centro do site, e os resultados são muito bons. Abaixo está um screenshot do MahiFX, uma plataforma de negociação que dá o seu valor ao comparar salários inseridos por usuários de um investidor e da sua plataforma. Dê uma olhada:

Talvez, tão envolvente quanto, seja essa página do French VinSociete – apesar de menos analisável (pelo menos para aqueles que não falam francês):

Se um infográfico consegue contar uma história com dados melhor do que parágrafos de textos e listas de tópicos, por que não?

Aqui está o website da Maersk, uma grande empresa de entrega que faz, na sua página, comparações visuais de seus cargueiros com os grandes empresas internacionais:

Eu adoro a criatividade e a visualização desta abordagem e espero que ela pegue. Sou capaz de imaginar tantas páginas chatas de “sobre nós” e “explicações da indústria” se transformando em conteúdos que valham a pena ser compartilhados e linkados ao utilizar esta abordagem.

4. O contador de histórias vertical

Esta tendência pode não ter começado com Ben the Bodyguard (‘Ben, o guarda-costas’), mas o site passou a representar o movimento por si próprio. Depois de seu lançamento, ele recebeu milhares de tweets e centenas de links, e isso apenas pelo seu design! O produto não saiu pelos próximos 3 meses.

Obviamente, Ben está no caminho certo. Para experienciar por você mesmo, visite esta página e comece a mover a barra de rolagem para baixo (Não clique no vídeo, apenas role).

Outro exemplo vem do Reverend Danger, cujo site da agência digital tem animações inteligentes ativadas pela rolagem e um estilo impulsivo.

Não deve demorar para que mais sites adotem essa metodologia, considerando o sucesso do design do “Ben” em criar uma excitação pelo produto.

No próximo artigo, você vai conhecer mais quatro elementos de arte e layout criativos. Vai ganhar, também, algumas dicas sobre as melhores práticas que estão impulsionando este campo.

***

Este artigo é uma republicação feita com permissão. SEOMoz não tem qualquer afiliação com este site. O original está em: http://www.seomoz.org/blog/12-creative-design-elements-inspiring-the-next-generation-of-ux

Mensagem do anunciante:

Curso ao vivo de WordPress: Aprenda a gerenciar conteúdo no CMS mais popular do mundo com o Apiki WP Cursos. Vagas limitadas, matricule-se agora. Cursos Apiki

Comente também

9 Comentários

Willian

Excelente matéria!

Marcelo Amaral

Muito bom, boas observações tendenciais.

Marcos Monteiro

Parabéns pela matéria, tem como passar mais alguns links de sites ou blogs sobre o UXDesign.

Obrigado

Ricardo Schroeder

Ótimas tendências. Um outro exemplo que me causou uma boa impressão foi a página do galaxy nexus brasileira:
http://www.google.com.br/nexus/
O efeito obtido somente com a barra de rolagem ficou muito bom.

Renato Mihzael

Matéria ótima!

Rebeca Freitas

Dorei! Aguardando o próximo post : )

Milton Andrade

Olá!

Muito interessante este material, realmente nos faz pensar sobre os novos rumos da web em relação ao UXD, questão que hoje dou mais atenção. Valeu!

Alessandro Guimarães de Andrade

Artigo relevante.

Obrigado por compartilhar!

Paulo Dias

mais mais mais mais mais

Qual a sua opinião?