Tendências em Web Design para 2011

Web design é uma indústria instável. Assim como todas as outras formas de expressão artística, web design tem sofrido uma evolução contínua e surpreendentemente rápido.Depois de um parque infantil para os entusiastas, que se tornou agora um meio maduro rico com apelo estético e funcional forte. De fato, estamos experimentando o que poderia ser a era de ouro de Web design - ou pelo menos um período melhor até agora. Temos novas e poderosas ferramentas à nossa disposição (CSS3, HTML5, a incorporação de fontes, etc), uma infinidade de recursos disponíveis livremente, uma comunidade forte do projeto e também (se você precisasse de mais nada!) Suporte confiável dos padrões Web nos principais navegadores.

Nós estamos vendo a interação design melhor e esteticamente mais agradável projetos. E nós estamos vendo mais, atraente e memorável sites pessoais, também. Mas o que exatamente está fazendo a diferença? Que novos rumos é Web design posição hoje em dia? Quais as novas técnicas, conceitos e idéias estão se tornando importantes? Neste artigo, apresentamos algumas observações sobre o estado atual de Web design. Nós descrevemos existentes e as tendências futuras e explicar como Web design pode evoluir nos próximos meses e anos. Também vamos falar sobre o que nós, como os Web designers devem estar prontos para manter a par dos novos desafios e oportunidades.

Por favor note : este artigo é o primeiro de nossa série sobre o estado atual do web design. Para se certificar de que você não perca a segunda parte, assine o nosso feed RSSe siga-nos no Twitter .

1. Design para o prazer

Como designers, nosso trabalho é comunicar eficazmente as idéias. Para cada mensagem em particular, criamos um contexto em que a mensagem poderia funcionar melhor, orientando os usuários para a realização das suas tarefas, ganhando sua confiança e convencê-los de tudo o que estamos comunicando. É claro que existem infinitas maneiras de criar este contexto. Um deles é a concepção de estética visual, surpresa, alegria, felicidade - projeto para o prazer; projeto para ser inesquecível e marcante .

coisas atrativo trabalhar melhor e ajudar a focar e manter a atenção do usuário. Memorável design excitação aumenta para produtos e marcas, levando a um maior envolvimento. De fato, uma forte relação de confiança emocional entre seus clientes e seu público pode ser a melhor coisa que já acontece com a sua carreira.

Brizk estúdio de design tem um design esteticamente deslumbrante, com animações sutis, tipografia bonita e um layout limpo. Quando você passa o mouse sobre o pássaro vermelho no rodapé, uma pequena caixa de Twitter é revelado. Primeira classe de design que é um puro deleite.

Embora a grande maioria das marcas ainda estão em silêncio, passivo e impessoal, nós observamos mais sites se esforçando para envolver os nossos sentidos, seja através de um forte apelo estético, através de animações espirituoso no bloco de conteúdo ou simplesmente através de uma atenção extra para pequenos elementos de design na página "Sobre". Tais projetos são bonitas de se olhar, o divertimento para navegar, mas, mais importante, memorável - pela simples razão de que eles são diferentes. Ao adicionar delicioso toque pessoal às suas criações, você se destacar da multidão e dar aos visitantes algo para falar e compartilhar com amigos e colegas. E isso é um bom começo.

Você pode obter prazer em uma variedade de configurações: na sua página de modo de manutenção, na página de erro 404, em seu pre-loader, e todo o resto. A idéia é surpreender os visitantes, dando-lhes algo agradável para falar.

Bounty Bev
Bev Bounty é uma empresa de bebidas com um belo design de uma página. Além de seus efeitos hover sutil e animações, o site tem alguns recursos extras: se você rolar a página manualmente, com a roda do mouse, um pequeno pop-up aparece perguntando se você precisa de um elevador. A tipografia é forte e memorável, eo projeto é lúdico. Simples, claro e pessoal, o site deixa uma forte impressão positiva.

Analog.coop
Analógico fornece uma experiência muito pessoal para os visitantes. Quando você visitar a página, ele exibe onde você está localizado e informa os membros da equipe que estão mais próximas de você (no nosso caso, Alan e Jon, que são cerca de 500 quilômetros de distância em Bristol). O site tem um belo par de ovos de Páscoa que não são visíveis à primeira vista. Você pode querer brincar com o cabeçalho e as fotos da equipe. A página é apenas diversão para explorar.

Forrst
Lindo design atraente com elementos visuais e de navegação original - um projeto que consegue fazer uma boa impressão duradoura. Observe como o fundo da área superior da página muda quando a janela do navegador é redimensionada (Parallax-efeito). O "log in" caixa é bem legal também. Surpreendentemente, o formulário é construído com tabelas por algum motivo.

Billy Tamplin
Em seu blog, Billy Tamplin incide sobre as pequenas vitórias em sua vida. Cada post registra uma realização pessoal, exibindo um mérito crachá personalizados e uma explicação sobre a conquista. Billy usa esta metáfora por todo o site, falando do "super habilidades Web" (Agile CSS, PHP-preparados, IE6 reforçado, etc) e "design forças heróicas" (objetivo humano-amigável, detalhe criativo afiado, etc.) Ele também tem uma carteira pessoal no site. Observe bem o esquema de cores se encaixa no tema. O projeto é simples e bonita, e "conquista" da torção é incomum e inesquecível.

MIX
laboratórios MIX, um blog da comunidade para designers e desenvolvedores Web, não tem características escondidas, apelando animações ou efeitos hover impressionante. Em vez disso, ele tem um projeto consistente e visualmente atraente: você consegue identificar onde e quantas vezes círculos coloridos são repetidas em todo o site? O projeto enfatiza o conteúdo e tem um toque pessoal. Simplesmente lindo.

Sky Blue Currículos
Este site de uma pequena equipa de escritores currículo tem um casal de bom extras incomum no design: o cabeçalho contém uma animação em Flash nuvem que se encaixa perfeitamente a marca da empresa. O site também tem animações sutis e efeitos hover macio. E a página "Sobre" apresenta cada colega de trabalho de uma forma bastante original e memorável.

MailChimp
MailChimp fortemente incorpora a metáfora do macaco em todos os aspectos da sua concepção. Para informar os clientes sobre as recentes atualizações, MailChimp apresentar uma animação ASCII que informa ao usuário algo está acontecendo no fundo, esse detalhe legal é surpreendente e discreto. A empresa também utiliza uma linguagem pessoal, amigável e, talvez, ocasionalmente, nerd, ao abordar as necessidades do usuário. Esta é a parte da imagem que MailChimp pensativo preserva na sua aplicação web.

Versão Grande

Leitura

• 52 Semanas de UX: Design de Delight
  Este artigo explica a importância do design para prazer e apresenta alguns sites que tentam envolver os sentidos do usuário.
• Em defesa do Eye Candy
  A pesquisa mostra que as coisas funcionem melhor atrativo. Como pensamos não pode ser separada da forma como nos sentimos. A próxima vez que um chefe, cliente ou colega de trabalho ridiculariza a noção de que beleza é importante interface design, apontar seus peepers aqui.
• Matéria olha porque nós todos temos sentimentos
  Discute a importância das emoções e da estética no design.

2. Keypress Navegação

Como designers tentam fazer seus projetos mais intuitiva, não é nenhuma surpresa que os sites estão se tornando mais ágil. Não só isso se aplica a interfaces de usuário em aplicativos da Web moderna (que estão se tornando tão robusto como aplicativos de desktop - e muitas vezes mais inteligentes), mas com a ampla adoção de bibliotecas JavaScript, "clássico" sites estão se tornando mais robusto e interativo, também. Uma forma de tornar os sítios Web mais ágil é através da "navegação keypress", que não tem sido amplamente adotada até agora. Mas ultimamente temos observado mais projetos de execução com sucesso. A definição mais popular para a navegação seja em sites de fotos como o Flickr ou FFFFOUND.

A ideia geral é dar aos usuários os atalhos de teclado que ajudam a executar tarefas tediosas, como navegar entre os posts do blog, movendo-se através de imagens em uma apresentação de slides, mudando a visão atual (por exemplo, a partir de uma grade horizontal para vertical) gosto de artigos, e navegar entre as seções de um website.Keypress navegação é comum em projetos baseados em Flash, mas agora estamos vendo que se aplicava a projetos baseados em CSS, também. Google Reader é um excelente exemplo de navegação keypress avançados, mas outros sites têm boas implementações, também.

Fazem Apps
Um par de meses atrás, eles fazem Apps começou a oferecer aos usuários a navegação pelo teclado liso e avançado como uma alternativa para a rolagem clássico. Usuários podem alternar entre os modos usando um menu drop-down na barra de navegação principal da página. Em "modo de navegação do teclado", os usuários utilizassem as setas do teclado para navegar entre os blocos de conteúdo, o "Retorno" chave acionou a visão detalhada e "Escape" retornou para a página principal. Por alguma razão, esta navegação não está disponível por mais tempo.

Fonte da imagem

Mad-ar.ch
site Marc Anton Dahmen é baseado em Flash, e sua navegação é bastante avançado: os usuários podem saltar para o formulário de contato com "c", imagens de escala com "-" e "+", e, em seguida, navegar e classificar imagens e rolar texto vertical teclas de seta.

Fonte da imagem

9GAG
9GAG é uma imagem social bookmarking site. Os usuários podem navegar para a imagem seguinte e anterior, através de "j" e "k", respectivamente. A imagem atual pode ser votado até usando o "l" (o amor): não necessárias de rolagem do mouse. Neste caso, um atalho para a exibição de grade seria útil também.

FFFFOUND!
Uma das primeira imagem social bookmarking sites, FFFFOUND oferece atalhos para ir para o topo da página ("h"), alterar a exibição das imagens ("v"), ver imagens ("k" e "j") e pular para a próxima página ("l").

Feta
Contudo um outro site baseado em Flash que permite que você use as teclas de seta para a esquerda e direita para percorrer os itens de uma seção, a tecla para baixo para selecionar a tecla para cima e para voltar.

NY Times: Times Skimmer
A página do New York Times 'visão geral tem muito avançados de navegação keypress. Os usuários podem usar as setas para navegar seções, zoom em usar "Shift", voltar ao topo com "t", atualizar a seção atual com o "r" e selecionar usando artigo "a" e as setas.Aprender as chaves é um pouco demorado, mas uma vez que você tem deles, ao navegar na página é muito mais fácil.

Pictory
PictoryMag, uma revista dedicada a histórias de fotografia, tem também "j" e "k" de navegação para ver as imagens.

Continue lendo >>