Frontend
Na Arquitetura do Querido Diário, o frontend do projeto é a porta de entrada para a maioria das pessoas conhecerem e usarem o projeto via sua interface web. Contudo, foi desenvolvido em grandes fases (com lançamento em 2021 e modificações em 2022, com a adição do Querido Diário: Tecnologias na Educação) e ainda carece de documentação e de mais especialistas que compreendam o projeto e saibam implementar e avaliar as melhores práticas.
Para estruturar o desenvolvimento desta importante parte do projeto de forma consistente, eficaz e colaborativa, precisamos que todas as pessoas contribuidoras partam de uma base comum de definições sobre qual é a cara do QD e como ele se apresenta para o mundo. Vamos iniciar esta conversa a seguir.
Design system
O design system do Querido Diário está sendo desenvolvido seguindo a metodologia de design atômico. Este documento fornece informações importantes para mantenedores do projeto, tanto na área de frontend quanto de UI/UX design. Atualmente, estamos focando na consolidação da base do design system.
Nesta fase inicial, estamos trabalhando em dois elementos fundamentais:
- Guia de estilos
Definição das diretrizes visuais básicas do projeto.
- Mapeamento de componentes (átomos)
Identificação e documentação dos componentes mais básicos da interface.
Após a consolidação da base, planejamos evoluir para organismos, páginas, etc. Este processo nos permitirá trabalhar na interface do QD de maneira colaborativa de forma mais compreensível por todas as pessoas envolvidas.
Recursos utilizados
Para consolidar a base do design system, estamos utilizando:
Estudos de referência
Os seguintes estudos foram realizados pela Juliana Holanda Bonomo, embaixadora de Inovação Cívica da OKBR, e serão utilizados como base para nortear mudanças no projeto:
- Análise de usabilidade do QD
Este estudo avalia a experiência de uso atual e identifica áreas de melhoria na interface;
- Estudo de personas do QD
Este estudo fornece insights sobre as pessoas usuárias típicas do Querido Diário, seus usos e objetivos.
Notas para pessoas mantenedoras
Ao desenvolver novos componentes, considere como eles se encaixam na hierarquia atômica (átomo, molécula, organismo, template ou página);
Mantenha a documentação atualizada à medida que novos elementos são adicionados ao design system.