vamos aprender sobre style guide, que é um guia de estilo para o design e programação, e como ele é importante para a criação de um produto digital consistente.
Vamos construir o style guide da E-Ticket, definindo cores, tipografia, componentes básicos e complexos, e entender como a interação entre esses elementos funciona.
No final, vamos prototipar o produto em alta fidelidade, criando um portfólio incrível para você mostrar para o mundo!
<aside> <img src="/icons/arrow-turn-right_purple.svg" alt="/icons/arrow-turn-right_purple.svg" width="40px" />
Imagine que você está construindo uma casa. Você precisa de um plano, certo? Um style guide é como o projeto da sua casa, ele define todos os detalhes, desde a cor das paredes até o tipo de telhado.
No caso do design, o style guide define a identidade visual do seu produto, como as cores, fontes, botões, menus e outros elementos. Ele garante que todos os elementos do seu produto estejam alinhados e transmitam a mesma mensagem.
Pense no style guide como um manual de instruções para o seu produto. Ele garante que todos os elementos estejam em harmonia, como se estivessem seguindo um mesmo estilo arquitetônico.
Assim como uma casa bem planejada é mais funcional e agradável, um produto com um style guide bem definido é mais fácil de usar, entender e lembrar.
</aside>
O style guide, ou melhor, guia de estilo seria como o projeto da casa: ele define as cores das paredes, o tipo de telhado, o tamanho das janelas, a disposição dos cômodos, etc.
Os componentes básicos seriam como os tijolos, as portas e as janelas da casa: eles são elementos que se repetem em diferentes partes da casa.
Os componentes mais complexos seriam como a cozinha, o banheiro e o quarto: eles são compostos por vários elementos básicos.
A documentação do guia de estilo seria como o manual da casa: ele explica como a casa foi construída, quais materiais foram usados e como cada elemento funciona.
E o protótipo em alta fidelidade seria como a casa pronta: ela é a versão final do projeto, com todos os detalhes e elementos.
<aside> <img src="/icons/arrow-turn-right_blue.svg" alt="/icons/arrow-turn-right_blue.svg" width="40px" /> Na aula o professor não vai usar recursos do Figma, porque a ideia é que você possa ver esse curso, ver a formação inteira sem precisar focar na ferramenta do Figma.
Você pode assistir e utilizar o Adobe XD, pode utilizar o Sketch, com qualquer outra ferramenta que não seja o Figma, você vai conseguir trabalhar tranquilamente. Vamos focar no conteúdo e nos elementos que vamos estudar.
</aside>
O guia de estilo serve como uma documentação que define a identidade visual do nosso projeto, incluindo cores, fontes, espaçamentos, botões, componentes e muito mais.
O style guide nos ajuda a manter a consistência visual do nosso produto e facilita o trabalho tanto para designers quanto para programadores.
Para ilustrar, exploramos dois exemplos de frameworks CSS famosos: Bootstrap e Ant Design.