Protótipo da interface com mais acessibilidade (desktop e mobile).

[tainafabro]

Necessidade veio da #311, criada pelo @mateuswetah. Também posso testar a questão da fonte #322. Vou iniciar pela página da Covid-19 e vamos avançando nas outras. A ideia é termos um padrão, tudo bem eu disponibilizar pelo Zeplin e criarmos um design system por lá?

• Contraste de cores

• Contraste de fontes: tamanhos e pesos

• Grid e espaçamentos

• Tabelas e pesquisa por municípios

• Menus

@mateuswetah @turicas @gabrguedes existe mais alguma demanda em relação à interface e experiência? Ela é feita com base no Material Design do Google, certo?

[mateuswetah]

Sim, acho que é por aí. O site usa esta biblioteca: https://materializecss.com/, que como comentamos na issue não necessariamente segue a Material da melhor maneira, vide questões de contraste. Mas vamos pensando. Talvez no protótipo vc consiga propor alguns padrões para serem replicados melhor no site. Por exemplo, tem situações em que foram usados "cards dentro de cards". Isso eu eu acho bem ruinzinho, provavelmente algo que poderia ser melhor identificado com outros recursos de hierarquia.

[tainafabro]

Vou fazer uma proposta para a versão desktop e mobile, assim testamos antes de desenvolver! E pode deixar que vejo essas melhorias.

[marcmatias]

Boa noite pessoal, eu tinha começado a mexer na interface tentando não fugir muito à proposta inicial (das cores da bandeira) e também me manter mais próximo das recomendações do Materialize CSS. Segue um gif mostrando como ficou a versão que estou aqui no computador. As únicas modificações que tive que fazer em relação ao código original foi comentar o que havia sido modificado das classes de containers e de cards no arquivo application.css.

As classes que criei fiz de modo separado para não interferir na interface do resto do site e as animações que usei são do prórprio Materialize CSS.

Tive problemas para montar o site com a base de dados então algumas telas são inacessiveis para mim localmente, mas pelo que eu pude acessar que são as telas que podem ser vistas no gif abaixo e no /dataset/cursos-prouni/cursos/ (que é o dataset que eu consegui aplicar) me parecce que não teve interferencia no resto do site. Também apliquei responsividade.

Pequeno gif para se ter ideia de como fica com as animações: