10 ilustrações de guia de estilo e design digital de empresas populares como Apple, Google e Starbucks

Se você já se perguntou como os designers da Apple definiram cada aspecto menor no iOS quando o construíram, então você pode estar no lugar certo.

Como a inovação tecnológica está em constante evolução, o web design continua a se tornar mais formalizado. Os designers e desenvolvedores da World Wide Web precisam criar um código que possa traduzir perfeitamente do laptop para os produtos de celular, simplificar a compreensão da navegação do site e inovar em outras habilidades do site - todos esses são fatores que as empresas padronizam em guias de design digital.

Guias de design eletrônico tornaram-se mais práticos para a imagem geral de uma marca e memorização na rede porque estabeleceram as expectativas e referências para a tela de exibição da web da empresa. Eles são especialmente importantes para sites e produtos que precisam oferecer provações de usuário de primeira qualidade.

Nesta apresentação, vamos mergulhar em detalhes sobre o que são os guias de tipo digital e mostrar algumas ilustrações impressionantes de empresas conhecidas que os preencheram corretamente.

Esse estilo de informação de moda deve ser tratado como um manual que define critérios de estilo e design para a existência digital de uma empresa. Sua principal intenção é produzir um tipo de estilo universal para o nome da marca e garantir certa regularidade em todos os canais e mídias, o local em que você constrói sua marca, paleta de cores, tipografia, sugestões de imagens e assim por diante.

Ao contrário dos guias de moda do fabricante que encapsulam o logotipo de uma empresa, declaração de missão, personas do comprador e tom de voz, o design da web e os guias de estilo são centrados na apresentação digital como UX/UI.

Mas, como designer de UX, geralmente tenho curiosidade, o que você pode encontrar nos guias de moda digital de fornecedores influentes como Apple, Google e Starbucks?

Sinta-se ou não, muitos provedores tornam esses detalhes publicamente disponíveis - eles realmente não tornam muito fácil encontrá-los. Então, cada vez que eu tropeço em um single, eu o coloco nos favoritos. Aqui estão alguns dos melhores que eu localizei tão significativamente.

Exemplos de guias de estilo digitais brilhantes

1. Apple iOS

O guia de design e estilo da Apple é especialmente interessante porque mostra como criar um método de funcionamento completo. Monterey, uma das versões mais atualizadas do OS X da Apple, tem uma interface de usuário mais simplificada do que seu antecessor, Yosemite. A Apple demonstra essa distinção sutil, mas palpável, com comparações gráficas realmente boas e, em seguida, discute sobre a lógica que alimenta cada faceta solitária do layout do sistema em execução. Dá-lhe uma janela para as mentes dos designers.

2. Google: layout de materiais

O Google foi pioneiro em uma moda de design e estilo identificada como Estrutura do Produto, que existe como um híbrido entre Design Skeuomórfico e estilo (gradientes, texturas, elementos suaves) e Estilo Plano (simples, colorido, geométrico). aspectos relacionados com cada design e design de estilo, evitando os negativos.

Como o Google vem trabalhando no estilo do produto há algumas décadas, você provavelmente já interagiu com ele diariamente - aplicativo Google Calendar, alguém? Este manual de design e estilo detalha exatamente o que é o Materials Design e como o Google o utiliza. E devo dizer que é, de longe, um dos melhores guias de estilo que já encontrei.

3. Starbucks

Este é apenas um dos guias de design e estilo mais minimalistas que eu já vi – e, no entanto, contém uma tonelada de fatos práticos. Ele coloca uma ênfase significativa no código e você pode explicar que ele foi construído por construtores, para construtores. Ele não possui elementos vinculados ao nome da marca, portanto, caminha na linha entre um manual de design de site e uma biblioteca de códigos.

4. Atlassian

O conjunto de mercadorias para o qual a Atlassian modela é gigantesco – então, por meios naturais, eles têm um gigantesco guia de moda. De coisas fundamentais (como paleta de cores e tipografia) a componentes (como tabelas e dicas de ferramentas) a uma biblioteca de padrões completa, este guia tem praticamente todas as coisas com as quais você contaria em um produto desse tamanho.

Possivelmente o melhor de tudo, a razão que conduz o manual completo do tipo é resumida em 3 condições enganosamente simples na página da casa.

5. Mozila

Este tutorial de design eletrônico está principalmente preocupado com branding e comunicações. Mas com a Mozilla recebendo uma tática de “privacidade e rede mundial aberta” ultimamente, é incrível ver como eles replicam isso em seu design.

A página inicial da Mozilla também faz uma carreira fantástica ao delinear como seu UX/UI deve ser acessível a homens e mulheres com deficiências ou deficiências visuais - uma coisa inclusiva e importante, pois o know-how se tornará muito mais revolucionário.

6. Tampão

A diretriz de tipo do buffer é pequena e concisa, provavelmente da grade por meio de modais, tudo em uma única posição. É um lembrete agradável de que seu tutorial de moda eletrônica não precisa ser chamativo se comunicar todos os pontos ideais. As empresas à procura de um lugar para começar podem considerar as notas das diretrizes de design simplistas do Buffer e construir seu negócio a partir daí.

7. Grito

Se você está procurando um exemplo confiável de um guia de design e estilo de site, o Yelp obteve isso. Além de completo, explica seu procedimento de Design Atômico como um livro de receitas e divide os componentes do site como substâncias que contribuem para um prato.

Esse detalhe tem tudo: tipografia, layout, variedades, contêineres, navegação e trechos de código para cada peça. Eles fazem um ótimo trabalho explicando o que é cada elemento, onde ele deve ser usado e como deve ser executado.

8. GOV.Ilhas Britânicas

O site de soluções governamentais da Inglaterra tem sido comumente anunciado como uma instância primária de UX de qualidade superior. Por quê? Pela razão de que ele apresenta um estilo descomplicado e rápido de usar e design que acomoda muita quantidade de informações e fatos.

Se você está interessado no que pode compor um layout limpo e poderoso (dica: geralmente começa com uso de cores sólidas, tipografia e espaçamento), então o manual de tipo do GOV.UK vale a pena dar uma olhada. Muito parecido com o site da internet, é extremamente simples, mas muito esclarecedor.

9. DeviantArt

As novas informações de estilo DeviantArt são exclusivas simplesmente porque são mais do que apenas uma informação - é um conhecimento. Ele conta uma história e aproveita visuais ousados ​​​​de largura total para mergulhar a pessoa na experiência emocional da marca DeviantArt. Dito isto, é estritamente um guia de modelo de marca, portanto, apenas produtos como cor e tipografia são revestidos.

10. Disqus

Cor, ícones, tipografia e logotipo … Disqus mantém-se mais curto e doce com essas informações. Mas tudo isso pode ser oferecido de uma forma bastante agradável e organizada. Este guia pode ser usado como um ótimo exemplo para “o lugar para começar” ao criar uma diretriz de estilo de sua preferência, pois atinge todos os fundamentos.

Experiência influenciada para fazer seu próprio manual?

Agora pode ser o seu switch. Aproveitando um tutorial de tipo eletrônico em sua empresa, você pode comunicar a linguagem de design de sua marca para designers internos, organizações, parceiros de marketing e até clientes.

Comece com os fatores básicos padrão (sombra, tipografia, logotipo, imagens), incorpore algumas recomendações de uso (“faça e não deve”) e até mesmo incorpore algumas partes da rede, se necessário (módulos, modelos, trechos de código. Use exemplos de outros fornecedores para aprender com os melhores. Sua força de trabalho estará criando padrões regulares em pouco tempo.