Olá!
Tenho o prazer de voltar para vocês, queridos leitores da comunidade, e compartilhar a experiência e o conhecimento adquiridos ao trabalhar na empresa de TI Omega.
O tema dos sistemas de design, ao que parece, já foi considerado por todos os lados: você pode encontrar muitos artigos, postagens, relatórios e outros materiais. Apesar disso, todos que se deparam com esse termo têm muitas dúvidas. Tentarei responder detalhadamente às principais:
O que é um sistema de design?
Para que serve?
Como criá-lo?
O que é um sistema de design?
Vamos resolver isso em ordem. O sistema de design é uma combinação de três entidades:
A linguagem visual é o que vemos.
Framework é uma biblioteca de linguagem visual, seu código.
Diretrizes - regras de como tudo deve ser e como aplicar.
Pode-se considerar que um sistema de design é um produto separado de qualquer produto de TI.
Linguagem visual
O componente visual do sistema de design inclui muitos elementos, os principais dos quais são:
Cores
UI-
– . , , . - , , , .
, , -, , , ? ? , .
Framework
– , , . .
. , « ». , « ».
, ? , . , ? , ?
, .
Guidelines
, -, « », .
, , . , - . . .
, . , ? , :
?
?
?
UI- : , .
, - . , - . , , .
-?
IT-, : -? , – « »?
. , . .
– . - .
, Figma . , , .
- . . .
– . .
, , , , .
, : , , .
IT- .
, : , , .
UX
, , . , , .
- user flow (, , ). , user flow .
- . , , .
-
-, , , .
-, - – . . - . : , - .
, - . - , .
, - - , , Figma. , UI-kit. , Figma ,
-?
-. , . , . (Brad Frost) «Atomic Web Design».
, :
Depois de criar um sistema de design, é importante descobrir como implementá-lo na prática da empresa. No segundo artigo, falarei sobre como construir passo a passo o processo de implementação de um sistema de design em qualquer empresa.
Espero que todos tenham aprendido muito com o artigo. E eu estava mais uma vez convencido de que o trabalho no artigo estrutura o conhecimento e motiva para estudos adicionais.
Obrigado pela atenção!