Estilo 1 - Grungy / Textured (Original)
É um olhar grungy, projeto de textura baseada em um estilo simples, sólido, subjacente. O que vamos fazer é levar esse layout subjacentes e tratá-la como uma coathanger, trocando em diferentes estilos e olhando porque cada um trabalha olhar.
Algumas características de um / Grungy Paper Wikipédia
Em cada estilo há bastante variação, mas aqui estão algumas características de um tipo sujo de olhar:
- Textured Backgrounds
- Distorcidas e fora do estágio Elements
- Tipografia Distressed
- Elementos de Mão-Drawn ou Collaged Design
Alguns grandes exemplos de design Grunge:
Bons artigos sobre Grunge Design
- Os segredos do Grunge Design
- Ultimate Resource for Grunge Design
- Desenhados à mão Estilos em Web Design
Estilo 2 - A Mais No Look
Nosso primeiro passo de design é que pare para trás o nosso olhar completamente e se livrar de qualquer coisa que não é essencial. Queremos fazer isso para que tenhamos um ponto de partida para outros projetos, mas ao longo do caminho vamos estar criando uma espécie de olhar mínima.
Estes são os passos a tomar:
- Remover todas as camadas de fundo, deixando apenas uma reta de fundo branco.
- Swap nosso elemento separador grungy para uma linha de 1px cinzento simples
- Livrar-se de mão puxado elementos, a marca d'água, o canto do papel virou no canto superior direito
- Remover todos os elementos de cor, descoloridas e substitui-los com as versões preto e cinza
- Troque as nossas fontes para fora para Arial claro para a cópia de corpo e Helvetica para os títulos
Aqui está a nossa versão mínima:
De todos os olhares que vamos fazer hoje, este é o menos adequado para esse esquema - em especial para a área de guias.Ainda é uma aproximação OK ...
Algumas características de um mínimo Limpo, A
Em cada estilo há bastante variação, mas aqui estão algumas características de um tipo mínimo de olhar:
- Lots of Space
- Simple, clean (e muitas vezes grande) tipografia
- Precise Alignment
- Grande Fotografia (eu não poderia realmente mostrar isso neste projeto em particular)
Alguns grandes exemplos de Minimal Design:
Artigos sobre No Good Design
Estilo 3 - Metallic Look
Tomando o mínimo olhar que acabamos de criar, podemos agora acrescentar algum estilo para trás dentro Desta vez, queremos fazer uma espécie metálica do olhar. Para isso precisamos de algumas cinzas leves, e estas olhar especialmente impressionante em um fundo escuro.
Estes são os passos a tomar:
- Mude o fundo a um fundo mais escuro - Aqui eu tenho três painéis, um escuro, um isqueiro, então um mais escuro para o rodapé
- Alterar a área com guias lineares para um cinza claro a cinza gradiente ligeiramente mais escuras.Então, em cima do que dar-lhe um brilho gradiente radial no canto superior esquerdo.
- Mudar nossas fontes para um tipo de letra elegante e simples - Eu usei Gotham Light - e dar-lhe um estilo de camada (veja abaixo)
- Alterar nossos elementos de separador para 2px chanfros (veja abaixo)
- Mude as setas Ver Projetos para ser mais como elementos incorporados, utilizando-se uma sombra por trás da amostra de trabalho para dar uma ilusão tridimensional.
Aqui está a nossa versão metálicos:
E é aqui algumas notas:
Algumas características de um aspecto metálico
Em cada estilo há bastante variação, mas aqui estão algumas características de uma espécie metálica do olhar:
- Sutil Metallic Gradients
- Elementos Embedded
- A "Física" Look (chanfros, sombras, etc)
Alguns grandes exemplos de Minimal Design:
Bons artigos sobre Metallic Efeitos
Estilo 4 - Resumo + Transparência
Um olhar que é sempre popular é usar um fundo abstrato, alguma transparência e alguns tipografia super clean. Então isso é que vamos fazer a seguir!
Então, começando novamente a partir do design minimalista:
- Adicionar uma espécie de fundo abstrato
- Alterar a área tabulado para ser um preto transparente, alterar as guias de fundo para ser uma versão mais leve da transparência
- Mude as fontes em torno de algo moderno e limpo looking - Eu usei Chalé
- Alterar a cor para combinar com o fundo
Aqui está a nossa versão do resumo:
E aqui estão algumas notas sobre o projeto:
Algumas características de um Resumo / Transparente Wikipédia
Em cada estilo há bastante variação, mas aqui estão algumas características de um olhar este:
- Tipografia elegante e simples
- Grande, imagem de fundo visual
- Áreas Semi-Transparent Conteúdo
Alguns grandes exemplos de um Resumo / Transparente Design:
Bons artigos sobre Abstract / Transparência Looks
- Criar um lustroso, High-End Web Design from Scratch
- Getting Creative com transparência em Web Design
Estilo 5 - Web 2.0!
Nossa última parada estilo está na terra cliche'd da Web 2.0 do projeto. Devo admitir que eu não estou realmente certo o que web2 design realmente é, mas eu tentei fazer este tipo de versão amigável e acessível - o que acho que é a principal característica do estilo.
Começar de novo com o design minimalista:
- Alterar o fundo para um gradiente de desvanecimento branco - sempre procurar um popular com a Web 2.0
- Pegue uma paleta de cores amigável - Eu usei brilhante, luz azul, amarelo, cinza marrom escuro / e uma mancha de vermelho
- Adicionar alguns ícones - Eu usei o livre Láctea Icon definir um belíssimo conjunto de IconEden
Aqui está a nossa versão web 2.0:
E aqui estão algumas notas!
Algumas características de um Web 2.0 Look
Em cada estilo há bastante variação, mas aqui estão algumas características de um web 2.0 tipo de olhar:
- Big, simples e amigável
- Uso de Ilustração ou Ícones
- Bright Colour Palette
Alguns grandes exemplos de Web 2.0 Design:
Bons artigos sobre a Web 2.0 Design
- Análise da Web 2.0 Design & Layout Tendências - Parte 1: limpo, colorido e dividido horizontalmente
- 99 Recursos de Web 2.0 Design
Cinco Olhares, One Layout - Que Isso serve para mostrar
Portanto, todos estão aqui, você pode clicar na imagem abaixo para vê-las em tamanho maior. Também se você for um membro Plus, você pode pegar todos os cinco arquivos PSD da área Plus.
Então, vamos ser honestos, os cinco layouts não são necessariamente particularmente bons exemplos de seus respectivos estilos. Meu objetivo e neste tutorial é mostrar como você pode dar um design um certo olhar ou estilo, seguindo algumas pistas visuais. Você deve ser capaz de ver que você pode vestir a mesma disposição de diferentes maneiras.
Para realmente produzir um grande exemplo de um certo estilo de design, você provavelmente alterar o layout, mais especificamente, para atender esse estilo. E, claro, eles todos precisam de muito mais tempo do que eu tinha 
Ainda espero que esta troca de estilos ilustra como você pode começar a olhar para web designs para aprender estilos de design diferente.
Ainda espero que esta troca de estilos ilustra como você pode começar a olhar para web designs para aprender estilos de design diferente.Aprender uma biblioteca de Web Design Estilos
Em nosso artigo anterior - 8 idéias, técnicas e truques para seu Web Design Toolkit, eu mencionei que ele é uma boa idéia ter uma biblioteca de estilos para desenhar.
Quando você está desenhando um branco quando se inicia um novo projeto, que por vezes pode ser bom só para cair para trás de uma escolha de estilo pré-definido e depois deixar que o guiam. Inevitavelmente você vai acabar com algo totalmente diferente de tudo o que já projetado antes, e ele vai pelo menos ajudar a começar. Mas ter muito cuidado ao usar o estilo errado só porque ele parece legal, e não porque é conveniente para o cliente / mensagem / conteúdo. O único antídoto para fazer isso é conhecer e ter um monte de estilos diferentes do projeto.
Neste artigo temos uma breve olhada em cinco olhares ou estilos, e há milhões de estilos, subestilos, combinações, adaptações e olha que só desafiar estilo todos juntos.
Visual Learning
A única maneira real para aprender estilos de design é de olhar para elas. Agora não há procura e, em seguida, não há quem!Uma pessoa normal normalmente irá olhar para um site, cartaz ou algum outro projeto e só ver o conteúdo, a mensagem e talvez a sensação do design. Como designer, você precisa de olhar tudo de uma forma analítica, veja por que um projeto tem uma certa sensação, que mensagem o desenho em si está a dar, o que fontes têm sido utilizados, quais os elementos visuais e técnicas do designer usou, como Foi combinado e como ele foi arranjado.
Você deve sempre estar olhando para projeto - não apenas em linha, mas em toda parte - porque os estilos de design não são de forma limitada a sites. Cartazes, anúncios em televisão, panfletos e qualquer lugar onde haja projeto, há uma oportunidade para aprender.
Estilos ao seu alcance, mas expresso em Your Own Voice
Quanto mais olhar e aprender, mais você terá no seu comando. Quando você sentar para desenhar um novo projeto, você será capaz de levantar novas idéias visuais, mesmo quando confrontados com uma tela em branco. Quando você está determinado materiais de design ou de marcas, coisas como grafismos, logotipos e mensagens acionará escolhas estilísticas como pistas para um mistério.
Quando você faz uso de estilos que você tenha visto antes, você deve sempre se esforçar para deixar o seu próprio projeto de voz ser ouvida. Give it spin seu próprio país, você está própria mistura especial ou olhar, de modo que sua voz seja ouvida design. E sempre, sempre, certifique-se de aplicar o projeto que se adapta e reforça a mensagem - não cair na armadilha de só pensar na estética.
Lembre-se de forma segue a função. O estilo e as opções estéticas que você faz estão lá para ajudar o site cumpriu a sua função