Tirar um projeto do papel é uma das etapas mais difíceis do desenvolvimento de um sistema, isso porque no papel tudo parece atuar em sinergia, mas na prática nem sempre funciona. É muito comum encontrarmos sites e aplicativos que tenham problemas de funcionalidade e usabilidade, ainda mais naqueles que estão em constante atualização e transformação. Nesse contexto, podemos ver o design como uma ferramenta essencial para que possamos resolver e até mesmo evitar essas inconsistências.
O design system é uma espécie de documento interativo que usamos como uma base para o projeto. Ele é responsável por garantir que o usuário tenha uma boa experiência e também por organizar o processo de desenvolvimento de forma visual e sistemática. Na prática ele vai muito além da simples projeção de uma padronização para projetos. É também um modelo dinâmico, definindo como será a aparência daquele produto, mesmo que passe por futuras alterações e atualizações.
Pode parecer um tanto quanto complexo a criação de um produto que será usado como base para um novo, mas se você identificar que há a necessidade de um system design em seu projeto (vamos mostrar algumas formas de identificar essa necessidade), você poderá estruturar um design system e aplicá-lo com eficiência. No entanto, se você ver que essa não é a sua necessidade no momento, existem outras ferramentas parecidas que também auxiliam no desenvolvimento de produtos.
Como identificar a necessidade de um design system
Antes de começar a estruturar um design system é importante checar se você realmente precisa de um. Essa identificação também ajudará a pensar em uma forma para estruturar o seu design system. De forma geral, é possível identificar a necessidade de um design system pensando em questões como:
- Tamanho de sua equipe (seja de marketing ou desenvolvimento)
Se o seu time de marketing é pequeno, não é necessário criar um design system. Uma biblioteca de padrões simples já é o suficiente para atender às suas necessidades. Outra forma simples de padronizar seus projetos é usando um guia de estilos, que poderá ser usado para uma consulta futura durante o desenvolvimento de um novo projeto.
No entanto, vale a pena pensar que futuramente sua equipe poderá aumentar ou então se renovar, e nesse caso é importante que você possua um design system já estruturado e pronto para auxiliar os novos projetos.
- Estágio de desenvolvimento de seu produto
Se o seu produto já está pronto é importante montar um design system para as futuras atualizações, modificações, sem perder a base do produto. Se você ainda não concluiu o produto, talvez uma biblioteca de padrões já supra a necessidade. Como ela é mais simples de ser desenvolvida, pode até mesmo ser usada para a base de seu futuro design system.
- Quando você busca por agilidade no desenvolvimento
Com um design system você ganha tempo no desenvolvimento do projeto, pois consegue ganhar agilidade para pensar em componentes como usabilidade, animação e desempenho. Dessa forma você consegue lançar o seu produto e até mesmo atualizações de forma mais rápida e mais simples, otimizando o trabalho de sua equipe.
É importante que você desenvolva um design system com sua equipe adequando às necessidades de seus produtos, caso contrário outras ferramentas como uma biblioteca de padrões, pode ser a solução para seu dia a dia. É sempre importante avaliar as demandas não só dos usuários, mas também de sua equipe, de marketing ou de desenvolvimento.
Como montar um sistema efetivo
Se você identificou a necessidade de ter um design system dentro de sua empresa, precisa desenvolver um. Embora possa parecer complexo criar um produto de base para outros produtos, com paciência e planejamento é possível criar um sistema efetivo e prático. Para criar o seu sistema é necessário que estruture os seguintes itens:
- Discovery: o discovery é a parte de conhecer e identificar a marca do produto e as informações por trás daquela marca. Você pode fazer esse reconhecimento com base em projetos e produtos anteriores.
- Design: esse processo também exige uma pesquisa com usuários anteriores e designers. Com as informações coletadas você poderá construir os principais objetivos de seu design system. Para essa parte do projeto você pode fazer perguntas para o direcionamento, como “Qual o objetivo desse projeto?”.
- Desenvolvimento: essa parte é voltada para a conversa e alinhamento de ideias com a equipe de desenvolvimento, para que o design system seja cuidado e o projeto possa participar da criação do produto de forma efetiva.
- Documentação: após a coleta de todas as informações necessárias para o seu design system, você precisa documentar tudo o que foi coletado. Essa parte requer muita atenção, pois é necessário documentar tudo aquilo que é indispensável para a criação de novos produtos, até mesmo o que parece mais simples.
Esses são alguns pontos principais para que você estruture e desenvolva o seu sistema de uma forma simples e prática. Sua equipe pode levantar outros pontos de acordo com a demanda de seu produto ou de sua equipe de desenvolvimento ou marketing. É importante que durante a pesquisa você converse com quem participa do processo de desenvolvimento de estruturação do produto, para poder ter a visão dessas duas equipes.
Conheça alguns modelos de sistemas para usar como inspiração
Se você ainda não conseguiu visualizar como ficaria o seu design system na prática, nós separamos algumas ideias de sistemas para que você possa usar como inspiração, adequando de acordo com as necessidades de seus produtos e de sua equipe. Esses sistemas reúnem elementos de suas plataformas.
- Base Gallery, usado pela empresa Uber, que possui um design criado especialmente para alimentar uma biblioteca com componentes específicos que podem ser usados por designers e engenheiros.
- Backstage Design System, usado pelo Spotify, onde o backstage é criado através de um plugin específico para cada usuário;
- Polaris for admin: components, que fornece representações visuais dos componentes do Polaris React na Figma;
- Monday UI.com Kit, um acervo de elementos usados na plataforma Monday.
