search

ejplatform / ej-server

EJ uses gamification and machine learning to promote discussions and participation in a virtual democracy
https://ejplatform.github.io/ej-server/
Other
38 stars 17 forks source link

Formular proposta de whitelabel para boards #576

Closed ricardopoppi closed 1 year ago

ricardopoppi commented 6 years ago

Considerando a versão atual do mural (board), formular:

captura de tela de 2018-10-22 17-19-46 captura de tela de 2018-10-22 17-25-14

luizapeixe commented 6 years ago

Certo! Algumas duvidinhas:

  1. abrimos mão daquela barra com tags para filtrar os resultados a lista de conversas?
  2. paletas alternativas vc diz de cores? Onde o user escolheria essas cores? na tela de lista de conversas? ou na interna da conversa? ou no momento de criação da conversa?
ricardopoppi commented 6 years ago

oi @luizapeixe segue respostas:

  1. Não abrimos a barra nesse caso pois queremos que os usuários fiquem limitados ao board. Inclusive não poderemos exibir aquele breadcrumb de "conversas públicas" e "minhas conversas" quando o board tiver customizado

  2. Isso de cores. As paletas seriam escolhidas na tela de edição do board, assim como a logo tb seria carregada nesse contexto

luizapeixe commented 6 years ago

Ok! Criei propostas aqui. Subo no board Dataviz também?

Sobre as paletas, pensei em 6 opções, me diz oq vc acha:

captura de tela 2018-10-24 as 13 25 21

luizapeixe commented 6 years ago

Subi os layouts no board do EJ Genérico (se precisar subir no Dataviz, me digam q reorganizo aqui!)

• Lista de conversas com logo aplicado: https://invis.io/WDORF1EMQBZ

  1. fiquei na dúvida se na situação de ter um logo o título do board some ou se continua aparecendo. Deduzi q ele some
  2. Sobre as dimensões do logo, sugiro q a altura máxima seja 60px, e a largura máxima até 285px

• Criar ou Editar Mural: https://invis.io/ZKORF2EWPUM

ricardopoppi commented 6 years ago

@luizapeixe essas propostas pode incluir numa sessão "whitelabel" no protótipo do EJ Genérico no invision.

Sobre a paleta gostei bastante! Qual foi a sua fonte de inspiração? Tentou pensar em cores bem diferentes umas das outras? Discutindo com o @parrahenri e outros pensamos que vale um exercício numa modalidade mais pastel, pra gente poder até escolher algumas de cada modalidade, atendendo assim todos os gostos. Que tal?

Sobre a imagem, creio que não será necessário pedir uma nova imagem na tela de edição do board pois podemos perguntar pro usuário se ele deseja exibir a sua foto de perfil no board, assim já atende a necessidade e simplifica

ricardopoppi commented 6 years ago

@luizapeixe lendo seu ultimo comentário e olhando as telas, vi que vc propos uma imagem retangular, estilo capa. Acha melhor isso ou uma imagem quadrada ao lado do nome do board? Temos as duas opções, eu diria, mas não estou seguro por nenhuma delas (cc @parrahenri)

Assim que a gente definir a paleta, será necessário aplicar/orientar a aplicação na interna das conversas tb, já que todas as conversas do board vão herdar a paleta escolhida pelo criador do board

luizapeixe commented 6 years ago

sobre a escolha das cores, me baseei no card de conversa atual e analisei o que ali pode ser cambiante e o que deve ser preservado do componente original, tanto pra manter padrão quando pra facilitar a aplicação pros DEVS. Penso que quanto menor a quantidade de elementos variando, melhor! Então cheguei a conclusão de manter fixos o padrão do balõezinhos, o botão de "participe agora" e a cor do texto da conversa. Todos os demais elementos (podem adotar cores diferentes). Vejam o print pra ficar mais claro:

captura de tela 2018-10-24 as 15 06 58

então cheguei a conclusão que todas as paletas alternativas devem ter um tom mais escuro (que permita um boa leitura de um texto em branco) e um tom bem clarinho (que também tenha uma boa leitura sob o tom escuro). Daí, dada essa regra, busquei cores bem diferentes entre si pra dar uma diversidade interessante para as alternativas de paletas. Meu receio com tons pastéis é que eles podem dificultar a leitura do texto em branco (nesse seria necessário pensando paletas que modificariam também a cor do texto branco). Vocês podem me indicar que cores pastéis exatamente vocês têm em mente? Posso testar aqui e mostrar pra vcs.

sobre a imagem, acho que não entendi muito bem... Tinha entendido que seria um logo mesmo, tipo de um projeto ou ong ou algo assim. Então, recapitulando, o titulo deve continuar aparecendo mesmo quando o user sobe uma imagem, certo? E qual será exatamente a função da imagem no mural?

ricardopoppi commented 6 years ago

@luizapeixe entendi perfeitamente suas decisões e creio que o objetivo é esse mesmo, poder alternar entre paletas alterando apenas os elementos necessários pra isso. Acho que tons pasteis realmente exigiriam uma mudança brusca. Então acho que podemos fechar nessas propostas.

Sobre a imagem, é um logo, institucional ou de projeto. A questão é, quais os prós e cons de uma das duas opções? 1) Logo quadrada, usando a da imagem de perfil, exibida na mesma hierarquia do "nome do board" que continuariam sendo exibido 2) Logo retangular, carregada na edição do board, exibida no lugar do "nome do board" (como vc propôs)

luizapeixe commented 6 years ago

o problema de definir a imagem como 1. QUADRADA é que o logos que não forem quadrados ficarão cortados, exibindo apenas uma parte do logo. Pro caso do usuário usar a foto de perfil seria OK, porque a foto já é centralizada e recortada redonda, mas pro caso de utilizar logos não necessariamente quadrados, penso que a melhor solução seria dispor um espaço 2. RETANGULAR, determinando via código apenas a altura máxima e largura máxima para não distorcer nem fragmentar imagens mais institucionais

Alias, se optarmos pela solução QUADRADA, sugeriria usar um padrão redondo invés de quadrado, pra manter o padrão da própria foto de perfil

parrahenri commented 6 years ago

@luizapeixe @ricardopoppi pensando aqui que essa coisa da foto vai servir muito do ponto de vista negócio pra atender prefeituras que querem botar sua logo. E acho que a maior parte das logos de prefeitura são retangulares.

parrahenri commented 6 years ago

Uma pergunta: não visualizei onde essa imagem vai aparecer. É no lugar do "temas do ricardo"?

ricardopoppi commented 6 years ago

@parrahenri, na proposta retangular, a logo apareceria no topo do board, no lugar do título do board, mantendo apenas a descrição, conforme essa imagem do wireframe demonstra:

captura de tela de 2018-10-25 10-38-56

parrahenri commented 6 years ago

Cara, acho que o retangular responderá melhor e achei que tá ótimo aparecer assim! O problema é que a foto de perfil é quadrada, então acho que esse daí poderia ser um segundo campo opcional de foto. Se a pessoa quiser ela bota logo, se não, uma "foto de capa"

luizapeixe commented 6 years ago

minha proposta é que esse formato retangular seja apenas a dimensão máxima das imagens aplicadas ali, seja logo seja foto, ou seja, se o user subir uma foto quadrada, a imagem ficaria assim:

captura de tela 2018-10-25 as 11 29 10

ou seja, altura máxima de 60px

parrahenri commented 6 years ago

Fechou! gostei!

ricardopoppi commented 6 years ago

Fechado então! @luizapeixe pode organizar no protótipo do genérico e linka aqui preu organzar a issue de implementação. Sucesso!

luizapeixe commented 6 years ago

Beleza! então os finais são:

• Lista de conversas com logo aplicado: https://invis.io/WDORF1EMQBZ • Criar ou Editar Mural: https://invis.io/ZKORF2EWPUM

certo?

ricardopoppi commented 6 years ago

@luizapeixe isso aí. Só faltou aquela imagem com os thumbs das paletas detalhando cada cor escolhida e onde aplicar, bem como um exemplo de interna tb detalhando cada cor e onde aplicar. Não precisam ser 6 internas, basta uma só detalhando onde aplicar que os desenvolvedores conseguem replicar para as outras

luizapeixe commented 6 years ago

Verdade! Acabei de subir as telas faltantes. Para exemplificar os thumbnails das conversas, concentrei todos na página do Mural (se acharem confuso, me avisem!). E subi também uma versão pra cada cor da página de Criar/Editar mural, para não deixar dúvidas a respeito da aplicação das cores. Concentrei essas telas numa nova section "White Label" no invision, como você sugeriu.

O HEXs das paletas é:

  1. Azul (default): tom escuro #30BFD3 // tom claro #C4F2F4
  2. Cinza: tom escuro #666666 // tom claro #EEEEEE
  3. Rosa: tom escuro #FF3D72 // tom claro #FFE3EA
  4. Verde: tom escuro #36C273 // tom claro #B4FDD4
  5. Laranja: tom escuro #F5700A // tom claro #FFE1CA
  6. Roxo: tom escuro #7758B3 // tom claro #E7DBFF

tela de lista de conversas: https://invis.io/WDORF1EMQBZ tela de criar/editar mural default: https://invis.io/ZKORF2EWPUM tela de criar/editar mural CINZA: https://invis.io/MEOSXK1DZVA tela de criar/editar mural ROSA: https://invis.io/DQOSXKFCWR2 tela de criar/editar mural VERDE: https://invis.io/TJOSXL0G3MV tela de criar/editar mural LARANJA: https://invis.io/28OSXLBTBUR tela de criar/editar mural ROXO: https://invis.io/XJOSXLZ46SB

ricardopoppi commented 5 years ago

@luizapeixe observando essa issue percebi que acabou faltando a aplicação das paletas na interna da conversa, ex:

screencapture-ejparticipe-org-semanaenap-conversations-inovadores-2018-11-20-18_24_40

luizapeixe commented 5 years ago

ok! seguem as adaptações: