Nesta visão geral, você conhecerá cada tendência e belos exemplos que irão inspirá-lo para seu próximo projeto.
1. Layout extraordinário
Figura 1
2. Layout de página única
Figura 2
3. Layout de múltiplas colunas
Figura 3
4. Ilustrações gigantes e gráficos vibrantes
Figura 4
5. Mais espaço em branco do que antes
Figura 5
6. Elementos de design social
Figura 6
7. Navegação conversacional
Figura 7
8. Guia Dinâmico
Figura 8
9. Grande caixa de pesquisa
Figura 9
10. Adicione efeitos visuais à classificação
Figura 10
11. Avatar do autor
Figura 11
12. Ícones e dicas visuais
Figura 12
13. índice de tags (substituindo nuvem de tags)
Figura 13
14. Use ilustrações em blogs
Figura 14
15. Pintura em aquarela
Figura 15
16. Caligrafia
Figura 16
17. Retrô
Figura 17
18. Use materiais orgânicos, tijolos e fotografia como fundo
Figura 18
19. Selo de marcação
Figura 19
20. Etiqueta de preço
Figura 20
21. Fita
Figura 21
Layout Extraordinário
Conforme demonstrado em 40 Layouts de Design Inovadores: Layout Extraordinário há alguns meses, estamos observando uma forte tendência para layouts mais personalizados e inovadores. Em vez de usar layouts tradicionais em formato de caixa, os designers estão experimentando novas formas de estruturar, apresentar e expressar informações.
Nestes designs de layout extraordinários, a criatividade geral é muitas vezes mais importante e memorável do que o conteúdo específico. Ainda assim, a usabilidade, a tipografia e o design visual raramente são esquecidos e executados com cuidado. O layout inovador é particularmente popular em grandes projetos, agências de design de sites e sites promocionais (como atividades comerciais de grandes empresas), mas também é popular em blogs.
Figura 22
Quando se trata de criatividade, a linha entre design utilizável e inutilizável é muito tênue, portanto, o teste de usabilidade é particularmente importante, porque uma nova ideia pode quebrar as coisas existentes no site. Muitas vezes é uma boa ideia ter um equilíbrio entre designs criativos, clássicos e tradicionais, o que significa tentar encontrar um equilíbrio entre um design utilizável "indestrutível" (ou mesmo enfadonho) e um design criativo, mas inutilizável. Lembre-se de que as ideias levam tempo para crescer: repensadas, revisadas, ajustadas, refinadas e, por fim, integradas ao seu design.
Os designers são fortemente encorajados a romper com as convenções dos layouts de caixas tradicionais e a tentar novas abordagens e as suas próprias ideias ousadas e malucas. Mostre seus talentos!
Figura 23
Figura 24
Figura 25
Figura 26
Figura 27
Figura 28
Layout de página única
Outra forma que os designers costumam usar para impressionar os visitantes é o chamado layout de página única: esse layout usa uma única página para apresentar o conteúdo do site. Isso não significa necessariamente que estes designs sejam minimalistas (seguindo o princípio “menos é mais”). Pelo contrário, este tipo de design é muitas vezes muito complexo, contém imagens ricas e efeitos de animação vívidos e, portanto, demora um pouco para carregar.
Figura 32
Quando o usuário clica em uma opção de navegação, a página muda (muda parcialmente), e o novo conteúdo de http://www.knowsky.com aparece na área onde o conteúdo anterior é exibido. Os efeitos de deslizamento e rolagem da navegação neste layout são suportados por bibliotecas JavaScript públicas.
A principal vantagem para os usuários vem do simples fato de que são necessários menos movimentos e cliques do mouse para obter as informações desejadas. Como essa abordagem é tão nova, é uma grande oportunidade para usuários que podem ficar confusos ao usar a navegação não tradicional. Existem algumas situações em que uma versão "estática" pode ser útil ou até mesmo necessária, por exemplo, você terá que fornecer outra versão para mecanismos de busca e usuários que desabilitaram o JavaScript;
Figura 33
Figura 34
Figura 35
Layout de múltiplas colunas
Colunas múltiplas (mais de 3 colunas) não significam necessariamente um design complexo. Por outro lado, se projetadas corretamente, as múltiplas colunas podem ser muito úteis para os visitantes porque fornecem uma melhor visão geral das opções de navegação visíveis, permitindo que os usuários encontrem rapidamente as informações que procuram.
Nos últimos anos, testemunhamos uma explosão de conteúdo do site, o que reduziu a atenção e o tempo que os usuários investem no site (consulte ReadWriteWeb para obter detalhes). Portanto, não é à toa que os designers estão tentando encontrar formas mais concisas de apresentar as informações, para que os visitantes possam permanecer no site o maior tempo possível e encontrar o conteúdo com mais facilidade.
Figura 36
Uma maneira de conseguir isso é usar um layout com múltiplas colunas adjacentes. Essa ideia faz todo o sentido. As resoluções de tela aumentaram nos últimos anos (no entanto, isso pode mudar se netbooks como o Asus Eee PC se tornarem amplamente disponíveis), dando aos usuários mais espaço horizontal e aos designers espaço adicional para preencher o conteúdo.
Os resultados mostram que cada vez mais designers estão usando cada vez mais colunas em seus projetos. Nossa pesquisa encontrou uma forte tendência para os chamados layouts de múltiplas colunas, normalmente com largura fixa de 850 pixels em uma tela de 1000 pixels. Múltiplas colunas são frequentemente usadas em layouts de revistas e projetos grandes. Nesses layouts, as grades são frequentemente usadas para garantir equilíbrio estrutural, hierarquia e ordem.
Ao usar um layout de múltiplas colunas, a importância do espaço em branco ativo e entre colunas individuais não pode ser exagerada. (O espaço em branco ativo é intencionalmente deixado em branco para representar melhor a estrutura da página e enfatizar diferentes áreas do conteúdo.)
Para esse fim, os designers costumam utilizar o "mantra Shneiderman" ("Mostre o quadro geral primeiro, mostre os detalhes depois") , primeiro forneça ao usuário uma visão geral da funcionalidade e depois forneça detalhes sob demanda - mais tarde, quando um link for clicado (o Mozilla Labs é um excelente exemplo).
Figura 37
Figura 38
Figura 39
Figura 29
Figura 30
Figura 31