4 Tendências Essenciais de Layout para 2015
A web mudou muito na última década e, ao mesmo tempo, não mudou nada. Se olharmos para trás 10 anos, descobriremos que a Web tinha um padrão de layout muito comum em funcionamento na maioria dos sites. Esse padrão de entrada consistia em cabeçalho, rodapé, barra lateral e área de conteúdo. Foi o layout esperado para a web. Ao mesmo tempo, tivemos o surgimento do Macromedia Flash, que deu lugar a uma era de layouts alternativos. Layouts que não seguem essa fórmula estrita. E é claro que com a implosão do Flash essa abordagem se desvaneceu por um tempo… eu digo um pouco, porque está de volta com uma vingança.
Se você pesquisar uma das muitas galerias populares que mostram o design atual da web, sem dúvida notará que a estrutura fundamental das páginas da Web não é nada fixa. Pode flexionar e mudar para praticamente qualquer coisa que precise ser. Isso na minha opinião é um dos melhores efeitos colaterais responsivo web design produziu. A nova norma, por assim dizer, é que parece não haver nenhuma fórmula fixa.
Tudo isso dito, podemos observar várias tendências de alto nível no design de layout que representam o que eu considero ser layouts incomuns. Incomum porque eles não seguem uma fórmula estrita ou um sistema pré-definido. Mas são tendências em que posso fornecer dezenas, senão centenas de exemplos, preenchendo cada uma dessas categorias.
O que você encontra aqui é uma mistura interessante de tendências e layouts incomuns que, esperamos, irão inspirá-lo a avaliar as estruturas fundamentais que você está aplicando ao design da web. Vamos mergulhar e dar uma olhada ...
Telas divididas
Nesta categoria, encontramos uma seleção de sites que dividem a tela usando uma divisão vertical. Existem, talvez, muitas razões para isso e, ao pesquisar muitas amostras desse tipo, descobri duas razões principais.
A primeira é que às vezes um design pode realmente ter dois elementos primários de igual importância. Uma abordagem comum para web design é classificar as coisas em ordem de importância. Essa importância é então refletida na hierarquia e na estrutura do design. Mas e se você realmente tem duas coisas para promover? Essa abordagem permite dar destaque a ambos e permitir que o usuário selecione rapidamente entre eles.
A segunda razão que encontrei para essa abordagem é que às vezes você precisa transmitir uma dualidade importante. Considere o site Oito e Quatro, por exemplo. Aqui eles querem transmitir o fato de que seus principais pontos fortes são suas raízes digitais e sua equipe talentosa. Esse par é o que os define. A tela dividida é uma ótima maneira de apresentar isso. E eu particularmente amo como o e comercial unifica os dois lados.
Sem cromo!
Um dos principais elementos usados no design da web é o que contém elementos: caixas, bordas, formas e contêineres de todos os tipos usados para dividir o conteúdo de uma página separadamente. Considere um cabeçalho estereotipado em que os elementos estão nitidamente contidos e separados do conteúdo. Uma tendência comum agora é remover todo esse cromo extra.
Esta é uma abordagem minimalista, mas vai um passo além e tem algumas reviravoltas interessantes ao longo do caminho.
Neste exemplo, eles eliminaram a noção de cabeçalho e rodapé todos juntos. Parece mais um quiosque interativo. A hierarquia de conteúdo é feita principalmente através de uma organização da esquerda para a direita, o que ajuda a tornar o layout muito intuitivo. E o cromo para separar a navegação do conteúdo simplesmente não é necessário. Em vez disso, os produtos bonitos brilham.
Aqui descobrimos que o conteúdo é enfatizado ao remover qualquer sentido de cabeçalho ou rodapé. Em vez de ler um cabeçalho primeiro, você lê o nome da empresa e uma declaração clara sobre o que eles fazem (e onde eles fazem isso). Seguido pela navegação principal. Que ótima maneira de enfatizar a marca antes de levar as pessoas a navegar. Isso contribui para um fluxo elegante. Curiosamente, ao rolar a página, você recebe um cabeçalho e um toque de cromo. Um layout bonito e eficaz que usa o padrão de forma inspiradora.
Modular ou baseado em grade
Em seguida, temos layouts construídos em estruturas modulares ou semelhantes a grades. Nesses designs, cada módulo deve ser flexionado com base no tamanho da tela. Esta não é exatamente uma nova abordagem, mas a introdução do design da Web responsivo tornou ainda mais útil. Isso sugere o tipo de layouts adaptáveis que se pode criar com plugins como o Maçonaria.
Este exemplo demonstra perfeitamente a ideia. O design é totalmente responsivo. À medida que o tamanho da tela muda, cada módulo se adapta e se adapta ao espaço. Ao dividir uniformemente o espaço, é mais fácil adaptar o design. E eles recebem pontos de bônus pela introdução de um elemento (em tamanhos de tela maiores) que quebra as barreiras rígidas entre os módulos.
Este exemplo é uma versão bastante intensa do padrão. É claro que adota a abordagem modular, que permite deslocar o conteúdo para dentro e para fora conforme necessário. Mas há um importante elemento de design em ação aqui, que faltava no exemplo anterior. O tamanho dos módulos varia para refletir a ordem de importância e seu lugar na hierarquia. Um risco dessa abordagem modular é tornar tudo do mesmo tamanho, o que significa que você não está realmente enfatizando nada. Em contraste, este exemplo dá claramente importância ao elemento primário.
Preenchendo uma única tela
Finalmente, temos sites usando uma abordagem em que o design se adapta para preencher completamente a tela. Este é um subconjunto de design responsivo em que se adapta ao tamanho da tela. Mas neste nicho os designs se adaptam de tal maneira que enchem completamente a tela e não produzem barras de rolagem. Essa falta de rolagem significa que o conteúdo deve ser extremamente focado e a hierarquia de conteúdo claramente estabelecida. Acho que o foco e a clareza desses sites são refrescantes.
Conclusão
Embora eu tenha dissecado cada uma dessas tendências aqui isoladamente, a realidade é que elas representam blocos de construção. E esses blocos de construção podem ser montados de muitas maneiras diferentes. De fato, muitas das amostras apresentadas aqui poderiam ser movidas para numerosas das categorias que discutimos. A diversidade de layouts na web moderna e o fato de serem utilizáveis tornam a web um meio interessante de se trabalhar.