UI Style Guide — Definindo a Abordagem Visual
O UI Style Guide (também conhecido como Style Tiles) serve como um guia visual e ajuda a manter toda a equipe na mesma página. Isso oferece um ponto de partida flexível para ajudar a definir como um estilo visual será aplicado em um site, incluindo interfaces de usuário orientadas para desktop e celulares, tudo isso em uma maneira acessível que os clientes possam compreender.
Quando usar Style Guides
Essa etapa está entre o mood board e o design final. Você pode usar no lugar das primeiras maquetes tradicionais, recebendo ideias e comentários do cliente, garantindo que o projeto está seguindo o objetivo correto.
Benefícios em criar Style Guide
Por que passar por todos os problemas de desconstruir e catalogar uma interface? É certamente um processo tedioso, mas os resultados são extremamente benéficos. Aqui estão algumas das vantagens:
- Estabelece um padrão visual
Criar um design sistemático, orientado pelo guia de estilo, permite exibir uma infinidade de tratamentos similares, mas ainda diferentes, próximos uns dos outros, expõe a redundância e ressalta a necessidade de criar uma experiência consistente e coesa. - Garante gerar todos os componentes necessários
Criar um documento de estilos da interface ajuda a garantir que todos os componentes são contabilizados para que não haja surpresas de esquecer de criar algum ícone ou a escolha de um fonte específica para o corpo de texto. Você não vai querer que um único elemento no design pareça ser órfão no design só porque foi adicionado de último hora. - Planeja para diferentes devices
Embora o design para diferentes devices seja importante e necessário, nem sempre é possível criar o design responsivo imediatamente. Orçamento, tempo, metas, habilidades, forçam as organizações a adaptar seu site existente a um site responsivo. A criação de um Style Guide permite que as equipes de projeto analisem a interface para estabelecer quais componentes serão fáceis e relativamente difíceis de serem convertidos em um ambiente responsivo.
Uma maneira de fazê-lo:
1 — Tenha ideia do que o cliente está esperando do projeto. Isso pode ser feito através de entrevistas e análise do briefing. Enquanto wireframes não são necessários, o style guide irá ajudar a informar quais elementos precisam ser incorporados. Nesta fase, você está tentando determinar quais componentes da interface do usuário serão cruciais para o seu design.
2— Gere uma lista de elementos visuais. Isso pode ser feito em qualquer tipo de editor de texto. Elementos comuns podem incluir cabeçalho, paleta de cores, fontes ou um tratamento de imagem.
3 — Depois de saber todos os elementos que você precisa, comece a criá-los no software de sua preferência. Isso pode ser separado por categorias, como cores, fontes, ícones, etc.4 — Peça feedback e certifique-se de ter aprovação de todos os elementos.
5 — Use esse documento como referência para gerar o designs do projeto sempre garantindo ter alta fidelidade do guia de estilo.
Free templates:
Para ajudá-lo a começar, existem alguns modelos prontos de Style Guide. Use-os para manter seu próximo projeto mais consistente:
Próximos passos
Dependendo do projeto e como você prefere abordar o cliente, estes seriam alguns exemplos das próximas etapas do projeto:
Style Tile > Wireframe > Mockup > Code
Style Tile > Wireframe > Code
Style Tile > Mockup > Code
Style Tile > Code
Espero que você tenha gostado de aprender sobre essa etapa do processo de design, tanto quanto eu gostei de escrever e apresentá-lo a você!
Quais são seus pensamentos? Você vai usar UI Style Guide no seu próximo projeto? Gostaria muito de ouvir seus pensamentos nos comentários.
