O que é Style Guide?

O início de projetos digitais para equipes entre designers e desenvolvedores fica a dúvida, como será o padrão de interface do projeto? Esse documento ajuda você a estruturar os padrões de design, identidade visual e elementos da interface de aplicações web mas não se restringe apenas ao aspecto gráfico, ele inclui explicações sobre funcionalidades, boas práticas de utilização da aplicação bem como disposição das informações e técnicas para melhorar a experiência do usuário e claro, você pode apresentá-lo ao seu cliente. Esse Guia de Estilos foi criado com o Bootstrap 4 alpha.v02. Google Fonts, Fontawesome, Google Charts e Data Tables.

Esse guia de estilos não é responsivo.

Style Guide

Nome do seu projeto

Dê padrão para os seus projetos e comece com um guia completo.

Estilos e funcionalidades com facilidade

Com o sistema Style Guide você constroi qualquer aplicação web muito mais rápido e seguindo os padrões de identidade visual da empresa, prototipagem e códigos. A sua preocupação será somente com a programação Back-End, o Front-End está pronto para você.

Comece agora
Estilos e funcionalidades com facilidade
Projetos planejados

Aparência e melhor experiência para o usuário

Utilizando as diretrizes é capaz de projetar com total fidelidade ao planejamento do projeto. Com o Style Guide você tem acesso a todos os padrões de design visual, interação, componentes e utilidades, seguindo as melhores práticas. Criar um projeto com aparência consistente melhorando a experiência do usuário.

Contribua e receba contribuição

O Style Guide é um sistema de compartilhamento entre todos os envolvidos de um projeto, e para facilitar a sua utilização e atualização é importante que todos colaborem com conteúdo, desde que seguindo os padrões aqui estabelecidos. É a sua ferramenta de padrões para o seu projeto, utilize o Style Guide sem moderação.

Contribua com o Style Guide
Guia visual

Guia visual

Design

O sistema guia de estilos apresenta com fidelidade completa o design da sua aplicação web, possibilitando visualização de cores, tipografia, grids, layout, ícones, imagens, etc.

Interação com fidelidade

Interação com fidelidade

Prototipagem

Utilizando boas práticas de codificação o Style Guide apresenta códigos com base no framework Bootstrap 4, o que torna muito mais simples a apresentação de protótipos navegáveis.

Time integrado

Time integrado

Programação

Os códigos server para os desenvolvedores utilizarem na aplicação web determinando padrões para o projeto, portanto, qualquer membro do time pode utilizar para consultas.


Design

Definições de design como padrões visuais do projeto

Componentes

Prontos para facilitar o desenvolvimento do projeto, ajudando na experiência

Utilidades

O Style Guide permite alterações e possibilidades, uma delas é incluir utilidades específicas do seu projeto
Style Guide © 2020 - Todos os direitos reservados.
Versão 0.11.2 - Criado em 29/04/2016 e última atualização em 20/03/2020