Tendências Essenciais de Design, outubro de 2016
Como diz o ditado: tudo o que é velho é novo de novo. Isso é verdade no design, com certeza. Este mês, algumas das maiores tendências em web design não são tão novas assim. Os designers estão reinventando os estilos de tipografia da velha escola, retornando à grade e repensando as mensagens na página inicial.
É uma interessante combinação de elementos visuais que já vimos no passado e que provavelmente veremos novamente no futuro. Veja o que é tendência no design este mês:
1. Tipografia da velha escola
Mais designers estão adotando uma abordagem antiga para exibir tipografia. Acabaram-se as sans-serifas ultra-finas ou condensadas e os tipos de estilos mais tradicionais. Serifas de estilo antigo, modernas e de transição são o novo tipo de estilo de exibição.
É um pouco surpreendente, na verdade. Por anos. A “regra” tem sido usar sans serifs para melhorar a legibilidade e os designers fizeram exatamente isso, muitas vezes sem questionar. O novo uso de serifas para o tipo grande - e até mesmo um tipo menor - é refrescante e bastante legível. Os designs geralmente vivem em um espaço mínimo, de modo que o tipo não precisa competir por atenção e os pares se concentram em letras escuras em um fundo claro. (Todas as coisas que ajudam a legibilidade.)
Não sabe muito sobre esses estilos? Aqui está uma breve introdução sobre cada uma dessas novas serifas da velha escola:
- Estilo antigo: Lettering tem uma vibe do velho mundo que se origina de alguns estilos blackletter e gothic desde os primórdios da impressão. Letras muitas vezes têm pequenas serifas (aquelas pequenas pinceladas no final de stokes mais longas) e uma forma arredondada. O RSQ, abaixo, é uma vitrine perfeita da tipografia antiga.
- Moderno: este estilo de letras é bastante comum no design impresso, como jornais e revistas, mas está apenas começando a entrar nos projetos da web. As serifas modernas têm alternadas larguras de traços grossas e finas em cada letra, às vezes com grandes quantidades de contraste. Ink + Volt, abaixo, usa uma bela e moderna serif. Mas também observe como as letras são usadas. O tipo está dentro de uma caixa branca para que as partes finas de cada letra não se percam no plano de fundo do vídeo, o que limitaria a legibilidade. Esta é a solução perfeita para usar uma serif moderna.
- Transitional: Essas letras se parecem muito com serifas modernas com uma grande diferença - as letras têm larguras de traçado uniformes. Isso torna as serifas tradicionais mais fáceis de usar, porque podem ser mais legíveis em mais situações de design.
Nem toda tipografia da velha escola cai em uma categoria de serif. Alguns dos estilos da velha escola que estão aparecendo apenas nos lembram de outra época, como a usada pelo The Frontend Guide, abaixo. O funky, inclinado, final dos anos 1970 e início dos anos 80 tema realmente leva você para outro tempo e lugar. (E isso é totalmente old-school)
2. Grades definidas
Às vezes você pode ver a grade, às vezes você não pode. De qualquer maneira, uma grade sólida é a base para um design limpo e organizado para os olhos.
Grades mais definidas estão fazendo um retorno. Parte disso pode ser da influência do Material Design, que apresenta muitos elementos em colunas e linhas, e parte dele pode ser a facilidade de mover e reorganizar elementos em estruturas responsivas.
De qualquer maneira, as grades definidas podem parecer incríveis para uma variedade de projetos em praticamente qualquer tela. O que é legal sobre o uso de uma grade definida é que isso torna a vida realmente fácil para o designer. Depois que você se acostumar a trabalhar dentro de uma grade, posicionamentos, dimensionamento e opções de design se apresentarão claramente para você.
O truque para usar grades definidas não é parecer muito estruturado ou excessivamente gridded. Para muitos designers, isso significa mudar os tamanhos em diferentes “telas”, como ter uma imagem de herói de largura total sobre uma grade de elementos. A página “Década” das Gaivotas Elegantes, abaixo, faz isso muito bem. O site também apresenta uma grade sutil na página inicial da imagem, que é sombria e misteriosa, levando você para as páginas de grade com temas misteriosos. High Tide, abaixo, faz algo similar com um vídeo de introdução legal acima dos blocos da grade.
Mas uma grade pode ser bem definida e um pouco menos encaixotada. O Zumtobel, abaixo, usa as letras em seu nome para criar blocos de grade para informações específicas do produto. Somente no hover você vê as caixas de grade de tamanho perfeito, embora as colocações sejam idealmente espaçadas horizontalmente e verticalmente em uma grade limpa.
Quanto mais você pensar em grades, mais começará a vê-las através dos olhos do designer que criou cada uma delas. Você pode começar com algumas das grades da Web comuns se não se sentir à vontade com a ideia ou criar a sua própria. O truque é que você precisa usar a grade consistentemente para obter um sucesso visual real.
3. Mensagem mínima acima da “dobra”
A questão do dia é a seguinte: há informação suficiente acima do pergaminho para interessá-lo o suficiente para continuar olhando para o site? Pode ser difícil de responder. Mas muitos designers estão apostando na ideia de que você vai clicar ou rolar, mesmo que haja apenas uma palavra na tela.
Com outros recursos visuais, como vídeo, controles deslizantes de rolagem ou exibições atraentes de produtos, os usuários podem fazer exatamente isso. Mas pode ser uma aposta, especialmente com designs que não incluem um menu de navegação com mensagens mínimas.
Depois, há isto: muitos usuários entram em sites por meio de outras páginas que não a página inicial, então por que não correr riscos? Veja os dados e cliques, veja o que acontece.
Esta é uma daquelas tendências que serão interessantes de assistir. Ele pode desaparecer quase tão rapidamente quanto apareceu, mas há muitos sites usando esse modelo.
Conclusão
É muito divertido ver as tendências do design voltarem à moda. O que é bom em duas dessas tendências - tipografia da velha escola e grades definidas - é que elas são altamente utilizáveis em vários estilos de design.
Quais tendências você está amando (ou odiando) agora? Eu adoraria ver alguns dos sites que você está fascinado. Me mande um link no Twitter ; Eu adoraria ouvir de você.