Tendências WebDesign 2013

Nos últimos anos temos visto uma tremenda mudança na maneira em como os desenvolvedores estão construindo sites. Mais usuários mudaram para plataformas mobile, juntamente com os browsers mais recentes que suportamHTML5/CSS3 nos padrões da web. Há várias ideias originais que saem dos Designers – “parece que novos limiares estão sendo substituídos em poucos meses.”

Neste artigo eu gostaria de falar sobre algumas das tendências mais recentes que estamos vendo evoluir. Muitas destas ideias de design vêm em torno de um longo tempo. Mas eu diria que mais de 2012 e entrando em 2013, essas ideias originais irão florescer. Existem muitos projetos open source e interfaces de usuário oferecidas gratuitamente para download. Isso cria um ambiente onde novos designers podem entrar na área e pegar as tendências rapidamente.

 

Design Mobile vêm primeiro

A ideia de “designer compreensivo” não é limitada apenas em sites cheios de informações e uma grande rolagem. A ideologia pavimentada entre designers é começar com o modo mobile e construir seu caminho acima.

Muitas vezes, primeiro é mais fácil planejar seus elementos de interface mais importantes e depois apertar cada um deles em um layout mobile. Se ele não couber tudo, terá que tirar um pouco e simultaneamente você poderá planejar em como o layout irá aparecer assim que a janela crescer. Você terá espaço para incluir barra lateral, possivelmente duas barras laterais, junto com inúmeros outros elementos da página.
Estas são algumas das vantagens de se iniciar pelo Mobile.
Infinita Barra de Rolagem

Uma série de sites de redes sociais começaram a aplicar a barra de rolagem infinita em suas interfaces, timelines e feeds do usário. Este efeito foi ganhando força devido à popularidade do Twitter Thumblr que são estilos de layout exclusivos. E agora, mais recentemente o Pinterest que também adotou a infinita barra de rolagem em sua página.

Vocês designers devem estar se perguntando por que isto é útil. É claro que fornecer uma interface sem carregar a página faz com que os usuários terão dificuldade em gerar links de páginas diferentes, isto é verdade, mas ele traz o ponto importante que nem todo site de rolagem infinita tem. Esta tendência funciona melhor quando você carrega muitas informações e não precisa de um estilo de paginação específico.

Por exemplo, o botão “Arquivos do Blog” é uma má escolha porque os leitores podem entrar diretamente na página 15 ou 25 em vez de rolar o site várias vezes e ver todo o conteúdo criado. Mas o Thumblr ou Pinterest são grandes ideias porque a informação é dinâmica e em constante mudança. O que aparece no primeiro ou segundo feed do seu twitter irá atualizar o tempo todo sozinho, a velocidade é bem visível. Ninguém precisa ficar clicando em “próxima página” para carregar o próximo tweet ou ver mais imagens no Pinterest.
Minimalismo e Espaços em Branco

Os termos “minimalismo” e “espaços em branco” já são bem conhecidos, e enquanto a verdade destas tendências tende a ser parte do WebDesign há anos, também é verdade que eles têm evoluído para atender um novo aspecto de criatividade. Há vários sites usando espaços em branco como uma ferramenta que força o usuário a se concentrar profundamente no conteúdo principal, mas até mesmo em sites mais densos podem utilizar espaços em branco menores.

Outro grande equívoco é de que todo “espaço em branco” deve ser branco no design. No entanto, layouts escuros deveriam usar “espaços em branco” e seria fácil considerar este termo como “espaço vazio”, que são os lugares onde você deixa algum espaço para respirar sem desordem. Muitas vezes isto representará elementos maiores na página como botões, ícones ou imagens. Portfólios podem preencher o espaço em branco com tipografias grandes deixando espaços entre títulos e parágrafos. Isto torna o conteúdo mais fácil de digerir e os leitores são menos propensos a fugir do seu site.
Design Natural de Elementos

As especificações do CSS3 trouxeram muitas mudanças. Importação de fontes através de animações @fontface e quadro-chave são apenas alguns dos temas a demonstrar os recursos mais avançados. Mas as propriedades mais básicas do CSS3 vêm influenciando o uso de desenhos naturais dentro de layouts.

Estes elementos podem incluir cantos arredondados, sombras em caixas, ou gradientes de fundo com um container flexível. Todos estes estilos eram retidos em imagens de 5-10 anos atrás. Hoje em dia você pode projetar um layout completamente baseado no navegador usando apenas CSS3 para gerar estes efeitos. 2013 mais um ano à frente onde as imagens construídas no layout estão sendo substituídos por propriedades compatíveis com padrões CSS.

Eu sempre amei o site Dabblet, com o uso básico incrível de gradientes no fundo de cada nova página. Este aplicativo web foi disponível no framework Github Gist e permite os desenvolvedores criam pequenas propriedades em HTML/CSS em tempo real. Toda a interface é baseada em propriedades CSS3 e você pode rapidamente notar como as tendências avançam em poucos anos.
Fotografia Grande

Fotos grandes é uma tendência que vêm abrangendo. Na verdade, já vi sites e portfólios de lançamento neste estilo de design. Layouts de sites podem ser sintonizados por um sentimento ou emoção muito específica com base nas cores e estilo de fundo. Grandes fotografias são outro método para pressionar uma emoção muito específica.

Eu diria que esta tendência não é certamente para todos. No entanto, na situação certa, onde você tem espaço suficiente na página, o fundo grande oferece uma estética agradável para o visitante. O maior problema é o conteúdo adequado para o layout para que fique legível. É por isso que a as melhores soluções para fotos no fundo muitas vezes são de grandes empresas e agências.

O estilo único é perfeito para portfólios de design e sites pessoais para oferecer uma conexão mais profunda com seus visitantes. Pessoas que acessam seu site ficarão curiosos sobre quem você é e o que você faz. É ótimo para oferecer aos visitantes uma fotografia para mostrar realmente quem você é. Fotografias grandes também podem ser usadas para mostrar um trabalho criativo – como ilustraçõesvetoresprodutos ou até suas próprias fotos.
Código-Fonte Limpo

A liberação de mais frameworks CSS tem permitido aos desenvolvedores web economizarem mais tempo de codificação de forma dramática. Isto significa que você pode construir 2 colunas ou 3 colunas do layout do site em questão de minutos quando usar as ferramentas corretas. Isto também significa que há menos marcação HTMLnecessária para alcançar os mesmos resultados.

Construção de sites com código-fonte limpo significa que tudo é mais simples, e muitas vezes muito menor. Isso é bom porque tamanhos de arquivo menores significam menos carga do servidor e o site mais rápido. Além disso, quando voltar para o layout para editar algo, será mais rápido, sem dificuldade. Leia vários artigos na internet, estudos de vários desenvolvedores e aprenda várias formas de se fazer um HTML/CSS limpo.

Os dois sites mais importantes que recomendamos são Github Stack Overflow. O primeiro tem muitos códigos-fonte grátis que você pode baixar para seus projetos de website. O outro é muito útil, a comunidade Q&A são desenvolvedores que buscam nada mais do que ajudar um ao outro. Estes 2 sites oferecem uma abundância de bom material para começar a construir um site limpo, o código legível em seu website.
Considerações Finais

Durante o resto do ano certamente vamos descobrir alguns novos esquemas e mentalidades relacionado com web design. A comunidade tem crescido de modo global com designers por todo o mundo. Isto significa que todos têm acesso por todas as partes e podem pesquisar outras informações, independentemente do nível de habilidade. Este será o melhor momento para entrar na área de webdesign.

Eu espero que algumas tendências que listamos acima podem oferecer um crescimento maior em novos projetos para 2013. A melhor maneira de manter-se envolvido é ser proativo com as novas tendências. Leia novos posts e tutoriais para ficar envolvido com os mais recentes padrões da web. Além disso, se você tem alguma idéia ou sugestão que gostaria de vê-los na área de discussão, comente abaixo ou discute em nossas redes sociais.

 

Fonte: Webdesignledger

Arte da Capa: Guilherme Encinas

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: