Por que as startups precisam de um guia de estilo

Publicados: 2022-03-11

Mesmo para um designer experiente, criar um novo guia de estilo para um determinado produto é difícil – há muitas direções de design possíveis e o processo pode rapidamente se tornar esmagador. A vida de uma startup é agitada, rápida e cheia de clichês como “o perfeito é inimigo do feito”, “mova-se rápido e quebre as coisas” ou “lance agora, conserte depois”.

Criar um guia de estilo sob tais slogans e prioridades flutuantes é um desafio, mas uma obrigação para que o design de um produto tenha sucesso a longo prazo.

Sistema de design BBC UX, guia de estilo e biblioteca de componentes — A Global Experience Language (GEL) da BBC explica o propósito de cada componente e como eles devem ser usados.

Nos últimos anos, ouvimos muito sobre sistemas de design, guias de estilo, bibliotecas de padrões e design atômico. Embora essas ferramentas sejam muito úteis, usá-las pode parecer um exagero quando você deseja apenas criar algumas telas para um MVP ou para demonstrar um aplicativo. No entanto, ter um guia de estilo não apenas melhorará seu processo de design em geral, mas também tornará seu aplicativo mais sólido e consistente.

Vamos primeiro falar sobre os principais benefícios de um guia de estilo e, em seguida, abordar o ambiente desafiador de inicialização. Por fim, discutiremos como um guia de estilo está sempre evoluindo como um documento vivo.

Cinco principais razões pelas quais um guia de estilo é uma boa ideia

1. Um guia de estilo torna os designs concretos e a marca clara

Como um designer solitário em uma startup - o que geralmente é o caso - não há muitas oportunidades para revisar e desafiar as decisões de design feitas por outras pessoas da equipe. Embora todos possam estar trabalhando em colaboração, os designs não são necessariamente compartilhados com outras pessoas. Isso significa que há apenas uma pessoa validando os designs finais.

Um guia de estilo fornecerá a uma startup orientação e documentação para referência. Isso desafiará algumas das escolhas de design feitas pelo designer ou pela equipe porque elas terão que ser validadas no contexto global do aplicativo. Projetar um componente de interface do usuário porque funciona bem em uma tela não será suficiente. Um design bem pensado deve resolver um único problema de design em uma situação, bem como um problema generalizado encontrado em outras telas do seu aplicativo.

Componentes repetidos em uma interface do usuário merecem estar em um guia de estilo — O design da interface do usuário deste aplicativo usa o bloco de “contato” repetidamente, um excelente candidato a ser incluído como componente no guia de estilo. (por Ivan Bjelajac em Dribbble)

Um guia de estilo disponibiliza o estilo geral de design, as diretrizes da marca, as especificações e as regras para todos em sua empresa. É apenas um clique de distância. Eles podem acessar um URL para acessar facilmente um guia de estilo online ou baixar um PDF. O design torna-se trabalho de todos - não é mais responsabilidade exclusiva da equipe de design. É uma abordagem prudente que melhorará a interface do usuário do seu produto.

Guia de linguagem de design da IBM na web — A IBM hospeda seu guia de “linguagem de design” on-line, o que facilita a visualização de todos, até mesmo do público.

2. Um guia de estilo torna seu design mais consistente

Ele fornece um dicionário de tipos para sua linguagem de design de interface do usuário. Você pode usar a mesma terminologia quando quiser comunicar algo que já expressou. Imagine se tivéssemos palavras ligeiramente diferentes para expressar a mesma coisa:

"Está chovendo; Eu preciso do meu guarda-chuva.”
“Está chovendo, preciso do meu guarda-chuva”
“Está chovendo, eu preciso do meu guarda-chuvala”

Pode tornar uma linguagem poética, mas difícil de entender. Fundamentalmente, é a mesma ideia com a interface do usuário de um site ou aplicativo. Para facilitar o uso, você só deve inventar uma nova “palavra” quando estiver realmente criando algo novo. Dessa forma, você está vinculado a uma regra estrita que diz: “Somente os componentes que resolvem um problema de design repetidamente em todo o produto são permitidos no produto e, posteriormente, no guia de estilo”.

A consistência torna seu produto mais fácil de usar; um produto altamente utilizável pode se traduzir em mais engajamento e vendas.

Telas de integração de aplicativos — As telas de integração geralmente usam animações ou efeitos visuais que não estão presentes no restante do aplicativo. Dá aos designers uma boa oportunidade para criar um novo layout. (por Murat Gursoy em Dribbble)

3. Reutilizar os mesmos componentes do sistema torna seu aplicativo mais fácil de usar

Como no exemplo da linguagem, a consistência é fundamental. Uma vez que cada componente é entendido pelo usuário, quando usado novamente em um contexto diferente, as pessoas já estarão familiarizadas com seu comportamento. Quando se trata de interações do usuário, essa consistência melhora a usabilidade geral do produto.

A Eventbrite usa um layout de três ícones em muitas de suas seções. Quando um usuário se depara com esses componentes novamente, ele já está familiarizado com seu comportamento geral.

Trabalhar com um sistema de design baseado em componentes economiza dinheiro e também facilita a atualização do produto. Se houver um problema de usabilidade com um componente em uma determinada situação, ele poderá ser corrigido uma vez e todos os outros problemas potenciais com esse componente também serão atualizados.

4. Um guia de estilo torna seu aplicativo mais rápido para desenvolver a longo prazo

Quando sua equipe está desenvolvendo um componente comum para uma tela, está desenvolvendo uma solução que também usará em outro lugar. Isso economiza muito tempo de desenvolvimento. Quando sua empresa cresce, isso pode significar uma economia de até 10 vezes a mão de obra necessária para construir uma nova tela.

5. Um guia de estilo facilita a eficiência e a inovação da produção

A criação de um guia de estilo torna os designs mais acessíveis e prontamente disponíveis para o restante da empresa. Desenvolvedores e designers podem prototipar uma ideia com mais rapidez e facilidade. O Bootstrap é frequentemente elogiado por facilitar para os desenvolvedores a criação de um protótipo funcional – seu guia de estilo serve ao mesmo propósito. Ele fornece uma base de referência para uma nova interface do usuário que será construída pelos desenvolvedores, sem que a equipe de design tenha que criar a tela primeiro (mesmo que a equipe de design deva fazer o controle de qualidade das telas finais).

O sistema de design online da Shopify, apelidado de Polaris.

Os desafios de uma startup, um guia de estilo no Flux

Criar um sistema de design em um ambiente de inicialização não é tão linear quanto pode ser em uma empresa mais madura, onde eles estão acostumados a um processo mais simplificado. Em uma empresa mais tradicional, a equipe de design realiza pesquisa, ideação e experimentação de UX e, em seguida, cria o guia de estilo final da marca. Este processo não é adequado para todas as empresas. As startups trabalham em um ambiente onde sua visão e os requisitos para o produto estão sempre em fluxo. Eles trabalham com MVPs (produtos mínimos viáveis), versões incompletas de seus aplicativos que são usados para testar sua ideia e mostrar seu potencial aos usuários.

Quando se trata de criar um guia de estilo, isso pode se tornar um problema.

Em um ambiente que está sempre evoluindo, um designer geralmente está lutando para criar um guia de estilo que deveria ser um pouco 'fixo'. Um designer pode não ter tempo para pensar minuciosamente em todos os componentes que estão sendo criados, mesmo que eles ainda acabem na próxima versão do aplicativo. O Facebook notoriamente trocou seu menu de hambúrguer por uma navegação por guias quando eles amadureceram um pouco. Você acha que quem colocou o menu de hambúrguer lá em primeiro lugar também o adicionou ao guia de estilo do Facebook?

Você pode até considerar que ainda não é hora de criar um guia de estilo. Você pode perceber que, a longo prazo, precisará de um, mas agora é mais importante criar telas para testes de usabilidade do aplicativo. Além disso, você também precisará de algumas páginas de marketing para promover seu aplicativo. De repente, seu design precisa aumentar e, à medida que você cria telas, começa a ver o valor de ter um guia de estilo que possa manter seus designs e a marca da empresa consistentes.

O problema é que você não sabe exatamente quando é o momento certo para trocar flexibilidade por estabilidade. Você precisa decidir quando deve iniciar o guia de estilo e quando deve se concentrar apenas na criação de telas. Uma abordagem ideal pode ser produzir um guia de estilo ao mesmo tempo em que você entrega as telas - dessa forma, você pode ter o melhor dos dois mundos.

Comece com alguma inspiração de interface do usuário

Uma boa maneira de começar, especialmente se você não for um designer, é coletar exemplos de estilos de design que você gosta, ou mais importante, o que você acha que os usuários irão responder. Colete o maior número possível de exemplos e coloque-os em uma pasta/placa InVision/placa legal/etc. Eles podem ser usados como referência e inspiração junto com sua sensibilidade de design. Você pode construir sobre eles mais tarde para criar uma biblioteca de padrões.

Por exemplo, quando eu estava trabalhando em um guia de estilo para uma empresa que promove artistas da indústria do entretenimento, nos perguntamos se fundos claros ou escuros teriam um impacto maior em nossos usuários. Eu olhei para centenas de sites diferentes em jogos/filmes/produção visual para ver como eles usavam fundos escuros e claros.

Guia de estilo do esquema de cores do site do jogo Star Wars Battlefront 2 — O site do jogo Star Wars Battlefront 2 usa cores mais escuras, enquanto o site da EA usa um esquema de cores mais claro.

Fiz uma folha de referência onde destaquei os padrões mais comuns. Um padrão que identifiquei foi que as empresas desse setor tendiam a usar fundos mais escuros ao apresentar seus produtos, mas usavam fundos brancos em seus esforços de marketing, comércio eletrônico e lojas.

Você não precisa ir tão fundo assim, mas descobri que ter referências visuais ajuda, não apenas na criação de um guia de estilo, mas também em lembrar alguns dos casos de uso para os quais você pode precisar projetar. Depois de se sentir bem com as referências que coletou, você pode começar a trabalhar no design visual.

Moodboard — Vários moodboards que usam referências diferentes. (Fonte: Summer Teal Simpson Hitch, Vivek Venkatraman e Amber no Dribbble)

Projetar componentes de interface do usuário sólidos

Ao trabalhar em startups, é mais difícil criar componentes do que criar páginas – pelo menos no início. Quando você cria uma página, geralmente tem uma ideia de como ela será usada. Esse não é necessariamente o caso quando você projeta um componente. Você está tentando projetar para um caso de uso específico, mas deseja que ele faça parte de um sistema de design universal e precisa abordá-lo dessa maneira. Por exemplo, você pode querer criar um componente de sub-navegação com três botões. Você também pode precisar que funcione com quatro, cinco ou dez botões, e precisará funcionar no celular, tablet e desktop. Você precisa pensar no futuro.

Guia de estilo para Operator, uma empresa de comércio eletrônico — O guia de estilo do Operador especifica como cada um de seus componentes reage com base na navegação e na hierarquia visual. (Fonte: Kerem Suer no Dribbble)

Você quer um certo nível de persistência ou poder de permanência em um componente. Os componentes comuns não devem ser alterados com frequência e devem ser reutilizáveis em muitos lugares em todo o seu produto. Por exemplo, se você está interessado apenas em um aplicativo iOS, você deseja testar seu componente com base no número de opções ou na duração do conteúdo, não necessariamente no tamanho da tela. A ideia é que, se for viável na interface do usuário em muitos lugares do seu aplicativo, você saberá que é um componente com potencial para fazer parte do seu guia de estilo.

Sistema de design Salesforce com componentes comuns e seu uso — O Salesforce Lightning Design System indica a flexibilidade de um componente e se ele pode ou não ser adaptado a uma interface móvel.

Uma startup precisa começar praticamente do nada e depois se mover rapidamente. Seu chefe pode querer uma tela projetada até o final do dia. Isso significa que você não pode realmente desenvolver um guia de estilo inteiro e depois criar a tela. Pior ainda, você pode estar projetando um guia de estilo com componentes que nunca verão a luz do dia porque a visão da empresa mudou. Como dizem, é melhor enviar agora.

Biblioteca de componentes do kit de IU de análise do Salesforce — O Kit de IU do Salesforce Analytics é uma biblioteca de componentes comuns que devem ser reutilizados em cada aplicativo. (Fonte: Eli Sebastian Brumbaugh)

Criar um ótimo guia de estilo leva tempo e, como ele se tornará a base do seu sistema de design, você deseja acertar. Em um ambiente de inicialização, você precisa trabalhar em seu guia de estilo com tudo em conjunto.

O Guia de Estilo como um Documento Vivo

Você deve pensar no seu guia de estilo como um trabalho em andamento. Como uma startup descobrindo sua estratégia, você descobrirá seu guia de estilo à medida que avança. Você vai editá-lo e ajustá-lo ao longo do tempo até que se torne a base da sua interface do usuário. Uma abordagem útil é iniciar a primeira maquete ao mesmo tempo em que inicia seu guia de estilo. Abra dois arquivos com seu software favorito (no meu caso, Sketch); um chamado page name e o outro styleguide . À medida que você trabalha no design da tela, pode começar a semear o guia de estilo com os elementos que compõem o design.

Trabalhando em um guia de estilo simultaneamente no Sketch — Um exemplo de projeto de inicialização com dois arquivos abertos: o guia de estilo à esquerda e a tela do celular à direita.

À medida que você começar a fazer mais disso, notará logo no início que alguns componentes são os principais candidatos para inclusão no guia de estilo. Por exemplo, se você escolheu um estilo de ícone, todos os seus ícones podem entrar no guia de estilo desde o início.

Eu costumo criar uma seção chamada 'ícones feitos até agora'. Se em algum momento alguém precisar de um ícone, primeiro terá que verificar esta seção antes de criar um novo.

Bibliotecas de ícones em guias de estilo e bibliotecas de componentes comuns — Salesforce, Yelp e Mapbox possuem extensas bibliotecas de ícones para seus aplicativos. Seu guia de estilo também deve conter elementos de interface do usuário que são usados por toda parte.

Outros itens óbvios a serem considerados são cores, botões, seletores, títulos, cabeçalhos, corpo de texto, etc. Se você estiver usando um estilo especialmente para marketing, considere colocá-lo em seu guia de estilo e rotulá-lo adequadamente. Tudo bem se você não estiver completamente decidido sobre um determinado item. Você pode refinar os elementos da interface do usuário em seu sistema de design posteriormente, quando surgir a oportunidade, e atualizar o guia adequadamente. Não se esqueça, o guia de estilo é um documento vivo , especialmente em uma startup.

Elementos de formulário da Web no guia de estilo

Eventualmente, quando começo a colocar layouts no guia, sei que estou começando a chegar a um ponto em que todos os componentes devem estar próximos de seu estado final. Esta parte marca o ponto de virada no processo de criação do guia de estilo - agora você pode comemorar! Uma boa maneira de comemorar esse marco é criar um logotipo ou ícone (considere nomeá-lo) para a versão 1.0 do guia de estilo.

Algumas pessoas chegam a imprimir o logotipo/ícone como um adesivo para que o time tenha uma espécie de troféu. Esse também é o ponto em que normalmente volto para a maneira mais tradicional de trabalhar com o guia, abrindo esse guia de estilo primeiro e, em seguida, criando um novo arquivo para qualquer interface que precise ser feita.

Conclusão

Como designer, ao criar um guia de estilo o mais cedo possível, você garante que sua startup siga um padrão mais alto de qualidade. Pode ser um desafio, mas vale a pena o esforço. Um guia de estilo sólido e completo não apenas ajudará você a ter um produto melhor, mas também ajudará a reduzir o custo de desenvolvimento.

Existe uma maneira de fazer isso acontecer mesmo em um ambiente de ritmo acelerado, onde decisões rápidas são tomadas e, às vezes, os projetos precisam mudar rapidamente. Felizmente, o processo descrito acima ajudará os designers de qualquer startup a lidar com os desafios de complexidade e velocidade, além de criar um guia de estilo robusto para o benefício do produto.

• • •