Tendências do Web Design

Não há nenhuma fórmula científica clara para um grande projeto, existem muitos padrões reconhecidos que reaparecem vez ou outra. Estes padrões podem ser chamados de técnicas de design populares, mas a partir de uma perspectiva da indústria muitas pessoas se referem a eles como as tendências de design ou tendências web, confira algumas das tendências que mais se destacam atualmente:

Botões Fantasma
Uma das tendências que mais crescem no design web é o estilo de botão fantasma. Este estilo segue os passos de design de interface plana, onde botões usam uma única cor com fundo em transparência criando uma aparência dimensional em 2D.

Botões fantasmas geralmente tem fundo (background) transparente ou semitransparente por padrão. Isto faz com que eles ascendam em foco, acrescentam um pouco de cor e notoriedade distintiva para o estilo de design.

Se você olhar para os “botões fantasmas” encontrados em sites, verá que eles frequentemente se parecem com caixas com bordas coloridas, cantos arredondados e com traçado em torno do texto. Propriedades como cor e tamanho da fonte podem ser usados para chamar mais a atenção para certos botões na página.

Cabeçalhos podem utilizar botões fantasmas ao lado de uma estrutura normal de botões plana. Botões fantasmas são perfeitos para layouts planos ou minimalistas, e podem ser usados em conjunto com muitas outras técnicas de design para a criação de sites diferenciados.

Listas diferenciadas com ícones
Startups, aplicativos móveis e agências web gostam de usar gráficos e blocos de texto para descrever as suas características. Na maioria das vezes, você vai encontrar esses recursos na página inicial em uma lista de frases concisas, juntamente com ícones pequenos relacionados.

São listas com base em texto que muitas vezes dependem de ícones para ajudar a descrever os recursos que estão sendo listados, fazendo um rápido resumo de cada serviço. Estes recursos podem incluir os serviços prestados por uma startup ou as características de um software. Esta tendência tornou-se muito popular e tem sido adotada por centenas de sites.

Na parte inferior da página você vai notar algumas características que são divididas em linhas horizontais. Cada linha começa com um pequeno título e enumera três características uma ao lado da outra. Os recursos também se utilizam de ícones para transmitir um significado visual e de pequenos trechos de conteúdo para dar destaques e para fins explicativos.

Galerias e Slideshows
Websites modernos tem usado de galerias dinâmicas e slideshows de mídia em qualquer tamanho de tela. Navegadores de smartphones têm percorrido um longo caminho combinando técnicas de design responsivo com este tipo de navegação.

É possível para um Web Designer iniciante utilizar um simples plug-in carrossel e modificá-lo ou inserí-lo em qualquer outro layout com facilidade. Bibliotecas de código são liberadas num fluxo muito grande e de forma open source, contando com uma documentação fantástica.

O jQuery torna o desenvolvimento de front-end ainda mais simples e esta tendência tem sido muito difundida ao longo dos últimos anos.

Slideshows em tela cheia tem efeitos impressionantes, onde cada slide representa um estudo de caso do trabalho do cliente, ou um tipo de serviço prestado, utilizando de fundo imagens fullscreen relacionadas com a informação passada. A homepage com Slideshow se apresenta limpa, suave e muito mais impactante ao apresentar o conteúdo.

Com esta estrutura de galerias de imagem única ou slideshows, que podem apresentar diversos tipos de mídias, a mídia digital tornou-se tão comum que os visitantes praticamente esperam que em cada site o designer adapte seu trabalho para demonstrar o melhor método de apresentação de conteúdo e usabilidade.

Por enquanto, parece que o jQuery é a maneira mais rápida e eficiente para criar galerias. Você só precisa de algumas imagens e um pouco de tempo para brincar com a configuração. Seria bom ver mais animação e outras técnicas construídas em galerias de mídia para a web ainda este ano.

Storytelling Dinâmico

Projetos em Parallax ou One Page são, certamente, uma tendência muito respeitada. Designers e clientes têm caído de amores pelos sites em Parallax, tanto pela criatividade quanto pela bela apresentação. Desenvolvedores também gostam de liberar seus plugins em Parallax, fato que contribui muito para o crescimento do estilo.

Cavando mais fundo no Parallax você encontrará outra tendência: a arte de contar histórias de forma dinâmica ou Storytelling Dinâmico.

Quase todo site tem uma história para contar, mas o conteúdo nem sempre é disposto de forma eficiente. Layouts Parallax podem ser mais naturais para contar histórias, pois eles dependem de uma única página. Gráficos, textos, animações e seções da página são acessíveis sem novo carregamento de página (refresh) e isto é muito importante, pois deixa a navegação mais fluída, simples e rápida.

Contudo é necessário ter em mente que contar histórias de sucesso requer não somente um belo design mais também bom conteúdo. Layouts com Parallax tornam a navegação através do conteúdo muito mais fácil pelo fato de estar separado apenas por seções e acessível a partir de uma única página (One Page), mas se não houver conteúdo relevante o visitante não permanecerá muito tempo no site para admirar o design.

Os melhores designers de Parallax aprendem a combinar gráficos, animação e design de conteúdo em um aglomerado limpo e engenhoso. Projetos Parallax não são a única opção layout, mas tendem a ser a opção de mais simples implementação. Se você está criando um site de Parallax ou um site Multi-Page (múltiplas páginas) tente incorporar ao projeto um Storytelling para tornar o conteúdo do site mais encantador.

Menus como Navbar Flutuantes

Embora cabeçalhos e menus fixos sejam usados há anos, esta tendência tem mudado. A grande maioria dos designers tem tomado gosto pelas barras de navegação flutuantes que fixam na parte superior da tela conforme o usuário rola o site para baixo até o final da navegação no site, assim, quando você navega pelas páginas abaixo, essa barra de navegação torna-se fixa e se transforma em uma pequena barra na parte superior da tela contendo todos os links do menu, facilitando o acesso sem a necessidade de subir toda a página para acessá-lo.

O site da Patrícia Valéria (www.patriciavaleria.com.br), desenvolvido pela MultiFaces Comunicação, demonstra essa técnica. A seção de cabeçalho usa um Slideshow com a barra de navegação logo abaixo, quando você rolar o site para baixo a barra navegação e o logotipo tornam-se fixos em uma barra flutuante superior branca que desce junto com a rolagem.

Alguns designers usam muito este efeito, enquanto outros se queixam de que ele ocupa espaço precioso na tela.

Alguns designers também gostam de acrescentar efeitos interessantes a estas Navbars deslizantes como o uso de um pequeno efeito animado.

Layouts baseados em grid

É difícil dizer exatamente quando o estilo de design baseado em grid se tornou popular, mas é definitivamente uma escolha adotada por muitos designers.

Normalmente projetos baseados em grid são aplicados em sites que necessitam de grandes listas de conteúdo ou de um alinhamento de informações diferenciado. Páginas Web, como os feeds de mídia social, revistas on-line, ou galerias de portfólio podem se beneficiar desta técnica.

O site da MW Produções (www.mwproducoes.com.br/portfolio), desenvolvido pela MultiFaces Comunicação, utiliza esta técnica em sua página de portfolio. O design em grid foi adotado para listar de forma elegante e funcional os serviços prestados pela empresa. O layout é muito mais sensível e você pode ver a sua concepção responsiva redimensionando a janela do seu navegador.

O layout de grid do Pinterest também é um modelo interessante, é um pouco diferente porque os boxes não são perfeitamente alinhados, porém, isso dá um certo estilo ao layout porque em vez de cair no padrão ele dá um ar aparentemente desorganizado e esta assimetria funciona muito bem dando personalidade ao site.

Existem dezenas de ferramentas e recursos para designers que querem desenvolver estruturas baseadas em grids, desenvolvedores de front-end podem procurar em bibliotecas de CSS gratuitas encontradas na web. Se o designer dominar o JavaScript pode experimentar o jQuery Masonry, que é um ótimo plugin que se parece com o grid do Pinterest.

Essas são algumas das tendências web que a MultiFaces Comunicação vem apostando e desenvolvendo para melhor atender seus clientes e facilitar o acesso para o público, trazendo facilidade, rapidez, beleza e modernidade ao design web.