search

okfn-brasil / querido-diario-frontend

Repositório com a implementação do frontend da Plataforma de Busca do Querido Diário
https://queridodiario.ok.org.br
MIT License
36 stars 32 forks source link

Concepção da área QD nas Universidades #247

Open tigreped opened 8 months ago

tigreped commented 8 months ago

Descrição

Levantamento de requisitos para a criação da área "QD nas Universidades" no site do Querido Diário, com desenho das telas e descrição dos textos, campos e outros elementos necessários.

tigreped commented 6 months ago

Requisitos

1) Item “Universidades” no menu leva para home 2) Página principal (Home) com descrição curta do projeto e de como fazer parte dele, dos ciclos e da base de conhecimento e direciona para cada um deles 3) Página “Como fazer parte do projeto” com seções específicas para cada tipo de parceria (parceria de apoio ao projeto; acompanhamento a grupo de pesquisa; acompanhamento com pessoa orientadora; desenvolvimento de pesquisa sem acompanhamento recorrente) também apontaria para o formulário de inscrição (que poderia até ser um link no limite da coisa) ou contato nos casos onde houvesse isso 4) Página “Base de conhecimento” com link para planilha (inclusive em última instância poderia até ser uma planilha do google embutida, mas legal seria poder filtrar por tags ou coisas do tipo) com metadados sobre cada resultado (tags identificadoras; quem fez; quando; que tipo de resultado é; descrição curta; título; link para arquivo ou mídia) 5) Página “Histórico dos ciclos” com seções para cada ciclo. Cada ciclo teria suas subseções de relações que desenvolvemos durante aquele ciclo (apoio ao projeto, grupos parceiros, etc.) e para cada subseção entra nas individualidades de cada projeto.

tigreped commented 6 months ago

Itens 1) e 2) qd_nas_uni_home

tigreped commented 6 months ago

Item 5) Histórico dos Ciclos

qd_nas_uni_historico_ciclos

tigreped commented 6 months ago

4) Base de conhecimento qd_nas_uni_base_conhecimento

kaiocp commented 6 months ago

oi @tigreped, tudo bem?

conforme discutido aqui eu vou puxar a implementação dessas telas :]

quaisquer alinhamentos que precisamos nós fazemos por aqui na issue ou em uma thread no #qd-frontend?

kaiocp commented 6 months ago

subi o pr #249. minha intenção é fazer pequenos prs, pra facilitar o processo de code review.

nesse primeiro pr implementei apenas o hero da home e a rota /universidades.

usei como bench os estilos da home da area-education pra manter a consistência de estilos entre diferentes páginas.

não sei se a intenção dessa tela aqui, por exemplo, era que fosse exatamente assim ou apenas uma forma de visualizar o layout. se tivermos que usar os estilos dela, só me sinalizar que eu subo as correções lá no pr 😊

ogecece commented 6 months ago

Que massa @kaiocp !

não sei se a intenção dessa https://github.com/okfn-brasil/querido-diario-frontend/issues/247#issuecomment-1959453133, por exemplo, era que fosse exatamente assim ou apenas uma forma de visualizar o layout. se tivermos que usar os estilos dela, só me sinalizar que eu subo as correções lá no pr 😊

É uma forma de visualizar o layout mesmo de baixíssima fidelidade hehehe. Basicamente o que o @tigreped considerou mais rápido para elencar "requisitos" de interface. Textos também são só placeholders.

Os estilos devem fazer sentido com o resto do site. Usa o manual de marca pra te ajudar. E estávamos iniciando um design system no último semestre mas ainda não está completo.

kaiocp commented 6 months ago

oi @ogecece, tudo bem?

solicitei acesso ao manual. você libera pra mim, por favor? 🥺

ogecece commented 6 months ago

@kaiocp pensei que já estava com acesso de leitura liberado. Pode acessar agora.

Fedra92 commented 6 months ago

Olá, segue o link do Figma para o protótipo da área QD https://www.figma.com/file/PB1ATtvIxJlqFaGLp6oVeU/Querido-Di%C3%A1rio---OK?type=design&mode=design&t=bTIrWQ7y50uq6tc9-1

A partir da tela em baixa fidelidade, fiz algumas alterações, dentre elas: aplicação de sistema de grid de 8 pt e 12 colunas. Padronização da tipografia. Troca da imagem da seção Hero. Troca dos cards para as outras páginas.

Em breve, adicionarei as outras telas.

ogecece commented 6 months ago

@Fedra92 ótimo! Vou compartilhar contigo as interfaces do MVP 1 (lançamento do site) e do MVP 2 (adição do QD-Edu e blog). Assim vai ficar mais fácil pra tu construir as interfaces com os componentes que já existem.

Sobre a tela atual, prefere feedbacks agora ou ao final quando tivermos todas prontas?

Fedra92 commented 6 months ago

Olá! Pode passar o feedback agora mesmo. Daí já tenho em mente para as próximas telas.

ogecece commented 6 months ago

Beleza!

  1. Sobre a imagem, não usamos imagens reais salvo em eventos ou notícias. Pode colocar uma ilustração 2D que tenha um contexto acadêmico, talvez envolvendo dados, não necessariamente usando pessoas, mas não tem problema usar também. Robôs e aranhas também tá valendo (mas é muito difícil encontrar ilustra pronta nesse contexto).
  2. Achei os espaçamentos entre linhas ficaram meio irregulares em comparação com a seção hero do QD-Edu. Mas acho que agora que tas com as interfaces que já estavam prontas vai ficar melhor pra manter essa consistência.
  3. Hoje temos dois estilos de cards prontos, o quadradão e o com a ponta inferior direita bem arredondada. Tas propondo a criação de um novo ou prefere reutilizar um deles?
ogecece commented 6 months ago
  1. Como fazer parte
Recolhido Expandido
qd_nas_uni_fazer_parte - ver menos qd_nas_uni_fazer_parte-expandido

Adicionei aqui os desenhos que cê fez @tigreped

Fedra92 commented 6 months ago

Beleza!

  1. Sobre a imagem, não usamos imagens reais salvo em eventos ou notícias. Pode colocar uma ilustração 2D que tenha um contexto acadêmico, talvez envolvendo dados, não necessariamente usando pessoas, mas não tem problema usar também. Robôs e aranhas também tá valendo (mas é muito difícil encontrar ilustra pronta nesse contexto).
  2. Achei os espaçamentos entre linhas ficaram meio irregulares em comparação com a seção hero do QD-Edu. Mas acho que agora que tas com as interfaces que já estavam prontas vai ficar melhor pra manter essa consistência.
  3. Hoje temos dois estilos de cards prontos, o quadradão e o com a ponta inferior direita bem arredondada. Tas propondo a criação de um novo ou prefere reutilizar um deles?

Ok! Estarei trabalhando nessas alterações.

kaiocp commented 6 months ago

pessoal, vou aguardar as alterações da @Fedra92 pra poder subir novas alterações no codebase então. combinado?

Fedra92 commented 6 months ago

Olá, segue a página home atualizada seguindo as interfaces dos MVPs 1 e 2. Tentarei enviar as demais páginas ainda hoje.

https://www.figma.com/file/PB1ATtvIxJlqFaGLp6oVeU/Querido-Di%C3%A1rio---OK?type=design&node-id=0%3A1&mode=design&t=gQgEe33kuZYOo5Pd-1

ogecece commented 5 months ago

@Fedra92 mil desculpas pela demora. Fiz comentários lá no protótipo, beleza? Só não comentei a "como fazer parte"