Padronização das lives: overlay

luizatonial commented 3 years ago

Dando sequência à #343 que define os padrões para as transmissões ao vivo do PRACTICE, esta issue tem o objetivo de padronizar a identidade visual das nossas lives.

Tendo em vista as diversas questões relacionadas ao overlay atual (criado na #287), bem como a falta dos arquivos brutos, o overlay precisará ser recriado e também serão ajustados alguns pontos em aberto na #360, conforme os pontos a seguir:

[x] definição e padronização das questões gráficas/layout/identidade visual do overlay
[x] criação das telas de apresentação (conteúdo/ apresentador/ conteúdo e apresentador + variações com intérpretes)
[x] criação da tela de espera inicial com contagem regressiva
[x] criação da tela de crédito (acrescentando uma tela com espaço para mediador)
[x] criação de uma tela sem o espaço para o bate-papo
[x] criação de uma tela de intervalos
[x] pensar na possibilidade de um layout genérico que possa ser disponibilizado para os solicitantes e utilizado em capacitações

PracticeUFFSBot commented 3 years ago

Criei as pastas dessa issue no Google Drive:

luizatonial commented 3 years ago

estou fazendo alguns testes, assim que tiver mais opções eu faço a postagem para irmos debatendo sobre o overlay

MaNegrao commented 3 years ago

Se precisar de ajuda estou disponivel Luiza

luizatonial commented 3 years ago

versão mais parecida com o overlay atual:

#360-Teste2 Inserir um título overlay-teste360 overlay-teste1a

luizatonial commented 3 years ago

segunda versão eu tentei dar uma variada na moldura mas achei meio 'pesado':

OL-Teste6

#360-Teste1

luizatonial commented 3 years ago

terceira versão estava tentando fazer uns testes diferentes mas não gostei muito ai não finalizei eles:

#360-Teste3 overlay-teste122 overlay-teste123

luizatonial commented 3 years ago

queridos companheiros da @practice-uffs/con-midia estou travada na tarefa e sem ideias, tentei primeiro 'replicar' o nosso overlay atual e depois variar... e até pensar em algo bem diferente, mas digamos que pelo fato de estar trancada em casa há muito tempo eu acabei com minha criatividade.

particularmente gostei mais dos primeiros mesmos, que ficaram mais limpos e tal, mas postei td pra vcs verem. enfim, preciso da opinião de vocês para conseguir seguir com a tarefa ou de sugestões de coisas que vocês acham que seria legal testar... toda e qualquer ideia é bem-vinda!!!

aqui tem umas moldurinhas tbm de sugestão, mas tbm acho q talvez ficaria meio 'carregado'... se vocês gostarem de algo eu posso fazer uns modelinhos

TaynaraCh commented 3 years ago

Oi gente, eu vou dar minha opiniãozinha, ok? kkk Acredito que seria legal usar as bordas mais orgânicas, por causa da identidade visual do programa, que tem ondas, a lâmpada, mas onde conseguir, claro. Acho também que seria interessante remover a marca d'água do fundo, menos informação melhor. Talvez tentar diminuir o contraste, o azul escuro com amarelo/laranja da um contraste muito grande, talvez tentar manter algo branco - azul escuro - azul claro (da id visual do PRACTICE) seja melhor, nesse formato que estamos utilizando me lembra muito live de games, acredito não condizer com o programa, posso ta complemente errada kkk perdãoooo

MaNegrao commented 3 years ago

Eu concordo com a Taynara, acho que seria legal ter umas ondas e tirar a logo de trás, pelo menos pra ver como fica. Mas eu gosto bastante da combinação da última cor com o azul e da primeira cor normal.

luizatonial commented 3 years ago

Oi gente, eu vou dar minha opiniãozinha, ok? kkk Acredito que seria legal usar as bordas mais orgânicas, por causa da identidade visual do programa, que tem ondas, a lâmpada, mas onde conseguir, claro. Acho também que seria interessante remover a marca d'água do fundo, menos informação melhor. Talvez tentar diminuir o contraste, o azul escuro com amarelo/laranja da um contraste muito grande, talvez tentar manter algo branco - azul escuro - azul claro (da id visual do PRACTICE) seja melhor, nesse formato que estamos utilizando me lembra muito live de games, acredito não condizer com o programa, posso ta complemente errada kkk perdãoooo

@TaynaraCh ia te marcar tbm e esqueci, muito válidas suas observações... você deve estar bem atarefada, mas caso consiga contribuir com alguma ideia/esboço simples sobre o layout acho que seria bem importante tbm kkk.

eu tbm acho muito grande o contraste do amarelo/laranja, foi por isso que comecei testar outras variações, que pareciam ficar mais harmônicas com o conjunto... tem vários outros que não coloquei aqui, mas não cheguei em nada que achei tão legal. sobre a identidade visual ser mais orgânica eu até tentei brincar com as ondas e tal mas não deu muito certo (imagem embaixo), vou esperar a opinião dos demais sobre isso tbm e na sequência tento criar mais alguma coisa.

360overlay-teste1

robisonjose commented 3 years ago

Bom dia pessoal.

Essa ultima versão que tu fez ficou interessante, porém acredito que seja difícil de utilizar. As ondas "entram" muito no tela. Acredito que seria melhor se fosse algo mais minimalista, com as ondas mais pra baixo e menores. Fiz uma versão (muito ruim) para tentar ilustrar minha ideia (fiz só na parte que ficariam os slides):

123734630-0e245480-d874-11eb-8462-f33038bb5036

robisonjose commented 3 years ago

Porém, tem que cuidar que a parte utilizável de cada espaço tenha o tamanho 16x9.

Esse é um modelo utilizando as ondas menores:

sdas sdasdas

Esse é um modelo utilizando as ondas maiores:

teste1 teste2

MaNegrao commented 3 years ago

Eu acho que isso que o robison falou é válido. Talvez uma ideia (pode ser ruim), é utilizar somente a onda laranja, ao invez de todas as ondas. Acho que se tentarmos usar todas elas vai ficar estranho pra colocar os textos também, além da invasão na tela.

TaynaraCh commented 3 years ago

Acho interessante usar uma onda só, seguindo a cor da borda e sem o filtro, a cor pura mesmo.

MilenaPaz2020 commented 3 years ago

Desculpa a demora para comentar. Preciso registrar o quão bonito é ver essa galera trabalhando e sendo criativa, um dia eu chego no nível de vocês. Sobre os modelos, creio que usar as arestas arredondadas causa uma sensação mais leve, a outra é mais "carrancuda". O modelo com ondas é interessante, orgânico e combina com a id visual do programa, como a Taynara comentou. As imagens dos modelos usando todas as ondas me passam uma sensação um pouco sufocante, pareceria que a pessoa estpa se afogando. Creio que uma única onda laranja fique mais agradável e não poluído, só cuidar para que haja espaço suficiente para colocar o nome da pessoa e instituição ou cargo, que é o que os solicitantes colocam nos formulários.

Desculpa, gente, eu preciso expressar as minhas sensações kk

amandasegattob commented 3 years ago

Oi gente! Desculpa a demora tbm hehe

Eu não consegui decidir se gostei das ondinhas (na parte inferior, pelo menos), como a Milena falou, me parece que a pessoa está se afogando, mais uma ondinha fica melhor. E se colocar ela em uma lateral? Não faço ideia de como fica, nem se ficaria bom. Eu gosto do padrão mais "limpo". Como a Taynara falou, talvez tentar usar algo branco e tons de azul da id visual fique bom.
As ondinhas poderiam ser usadas no fundo talvez ou até mesmo as lâmpadas pequenininhas com certa transparência.

Por enquanto é só isso que consigo pensar.

pedroamaximowski commented 3 years ago

@luizatonial na live que fiz dia 01/07, uma das intérpretes de libras, parabenizou nosso trabalho e achou muito legal um dos overlay, que é o de apresentação de slides com interprete, ela me disse que a forma qua as câmeras aparecem lá estão certas, estão dentro de uma norma da ABNT, que diz que em transmissões ao vivo a câmera das intérpretes de libras deve ficar no canto inferior, então reparei que no orverlay que aparece o apresentador a interprete e o chat, a câmera da interprete fica acima do chat, e pela norma ela deveria ficar abaixo do chat. A interprete falou que queria conversar comigo e iria me passar a norma que diz isto, então assim que eu entrar em contato com ela eu te passo qual é a norma da ABNT que fala isto, para você entender melhor.

pedroamaximowski commented 3 years ago

@luizatonial nas lives que fiz da semana acadêmica de engenharia de alimentos, notei que seria legal que fosse criado uma tela de espera de uma live para a outra.

luizatonial commented 3 years ago

Para fins de atualização e conhecimento geral (já que a issue foi aberta faz bastante tempo), terei uma conversa com a equipe de design esta semana para encaminhar algumas propostas e verificar o andamento que daremos ao overlay, a fim de formular um prazo para a entrega do material. Em seguida repasso os encaminhamentos para a @practice-uffs/con-midia.

Vale ressaltar que a issue está sendo construída em paralelo com as outras atividades da equipe, então apresenta uma prioridade menor, já que as transmissões do PRACTICE estão sendo realizadas com uma boa qualidade, sendo esta apenas uma reformulação estética, que não interfere diretamente no fluxo de trabalho.

luizatonial commented 3 years ago

Como consegui dar um bom andamento às demais tarefas pelas quais estava responsável, vou me dedicar um pouco mais a esta tarefa em específico e tentar criar a proposta do overlay até a Sprint 34, para que possamos ter um novo overlay no ano de 2022.

Vou tentar passar os trabalhos em andamento para o Figma para que o pessoal do design consiga já interferir/revisar durante o andamento do trabalho e a equipe de mídia consiga acompanhar como está também... já que isso é bem mais difícil no formato atual que estou trabalhando.

luizatonial commented 2 years ago

Entrei em contato com a equipe de @practice-uffs/con-design e passei a versão editável do arquivo do Figma para algumas revisões/sugestões. De qualquer forma continuarei trabalhando no material enquanto isso.

Aqui está o link para visualização, caso queiram visualizar/opinar também.

luizatonial commented 2 years ago

Também havia sido comentado sobre a criação de um template mais genérico para ser disponibilizado para os servidores da UFFS, que eu iniciei também e pode ser visualizado aqui.

MaNegrao commented 2 years ago

Eu amei o template da UFFS, parabéns demais Luiza, acho que ficou bem formal e bonito ao mesmo tempo, pra mim tá perfeito.

Quanto ao do PRACTICE eu acho que as ultimas versões estão ficando bem legais, penso que as linhas mais simples e menor variação de cores ficam melhor de olhar quando a gente tá assistindo a live por muito tempo. Assim como a quantidade de detalhes, como as redes do PRACTICE, acho que nas telas de espera são suficientes, talvez durante toda a live seja uma poluição um pouco além.

Mas meu Deus, que trabalho incrivel cara. Muito legal mesmo. Parabéns!

MilenaPaz2020 commented 2 years ago

Tô simplismente encantada com os modelos, muito incrível!

O Genérico está minimalista e informal. Gostei muito!

Sobre o modelo do PRACTICE:

Da tela de créditos, tendo a preferir a primeira opção. Creio que "os olhos se dispersam" menos quando as informações estão concentradas em um único lado da tela, em comparação com as outras opções.
Tela de espera, gostei da 4° opção. Também alinhada à esquerda.
Sobre tela de intervalo, acho interessante demarcar que são momentos diferentes (tela de "iniciaremos em breve" e de "intervalo"). Gostei da 3° opção.

amandasegattob commented 2 years ago

Eu não sei opinar quanto à funcionalidade deles, porque não entendo muito bem, mas em relação ao design, estão lindos!! Achei a versão 4 incrível, parabéns, Luiza!!

robisonjose commented 2 years ago

Eu percebi que, dentro da versão 4, tem vários layouts muito parecidos entre eles, mas com as ondinhas diferentes.

Eu gostei mais desse:

Captura de Tela (119)

Achei ele muito mais confortável de olhar, principalmente por que a parte amarela é a mais discreta de todas. Eu realmente achei esse modelo muito, muito lindo.

E, se fosse seguir o padrão dos demais (em relação à organização), eu só tiraria as redes sociais, e deixaria apenas nas telas especiais (créditos, espera, intervalo, etc), e deixaria as redes sociais sempre na parte de baixo.

Sobre o overlay genérico da UFFS, eu achei muito bom, simples e organizado. Só faria as telas especiais a mais, assim como tem na do PRACTICE, contendo também as redes sociais da UFFS.

TaynaraCh commented 2 years ago

Entrei em contato com a equipe de @practice-uffs/con-design e passei a versão editável do arquivo do Figma para algumas revisões/sugestões. De qualquer forma continuarei trabalhando no material enquanto isso.

Aqui está o link para visualização, caso queiram visualizar/opinar também.

Deixei alguns comentários no figma. Está muito bom graficamente!! E concordo com os apontamentos feito pelo Robison quanto ao foco das ondas amarelas, cria uma moldura para as telas.

luizatonial commented 2 years ago

Muito obrigada a todos pelos comentários, agora que houve uma revisão das duas equipes, vou fazer os ajustes pertinentes e apresento as telas finais para a equipe verificar!

luizatonial commented 2 years ago

Como comentado com a equipe @practice-uffs/con-midia tem-se o intuito de finalizar a base do overlay para utilização na nossa live do dia 29/11 referente ao minicurso Aprendendo a fazer transmissões ao vivo com o OBS Studio! #813 Inaugurando o novo overlay com estilo em uma live incrível e nossa. Para isso já estamos nas revisões finais e escolhas de telas, aqui.

Além disso, vamos disponibilizar, ao fim do curso o "overlay genérico" para a comunidade acadêmica! Então peço que todos deem uma olhada no mesmo aqui, acredito que já está finalizado.

robisonjose commented 2 years ago

Já tinha comentado em relação ao overlay genérico e percebi que aceitou minhas considerações. Então, não tenho mais comentários a fazer.

MilenaPaz2020 commented 2 years ago

@luizatonial, fiz alguns comentários lá no figma. Não são necessariamente correções, apenas dúvidas ou sugestões. Veja o que é pertinente.

luizatonial commented 2 years ago

Muito obrigada pelo retorno! Sobre seus comentários @MilenaPaz2020, aceitei a primeira sugestão, quando fui fazer fiquei pensando se usava o "Obrigado" ou o "Obrigada", ai aderi ao segundo pela UFFS, mas sua sugestão ficou mais adequada! Sobre a "Tela de Créditos" fiquei na dúvida se sua sugestão era escrever "creditos" na tela ou na hora da disponibilização... De qualquer forma, criei uma tela, se puder olhar

MilenaPaz2020 commented 2 years ago

Muito obrigada pelo retorno! Sobre seus comentários @MilenaPaz2020, aceitei a primeira sugestão, quando fui fazer fiquei pensando se usava o "Obrigado" ou o "Obrigada", ai aderi ao segundo pela UFFS, mas sua sugestão ficou mais adequada! Sobre a "Tela de Créditos" fiquei na dúvida se sua sugestão era escrever "creditos" na tela ou na hora da disponibilização... De qualquer forma, criei uma tela, se puder olhar

Sensacional, @luizatonial!

luizatonial commented 2 years ago

Esta tarefa está praticamente concluída (faltando somente discutirmos sobre as opções sem bate-papo), estou exportando as telas finais em png para a pasta de saída.

E os arquivos editáveis estão aqui: OVERLAY PRACTICE OVERLAY UFFS GENÉRICO

TaynaraCh commented 2 years ago

@luizatonial, você poderia adicionar os arquivos finais e aprovados aqui? Ficará salvo no Figma do programa.

luizatonial commented 2 years ago

solicitei permissão para editar @TaynaraCh

TaynaraCh commented 2 years ago

solicitei permissão para editar @TaynaraCh

pronto! achei tivesse colocado o link com autorização já, sorry

luizatonial commented 2 years ago

Tivemos um problema com o link mas coloquei o que está finalizado até agora aqui

luizatonial commented 2 years ago

como informado à @practice-uffs/con-midia o overlay como utilizamos hoje está finalizado e já em uso nas nossas capacitações, quando as capacitações acabarem utilizaremos esse layout para todas as nossas lives.

contudo, temos um detalhe pra resolver... quando iniciamos essa tarefa comentamos sobre ter 'telas alternativas' que não tivessem o espaço para o chat ao vivo. eu simplesmente apaguei os espaços de chat para testar, acabou que nao gostei mt de como ficou a tela que tem o chat maior, e gostaria que vocês opinassem e sugerissem algo para melhoria tbm (caso n tenham gostado)

estas telas não são exatamente uma prioridade e tem-se a ideia de manter o layout definido para as demais

luizatonial commented 2 years ago

se a @practice-uffs/con-design ou a @TaynaraCh em si tiver um tempinho e quiser opinar tbm...

MilenaPaz2020 commented 2 years ago

De fato, a tela com chat maior ficou com um vazio gigantesco kkk Não seria possível aumentar o espaço para captura da imagem do apresentador, né? Talvez centralizar? As demais paraceram agradáveis ao meu ver, não seria um problema usa-las.

luizatonial commented 2 years ago

De fato, a tela com chat maior ficou com um vazio gigantesco kkk Não seria possível aumentar o espaço para captura da imagem do apresentador, né? Talvez centralizar? As demais paraceram agradáveis ao meu ver, não seria um problema usa-las.

Então @MilenaPaz2020 a maior questão de aumentar a tela ou centralizar seria porque fica fora do layout do resto do overlay e também precisaria de outra cena no OBS, mas fica muito vazio mesmo do jeito que está. As demais concordo que não teria problema.

luizatonial commented 2 years ago

opção com a tela centralizada @practice-uffs/con-midia

MilenaPaz2020 commented 2 years ago

opção com a tela centralizada @practice-uffs/con-midia

Centralizado ficou tão diferente que causou estranheza. Uma alternativa é deixar essa opção, contudo pode ser que não seja usada com frequência, apenas quando explicitamente o solicitante pedir que o bate papo não apareça.

robisonjose commented 2 years ago

Uma ideia:

No lugar de centralizar, aumentar o espaço de captura de imagem, deixar ela para o lado esquerdo como estão os outros (mas maior), e colocar as redes sociais e a logo do PRACTICE no lado direito, um embaixo do outro. Ai a tela ficaria maior, mas não ficaria um espaço em branco tão grande.

MariaLuizaReviliau commented 2 years ago

Boaa, gostei da idéia Robison. Porém também teria que ser criado outra cena pois de qualquer modo altera o layout da captura

annacarolis commented 2 years ago

Pessoas, eu também gostei da ideia do Robson!

luizatonial commented 2 years ago

Atualizando essa issue: trabalhei nessa versão alternativa sugerida pelo robison, mas acabei não gostando muito no conjunto... opinem @practice-uffs/con-midia

MilenaPaz2020 commented 2 years ago

Considero que a tela com as redes sociais alinhadas à esquerda é melhor. Mas de fato, causa estranhamento kk

MaNegrao commented 2 years ago

Eu concordo com a milena no alinhamento, mas será que não da pra aumentar um pouco mais a tela Lu? pra parecer um pouco mais preenchido sabe?

practice-uffs / programa

Padronização das lives: overlay #604