Tendências de Design: Flat Design 2.0
Design plano tomou o mundo do design pela tempestade nos poucos anos que tem sido em torno, mas nenhum movimento de design nunca permanece 100% puro para suas raízes e ideais. Isso é exatamente o que está acontecendo com o design plano: gradualmente, mudanças sutis, embora significativas, ocorreram em sua iteração original.
Essas mudanças foram suficientes para fazer os observadores e especialistas apelidarem a nova iteração de Flat Design 2.0. O 2.0 é muito interessante porque atinge o equilíbrio entre mudanças suficientes para alterar a experiência do usuário e permanecer fiel aos seus princípios originais.
A evolução do Flat para o 2.0 foi inevitável: os designers ficaram mais confortáveis com o Flat, eles puderam ver que, por toda a sua popularidade, alguns problemas não foram abordados adequadamente . E agora temos o 2.0 para resolver algumas dessas deficiências.
Origens do design plano
Olhe para o design plano como uma espécie de rebelião contra o estilo de design então popular de skeuomorphism . Ele se baseou em efeitos 3D para copiar as propriedades reais de objetos 3D como uma maneira de usar a familiaridade para ajudar a experiência do usuário. Por exemplo, nas iterações iniciais do Kindle Fire da Amazon, havia uma estante de livros 3D em segundo plano para reforçar o propósito do tablet para leitura.
Quando a Apple, um grande defensor do design skeuomorphic, decidiu, em 2012, abandonar o skeuomorphism, que anunciava um balanço completo para o flat, que se manteve muito popular nos últimos anos. Sua ênfase no minimalismo também ajudou a impulsioná-lo para sua atual onipresença.
Flat é caracterizado pela ausência de:
- elementos levantados que significam para os usuários que eles podem ser clicados;
- elementos ocos ou afundados que significam para os usuários que eles podem ser preenchidos (pense em campos de pesquisa e outros campos de entrada).
Transição para 2.0
Apesar do sucesso do flat, alguns designers começaram a perceber falhas legítimas que não estavam sendo abordadas na comunidade de design. Enquanto flat ganhou muito vapor devido ao seu minimalismo bem-vindo, foi um pouco longe demais na direção austera. As características de alguns efeitos 3D acabaram sendo excessivas e afetaram negativamente a experiência do usuário.
Assim, era inevitável que outra mudança ocorresse. É onde estamos hoje com o surgimento do design plano 2.0.
Problemas de usabilidade do Flat Design
Todos os problemas de usabilidade do flat podem ser resumidos na seguinte declaração: O Flat tipicamente troca as necessidades do usuário pela estética do quadril.
Em outras palavras, os projetistas que projetam uma interface para ser “plana” darão uma ênfase maior em manter as coisas mínimas, não 3D e vibrantes / ousadas em vez de colocar a experiência do usuário em primeiro lugar. Normalmente, é aí que começam todas as coisas ruins no mundo do design, e é por isso que o flat evoluiu para o 2.0.
Aqui estão os problemas comuns de usabilidade com flat:
- ausência de significantes importantes (gradientes, sombras, sublinhados, etc.);
- ausência de padrões familiares (texto azul, sublinhado para links, etc.);
- ausência de indicações contextuais (colocação de CTA, cópia acionável, etc.).
Talvez o exemplo mais notório na memória recente de todos os problemas de usabilidade do flat seja o lançamento do Windows 8 pela Microsoft, com a chamada interface de usuário Metro. Esse design foi o epítome do plano porque tudo era plano ao extremo.
o a experiência do usuário foi tão ruim porque um design completamente plano significa que os usuários não estão recebendo as pistas necessárias para dizer a eles o que pode ser clicado e o que não pode estar em uma interface. Como resultado, os usuários são naturalmente forçados a gastar tempo extra imaginando isso por experimentação ou, pior ainda, realizando ações fora do erro que eles não queriam em primeiro lugar!
Como você pode ver, a tela do Windows 8 é tão plana que é impossível as pessoas dizerem o que clicar e o que não clicar. Mesmo que os usuários já estejam familiarizados com a navegação básica do site, isso não significa que seja uma boa idéia remover todos os significantes (dicas que informam aos usuários que eles podem interagir com elementos da página) e sugestões de affordances (indicações de como os usuários podem interagir com elementos da página).
Grandes exemplos do Flat Design 2.0
2.0 é uma mudança ou melhoria sutil em relação ao plano, portanto, pode ser preciso mais concentração para identificar o verdadeiro 2.0 em sites e interfaces. É por isso que vamos orientá-lo através de alguns grandes exemplos atuais de 2.0 que já estão em pleno funcionamento.
O guia do Dropbox
Guia do Dropbox A princípio, pode parecer muito simples, mas, se você observar mais de perto, verá sugestões em 3D que comunicam claramente aos usuários que alguns elementos foram criados sobre outros. Isto é principalmente evidente em imagens da cabeça do menino (no lado esquerdo) e as chaves de fenda (no lado direito). Ambas as imagens têm bordas pretas fortes, embora sutis, que comunicam a profundidade e a impressão de que estão sentadas em cima do fundo, em vez de se misturarem com ela.
Sorvete de Tolia
Site da Tolia é cheio de efeitos sutis e elevados que dão a impressão distinta de 3D, enquanto o design geral ainda é plano e mínimo. A impressão levantada está presente no título, no subtítulo e na descrição (ou seja, a cópia da página). Também está presente no botão de chamada para ação e na cópia do CTA dentro do botão. Você pode agradecer o uso sutil de sombras finas ao redor das bordas desses elementos para dar essa impressão levantada.
Google Santa Tracker
Sem surpresa, o Google está no movimento 2.0, e sua Santa Tracker página mostra como se pode integrar 2.0 de uma forma divertida e útil. As sutilezas do 2.0 são abundantes na página, desde os gradientes e sombras nos vários edifícios e bolhas pop-up (quando os usuários passam em qualquer prédio) até a impressão 3D do título no topo da página.
Publicis Groupe
Publicis Groupe A página do 90º aniversário possui influência 2.0 de uma maneira bastante óbvia. Se você olhar para o lado esquerdo da página, verá a combinação de sombras e gradientes descendo e irradiando para fora do círculo pálido e na seção azul abaixo dele. O minimalismo austero também indica que sua estética de design ainda está fortemente enraizada no plano puro.
Jumeirah
Esse site para um hotel de luxo nos Emirados Árabes Unidos é predominantemente dominado por vídeos gigantes em segundo plano, mas não deixe que isso o distraia de absorver a sutileza da sua contribuição 2.0. A manchete “Jumeirah Inside” apresenta um sombreamento muito sutil que dá a impressão de 3D com sucesso, mantendo a aparência geral e plana.
Uma evolução por demanda
No mundo do design, as coisas geralmente mudam porque há uma demanda por isso. Alguém notará que algo está faltando e encontrará uma maneira de melhorar as coisas, ou outra pessoa adotará um conceito e o levará para outro nível que, logicamente, se baseia em um determinado conceito.
No que diz respeito ao 2.0, é definitivamente uma combinação de ambos, pois os déficits de usabilidade do plano são corrigidos pela extensão do conceito original de uma forma que ainda honra os princípios do minimalismo pelos quais o plano é definido.