Design System (DS) GEA

Acervo de recomendações e sugestões para suporte ao desenvolvimento de produtos digitais do governo do estado do Amapá

O Problema

Contexto Geral

Entendendo o cenário

Atualmente as organizações enquanto desenvolvedoras de produtos digitais dentro de um contexto cada vez mais competitivo, tem visto o design como um grande diferencial necessário para a melhor experiência do usuário possível. O que coloca nos desenvolvedores uma grande responsabilidade ao assumirem mais projetos, oferecerem maior qualidade e trabalharem mais rápido.

Na tentativa de aumentar a produtividade através da contratação, algumas organizações aumentam o time e mesmo assim não obtém os resultados esperados, questionam por que não conseguem entregar mais rápido, uma vez que tem mais mãos trabalhando? A cada nova contratação, os novos designers trazem novas ideias para paletas de cores, tipografia e novos padrões de componentes aparecem nos produtos, aumentando a inconsistência e aumentando o custo de manutenção.

Objetivo

Abordagem estratégica para o Governo

Desenvolver uma coleção de componentes reutilizáveis, padronizados para produtos digitais unificando a linguagem visual e trezendo ao cidadão a segurança e entendimento de que de fato, está usando um produto institucional homologado pelo Estado.

O Design System (DS) não deve ser visto como um projeto, mas, como um produto interno da empresa, que precisa de pessoas que o atualizem enquanto desenvolvem soluções novas, novos componentes, novos guias de estilo. De botões arredondados e snippets de códigos à concepções de aplicação de marca, etc.

Na atual conjutura, na eventualidade de parte dos produtos digitais não serem produzidos pelo PRODAP, é importante frizar que este produto tem como foco o aspecto visual de cada componente, permitindo que as tecnologias empregadas possam ter diferentes. Trata-se de uma abordagem diferente de alguns DS institucionais que tem natureza mais restrita com várias amarras. O principal é que o cidadão tenha a segurança de reconhecer os padrões e se sentir seguro em estar usando um produto do GEA.


Envolvidos e Ferramentas

Envolvidos

  • Equipe de UX do PRODAP

Ferramentas

Elementos que deram suporte ao desenvolvimento do projeto
  • Pesquisas de iniciativas semelhantes para referência
    • DS do Governo Federal (Link)
    • DS do Governo Norte Americano (Link)
    • DS do Governo do Reino Unido (Link)
    • DS do Governo da Estônia (Link)
  • Visual Studio Code (Disponível em)

Processo

Para a resolução do problema encontrado foi composto um site composto de diversos conteúdos para apoio aos desenvolvedores de sistemas.

Relação de conteúdos:
  • Início: abordagem, validação e semântica do HTML entre outros pontos relacionados.
  • Recomendações para composição: área destinada a dar suporte aos desenvolvedores, conta com os itens "Priorizar as tarefas mais importantes"; "Pesquisar padrões de UI"; "Reduzir a aglomeração"; "Estratégia de conteúdo"; "Carregar progressivamente"; "Utilizar Interface Responsiva"; "Otimizar os códigos HTML, CSS e JavaScripts"; "Faça testes de performance"; "Controles de entrada"; e "Navegação".
  • Acessibilidade: apresentação e disponibilização da barra de acessibilidade padrão do GEA, com recursos de contraste, ajuste tamanho da fonte, atalho de teclado, mapa do site e libras. Conta também com links para os demais sites do GEA.
  • Fundamentos Visuais: área destinada a fornecer ao desenvolvedor detalhes técnicos de padrões acerca do uso de cores, princípios visuais (contraste, combinações, etc.), iconografia, tipografia, estados e grid.
  • Guias: conta com referências básicas diversas de estruturas utilizadas ou que podem ser empregadas no desenvolvimento de produtos digitais, conta com as subáreas css, javascript, prática de formulários, caixas de diálogo, formulários e HTML complementar.
  • Componentes: Nesta área será abordado em termo genéricos alguns componente com links para alguns frameworks que o comportam para referência. No caso deste Design System, serão Bootstrap e Semantic Ui. Ressaltamos que estes elementos também estão sujeitos ao uso de recursos de acessibilidade, garantindo contraste e boa leitura. Conta com as subáreas - Accordion, Badge e Breadcomb; Botões; Cartões; Seleção de Data; Separador ou Divisor; Rodapé; Cabeçalho; Inputs; Listas; Menu; Mensagens; Modal; Notificação; Paginação; Tabela; Destaque; Select; Abas; TextArea; Tooltip; Upload; e, Wizard.
  • Templates: área destinada a exibir e fornecer (download de arquivos e links para protótipos) ao desenvolvedor exemplos práticos do uso de recursos expostos neste site.
  • Atualizações: área destinada a descrever as atualizações das versões do site

Entrega

Após a finalização dos estudos e protótipos, o material foi difundido internamente e externamente para alinhamentos.