O Poder do Design System

Com o avanço do design e sua complexibilidade, vimos a necessidade da criação de diversos elementos como ícones, imagens, botões e demais elementos dentro de um projeto de design.

 

Agora não pensamos apenas em design como uma forma estética ou apenas aparência, mas também um padrão ou guia que deverá ser seguido seja para o time de desenvolvimento ou mesmo pelo de produto.

 

Portanto isso faz como que a criação de um Design System seja essencial, principalmente em projetos de maior complexibilidade, reforçando os padrões.

 

O que seria um Design System?

design-system-webframe0

A funcionalidade de um Design System deverá corresponder a padrões de design a serem seguidos em um projeto, ou seja, um conjunto de componentes definidos como guia.

 

Antes de criar qualquer tela ou dar início ao desenvolvimento do layout, é altamente recomendável se criar um padrão de design.

 

Embora exista um trabalho inicial, esse manual irá facilitar a vida do time de produto e desenvolvimento, definindo as regras de usabilidade e interface.

 

Style Guide x Design System

design-system-webframe1

Vale destacar que o Design System não é a mesma coisa de um Style Guide ou guia de estilo.

 

Um Style Guide representa geralmente itens como cores, imagens e fontes a serem seguidas, enquanto o Design System é o padrão gráfico a ser seguido como espaçamentos, botões, sliders, inputs e outros elementos chave para o design.

 

Aplicando em seus projetos

design-system-webframe2

A idéia da criação desse sistema é que seja utilizado para consultas para toda e qualquer decisão voltada ao design e concepção do produto.

 

Assim, é de suma importância que esse documento esteja sempre atualizado e que seja de fácil entendimento para a equipe envolvida, garantindo o alinhamento de todos

 

Vale destacar que o Design System não é um sistema estático, e deve ser constantemente atualizado conforme o desenvolvimento do projeto.

 

Nem sempre vamos conseguir mensurar ou mapear todos os elementos de uma aplicação, portanto lembre-se de atualizar seus componentes a cada novo passo dado no desenvolvimento.

 

Exemplos

Alguns dos exemplos mais famosos são do Material Design do Google e do Interface Guidelines da Apple.

apple-design-300x184

Human Interface Guidelines – Apple

material-design-google-300x166

Material Design – Google

Nesses exemplos você vai entender melhor o funcionamento e cada estrutura utilizada no Android e iOS. Observe que cada elemento tem uma razão, princípio ou justificativa para ser utilizado nas aplicações.

Conclusão

Portanto vimos que o Design System é algo já presente em todas as grandes empresas do mercado além de ser essencial para a organização da linha de design em um novo sistema.

 

Lembre-se que quanto mais metódico e detalhista for nessa etapa do projeto, mais fácil será a concepção das telas e da interface e UX do projeto.

 

Deixe seu comentário e vamos compartilhar o conhecimento a respeito do tema!

Grande Abraço

You may also like

Yuri Zaban

Sou entusiasta em tecnologia, processos, ferramentas e tudo mais relacionado ao Design e Front End. Sou autor do WebFrame onde compartilho artigos sobre as principais inovações nesses temas.