Praticando design system em cases pessoais
Uma abordagem sobre como utilizar alguns itens do design system para organizar seus projetos pessoais
Quero iniciar meu artigo prestigiando a comunidade que tem contribuído para meu crescimento na área; pode parecer simples o processo de transição de carreira, mas não é, envolve tantas variáveis, medos e incertezas (mas esse é um papo para outro artigo). Obrigada PretUX, não só pela bolsa desse curso, mas por tudo que você tem feito pelas pessoas (volto a repetir essa frase nesse artigo).
Através da bolsa fornecida pela PretUX em parceria com Pixelcastbr, realizei o curso Design System UI Boost.
Bom, nesse artigo eu não vou explicar no detalhe sobre o que é o design system, inclusive escrevi um artigo, falando sobre isso — "Porque mesmo sendo iniciante em UX é importante estudar sobre Design System?". Neste artigo, quero trazer como você pode aplicar conceitos no seu projeto de design pessoal.
Em meu projeto de design pessoal, estou construindo as interfaces da minha solução depois de realizar todo o processo com o duplo diamante.
No começo, estava fazendo o projeto com outras integrantes do time porém, em determinado momento, algumas optaram por não continuar no projeto e eu daria continuidade à minha saga. "Qual sua saga?" — continuar a parte de UI sozinha, a estava aprendendo do zero, dar continuidade ao projeto e escrever o tão sonhado portfólio.
Quando comecei a mexer no projeto, confesso, me perdi. Não me entenda mal, não estou falando que o esforço e trabalho de quem iniciou o design estava ruim, pelo contrário, estava muito bom. Porém, os nomes dos elementos não estavam claros, os elementos não estavam de uma forma que permitia reutilização e era necessário definir alguns padrões, como por exemplo, cores e tipografia.
Sem os padrões em nossos projetos, conseguiremos terminá-lo? Sim, sem dúvida, porém você leva mais tempo.
Primeiramente, gostaria de trazer um trecho do artigo texto em que descrevi o que é o design system:
O Design System é o agrupamento da biblioteca de componentes de interface de usuário, na qual é possível encontrar o guia de estilos, a identidade visual da marca, as diretrizes da marca, estrutura css, imagens e tudo aquilo que se julga necessário para a padronização de um produto, seja ele construído do zero ou existente.
Trazendo esse contexto para projeto de design pessoal, você pode iniciar praticando esse princípios e aplicando-os agora. Eles servirão para seu contexto no trabalho ou ainda, caso você trabalhe em um grupo que não possa dar continuidade ao projeto, você o entregará organizado.
Utilizando alguns Padrões
Neste tópico, exemplifico alguns padrões que utilizei, trazendo exemplos feitos no Figma.
Tipografia
Após definir a tipografia, ou seja, fontes de letras que são utilizadas no seu projeto, você pode definir e escrever seu estilo de texto de forma que fique simples de entender e fácil de aplicar ou alterar.
Estilo de grid
Se for necessário corrigir elementos e ou criar novos fluxos, qual estilo de grid foi utilizado? Tendo um estilo de grid definido, ficam mais rápidas as correções futuras.
Estilo de cores
Tenha uma paleta de cores bem definida. No caso a seguir, descrevi as cores primárias, secundárias, cores de sucesso entre outras.
Componentes
E se for necessário realizar alterações em elementos que estão em diversas telas do seu projeto? Lembre-se, se você não tornou o elemento em componente, precisará resgatar todos os lugares em que ele foi utilizado para realizar a alteração. Tendo os elementos como componentes, ao realizar a alteração, ele refletirá em todos os locais onde foi usado.
Auto layout
Qual será o padrão dos botões no seu aplicativo? O auto layout permite que sempre se tenha as mesmas características ao ser definido.
Caros, não estou dizendo nesse artigo que design se resume apenas a isso. Design System está muito além dos pontos que citei acima, mas porque não utilizar alguns dos conceitos básicos para organizar um projeto pessoal? Pensando pelo outro lado, quando estiver iniciando sua carreira em designer, já terá sabedoria para utilizar a organização em seus projetos profissionais. Quis compartilhar com vocês o que me ajudou a reorganizar meu projeto.
Gostaria de agradecer muitíssimo a bolsa que me foi concedida pela comunidade PretUX, que visa aumentar a inserção de pessoas pretas no mercado de trabalho, diversificar a tecnologia brasileira e difundir conhecimentos de UX; e a você, que está usando uns minutos do seu dia para ler meu artigo.
Linkedin: https://www.linkedin.com/in/suéllen-leão
