25 Exemplos de Web 2.0 e Regras de Design Tradicionais se Reunindo

No amplo escopo do mundo do design, o termo “Web 2.0” é relativamente novo.

Com ele, vem seu próprio conjunto de padrões, alguns fortes, outros não tão fortes, já que a Web 2.0 em si é uma definição muito instável e em constante evolução dos padrões de design .

Inúmeros exemplos de sites da Web 2.0 quebraram as regras do que já foi considerado um design forte.

Por outro lado, em muitos casos, a Web 2.0 fortaleceu erros comuns de design; Ele coloca um foco na usabilidade, interface e legibilidade .

Na melhor das hipóteses, a Web 2.0 se iguala às regras tradicionais de design praticadas há séculos, embora seja, sem dúvida, um reflexo de nossa sociedade em seu atual estado de agitação.

Aqui está uma coleção de 25 sites mostrando como a Web 2.0 e as práticas tradicionais de design podem se unir para formar sites verdadeiramente impressionantes.

1. Pixel Matrix Design

Josh Pyles é um cara legal, e ele também é um designer fantástico e disciplinado. Sua mais recente iteração de Pixel Matrix é impressionante e faz um uso especialmente bom das cores e de um sistema de grade forte. Navegue por seu portfólio e você verá que ele carrega essa prática em seu trabalho de cliente.

Se você verificar a página "Sobre" (anotando o sistema de guias legal em reprodução), verá que Josh incluiu uma boa foto do espaço de trabalho dele.

Abaixo dessa foto, há um ótimo equilíbrio das fontes com estilo da Web 2.0, que estabelecem uma hierarquia de informações extremamente forte. Ele mantém sua própria bio pequena e dobrada na barra lateral e equilibra o texto maior da área de conteúdo com um tipo menor e sofisticado na barra lateral.

Aspectos Tradicionais:

Ótimo sistema de grade.
Teoria Maravilhosa da Cor
Hierarquia forte de informação

Aprimoramentos da Web 2.0:

Gradientes bonitos.
Detalhes sutis.
Opções de fonte grandes e altamente legíveis.
Um grande número de maneiras de ficar conectado.
Até o formulário de contato tem uma boa implementação de cantos arredondados!

2. MuttInk

Ultimamente a textura parece ser a melhor coisa desde cantos arredondados, e embora o site da MuttInk possa não ser classificado como uma típica Web 2.0, basta uma olhada para saber que Jeremy Holmes (o homem por trás do trabalho) é um incrível designer e artista gráfico. .

Uma atenção aos detalhes, textura e uma identidade forte coloca isso como um favorito pessoal.

Mesmo que os dias de cores excessivamente mudas estejam um pouco atrás de nós (o que é uma coisa boa, na minha opinião), eu ainda sou fã de tons sutis e terrosos que são complementados com toques brilhantes, e MuttInk tirou isso brilhantemente .

A turquesa sobre o bege realmente aparece, e mantém a sensação de “mesa de desenho” que permeia o site. E embora o tipo esteja no lado minúsculo, e um pouco difícil de ler em alguns pontos, ele ainda fica ótimo na página.

Aspectos Tradicionais:

Extremamente atenção aos detalhes.
Bom tipo (embora talvez pequeno demais).
Grande identidade de marca
Grande uso do espaço, particularmente nas páginas do portfólio.

Aprimoramentos da Web 2.0:

Ótimo uso de textura.
Grandes imagens profissionais mostrando o trabalho.
Acesso rápido ao link social.

3. 45 Royale

O portfólio de mais de 45 Royale não só mostra uma incrível variedade de trabalho, mas mostra que a equipe por trás do site entende o bom uso de vários padrões de design. É uma mistura fantástica de fallbacks da Web 2.0, mas tem uma base sólida em padrões de design tradicionais (e basta olhar para essas cores!).

Em particular, o 45 Royale tem um dos melhores sistemas de grade que eu vi ultimamente, e as imagens que eles escolheram para mostrar o trabalho realmente combinam bem com o cabeçalho colorido fluorescente acima.

Ver a teoria das cores e a malha de organização com uma harmonia tão grande é sempre um prazer, e eles complementam tudo com uma mistura altamente sofisticada de fontes, grandes e pequenas.

Cores brilhantes em torno de uma paleta secundária de cinza, branco e preto? Impressionante.

Aspectos Tradicionais:

Um dos melhores exemplos de um sistema de grade.
Bastante espaço em branco e espaço para respirar.
Escolha de cores brilhantes.
Bom fluxo de informação.

Aprimoramentos da Web 2.0:

As cores simplesmente cantam ... tanto que eu listei em ambas as categorias.
O tipo jumbo é altamente legível, embora de bom gosto.
Ótimo uso de ilustração e gráficos.
Uma infinidade de projetos é bem organizada e bem apresentada.

4. Pitada de Zoom

Eu sou um otário para uma ótima ilustração, especialmente quando é apresentado em um maravilhoso exemplo de espaço em branco. Eu amo tanto este site que simplesmente clicar no portfólio é uma explosão. Ótimo espaço em branco, ótimo sistema de grade e uso maravilhoso de JavaScript; essas coisas têm um jeito de falar comigo (sim, estou bastante na frente de um computador).

O importante a ter em mente quando nos deparamos com as muitas tecnologias disponíveis hoje em dia, especialmente os desvios e truques que o JavaScript possibilita, é afiná-los e dominá-los.

Lembre-se do final dos anos noventa, quando o Flash era toda a raiva? Lembre-se de quão cansado do Flash todos nós nos divertimos depois? Bons padrões da Web 2.0 são tanto sobre disciplina quanto sobre design, e a Pinch Zoom está sob controle.

Eles polvilham seu site com a bondade extravagante, mantendo-o enxuto e divertido, com praticamente zero de tempo esperando pelas imagens.

Aspectos Tradicionais:

Outro ótimo sistema de grade (vendo um padrão aqui?).
Preto sobre branco nunca parece envelhecer.
Bom equilíbrio de fontes e manchetes. (A fonte pequena, embora legível, talvez tenha um tamanho de ponto ou dois maiores).

Aprimoramentos da Web 2.0:

O controle deslizante do portfólio JavaScript é divertido e eficaz.
Interface é minimalista e direta.
O uso variado de ilustração é um ótimo toque.
Abrange a tecnologia atual da web sem se tornar pesado.
Soluções exclusivas para o layout da página (confira o mega-dropdown ao clicar na guia info. Há praticamente um site inteiro escondido lá em cima!).

5. Cameron Moll

Eu sempre fui um fã do trabalho de Cameron, e como você pode dizer, ele tende a permanecer no lado tradicional do campo de jogo do design. Apesar de seu site de blog tende a cair no lado tradicional de design sofisticado e fontes pequenas, não há como negar a elegância e a beleza de sua página de portfólio, que é um equilíbrio fantástico entre o novo e o tradicional.

As cores são vibrantes e as opções de fonte combinam com a sensação geral, mas, novamente, o tipo pode ficar bem pequeno em alguns lugares, o que é um não-não da Web 2.0. Mas quem sou eu para nit-pick? Cameron encontrou grande sucesso e é o homem por trás do Authenticjobs.com, um ótimo recurso para designers (e um que ajudou a pagar minhas contas).

Aspectos Tradicionais:

Conteúdo bem estruturado.
Variações sutis de cores são um toque agradável.
Tipo parece elegante, embora tende a andar no lado pequeno do espectro. Mesmo assim, é legível e bonito.

Aprimoramentos da Web 2.0:

Muito bom uso de textura.
Portfólio contém imagens agradáveis do trabalho, que são muito simples e fáceis de navegar.

6. Tema "Fluido" do Metalab no Tumblr

O único tema do Tumblr para fazer a lista é intitulado "Fluido", pelo design da Metalab. Ele fez a lista por uma simples razão: é um ótimo exemplo da Web 2.0 no seu melhor. Simples, limpo e brilhante com cor.

Pode-se considerar um pouco de um lado nesta comparação (é um catch-all da Web 2.0). Isso porque a Metalab é conhecida por estabelecer padrões na arena da Web 2.0, e este site é uma prova disso. A Metalab Design mantém as regras básicas em mente, no entanto, e mantém a estrutura simples e bem organizada.

Transparência e gráficos sobrepostos são uma das tendências mais recentes da Web 2.0. Eles dão ao site uma grande profundidade e imprimem uma aparência de ponta, quase futurista. O “Fluid” da Metalab abraçou esse conceito e, melhor ainda, o entregou às massas como um tema para download.

Aspectos Tradicionais:

Estrutura simples e eficaz.
Destaca-se nas massas de temas do Tumblr.
Esquema de cores contemporâneas (embora simples).

Aprimoramentos da Web 2.0:

Fotografia grande e vibrante.
Ups the ante para o design Web 2.0 de ponta
Fontes e cabeçalhos altamente legíveis.
O uso de cantos arredondados e gradientes é levado ao extremo, mas eles são apresentados em uma solução moderna e divertida da Web 2.0.
Os ícones são uma ótima maneira minimalista de navegar pelas opções de cada postagem.
Não nos esqueçamos dos fundos transparentes!

7. Viget

Oh garoto. Esse site. Isso me pega o tempo todo. Claro que sou um softy para textura, mas esse designer também capturou a sutileza da boa teoria e hierarquia de cores.

Quero dizer, olha só esses retratos perto do fundo! Eles são atraentes, mas não competem com o que poderia ser um fluxo de projeto muito complicado. Não vamos esquecer as grandes escolhas de fontes e a sensação de aquarela. A cereja no topo do bolo é que, embora o site seja pesado em imagens, ele carrega em um piscar de olhos!

Outro aspecto interessante deste site é que os designers querem compartilhar muitas informações com sua comunidade, e não são informações que os vendem como designers, mas informações que eles acham que os usuários típicos podem achar valiosos.

Eles permitem que você se aprofunde sem encher suas necessidades na garganta, o que é sempre uma prática bem-vinda.

Aspectos Tradicionais:

Conteúdo bem estruturado.
Bela cor e tipo.
Embora as fontes estejam no lado pequeno, o conteúdo principal ainda é fácil de ler.
A grande obra de arte funde-se sem emenda no design (retratos frescos).

Aprimoramentos da Web 2.0:

O tema da aguarela é extremamente contemporâneo e, apesar de ser pesado na imagem, foi projetado para ser enxuto e simples.
O conteúdo da barra lateral é bem organizado e orientado por conteúdo.
Solução exclusiva para a caixa “Speech Bubble” na barra lateral.
Muitas informações compartilhadas e orientadas por conteúdo.

8. FeelWire

Outro exemplo incrível de grande espaço em branco é o Feelwire. O tipo preto nos fundos brancos, com grandes tons de cinza no meio, parece nunca envelhecer. Adicione alguns ícones coloridos e você terá um site simples, porém eficaz. É tudo sobre simplicidade aqui (diabos, eles só têm uma página!).

Os ícones estilizados da Web 2.0 servem de peça central para esta página, e eles percorrem um longo caminho para manter o site unido. Eles também evitam que o site seja invadido por texto e dão ao usuário algo para ser curioso.

Ao rolar esses ícones, eu fiquei muito feliz com o que encontrei: um status de foco muito simples que me deu a informação que eu estava procurando, fazendo isso com o sempre popular "Bubble Ball" da Web 2.0. Um ótimo toque.

A última coisa: embora eu goste dos links vermelhos, que também saem da página e interagem bem com os ícones, acho que eles devem tornar o link de contato um pouco mais perceptível. A partir de agora está um pouco demais no conteúdo, e eu realmente tive que procurar uma maneira de entrar em contato com esses desenvolvedores talentosos. Apenas dizendo'.

Aspectos Tradicionais:

Curto, doce e direto ao ponto: um site de uma única página.
Espaço em branco!
Opções de fontes sutis e de bom gosto.
Bom layout básico.

Aprimoramentos da Web 2.0:

Os ícones brilhantes saem da página, de um jeito bom.
Coberturas muito legais nos ícones mantêm o site organizado, mas fornecem as informações que você precisa de uma maneira divertida.
Avatares agradáveis adicionam um elemento humano.

9. Agami Criativo

Ok, talvez seja apenas uma coisa pessoal com esses sites altamente texturizados, mas o que o Agami Creative faz, faz muito bem. É outro exemplo contemporâneo de como os sites com imagem pesada podem se tornar uma solução perfeitamente aceitável em um dia de conexões de alta velocidade.

A peça central deste site é definitivamente o cabeçalho da aquarela, que serve como um cenário perfeito para o design do logotipo. Ele também abriga a navegação, colocando apenas ênfase suficiente em sua localização, mas sem insultar o usuário (porque a maioria das pessoas sabe onde encontrar a navegação nos dias de hoje).

Clicando sobre a página do portfólio, você notará um layout com a quantidade perfeita de espaço para respirar e um sistema de grade forte.

Imagens simples contribuem para o trabalho e atraem seus olhos para os projetos individuais, como passar pelo buraco da fechadura até o resultado final. Tudo isso é embalado com uma fonte serif sofisticada para os cabeçalhos e uma fonte sem serifa altamente legível para o texto do corpo.

Aspectos Tradicionais:

Uso mais bonito da teoria das cores.
Ótima obra de arte.
Combinação interessante de tipo / fontes.
O logotipo artístico desenhado à mão tem uma sensação que é transmitida por todo o site.

Aprimoramentos da Web 2.0:

A navegação de grandes dimensões facilita a movimentação pelo site.
Eles tornam muito fácil entrar em contato.
O uso de avatares é uma boa idéia (embora, honestamente, eu ache que eles poderiam ter feito melhor com eles. Não tenho certeza de como o visual do anime deve interagir com esse site além da influência asiática?).
Amo a textura!

10. Adit Shukla

Outro site com uma ótima abordagem ilustrativa, o Designer Adit Shukla também sabe como montar um ótimo esquema de cores, e até joga com uma boa solução para a barra lateral.

Por alguma razão estranha, muitas barras laterais são desleixadas e negligenciadas, como se os projetistas tivessem permissão para ignorar as regras do bom design ao jogar juntas a barra lateral de um site. Não com este site.

Embora o conteúdo seja mínimo (mesmo um pouco escasso), não se pode deixar de amar a criatividade envolvida, especialmente no cabeçalho ilustrativo, que acrescenta uma profundidade bem necessária de profundidade. As guias de navegação acima são um toque agradável também.

Aspectos Tradicionais:

Cores vibrantes.
Soluções criativas para elementos comuns, como a barra lateral e o cabeçalho.
Ilustração adiciona muita profundidade.

Aprimoramentos da Web 2.0:

Layout simples com uma ilustração de cabeçalho bem desenvolvida, que também abriga a navegação.
Tipo grande é efetivo.
Múltiplas maneiras de navegar pelo site (embora, honestamente, eu não esteja convencido de que isso seja uma coisa boa).
Guias transparentes são um toque agradável.

12. colher de creme

A primeira coisa que você notará sobre o Cream Scoop é a ousada seleção de cores usadas em todo o site. Eles não têm medo de levar as cores a um patamar da norma, e o resultado é tão refrescante quanto diferente.

Embora as cores sejam ousadas, há também misturas sutis de tipo forte e gradientes que são salpicados em todo o site. Observe como o gradiente de fundo se ilumina no topo, como a borda de um holofote, para destacar a navegação mínima. O tipo é bem organizado e equilibrado, com uma sensação distinta da Web 2.0.

Aspectos Tradicionais:

Negrito seleção de cores, mas uma seleção que funciona de maneira surpreendentemente eficaz.
Navegação minimalista que faz o trabalho.
Ótimo uso de ilustração lúdica.
Layout é estruturado, mas divertido.

Aprimoramentos da Web 2.0:

Uso fantástico de um gradiente no fundo.
Azul brilhante realmente chama sua atenção e direciona para as coisas importantes.
Cool uso de avatares na página sobre (quantos anos são esses caras?).
Grandes fontes usadas por toda parte.

13. Carbonica

Carbonica renuncia aos gradientes e brilho da Web 2.0 e vai para uma aparência "remendada" reminiscente de uma página de recados. Grande uso de textura e animação, mas também um muito divertido assumir o tipo desenhado à mão.

Certifique-se de rolar um pouco e confira os ícones, que também se encaixam perfeitamente no tema!

Aspectos Tradicionais:

Estrutura básica está em jogo.
Letras artesanais combinam bem com o tema do site.
A animação é um toque agradável (mas desculpe, o uso do Flash mantém esse ponto fora da categoria da Web 2.0).

Aprimoramentos da Web 2.0:

A textura é ótima.
Sombras adicionam profundidade realista.
Ícones, fotos e ilustrações agradáveis.

14. DSGN + DVLP

Novamente, o esquema geral de cores preto e branco funciona para este site, e eles acentuam essa direção com alguns ícones limpos retirados da bolsa da Web 2.0.

A página inicial é uma espécie de página inicial e tem uma boa combinação de ícones, layout forte e até um pouco de fotografia. Todos esses elementos se unem de maneira sofisticada e conseguem emitir um pouco de energia.

Você notará que as páginas secundárias usam um modelo separado de três colunas para exibir as informações. É tudo muito minimalista, mas isso não é ruim.

Aspectos Tradicionais:

Preto, branco e cinza oferecem uma sensação distinta.
Bom equilíbrio de tipo na página inicial.
O modelo de página secundária de três colunas permite um fluxo consistente de informações depois que você sai da página inicial.

Aprimoramentos da Web 2.0:

Consciência de mídia social está definitivamente em jogo.
Ícones brilhantes espalhados por toda a cor necessária.
Boa mistura de fotografia e ícones.
Ícones gigantes são apresentados nas páginas secundárias.

15. Marchand de Trucs

Então, talvez eu não possa falar a língua, mas isso não significa que o site ainda não está falando comigo ... Ok, essa linha era idiota, mas ainda assim esse site é bem legal. Contém maravilhosas obras de arte e, atrás de tudo, uma ótima base e conteúdo estruturado. Não é muito ruim para o que (eu acho) parece ser uma loja de magia online!

Aspectos Tradicionais:

Intensa atenção aos detalhes.
A teoria da cor está bem em jogo, e é uma paleta muito envolvida nisso.
Bom uso de fontes que seguem o tema geral do site.

Aprimoramentos da Web 2.0:

Uso extremamente agradável de ilustração como um cabeçalho
Ícones relativamente grandes.

16. Paiko

Paiko, embora simples, é um dos meus sites favoritos na lista. Ele aparece como uma mistura dividida de grampos de design tradicionais e aprimoramentos da Web 2.0: bom tipo de todos os tamanhos (incluindo as mega-manchetes da Web 2.0), excelente espaço em branco e, claro, a grade sempre importante que mantém tudo junto.

A opção de adicionar textura no plano de fundo realmente diferencia o site e adiciona outra camada ao design já forte; Ele é tratado com cuidado e não é muito usado como em alguns sites. Essa textura, combinada com o apelo mais sofisticado do site, ajuda muito a fortalecer a identidade de Paiko.

Navegue até a página do portfólio para ver um exemplo de grande espaçamento e estrutura de grade, sem mencionar alguns exemplos divertidos de imagens bem cortadas.

Aspectos Tradicionais:

Estrutura de grade simples, com duas colunas, com espaço para calhas que dá uma sensação agradável e arejada. Esta estrutura é transportada por todo o site, o que lhe confere um fluxo muito consistente.
A sensação do Crafty adiciona um toque agradável, sem ser arrogante.
As variações de fonte e cor são muito sofisticadas.

Aprimoramentos da Web 2.0:

Jumbo-texto!
A manchete é enorme e altamente legível, e joga bem contra o tipo menor abaixo.
Excelentes imagens e layout na página do portfólio.
O uso conservador da textura aumenta a identidade geral.

17. Matt Dempsey

No outro extremo do espectro de texturas, temos um site de Matt Dempsey. Agora, há definitivamente algo como textura demais, e alguns teriam um ponto válido se argumentassem que esse site está longe.

No entanto, eu ainda gosto disso, e os detalhes me conquistaram quando comecei a examinar as informações. Matt não tem medo de quebrar algumas regras que sempre me incomodaram (como manter informações acima da dobra, uma ideia que eu acho que foi inventada em uma mesa-redonda de pessoas que pensam demais sobre marketing. Eu digo isso porque eu já fui uma daquelas pessoas de marketing.).

Quando se trata disso, Matt Dempsey apresenta seu trabalho e seu site de uma maneira ousada e “na sua cara”. E quebrar algumas regras é o que é ser um designer, se as regras são antigas ou novas.

Aspectos Tradicionais:

Acredite ou não, há um sistema de grade simples subjacente à textura.
Distinto e único
Não tem medo de quebrar algumas regras

Aprimoramentos da Web 2.0:

Matt usa uma abordagem obviamente Web 2.0 para suas fontes e logotipo
Bom uso de tecnologia nas páginas internas (o controle deslizante de JavaScript é um toque legal).
Cada bit de informação importante é enorme e fácil de ler.
O portfólio apresenta o trabalho de maneira divertida e de alta tecnologia.

18. Mash Digital

Com o Digital Mash, você pode ver que muitos pensamentos foram incluídos nos itens que eles desejavam incluir no site ou, melhor ainda, os itens que eles escolheram deixar de fora.

Ser capaz de reduzir a gordura é uma prática importante para qualquer designer, e o Digital Mash define o básico e apenas o básico. Abra a página e você saberá em segundos sobre o assunto do autor do site.

O gradiente suave do plano de fundo faz um ótimo trabalho de apresentar o conteúdo de maneira sofisticada. Do tipo limpo ao gráfico da ilustração, o site o mantém simples.

A melhor parte tem que ser quando você se aprofunda no site. Vá para a página de trabalho e você encontrará um portfólio apresentado de uma maneira quase antiquada; as peças individuais parecem estar prontas para serem impressas e amarradas em uma maleta de couro.

No entanto, a apresentação elegante, as gotas e os pequenos detalhes (como os cantos levemente dobrados de cada peça) dão a todos uma visão contemporânea. Combinando o novo e o antigo Tem que amar isto.

Aspectos Tradicionais:

Aparado elementos desnecessários.
As cores vibrantes na página inicial e no cabeçalho das páginas secundárias adicionam um toque vibrante ao plano de fundo cinza.
A hierarquia de informações é forte e o fluxo geral do site também.

Aprimoramentos da Web 2.0:

Incrível apresentação das imagens do portfólio; dropshadows, bordas viradas, e pequenos detalhes realmente trazem este site para um padrão mais elevado.
Bom gradiente no fundo realmente apresenta bem a informação.
Tipo grande e imagens superdimensionadas são amigáveis para os olhos.
Solução de navegação muito legal.

19. Kyan Media

O Kyan Media é outro site que se apóia fortemente no lado da Web 2.0 do espectro. O design da nuvem e a paleta de cores vibrantes e azuis estão diretamente fora do livro, mas é um exemplo extremamente forte do padrão.

O site reproduz isso corretamente e, em letras grandes, informa exatamente o que eles fazem, seguidos de exemplos do trabalho. É uma estratégia de design simples encontrada em inúmeros sites e por boas razões. É rápido e não ameaça um curto período de atenção.

E, como todos os bons exemplos, abrange a tecnologia, assim como as regras tradicionais de design. Tire algum tempo e passe o mouse sobre os exemplos de trabalho. É uma maneira divertida e informativa de apresentar as peças do portfólio em destaque e permite que nós, o usuário, nos aprofundemos mais ou obtenhamos o básico com apenas um olhar.

Aspectos Tradicionais:

Tudo tem uma sensação extremamente sólida.
O layout geral de cada página é forte
A hierarquia informacional é ótima.
Fontes, cabeçalhos e cores de fontes são consistentes por toda parte.

Aprimoramentos da Web 2.0:

Paleta de cores azul brilhante.
Uso divertido de ilustração (quem não gosta de nuvens?).
Fotografia picante.
Boa implementação de tecnologia.
As gotas sutis adicionam profundidade.
Fontes altamente legíveis e cabeçalhos superdimensionados.

20. Rockatee

Bem, diz "Design funcional" no cabeçalho, então é melhor funcionar, certo? Felizmente, este site faz. É outro exemplo de como a textura está se infiltrando no mercado de web design e confirmando a noção de que estamos dentro da era da alta velocidade de navegar na web.

Algo que você pode notar é que o Rockatee tem alguns projetos em exibição na seção de portfólios, então uma solução simplificada estava definitivamente em ordem. Eles fizeram isso com uma série de instantâneos, que mostram a profundidade de seu portfólio prolífico. Faça a si mesmo um favor e confira.

Outra característica da nota é a navegação agradável. Está bem colocado e torna o site fácil de clicar. Eles até o ajudam na página inicial com um grande botão que leva ao portfólio.

Aspectos Tradicionais:

Tudo tem uma sensação extremamente sólida.
O layout geral de cada página é forte.
A teoria da cor é bem explorada e implementada.
Forte atenção aos detalhes.

Aprimoramentos da Web 2.0:

Navegação fantástica.
Grandes botões levam você aos bits importantes.
Cool portfólio "instantâneo" com grandes culturas das obras individuais.
O site mostra aos designers muitos projetos paralelos, mas não os deixa atrapalhar os elementos centrais.
Ótima idéia com a linha do tempo na página "Sobre".

21. Coisas Que São Marrons

Outro dos meus favoritos pessoais é Things That Are Brown. Eles extraem um site extremamente polido que é igual a (ou melhor que) sites criados por grandes agências, mas eles também dão a você uma visão interna das pessoas nos bastidores.

A página sobre contém ótimas fotografias que, apesar de serem profissionais o suficiente, também têm um apelo muito caseiro. Você pode dizer que a equipe fez uma viagem para fora, descobriu um local decente e tirou alguns instantâneos com suas próprias câmeras digitais.

Uma equipe profissional, acessível e amigável é exatamente o tipo de equipe com quem quero trabalhar. Essas pessoas são reais.

Este é um daqueles sites raros que combinam perfeitamente regras de design com ajustes modernos. Seu slogan, "Humbly Awesome", está morto.

Aspectos Tradicionais:

Cor agradável com grandes acentos.
Bom uso de obras de arte que se integra bem.
Sólido e consistente por toda parte.

Aprimoramentos da Web 2.0:

A navegação é limpa e fácil de ler.
Botões agradáveis que não exageram no brilho.
A fotografia é pessoal e adiciona um toque humano ao site.
O portfólio é claro e fácil de navegar, com ótima apresentação do trabalho.
As manchetes são grandes, mas sofisticadas.

22. Andrew Bradshaw

Este é talvez um dos sites mais sofisticados da lista. Andrew tem uma ótima maneira de mesclar textura, tipo, botões e fotografia em um pacote congelado. Ele também mantém a hierarquia em mente, acentuando os aspectos importantes e minimizando as seções que podem não ser de interesse de todos os usuários.

A navegação é um destaque, com cores variadas aparecendo à medida que você passa o mouse sobre as guias; um toque muito elegante.

Também digno de nota é o cabeçalho texturizado e a escolha da fonte forte usada em seu logotipo. Mais uma vez, Andrew combina sutileza e sotaque para criar um belo site que é completo e atraente por toda parte.

Aspectos Tradicionais:

Apelo geral de sofisticação limpa.
Bom uso de elementos de destaque, tanto em cores quanto com tipos.
Como de costume, um sistema de grade forte mantém juntos.
A hierarquia é bem implementada.

Aprimoramentos da Web 2.0:

Um diferente assumir botões.
Uso brilhante de fotografia e apresentação de imagens.
Detalhes impressionantes na navegação.

23. James Lai

Ultimamente tenho uma queda por sites de uma única página, e como você provavelmente já adivinhou, eu também adoro a textura. Digite James Lai, um designer que sabe se apresentar através de um uso sofisticado de tipo, textura e animação.

O que mais recomendo é sua capacidade de manter seu site em uma única página e nos perdoar a página "Tudo Sobre Mim" encontrada em praticamente todos os sites. Embora eu coloque um valor alto no elemento humano, às vezes o trabalho fala por si, e eu não posso culpar um cara por acreditar em seu próprio conjunto de habilidades.

Aspectos Tradicionais:

Solução simples de uma única página.
A animação acrescenta interesse à apresentação (embora tenha atrasado um pouco o site).
Boa atenção aos detalhes.

Aprimoramentos da Web 2.0:

Um tipo enorme na página inicial indica o objetivo exato por trás do site.
Informações de contato são fáceis de encontrar.
Miniaturas legais ajudam os usuários a navegar pelo portfólio.
Uso interessante de textura.

24. Subvert

O subversor foi incluído não apenas por seu layout obviamente funcional, mas também pelo slideshow desvanecido apresentado na página inicial. A apresentação é divertida, mas também informativa e valiosa para clientes em potencial.

A textura de fundo é complementada por detalhes transparentes, incluindo um ótimo sistema de navegação com guias transparentes! O status de foco desta navegação é sutil e mantém a transparência.

Eu costumo navegar diretamente para as páginas de trabalho nesses sites, e o Subvert não decepciona em sua apresentação. A estrutura da grade é forte e fácil de navegar e, ao clicar, o usuário é levado a uma visão expandida do trabalho.

Aspectos Tradicionais:

Ótimo fluxo geral.
Forte apresentação do portfólio na página “Work”.

Aprimoramentos da Web 2.0:

Tipo enorme apresentado em um slideshow desvanecimento.
Guias de navegação transparentes!
Os botões são agradáveis e adicionam um bom contraste aos fundos.
O slideshow do escritório na página "Empresa" é um toque agradável.
Abraça a tecnologia.

25. Projeto Pássaro Amarelo

À primeira vista, este site pode parecer um pouco desalinhado ou disperso, mas quanto mais eu olho para ele, e quanto mais navego por suas páginas, mais percebo a força de sua organização. Melhor ainda, o design inspirado no Indie realmente começa a atrair mais a estadia, e a aparência dispersa do site realmente se encaixa no tema.

Se você verificar a galeria de fotos, você verá uma enorme quantidade de fotos amadoras que mais uma vez adicionar ao olhar Indie, enquanto apresentando o produto.

Esse tipo de abordagem subterrânea, que foi popularizada por sites como o threadless.com, imediatamente anexa o visualizador ao produto.

Eles querem fazer parte da multidão e não se sentir como se alguém estivesse tentando vender alguma coisa para eles. Se isso não é uma filosofia da Web 2.0, não tenho certeza do que é.

Aspectos Tradicionais:

Logo Crafty realmente estabelece a sensação, que é realizada em todo o site.
Embora pareça disperso ou solto no início, percebe-se que esse olhar de “colocar junto” é exatamente o que os designers estavam procurando. Eles tiram a aparência e ainda facilitam a navegação no site.
Abordagem consistente e não tradicional.

Aprimoramentos da Web 2.0:

É mais sobre a filosofia com este. Embora o aspecto social da Web 2.0 esteja em pleno vigor, esse site também é fortalecido por causa de sua abordagem de marketing viral e da grande filantropia subjacente.
Constrói uma comunidade!
Ótimas fotos e navegação fácil também não atrapalham.

No fechamento…

A Web 2.0 é um padrão difícil de definir , pois onde os padrões de design tradicionais são uma coleção rígida de regras e diretrizes (estrutura de grade, teoria de cores, espaçamento entre letras, kerning, rastreamento e assim por diante), Web 2.0, embora contendo padrões semelhantes, é quase mais um modo de vida.

Ele combina filosofia, marketing, tecnologia, facilidade de uso e inúmeros outros aspectos do nosso universo ocupado, com o objetivo final de facilitar as coisas para as massas.

A esse respeito, a Web 2.0 e as regras tradicionais que foram estabelecidas há muito tempo, em última análise, compartilham o mesmo objetivo: organizar o caos e simplificar o complexo .

Hoje em dia, pode ser uma tarefa difícil, por isso precisamos de todas as ferramentas à nossa disposição, sejam elas de ponta ou comprovadas ao longo dos séculos passados.

Escrito exclusivamente para WDD por Josh Sears. Ele é um escritor, ilustrador e designer para uma série de projetos baseados na web. Ele ganha a vida como Lead Web Designer, diretor de criação e co-proprietário de Littlelines.com . Você pode confira seu trabalho aqui ou siga suas atualizações no Twitter .

Como você usa elementos da web 2.0 com design tradicional? Por favor, compartilhe exemplos de seu próprio portfólio ou outros bons exemplos que você pode encontrar.

regras de design compilação de desenhos tradicional web 2.0