15 Tendências de Web Design a serem observadas em 2012

Até agora, o ano de 2011 trouxe algumas mudanças surpreendentes no design e na tecnologia da Internet. O desenvolvimento da Web tornou-se um assunto muito mais suave para entrar no aprendizado, sem mencionar as inúmeras bibliotecas de código aberto úteis na simplificação do processo. E ainda parece que a comunidade global de design está longe de jogar a toalha.

Quero apresentar 15 ideias que cresceram muito rapidamente no ano passado. Essas tendências abrangem técnicas de web e design gráfico que provavelmente terão um grande papel em 2012. Você provavelmente já viu algumas delas representadas em muitos de seus sites favoritos on-line..

Felizmente, os métodos para implementar esses recursos estão se tornando mais fáceis de entender e muito mais simples em código.

1. Design de interface responsivo

A experiência do usuário médio é possivelmente o aspecto mais importante a considerar ao projetar um site. Você deseja que os elementos da página respondam rapidamente à entrada do teclado / mouse e se comportem conforme o esperado. Alguns exemplos podem incluir menus suspensos, caixas suspensas e janelas pop-up.

Incluindo bibliotecas JavaScript famosas, como o MooTools e o jQuery, ficou muito mais fácil animar esses recursos e ainda mais. A maioria dos navegadores atuais suporta esse código e até mesmo se desgasta graciosamente quando os scripts não estão disponíveis. Em última análise, você quer que o usuário se sinta confortável ao interagir com qualquer lugar do design.

Da mesma forma, você deve considerar a entrada de formulários e a verificação de dados. Em muitas páginas de registro, você receberá pequenas respostas enquanto trabalha em cada área de entrada. Você pode automatizar a verificação de endereços de e-mail válidos, nomes de usuário duplicados e até mesmo verificar entradas de senha. Isso economizará tempo no final do usuário e fornecerá um guia prático durante todo o processo de inscrição.

2. Dispositivos Móveis Touchscreen

Nos últimos dois anos, ficou evidente que os smartphones estão ganhando apoio entre os entusiastas não técnicos. Mas somente desde 2011 vimos uma explosão de sites para celular e modelos específicos para celular.

A popularidade dos dispositivos iPhone e iPad, juntamente com os telefones com Android, significa que você terá visitantes que interagem totalmente com suas páginas por meio de comandos por toque. Isso deve se tornar uma consideração realista em todos os modelos de design. As tendências no design da web para dispositivos móveis mostraram que a criação de um tema para dispositivos móveis totalmente separado geralmente fornece os melhores resultados. Dessa forma, você pode manter todo o conteúdo dinâmico no local principal enquanto veicula uma versão simplificada do site para usuários móveis.

3. Toneladas de Freebies!

Quem pode dizer que honestamente não gosta de downloads gratuitos? Web designers têm compartilhado seu conteúdo on-line há anos, mas só recentemente isso se tornou uma tendência muito popular entre os artistas digitais. Existem algumas comunidades construídas especificamente para oferecer downloads gratuitos para web e designers gráficos.

Dois dos meus favoritos pessoais são o Download PSD e o Designmoo, ambos atualizados com frequência por membros de alta qualidade. Além disso, o arquivo Hongkiat Freebies tem muitos doces para conferir. Em qualquer época antes, nunca foi tão fácil baixar interfaces web, layouts, logotipos, banners e praticamente qualquer outro tipo de arquivo PSD / AI.!

Alguns downloads arrumados

Abaixo estão apenas alguns brindes bacanas para conferir no início de 2011. E se você acha que esta lista tem ótimos arquivos, espere até 2012!

Conjunto de UI da Web Mini

Mini Music Player Escuro

Tags deslizantes

Slider de fotos escuras

Caixas de Pesquisa

Login em / formulário de signin

Caixa Modal de Login

Formulário de Login Limpo

Tabelas de Preços

Barras de Carga Mínima

Pop-up de anexo

4. Padrões HTML5 e CSS3

Ambos os novos arquétipos de design acumularam um número crescente de seguidores ao longo de 2011. Os web designers semânticos estão esperando há anos para produzir projetos somente CSS, renderizando cantos arredondados e sombras. Além disso, o W3C fez muito progresso na obtenção de suporte dos navegadores mais populares.

Eu só posso ver coisas boas para o futuro do desenvolvimento web HTML5 / CSS3. Designers de front-end são frequentemente ignorados no campo de hoje, mas eles servem uma grande importância para todo o processo de composição. Tente não se espremer em qualquer rótulo definido com base nas técnicas que você conhece e pratica diariamente. Oferecemos um guia prático para iniciantes para codificação HTML5 / CSS3 se você sentir necessidade de recuperar.

Furar com esses novos padrões também tornará o desenvolvimento em JavaScript e jQuery muito mais fácil. Os desenvolvedores já publicaram e compartilharam seu código de projeto HTML5 / CSS3 on-line, e se as coisas continuarem, certamente notaremos muito mais disso no próximo ano..

5. Fitas e Banners

Embora esta técnica de design não seja exatamente “Novo” nunca rompeu verdadeiramente o mainstream até recentemente. Você provavelmente já viu exemplos de fitas de canto, barras de navegação de banner e pequenos crachás de fita. Estas tendências provavelmente explodiram devido ao enorme acúmulo de tutoriais detalhados que podem ser encontrados por meio do Google.

Web designers são mais competentes nos dias de hoje em lançar seus próprios blogs para compartilhar informações. Agora, técnicas simples podem ser facilmente passadas entre os designers para duplicar os efeitos mais populares. Há até mesmo PSDs gratuitos que você pode baixar para poupar o esforço.

6. Premium WordPress Temas

A versão final do WordPress 3.0 incluiu uma série de recursos esperados, como tipos de post personalizado e imagens de artigos exclusivos. No entanto, as mudanças mais profundas que tenho visto são provenientes de lojas de desenvolvimento do WordPress especializadas em temas WP premium.

Depois de adquirir um tema desse tipo, o processo de instalação é semelhante a qualquer outro. No entanto, agora é possível incluir funcionalidade de plug-in personalizada, temas filho, novos menus de administração e um monte de outros recursos diretamente do tema! WooThemes, ElegantThemes e Rocket Themes são algumas marcas que se destacam acima de tudo o resto. Sua qualidade é impecável e eu sinto que seus desenvolvedores vão acima e além para criar os melhores modelos e menus de administração mais intuitivos.

Indo para 2012, eu posso imaginar que o WordPress se tornará ainda mais fácil de usar. Isso significa que mais temas de alta qualidade serão lançados e mais blogs incríveis serão lançados.

7. Revistas Online

Falando sobre temas WordPress, devemos também trazer o sucesso rapidamente adotado de revistas on-line. Esses sites não são tão diferentes de qualquer blog genérico do WordPress além da estrutura geral e do layout da página. Você pode identificar essas revistas maiores pela simples apresentação de sua home page, e uma coleção de autores escrevendo para o site.

À medida que as revistas começam a se movimentar on-line, elas se tornarão uma fonte de renda para muitos escritores. Concedido um tópico como 'web design' tem como alvo um nicho menor do que, digamos, jogos ou economia. Mas o fato de estarmos vendo mais revistas de design on-line do que a impressa mostra onde o mundo pode estar se dirigindo nos próximos anos..

8. Fácil Drop Shadows

Como uma faceta do CSS3, agora é mais fácil do que nunca para os designers implementarem um sombreamento em qualquer lugar da página. Os elementos de caixa de texto e estilo caixa receberam as respectivas propriedades para renderizar efeitos de sombra bem definidos.

A sintaxe de text-shadow é muito fácil de memorizar e segue como box-shadow. Agora, com imagens desnecessárias na renderização desses efeitos, os desenvolvedores da Web podem se concentrar em expandir essas ideias básicas ainda mais..

9. Tipografia Dinâmica

Fontes são uma grande parte da esfera abrangendo a tradição de web design. As fontes mais notáveis, incluindo Arial, Helvetica, Georgia e Trebuchet MS, já existem há anos. Embora continuem a servir a um propósito profundo em padrões da Web, há diversas opções alternativas para tipografia avançada de páginas da Web..

O Typekit, por exemplo, requer apenas algumas linhas de código a serem incluídas no cabeçalho do documento. Depois disso, você pode especificar quais nomes de fonte incluir e anexá-los ao seu CSS. A melhor parte sobre essa técnica é que ela depende principalmente do JavaScript, portanto, o usuário final não precisa ter as fontes instaladas.

Outra alternativa é o Google Web Fonts, que se comporta de maneira semelhante ao Typekit. Eu recomendo designers interessados ​​para verificar a consulta de mídia @ font-face do CSS3, já que você tem muito mais criatividade. Este código pode ser usado para importar .ttf ou .otf arquivo de fonte do seu servidor web e incluí-lo como uma fonte de folha de estilo utilizável! Com tantos sistemas alternativos usados ​​na construção de fontes dinâmicas, espero que 2012 mantenha uma onda de inovação e design de talentos nessa área.

10. Slideshows da Galeria de Imagens

Com a subseqüente popularidade do jQuery, tenho visto mais e mais slideshows de imagens sendo descartados em layouts da web. As galerias são perfeitas para demonstrar um rápido vislumbre do conteúdo da página interna. Pode ser um conjunto de entradas de portfólio, fotografias, postagens de blog com imagens em destaque, capturas de tela de demonstração, etc..

Quando você considera as muitas animações exclusivas de deslizamento e desbotamento, nunca foi tão fácil construir uma apresentação de slides rápida para sua home page. Estou confiante de que 2012 verá um aumento nessas tendências, e não apenas entre designers. Empresas de software e aplicativos on-line da web têm usado slideshows como tutoriais guiados para exibir capturas de tela e recursos exclusivos.

11. Caixas Popup Modais

Eu sinto que as caixas modais ainda são relativamente novas para a Internet, considerando que elas vêm aparecendo em aplicativos de desktop e aplicativos móveis há anos. A finalidade de uma janela modal é oferecer conteúdo de caixa (como registro de usuário ou login) na parte superior da página atual, sem carregar em uma nova página..

Muitos dos scripts de galeria de imagens de código aberto usam um tipo de efeito lightbox onde o fundo fica mais escuro do que a caixa pop-up. Eu realmente gosto desse recurso sempre que o vejo, embora ainda tenha que ser adotado por muitos. E embora as caixas modais sejam sensuais e elegantes, elas também podem ser muito difíceis de codificar e funcionar corretamente.

Para obter ideias para seus próprios sites, confira algumas das comunidades de compartilhamento de notícias sociais mais populares. O Reddit e o Digg são os dois primeiros que vêm à mente, pois ambos apresentam caixas modais de registro / login com um layout típico. Além disso, os efeitos da interface do usuário para o Google+ apresentam uma quantidade considerável de funcionalidade modal.

12. Listas Inspiradoras

Coleções de itens de lista apareceram desde os primórdios do web design. À medida que nos mudávamos para o novo século, os designers começaram a usar listas ordenadas e não ordenadas de HTML para abrigar menus de navegação. Mas hoje em dia as listas podem e estão sendo usadas para muito mais.

Na maioria dos temas do blog, eu acho que toda a barra lateral está carregada de listas! Sem mencionar os designers que criaram estilos CSS incríveis para listas em suas entradas de artigos. Cobrimos estilos de lista inspiradores em outro post no começo deste ano, o que pode lhe dar mais algumas dicas sobre o assunto. Olhando para frente em 2012, estou esperando alguns exemplos realmente criativos, possivelmente a par com o layout personalizado do Flowapp para tarefas e tarefas.

13. Miniaturas de Imagens Geradas

No universo da web, podemos concordar que o conteúdo é rei. Mas a maioria dos designers também concorda que uma página de texto em branco se torna realmente chata. As imagens podem adicionar esse tempero extra se você souber borrifá-las suavemente. Um desses métodos é usar miniaturas dinâmicas para fornecer visualizações de cada página ou artigo.

Blogs hoje continuam a adotar a tendência de imagem em destaque, então por que não aplicar miniaturas geradas em seu tema também? Estas muitas vezes chamam minha atenção para o título do artigo e ajudam a quebrar uma página cheia de links de texto..

Como outro exemplo, o Dribbble fornece uma lista completa de miniaturas para cada desenho. Em tal layout de estilo de linha de tabela é super fácil de vislumbrar cada miniatura e percorrer para encontrar o que você está procurando. Essa tática provou atrair a atenção de toda a comunidade de design! Pelo menos os membros do Dribbble na melhor das hipóteses. Eu só posso esperar que 2012 verá um maior esforço dessas idéias com base nesses exemplos do passado.

14. Ícones Exagerados

Esta tendência única origina-se da popularidade dos designs de ícones do Mac OS X. À medida que os programadores começaram a lançar sites para seus aplicativos Mac, muitas vezes vimos os tamanhos enormes representados no branding. Assim, esta tendência também foi retomada através de desenvolvedores iOS e agora repousa confortavelmente dentro da cultura de design moderno..

É difícil prever como essas tendências serão justas à medida que avançamos para 2012. Por um lado, esses ícones podem ser desajeitados e ocupam mais espaço do que o necessário. No entanto, não estamos nem perto de atingir uma escassez de aplicativos iOS / OSX e os designers ainda estão produzindo especificações de ícone perfeitas para pixels. Sem mencionar que os web designers agora estão incluindo ícones superdimensionados em praticamente qualquer marca de página! É uma boa maneira de prender a atenção direta de seu visitante e criar um nome para sua empresa.

15. Hiperlinks Exagerados

Links de âncora certamente estão entre os cinco principais elementos mais importantes de qualquer site. Obviamente, estes já percorreram um longo caminho desde a década de 1990 e as tendências de design populares têm crescido exponencialmente. Parece que estamos nos movendo para uma era em que o design exagerado tem precedência.

Confira alguns exemplos de links da Patterntap para ver se algum deles aparece e chama a atenção. Há tantas ideias incríveis para o design de hiperlinks, tanto em efeitos padrão quanto em hover. Cantos arredondados CSS3, sombras de texto e famílias de fontes personalizadas adicionam ainda mais grandes ideias à mistura! Um dos meus exemplos favoritos é do SimpleBits, que usa uma animação dinâmica curta em cada um dos seus permalinks de entrada de blog..

Conclusão

Essas idéias são apenas algumas das tendências mais populares que eu notei ganhando precedência ao longo de 2011. O grande web design é sempre focado e mantendo as intenções do usuário como prioridade máxima. É improvável que essas filosofias sejam diferentes em 2012, mas a forma como construímos layouts e apresentamos dados está sempre em mudança. Deixe-nos saber seus pensamentos ou perguntas na área de discussão de comentários.