Se você já é ou está prestes a iniciar uma carreira em Web Design ou ainda, se você quer melhorar o vocabulário e a comunicação em sua equipe de trabalho facilitando o engajamento entre criativos e técnicos, separamos 15 termos essenciais em Web Design para os dias atuais:
- Material Design
- Flat Design
- SVG
- Duotone
- Cards Layout
- Long/Infinite Scrolling
- Parallax
- Mobile First
- Microinteractions
- Dynamic Storytelling
- Launch Pad Site
- Split Screen
- Animações sutis
- Javascript
- CSS Grid
Continue lendo este artigo e fique atualizado com os conceitos das técnicas e ferramentas mais utilizadas atualmente.
Material Design
Em 2014, o Google apresentou uma moderna linguagem para ser aplicada no design de sites e apps. Material Design é uma estrutura padrão que permite compreender e aplicar princípios de design focados no usuário (user-focused). Acesse o Material Design
Flat Design
Flat Design aplica o conceito de “menos é mais” em toda interface e nas ilustrações permitindo um padrão de layout limpo e simples, o que auxilia na compreensão imediata através de imagens e ícones, ao invés de tentar simular o mundo real como o estilo Skeuomorphic. Acesse Flat vs Realism
SVG
O SVG é um formato vetorial para web que você pode aplicar os melhores conceitos de Flat Design em ilustrações e itens de interface.
Este formato permite que o escalonamento das imagens no site não sofram degradação alterando sua resolução e ainda contribuem para a leveza em Kbytes. Acesse a especificação SVG no W3C
Duotone
Se o Flat design está para as ilustrações, o Duotone esta para a fotografia. Usar a predominância de duas cores nas imagens ajuda também a simplificar o nível de informação cromática de uma foto e fica mais fácil equilibrar diversas imagens vindas de fontes diferentes.
Um recurso que já foi muito explorado na mídia impressa e mostra que funciona também na mídia digital. Acesse Spotfy tutorial duotone
Cards Layout
Se você aplicou os itens anteriores ao seu design, o conceito de Card Layouts é uma extensão natural, pois permite que você estabeleça a hierarquia de uso para compor as partes de seu site ou app valorizando a informação mais relevante.
Cards Layouts permite um bom método para aplicar responsividade em seu layout para um UX de acordo com dispositivo. Acesse Cards Layout em Material Design
Long/Infinite Scrolling
A experiência mobile tende naturalmente a verticalização da informação, e desta forma o vertical scrolling é uma ação intuitiva (assim como a página horizontal é para o impresso).
Se o site não é um aplicação web então a tendência é que o scrolling seja finito e não deve ser muito extenso para que o usuário não desista no caminho.
Já um site ou aplicação web alimentada por conteúdo via banco de dados naturalmente cria um infinite scrolling e desta forma o usuário compreende que não tem fim e vai até onde deseja.
Parallax
Se o vertical scrolling entrega a profundidade de informação o parallax cria um interessante efeito (vertical e/ou horizontal) permitindo que se movimente os itens e seções de uma página, uma espécie de animação do layout e não de seus objetos.
O que permite criar efeitos de sobreposição e passagem do tempo bem ricos e muito apreciado e ainda pode, dependendo do uso, dar uma sensação tridimensional do espaço da tela.
Mobile First
Este é um conceito muito defendido nos últimos anos e pode ser somado a ele o conceito de Progressive Enhancement (melhoria progressiva).
Ambos conceitos levam em conta a quantidade de telas existentes hoje em dia, bem como a quantidade de informação que fica bem adaptada a cada uma delas, assim, versões mobile do site são pensadas primeiro e gradualmente aumentam a quantidade de informação para telas de outros dispositivos como tablets e computadores.
Microinteractions
Se o Mobile First traz a necessidade de hierarquizar a informação a micro interação permite que você mantenha seu usuário informado através de pequenos ícones que mostram como outros usuários ou o sistema está reagindo.
Praticamente todo sistema de push notification é uma micro interação que permite pequenas alterações no design mas grandes alterações no nível de informação.
Dynamic Storytelling
Talvez essa seja dentre as atuais práticas a mais difícil porém com retornos surpreendentes. A Web por si só permite criar e contar histórias multimídias explorando o máximo de coesão entre texto, imagens, audio, video e código.
Uma vez que se planeje contar uma história utilizando diversos recursos é possível atingir o usuário em um nível profundo de interação e isso pode ser uma experiência totalmente intensa para sua marca ou produto.
Launch Pad Site
Esta é uma estratégia muito eficiente de recolher as informações de uso do site ou app e compreender, a partir da resposta do usuário, como deve ser a evolução do design.
O que implica em observar melhor os locais de interação na tela bem como a ligação dessa interação com as cores, tipografia ilustrações e imagens.
Split Screen
Outra forma que já foi muito utilizada em layouts impressos e tem mostrado sua eficiência em telas digitais. Dividir a tela permite setorizar a informação e criar comparações que vão retornar valiosos dados de interação.
Em uso de homepages é muito eficiente também para se dirigir a dois públicos distintos usando uma mesma página.
Animações sutis
Esta tendência se conecta diretamente com o conceito de Flat Design. Uma vez aplicada, a animação modifica totalmente a leitura do layout, por isso deve ser utilizada de maneira sútil pois pode comprometer o foco da comunicação.
É preciso lembrar que animações de objetos pode ou não casar com efeito de parallax e mais uma vez o bom senso deve imperar.
Javascript
Apesar de não influenciar diretamente na produção do design, quem dá vida e funcionalidade a uma página web é o Javascript.
É preciso ter em mente o que pode ser realizado com sua participação e o que fica no nível de CSS. Javascript possui diversas bibliotecas potentes e pode estar tanto no frontend como no backend portanto saber um pouco de suas possibilidades ajuda muito. Aprenda Javascript com Academy Code
CSS Grid
Talvez esta seja a mais nova e empolgante funcionalidade CSS que deve realmente nos próximos anos alterar substancialmente o modo de criar e fazer layout web.
CSS Grid traz uma nova especificação que vai permitir ao layout web, realmente, aplicar conceitos de direção de arte que deixaram a web com possibilidades de layouts que ultrapassam esquemas de templates ou grid system.
Recentemente os browsers desktop mais usados aceitam a especificação. Acesse um exemplo da Mozilla com CSS Grid
Fonte: business2community