Um site nunca é feito. Todo mundo tem trabalhado em um projeto que mudou muito depois que ele lançou que não queria mais em sua carteira. Uma forma de ajudar aqueles que tomam mais de seus projetos é produzir um guia de estilo.
Edward Tufte disse uma vez: "O grande projeto não é democrático, vem de grandes designers. Se o padrão é péssimo, então, desenvolver um outro padrão. "Embora não há nenhuma parada alguns clientes de fazer seu site horrível, criando um guia de estilo, você está efetivamente estabelece regras para quem assumir o lugar de vocês.

Por que um Guia de Estilo?

• Você terá um guia fácil para se referir a quando da entrega do projeto.
• Faz você olhar profissional. Eles saberão que você fez tudo por uma razão
• Você mantém o controle do projeto. Quando alguém faz algo terrível, você pode encaminhá-las ao documento.
• Você evita o projeto barateamento mensagem e branding.
• Força você a definir e aprimorar o seu estilo, para fazer um projeto mais coeso.

Orientações Branding: O que incluir?

Visão estratégica da marca

Isto deve ser curto e doce. Em tão poucas palavras quanto possível, tornar clara a visão para este projeto e qualquer palavra-chave as pessoas devem ter em mente ao projetar. A maioria das pessoas provavelmente vai virar direto para as páginas de imagem, mas podem ler algumas frases aqui.
Kew utiliza a fotografia forte em sua "marca essência" da mensagem, com alguns parágrafos que tanto inspiram e definem a marca. Mesmo se você ler apenas a primeira frase, você ter uma noção do que está tentando fazer. Enquanto Kew tem um bom número destas páginas mensagem, eles estão interligados com uma bela fotografia que se definir o estilo fotográfico e mensagem principal.

Logos

Para impressão e Web, a maioria das marcas giram em torno do logotipo. Certifique-se de fornecer variações logotipo e esclarecer tamanhos mínimos.
Cunard oferece muitas variações em seus tamanhos mínimos. Porque sua crista pode ser exibido tanto por conta própria, com o nome ou com o slogan, especificando tamanhos mínimos é importante para a legibilidade (por exemplo, se o logotipo com o slogan é muito pequena, ela será ilegível).
Fornecer logos com cores diferentes, e especificar quais as cores são permitidas. Pense Tijolo proporciona aos designers uma série de opções com o seu design. O ponto é permitir a flexibilidade, mantendo a consistência.

Mostrar exemplos de que e O que não fazer

Você é um profissional, e você sabe melhor do que mexer com logos. Mas muitos outros vão tentar e acho que eles fizeram um bom trabalho. Eles são tão errado. Você deve deixar claro o que pode e não pode fazer com um design.
I Love New York tem feito um grande trabalho de definir todas as coisas que você não deve fazer com seu logotipo. Ele também produziu um belo (embora pouco prolixo) documento.

Espaçamento

Muitos não-designers subestimam a necessidade de espaço em branco. Incluir uma referência espaçamento, especialmente para o logotipo. Em vez de especificar polegadas ou centímetros, use uma parte do logotipo (uma letra ou uma forma) para ajustar a folga. Desta forma, se o logotipo é grande ou pequeno, o espaço em torno dela será suficiente.
BlackBerry não só explica sua política de afastamento, mas também usa o capital de B no logo para definir o apuramento.

Cores

Sempre incluem paletas de cores e que as cores devem ser usadas. E incluem formatos para impressão e para Web: CMYK, Pantones (se existirem) e RGB (ou HEX). Incluir sempre uma alternativa para CMYK Pantones, porque às vezes é difícil de correspondência (especialmente quando a impressão Pantone não é possível). Especifique as cores primárias e secundárias e quando e onde usá-los.
Channel 4 mostra todos os seus Web e cores de impressão, e ele exibe as amostras abaixo uma imagem que ajuda a definir a sua paleta de cores.
O Nova Escola é claro sobre as suas cores primárias e define-os tanto para impressão (Pantone e CMYK) e Web (RGB). Seu documento de orientação marca é bonita, também.
Ok, então esta não é uma diretriz da marca tradicional, mas sim uma diretriz identidade pessoal. Aqui Christopher Doyle mostra algumas paletas de cores alternativas. Ele faz um trabalho fantástico de zombar diretrizes de marca; bem vale uma olhada (e rir).

Fontes

Você precisa definir os tipos de letra para usar: tamanhos, altura da linha, espaçamento antes e depois, cores manchete, versus font corpo, etc Certifique-se de incluir alternativas para não-Web Web fontes.
Yale tem sua fonte própria, que proporciona aos seus designers.
Na seção de fonte de seu site, Yale também detalha quando as fontes devem ser usados. Tem uma seção de fonte específica Web, detalhando quais fontes usar lá.

Layouts e Grids

Através da criação de modelos e orientações para as redes, você incentivar as melhores práticas e promover a consistência. Na Web, preparando alguns modelos genéricos podem conter excesso de criatividade com o layout.
Para o seu site, o Barbican criou blocos de construção que sejam flexíveis e ordenou-o que significa que é provável que fique em uma grade.

Tom de voz

Um enorme componente da personalidade de uma marca é a cópia, e definindo o tom é uma ótima maneira de manter uma marca consistente. Quando várias pessoas estão escrevendo a cópia, a marca pode começar a soar como ele tem múltiplas personalidades.
easyJet tem uma personalidade bem definida, tanto verbal e escrita, e dá exemplos para ambos.

Cópia Escrevendo-Guia

Para aqueles que necessitam de clientes para escrever sua própria cópia, mas querem manter a coerência, um guia de estilo cópia escrita pode ser útil. Cópia escrita é uma daquelas coisas que a maioria das pessoas subconscientemente registo. Ao ler, o cérebro procura automaticamente para a consistência e padrões, e os pobres cópia escrita pode arruinar o fluxo de leitura.
CAN quer seus formatos de número para a mesma aparência. Em outra página, ele define que as variantes de ortografia usar, lembra as pessoas de erros comuns e muito mais.

Imagens

Muitos designers criaram um tom particular nas suas fotografias e imagens. Mostrar exemplos de seus clientes, e explicar por que eles são boas escolhas. Mostrá-los no contexto de seu projeto, e explicar por que eles foram escolhidos para esse contexto.
Zopa tem feito um trabalho fantástico de fazer seu estilo ilustrado claro. Seu guia de estilo online é muito bom, e oferece dicas sobre como construir páginas em torno de suas ilustrações na folha de estilo online.

Bring It All Together

Mostrar alguns exemplos do que o olhar da fotografia, logótipo e texto juntos e como o formato preferido.
Skype tem feito um trabalho fantástico de mostrar como ele quiser designers de usar suas ilustrações e fotografia. Tem exemplos de diferenças sutis entre o uso de boas e más. O guia todo é bonito e bem vale uma olhada.

Orientações Web: O que incluir?

Muitas pessoas criam diretrizes de marca, mas se esqueça de incluir guias de estilo importante para a web. Assim como diretrizes de marca, diretrizes Web manter tudo consistente, a partir de estilos de botão para a estrutura de navegação.

Hierarquia botão

Que você cuidadosamente decidido que todos os botões são para e meticulosamente definidos seus estados. Infelizmente, o designer in-house não aplicou o seu hover estados ou criou as suas próprias, e eles parecem terríveis.
Criar uma página que mostra o que todos os links fazer (incluindo os botões), o comportamento adequado de cada um e quando usá-los (com exemplos de uso apropriado). Se um botão é dominante, deixam claro o número máximo de vezes que ele deve ser usado por página (geralmente uma vez no máximo). Definir o hover, estados deficientes e visitado por todos os botões.
Gumtree tem trabalhado arduamente para definir todos os estados do botão, especialmente botões personalizados (por exemplo, Publique um anúncio tem um sinal + na frente dele). Estes foram definidos para o redesenho Gumtree, que agora é ao vivo.

Ícones

Definindo o tamanho e espaçamento e onde usar ícones é outra ótima maneira de promover a coerência. Se os ícones só deve ser usado com moderação, deixar isso claro.
Aqui, o ZURB agência define tamanhos ícone e quando usá-los, e oferece aos clientes uma fonte on-line a partir do qual a baixá-los. ZURB também define emblemas e explica o seu propósito. Ele acredita que suas diretrizes são mais compartilhados online.

Navegação (gravado In / Out States)

Na Web, a navegação consistente de bom pode fazer ou quebrar um website. Novas páginas são muitas vezes adicionados a um site depois da designer é feito com ele. Você deixou algum espaço para isso? Fazendo coisas como deixar as pessoas sabem o que fazer com novos itens de navegação e mostrando registrados nos estados para fazer um site mais limpo.
Esta é uma das diretrizes mais linda que eu já vi. BBC mostra o que fazer com os nomes de usuário de comprimento, quanto tudo deve ter espaço e muito mais.

Básicos Diretrizes para Codificação

Não há nenhuma maneira de fazer alguém código como você, mas você pode oferecer aos outros diretrizes básicas que irão minimizar os danos, tais como:

• Nomeação CSS convenções de classe
  Eles devem usar .camelCase ou .words-with-dashes ?
• JavaScript integração
  Você está usando jQuery? MooTools? Como deve ser integrado JavaScript novo?
• Styling forma
  Incluir o código, os estados de erro e mais, para que eles entendem o que você espera convenções de estilo.
• Doc tipo e requisitos de validação
  Você permite que certos itens inválidos? Você espera que o CSS e HTML para validar?
• Estrutura de diretórios
  Tornar claro como você organizou isso.
• Normas de acessibilidade
  As pessoas deveriam incluir alt tags? É a substituição imagem usada para fontes fora do padrão?
• Métodos de teste
  Qual padrão deve testar com eles? Você tem encenação e websites de produção?
• Controle de versão
  Qual sistema você está usando? Como eles devem verificar no novo código?

Como Formatar

Algumas diretrizes de marca foram transformados em belos livros:
Este belo exemplo , que foi projetado para ir com um redesign da marca, mostra o quão diretrizes de marca bonita pode ser.
Mas isso requer um orçamento substancial e uma reimpressão de vez em quando. Para a maioria das empresas com orçamentos apertados, isso não é prático. Na Web, especialmente, o conteúdo é constantemente refinado e estilos para os elementos não são imutáveis.
Aqui estão algumas práticas boas para formatar as diretrizes:

• Incluir uma capa
  Isto deve incluir um exemplo de melhores práticas para o logotipo.
• Torná-la bonita
  Mesmo que não será impresso como um livro, você ainda pode certificar-se as diretrizes da marca apelar para o telespectador. Afinal, você está tentando inspirá-los a usar seus projetos para os mais altos padrões!
• Incluir detalhes de contato
  Para quando tiverem perguntas, de modo que você pode evitar decisões erradas sejam feitas.
• Torná-lo fácil de acessar e abrir
  Geralmente isso significa colocá-lo on-line ou em formato PDF. Não torná-lo muito grande; imagens use com moderação.
• Torná-lo para impressão
  Para as empresas internacionais, especialmente, manter grandes margens para que o documento pode ser impresso em ambos os A4 e tamanhos Carta EUA. Se for online, certifique-se de suas folhas de estilo de impressão processar o documento como esperado. Não faça um texto branco sobre um fundo preto, ou: você não deseja que o cliente tem que comprar um novo cartucho de tinta cada vez que imprimir uma cópia.
• Torná-lo fácil de mudar
  Atualizar, adicionar novas páginas e fazer alterações deve ser fácil, porque vai acontecer!
• Criar uma versão mini
  Faça um pequeno guia prático que tem apenas o básico, além da versão completa. Ambos irão se acostumar em diferentes instâncias.
• Fornecer modelos de impressão, sempre que possível
  Coisas como papel timbrado, cartões de visita e envelopes devem ter seus próprios modelos. Enquanto diretrizes ajudarão as pessoas a colocar as coisas no lugar certo, eles normalmente não irá ajudá-los a obter a resolução direita ou formato de cor.

Comprimento

Lembre-se, as pessoas devem ser capazes de seguir as orientações branding. Um livro de 100 páginas vai envolver ninguém, mas o designer mais diligente. Muitos acreditam que uma visão concisa três páginas é o melhor para o uso diário, com uma mais aprofundada de 20 páginas de documentos para tarefas mais complexas. Menos é mais, geralmente!
A BBC criou um guia de 38 páginas detalhadas. Mas também produziu um cartaz bonito para referência rápida. É uma idéia brilhante, e ele mantém as diretrizes à frente da mente.

Recursos

• O Guia de Estilo Web, 3rd Edition
  Um guia completo para a web.
• Marca corporativa Diretrizes
  A lista de diretrizes de projeto. Alguns são antigos, mas ainda útil.
• Identidade de Marca
  Um grande artigo da revista Computer Arts na construção de sua identidade de marca
• 20 Dicas para Projetar Diretrizes Marca Eficaz , de Saatchi
• O Manual de Identidade Corporativa (Guia de Estilo da Marca)