Guia do designer para trabalhar com guias de estilo e azulejos de estilo
Criando um identidade de marca não é tarefa fácil. Requer um esforço árduo, mas é também uma das tarefas criativas mais recompensadoras. Projetos da Web com freqüência mix de branding com design de interface. Isso pode ser confuso porque há muito o que fazer em ambas as áreas. Guias de estilo e telhas de estilo são ótimos recursos para web designers e, embora pareçam semelhantes, eles realizam duas tarefas diferentes.
Neste post, gostaria de me aprofundar nos dois e abordar os benefícios que você pode obter com esses recursos de criativo. Nem todo mundo precisará (ou gostar) de criar guias de estilo ou de estilo. Mas todo designer deve pelo menos entender o que são e como funcionam.
Guias de estilo para a Web
Eu li várias opiniões sobre guias de estilo. Alguns dizem que estes são modelos digitais, enquanto outros dizem que os guias de estilo baseados em código são os mais úteis..
De qualquer forma, o objetivo de um guia de estilo é o mesmo para a web como qualquer outro projeto. Define padrões consistentes, módulos de interface do usuário e preferências de criativos usado no processo de design. Você pode ser muito específico e estipular medições de pixels perfeitos para determinados elementos, ou você pode ficar solto e oferecer diretrizes com exemplos visuais.
Não existe um único caminho certo para fazer um guia de estilo. A única maneira errada é criar um recurso que simplesmente não pode ser entendido por outros.
O objetivo é criar um ativo que resistir ao teste do tempo. Deveria ser aberto para edições se novos recursos forem criados. Também deve ser acessível para qualquer pessoa que se juntar à equipe para mergulhar diretamente no guia com facilidade.
Um guia de estilo deve ser tão detalhado quanto necessário para o projeto. Geralmente inclui ativos reutilizáveis, como tipografia, botões, amostras de cores, texturas e elementos de página comuns.
Nós cobrimos recentemente ferramentas de guia de estilo de vida que pode ajudá-lo a criar guias de estilo de vida a partir do zero. Esses guias de vida são mais para desenvolvedores frontend, mas podem ser úteis para designers. Você pode ler mais sobre este assunto neste post da Smashing Magazine.
Meu recurso favorito absoluto é StyleGuides.io. Cobre o Noções básicas de guias de estilo para a web, Incluindo exemplos vivos e estudos de caso.
A biblioteca de padrões do MailChimp é um dos melhores exemplos que você pode encontrar no StyleGuides.io. É um guia de estilo ao vivo on-line que define os elementos de grade, tipografia e página do MailChimp.
Quando você cria um guia de estilo para uma empresa da Web, é comum colocar tudo on-line, mas também pode criar guias internos, e mantê-los em uma intranet local ou hospedá-los em particular por trás de uma página de login do usuário. A maneira como você acessa um guia de estilo realmente não importa. Todos eles servem ao mesmo propósito de transmitir cores, padrões e visuais específicos que coincidir com o tema de um projeto da web.
Para saber mais sobre o assunto, confira esses outros posts em guias de estilo:
- Guias de estilo front-end (24ways.org)
- Crie um guia de estilo do site (creativebloq.com)
- Como fazer o guia de estilo de design da Web perfeito (dtelepathy.com)
Ramificação em telhas de estilo
Telhas de estilo são uma besta diferente. Essas telhas são recursos criativos usados na fase inicial do design ao tentar descobrir uma estética específica.
O site Style Tiles foi criado por Samantha Warren e tem tudo o que você precisa saber. Há sim nenhum modelo específico para projetar um bloco de estilo. Mas os exemplos de Samantha usam cabeçalhos e tipos de parágrafos, links, padrões, e possíveis escolhas de cores junto com um logotipo de marca.
Ao trabalhar com azulejos de estilo, seu objetivo final é apresentar 2-3 telhas de estilo diferentes para o cliente ou diretor criativo. Essas telhas são mais detalhado que um mood board, ainda muito menos detalhado do que uma maquete completa.
As telhas devem ser apenas detalhadas o suficiente para dar uma noção do identidade e humor do site. Samantha incentiva usando adjetivos para descrever cada azulejo em detalhes.
Os clientes podem olhe através das telhas diferentes, e selecione suas peças favoritas. este poupa tempo ao projetar, porque o cliente já viu ativos de que gosta, então há menos chance de revisões pesadas.
Aqui está uma ótima citação do site Style Tiles:
Comparar as peças de estilo ao kit de ferramentas de um designer de interiores é uma boa analogia. Você não quer se esforçar em um modelo de pixel perfeito apenas para que o cliente perceba que odeia a maioria das cores e fontes..
Em vez disso, use os blocos de estilo para encontrar um tema comum ou linguagem visual para ser usado em todo o site. Isso pode incluir marca / identidade mas também pode incluir Recursos de interface do usuário, como menus suspensos ou botões de CTA.
Você deve usá-los como ativos entregáveis no início do processo. Depois de concluir um modelo completo, não há mais necessidade de fazer referência ao bloco de estilos. No entanto, no início, as peças de estilo podem ser cruciais para o processo criativo economizando o tempo do designer e iving o cliente muitas opções para escolher.
Se você quiser aprofundar mais em telhas de estilo Confira estas postagens relacionadas.
- Estilo telhas e como eles funcionam
- Telhas de Estilo: Uma Alternativa para Design Completo
- Criando Ladrilhos de Estilo: Uma Abordagem Fácil Para Uma Direção De Projeto
Guias de Estilo vs. Telhas de Estilo
A diferença entre guias de estilo e azulejos de estilo é vaga, mas definida. UMA Guia de estilo é muito mais detalhado e deve ser usado como um guia de referência contínua para a equipe de criação. UMA telha do estilo pode ser usado como moodboard para traçar ideias visualmente para você ou para o cliente. Eles são freqüentemente usados para explorar ideias, e uma vez terminado o projeto, eles não servem muito a um propósito.
As peças de estilo costumam ser muito mais ásperas nas bordas e são usadas unicamente no início do processo criativo. Um guia de estilo deve ser usado ao longo de todo o processo de design e mesmo depois para referência futura para outros designers que possam trabalhar no site.
Ambos têm seus benefícios e desvantagens. Telhas de estilo são rápido e divertido, mas efêmero na natureza. Guias de estilo são minucioso e se comportar como documentação visual, mas eles também requer muito trabalho.
Então qual você deve usar? Em última análise depende do projeto.
Projetos menores como para sites de pequenas empresas funcionam melhor com telhas de estilo. Construir um guia de estilo inteiro para um site de pequenas empresas exigiria muito trabalho e horas faturáveis. Isso provavelmente não vale o custo para a maioria dos clientes.
No entanto, grande projeto como redesenhar o NY Times se beneficiaria tanto de azulejos de estilo e guias de estilo.
Encontrar uma linguagem e humor para um novo projeto é sempre um processo valioso. Isto é o que faz telhas de estilo perfeito para quase todos os cenários.
Você também pode obter sem criar nenhum desses ativos. Alguns designers vão direito de wireframes para maquetes detalhadas. E alguns clientes nem querem um guia de estilo porque não vai ser usado.
Trabalhar em uma base por projeto e decidir o que é melhor para cada um.
Exemplos ao vivo
Vamos embrulhar isso cobrindo exemplos de guias de estilo e azulejos de estilo. Eu encontrei esses designs enquanto navegava no Dribbble e acho que eles exemplificam a qualidade que você deseja em seus próprios guias de estilo ou estilos..
Guias de estilo
Este incrível guia de estilo do Airbnb foi criado por Derek Bradley. É muito simples, mas ilustra claramente o principais padrões, cores e elementos da página ser encontrado no design.
Aqui está um guia de estilo digital muito maior criado pelo designer Naoshad Alam. Este exemplo é muito mais organizado com seções para cores, tipografia, formulários, elementos de interface e outros recursos da interface do usuário.
Guias de estilo mais detalhados colocariam todos esses elementos de design na Web e incluir trechos de código para cada um.
O designer Cupi Wong fez este guia para o AfterShip. Tipografia, botões, opções de cores e elementos de página comuns são cuidadosamente criados e organizados juntos em seções.
Isso também poderia ser portado para a web e construído muito maior como documentação de referência on-line.
O designer de interface do usuário Greg Dlubacz compartilhou seu próprio guia de estilo da interface do usuário para um projeto da Web. Essa coisa é seriamente enorme. A visualização em tela cheia abrange 21.000 pixels de altura!
Absolutamente um dos melhores guias de estilo digital que eu já vi. Isso também pode ser transferido para uma página de documentação on-line para que os membros da equipe façam referência.
Telhas do estilo
O desenhista UI / UX Abdus Salam criou este bloco de estilo para um site de loja de alimentos orgânicos. É muito básico com elementos de design simples, alguns recursos de interface do usuário menores, e um paleta de cores.
O designer Adrian Cantelmi realmente foi detalhado com seu estilo de desinvestimento. Tem cores e tipografia, mas também inclui ilustrações vetoriais.
Esses vetores ajudam a definir a marca, o humor e o esquema geral de cores do site.
O redesenho da World Cup Advisors recebeu seu próprio estilo, com recursos muito básicos. Alguns ícones, algumas opções de cores e alguns designs de botões. Simplicidade é o nome do jogo.
Se você puder ter uma ideia de como o site pode parecer Num relance então você está fazendo certo.
Veja um exemplo divertido de um bloco de estilo rejeitado usado em um projeto de viagem. O designer Brennan Gleason fornece apenas uma pequena amostra da telha, mas você ainda pode sentir o ambiente do site.
Palavras finais
Se você pesquisar pela Web, encontrará muito mais exemplos, dicas e recursos para guias de estilo de construção e telhas de estilo. Mas espero que este artigo possa ser uma introdução sobre ambos e que você seja fluente na compreensão e criação desses recursos de design.
