Tendências de Web Design para 2010
Os puristas dirão que o ótimo design é intemporal. Sim, em um mundo ideal, devemos ignorar as tendências.
Pragmaticamente falando, porém, há muito valor em monitorar e incorporar tendências de design, especialmente no que diz respeito a websites.
Vamos enfrentá-lo: a web muda a um ritmo acelerado. Ao contrário de outras mídias, as tendências de design na web não são apenas influenciadas pela estética.
A tecnologia está mudando e isso pode alterar drasticamente as capacidades do meio.
Em 2010, estamos vendo designers continuando a ultrapassar os limites do design da web, definindo as seguintes tendências claras…
Design de impressão
O design de impressão sempre foi uma fonte de inspiração para a web. O design da Web existe há tempo suficiente para cultivar um núcleo forte de designers que nunca trabalharam na mídia impressa. Como resultado, estamos vendo mais inspiração extraída da impressão, já que esses designers olham para além da web.
Serif Fontes
Uma das questões mais importantes da tipografia é a legibilidade. Os designers de impressão sempre favoreceram as fontes serif porque as bordas melhoram a visibilidade e facilitam o reconhecimento das letras.
Fontes sem serifa geralmente são consideradas mais fáceis de ler na tela. Mas, com mais usuários navegando em alta resolução e aprimorando a tecnologia de suavização de fontes, as fontes com serifa se tornaram muito legíveis para o corpo do texto.
Grandes cabeçalhos
Os designers de impressão têm usado títulos grandes para chamar atenção por muito tempo. O material de impressão teve que ser de alto impacto se fosse esperado que fosse lido. Se você visse uma brochura sem graça sobre uma mesa, você se incomodaria em pegá-la? Provavelmente não.
Esta tendência começou em 2009 e só cresceu em popularidade. Grandes títulos foram comprovados para chamar a atenção e se comunicar claramente.
Layouts com várias colunas
Designers têm que trabalhar dentro das restrições do seu meio. Ao contrário da web, a impressão não oferece nenhuma opção para rolagem, estando vinculada às dimensões do papel. O uso de várias colunas permite que você coloque mais conteúdo no mesmo espaço.
Agora, com o aumento das resoluções de tela e o advento dos layouts de grade, mais designers estão adaptando esse método à Web para tornar os sites mais fáceis de usar e se adaptarem a mais conteúdo.
Big Lead Image
Uma imagem vale mais que mil palavras. Embora possa demorar algum tempo até que uma fotografia tenha o mesmo impacto na Web do que na impressão (que tem uma resolução muito maior), a adoção do acesso em banda larga tornou as grandes fotografias mais viáveis.
Estamos vendo mais sites usando imagens grandes e de alto impacto para atrair usuários e criar uma experiência imersiva.
Diagramas e Infográficos
Designers de impressão têm usado gráficos para transmitir informações complexas por anos. Isto é visto mais comumente em revistas e relatórios anuais.
Os gráficos podem comunicar relações e relações complexas de uma maneira que é muito difícil de fazer com texto simples. Infográficos tendem a ter uma aparência simples, mas visualmente rica, e mais designers estão adotando infográficos ou imitando o estilo em seus designs.
Simplicidade
Antoine de Saint-Exupery disse uma vez: “A perfeição não é alcançada quando não há mais nada a acrescentar, mas quando não há mais nada para tirar.” As vantagens da simplicidade no design são muitas.
A Lei de Hick nos diz que o tempo necessário para tomar uma decisão aumenta a cada opção. Além disso, a teoria do sinal-ruído nos diz que qualquer coisa que não adicione à mensagem ou função de um site (o sinal) atrapalha e torna o design menos eficaz (o ruído).
Projetos simples são mais fáceis de usar e entender, e permitem maior clareza na comunicação de mensagens.
Design Minimalista e Grid
O minimalismo é poderoso, mas difícil de dominar. Não contém nada além do essencial. Tudo o resto é removido, resultando no impacto máximo dos elementos que estão presentes.
Projetos minimalistas exigem um sistema de grade forte para ser eficaz. Naturalmente, eles terão bastante espaço em branco, e assim, sem essa grade, um design minimalista pareceria desconectado e desleixado. A grade lhe dá organização e estrutura.
Layouts de uma página
Existem várias maneiras de simplificar. Um layout de uma página exibe duas dessas maneiras: ocultando e removendo.
Layouts eficazes de uma página escondem todos os elementos que não são prioritários. Se um usuário quiser ver um desses elementos, ele poderá clicar para descobri-lo. Isso é muito mais eficaz do que deixar tudo visível, o que tornaria a página complicada e avassaladora.
Da mesma forma, o princípio por trás dos layouts de uma página torna desnecessárias as páginas adicionais. Com a disponibilidade de poderosas bibliotecas JavaScript e conexões mais rápidas, muitos sites agora têm pouca necessidade de várias páginas. Os designers podem ajustar facilmente as informações em uma página, sem incomodar o usuário com uma hierarquia.
Espaço Branco Maciço
Nos primórdios do web design, não tínhamos muito espaço na tela para trabalhar e, por isso, não mostrávamos muito espaço em branco. Se você já tentou criar um site para uma resolução de 640 × 480, saberá exatamente do que estou falando.
Agora que temos resoluções mais altas e a capacidade de ocultar e revelar elementos com JavaScript, o aproveitamento do espaço em branco é muito mais fácil.
O espaço em branco é fundamental para um bom design. Dá aos olhos um lugar para descansar. Melhora naturalmente a qualidade de um design. E mostra quais elementos estão relacionados uns aos outros por meio de proximidade.
Layouts tipográficos
Considerando que costumávamos ficar confinados a algumas poucas “fontes seguras para a Web” com muito pouco controle sobre como elas eram exibidas, agora temos uma ampla gama de ferramentas para enriquecer nossa tipografia.
Os designers da Web há muito tempo gostam de usar o tipo como uma ferramenta sutil para comunicar mensagens. Com o aumento do controle e das capacidades, estamos vendo mais designers se concentrarem na tipografia como o principal elemento de design.
Técnicas CSS3
Não tem certeza de que você pode aproveitar o CSS3 ainda? Pense de novo. Os pioneiros da web, como Andy Clarke e Jeremy Keith, há muito tempo pregam sobre o “aprimoramento progressivo” do web design.
O aprimoramento progressivo é sobre o design de sites para que eles sejam utilizáveis em navegadores mais antigos, sendo "aprimorados" para usuários que se comprometem com a tecnologia mais recente.
Projetar neste campo permite que você tire proveito das propriedades CSS3, como cantos arredondados, fundos de borda e sombras de texto e caixa. Usuários em navegadores modernos verão a versão melhor, e aqueles em tecnologia mais antiga ( tosse ¦ IE6 ¦ tosse ) verão a versão básica.
Animação CSS3
A animação na web passou por vários estágios. Inicialmente, só poderíamos animar com arquivos de imagem GIF. Então, estávamos praticamente limitados ao Flash. Agora, podemos selecionar entre Flash, Silverlight, GIF, JavaScript e até CSS3. Animação sutil pode ser memorável, e CSS3 torna leve e fácil.
Cantos arredondados
O estilo Web 2.0 de 2005 e 2006 tornou os cantos arredondados populares, a ponto de serem irritantes. Na época, criá-los era difícil. Não havia maneira definida de criar cantos realmente arredondados. Em vez disso, eles foram simulados com CSS, hacks de JavaScript e arquivos de imagem.
O CSS3 agora nos permite gerar cantos arredondados diretamente no navegador, tornando-os não apenas mais fáceis de criar, mas também muito mais eficientes, porque o usuário não precisa baixar imagens adicionais ou arquivos JavaScript.
Designers estão cada vez mais aproveitando esse novo recurso de navegador em 2010.
Caixa e texto sombras
O uso de sombras para criar uma sensação de profundidade foi feito (e às vezes exagerado) desde os primeiros dias da web. Mas nem sempre foi prático. Para adicionar sombras ao texto, você tinha que usar imagens, o que aumentava o tempo de carregamento e dificultava a manutenção. A caixa de sombras exigia várias imagens e truques de CSS como "portas de correr".
O CSS3 possui recursos de sombra altamente personalizáveis, que permitem uma ampla gama de efeitos criativos, incluindo não apenas sombras, mas também sombras internas. Os designers criativos já estão usando esses efeitos CSS3 para simular os efeitos em relevo e impressos.
RGBa e Opacidade
Durante anos, trabalhar com opacidade e transparência na Web era quase impossível. Você tinha três opções: simular transparência usando imagens simples, lidar com incompatibilidades entre navegadores do PNG ou lutar com os seletores e filtros básicos de transparência do CSS.
O CSS3 oferece aos designers uma consistência e liberdade muito melhores no uso da opacidade com a propriedade RGBa. Embora você possa tirar proveito da transparência de inúmeras maneiras, uma área que ajudou particularmente é com fundos complexos sobrepostos com cores semitransparentes. Anteriormente, esse efeito era impraticável ou impossível de criar sem recorrer a imagens PNG complexas.
Design compatível com dispositivos móveis
A web móvel deu a milhões de usuários a capacidade de verificar sua conta bancária enquanto esperam na fila, procurar as últimas pontuações no metrô e atualizar seu status no Twitter enquanto dirigem. (Qual destes é um hábito perigoso?) E a web móvel continua a crescer rapidamente.
Chegamos ao ponto em que toda empresa tem que considerar se o site será usado em movimento e, em caso afirmativo, como. Empresas inovadoras já investiram pesadamente em versões móveis úteis e fáceis de usar de seus sites.
Criatividade
O crescimento explosivo no uso de mídias sociais é uma prova de que as pessoas querem se conectar e compartilhar coisas pelas quais são apaixonadas.
No campo do design, vimos um grande crescimento no compartilhamento e navegação do trabalho de outras pessoas. Como designers, somos agora bombardeados pela criatividade de todos os outros. Isso não apenas eleva o padrão de qualidade do design, mas também incentiva a partilha de ideias, o que contribui para uma cultura de criatividade e inovação.
Ilustrações limpas
Se você é como eu, você cresceu assistindo filmes da Disney, admirando todo o esforço que foi para criar cada quadro de animação. Já passamos dos dias em que a ilustração foi feita com tinta e marcadores, e essa evolução nas ferramentas levou a algumas abordagens muito criativas para o design.
Muitos designers estão aprendendo que ilustrações nítidas, limpas e nítidas criam uma sensação distinta que não pode ser reproduzida pela fotografia ou clip art simples. O resultado é uma ampla gama de designs ilustrados profissionalmente que são envolventes e convidativos.
Planos de fundo texturizados
Planos de fundo texturizados não são novidade na web. Mas esta técnica tem visto uma variação interessante nos últimos meses. Eu me refiro a isso como “micro-texturas”, que são texturas sutis, quase imperceptíveis no fundo.
Miniaturas
Você pode estar dizendo: “As miniaturas existem desde o início da web. Como isso é uma tendência? ”É verdade que eles sempre foram usados, mas de maneira muito simples. Você teria uma miniatura que você poderia clicar para obter uma imagem maior. Ele fez o trabalho, mas foi chato.
Nos últimos meses, os designers começaram a perguntar: "Como podemos tornar as miniaturas mais interessantes?" Isso levou a um aumento nas miniaturas que são inteligentes e úteis.
Aquarela
Conforme a web evolui, vemos mais designers sendo inspirados por uma variedade de fontes e mídias. Não é surpresa que as belas artes estejam entre essas fontes.
Um dos estilos que surgiu é a simulação de aquarelas. A aparência elegante e suave deste estilo é distinta e calmante.
Caligrafia
As fontes manuscritas e de script são as mais usadas. Por essa razão, muitos designers evitam os dois tipos por desgosto ou por medo de parecerem amadores. Mas ultimamente, muitos designers descobriram que, quando usado corretamente, o estilo manuscrito transmite uma sensação de habilidade e planejamento. Usado no contexto certo, é uma maneira poderosa de se comunicar.
Mídia social
Com as pessoas passando mais tempo no Facebook do que no Google agora, não é de se admirar que os designers estejam procurando formas inovadoras de integrar mídias sociais em seus sites.
Alguns designers chegaram ao ponto de publicar seu conteúdo em redes de mídia social e depois usar seus sites para agregá-lo.
É seguro dizer que, à medida que 2010 progredir, veremos mais designers encontrar maneiras criativas de integrar mídias sociais em seus sites, a fim de envolver melhor os usuários.
Elementos Fixos
Agora que os navegadores suportam melhor o position: fixed elemento, estamos vendo usos mais inteligentes disso.
Há muitas situações em que um elemento fixo (como a navegação persistente) pode servir aos objetivos de negócios do proprietário e tornar o site mais utilizável.
Elementos fixos são memoráveis e melhoram a experiência do usuário. Eles têm inúmeros usos criativos e continuaremos a ver designers aproveitando-os.
Este guest post é uma colaboração entre o pessoal da Web Hosting Search e o designer e desenvolvedor Ross Johnson. Confira Web Hosting Search para adequada hospedagem na web e 3point7designs para mais awesomeness design web por Ross
Quais dessas tendências você mais segue? Quais são algumas outras tendências emergentes?