15 termos essenciais para Web Design hoje!

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:

  1. Material Design
  2. Flat Design
  3. SVG
  4. Duotone
  5. Cards Layout
  6. Long/Infinite Scrolling
  7. Parallax
  8. Mobile First
  9. Microinteractions
  10. Dynamic Storytelling
  11. Launch Pad Site
  12. Split Screen
  13. Animações sutis
  14. Javascript
  15. 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

COMPARTILHAR:

Mauricio Brancalion

Desenhista, designer e desenvolvedor com 15 anos de experiência no mercado educação, comunicação e entretenimento. Formado em Artes Plásticas pelo Instituto de Artes da UNESP-SP.

Deixe uma resposta