voz
VIVA
sua galeria de textos urbanos PUC-Rio 2015.1 Professoras orientadoras Rita Couto Evelyn Grumach Suzana Valladares Aluna Mar铆lia Proc贸pio
“As paisagens tipográficas urbanas de cada região revelam um pouco dos hábitos e costumes de seu povo, bem como elementos de sua cultura visual.” FINIZOLA, 2010, p54 “Todo cartaz na rua é uma obra de arte efêmera. A mistura de mensagens nas ruas reflete a mistura de transeuntes, cujas vidas se cruzam brevemente.” LUPTON, 2013, p183
AGRADECIMENTOS Embora projeto final tenha sido individual, uma pessoa nunca desenvolve um projeto sozinha. Por isso, gostaria de agradecer: À Julia Barros, Hanna Gutwilen, Gabriella Lopes, Erica Zambrano e Mariane Martins por juntas terem me enviado um total de 34 fotos pessoais para simular o funcionamento do projeto. À Julia Barros, Patrícia Peixoto, Manuela Lacerda e Daniel Pinho por terem emprestado seus rostinhos aos primeiros usuários. À Rita Couto por ter me acompanhado em anteprojeto e ter me aberto para os diversos desdobramentos que meu tema poderia ter me levado.
À Evelyn Grumach pelas observações bem construídas e por me lembrar de fazer tendo em mente um objetivo. À Suzana Valladares pela dedicação em estar e pensar junto. Pelas muitas anotações atenciosas mas objetivas nos relatórios. Pelos tempos extra-classe. E por argumentar sempre ponderadamente e didaticamente, respeitando as particularidades de cada orientando. Por fim, a todos que expõem suas vozes na rua e aos curiosos que as registram.
SUMÁRIO O que? Contexto Conceito Input X output Fluxograma Análise de referências Nome Primeiros estudos
Telas Iniciais Logo
Segundos estudos
Telas Iniciais Logo
Parâmetros
Logo Telas Iniciais
Conclusão Referências
05 06 07 09 10 12 17 19 19 21 24 24 29 30 30 33 44 45
O QUE? Voz Viva é um sistema digital colaborativo com o propósito de disseminar os textos colocados espontaneamente nas ruas, fomentando o interesse pelos aspectos visuais da paisagem urbana e pelo conteúdo das mensagens expostas nela. Há a intenção de descobrir e registrar o que está em pauta nas ruas da cidade, uma vez que estas são um espaço plural, democrático e com elementos visuais efêmeros.
CONTEXTO Há muitas fontes de estímulos visuais no cotidiano urbano, de forma que é impossível para um indivíduo captar e registrar tudo o que lhe é oferecido. A paisagem gráfica das grandes cidades é complexa, e apresenta muitas vozes com motivações diversas: propagandas, notícias, protestos, peças de moda, cartazes de shows e eventos, graffitis, sinalizações, etc. Diante dessa multiplicidade de dados, o indivíduo tende a se resguardar ignorando grande parte das informações a que é submetido. Essa resposta automatizada ao caos urbano é interrompida quando se encontra uma mensagem espontânea. O espontâneo salta do padrão racional e comercial da maioria dos textos urbanos e convida o indivíduo de volta à consciência, ao presente. Também pela sua não adequação ao padrão e pelo anonimato dos autores, essas mensagens são mais propensas a terem uma vida últil menor: pinta-se por cima, arranca-se, rasga-se etc., de acordo com os interesses comerciais ou privados.
CONCEITO Nas citações do começo do relatório, tanto Finizola quanto Lupton destacam o espaço urbano como um ambiente com potencial de revelar aspectos da vida das pessoas de um certo local. Ao gerar e difundir um registro fotográfico das ruas das cidades, o Voz Viva pretende proporcionar um maior conhecimento sobre o que está em pauta nesses lugares . Como o sistema será uma plataforma digital, sua única limitação será a língua, podendo a base de fotos ser alimentada por pessoas de diversas localizações do Brasil ou países lusófonos. Ao permitir a colaboração no registro da cidade o
sistema digital transgride o interesse pessoal e individual e abre espaço para um ambiente de construção coletiva, refletindo o aspecto democrático presente nas próprias ruas. Essa variedade de olhares reunidos em um mesmo local fornece um mosaico que ganha força pelo conjunto. Além de oferecer esse panorama geral das cidades, também será importante fornecer informações de data e local dos registros e rearranjá-los de acordo com o interesse do usuário seja por
técnica (grafite, stencil, etc.) por teor da mensagem (política, social ou expressão pessoal) ou por suporte (muro, asfalto, poste, etc). Para o fim de alimentar uma base inicial de fotos, coletei material na região do centro (Zona Portuária e Lapa) e zona sul (Botafogo e Urca) da cidade do Rio de Janeiro, totalizando 71 imagens e privilegiando conteúdos de contestaçãoo política, social e expressão pessoal. As fotos foram tiradas no período de janeiro a março de 2015 e as principais técnicas registradas foram o graffiti, o cartaz “lambe-lambe” e o stencil. Além disso, fiz um chamado no Facebook para que amigos e conhecidos ajudassem a registrar a cidade mandando fotos de seus celulares. Até o presente momento, foram recebidas mais 34 fotos além das 71 de acervo pessoal.
Relação das fotos coletadas: As categorias foram separadas em duas principais: contestação e expressão pessoal. Em contestação encontram-se mensagens que emitem uma opinião sobre alguma forma de autoridade seja ela governamental, institucional ou cultural. Ela é dividida entre contestação política (contra ou a favor do governo ou de instituições/ coorporações, opiniões sobre cidadania e vida em sociedade) e social (contra ou a favor de estereótipos sociais, inclui questões de etnia, crença religiosa, gênero, orientação sexual etc). Em expressão pessoal se encontram todas as outras mensagens. São opiniões de esfera individual: conselhos de vida, questões amorosas ou sobre acontecimentos cotidianos. Mensagens para outras pessoas, etc.
total: 105 fotos
EXPRESSÃO PESSOAL
CONTESTAÇÃO
23 fotos
82 fotos
POLÍTICA 63 fotos
SOCIAL 19 fotos
INPUT X OUTPUT O esquema a seguir permite a visualização do funcionamento geral do sistema, informando os tipos de dados de entrada e de saída que circularão aos usuários.
FOTOS
• data • local • filtros •comentários (opcional)
TÉCNICA (grafitti, stencil, lambe-lambe, mão livre, outro) TEOR MENSAGEM (contestação, expressão pessoal, outro) SUPORTE (muro, rua, poste, orelhão, ônibus, outro)
CADASTROS DE USUÁRIOS • e-mail • senha • cidade/ país
AVALIAÇÕES / DENÚNCIAS
TÉCNICA (grafitti, stencil, lambe-lambe, mão livre, outros) TEOR MENSAGEM (político, social, expressão pessoal, outros) SUPORTE (muro, rua, poste, orelhão, ônibus, outros) LOCALIZAÇÃO (bairro, cidade, país) POPULARIDADE (de acordo com a interação dos usuários) DATA (DD/MM/AAAA)
VISUALIZAÇÃO DE DADOS INPUT
• filtros errados / complementação de informações • notas para fotos • sugerir fotos para outros usuários de acordo com os interesses deles • denúncia de conteúdo impróprio (pornografia, violência etc) ou que fuja ao propósito do site
SISTEMA
OUTPUT
• organização por filtros • organização pessoal em uma área particular do usuário • organização coletiva em uma área particular comum a 2 ou mais usuários
SUGESTÕES • de outros usuários com os mesmos interesses • de fotos entre usuários
FLUXOGRAMA Posteriormente, esse diagrama foi traduzido em um fluxo de uso do site, como visto a seguir. Login
Home
Envie foto
Lista filtrada
Participe
Perfil Usuário
Fotos
Erro
Minhas fotos enviadas Confirmação
Fotos que avaliei
Boards
Usuários que eu sigo
Usuários que me seguem
Continuação do fluxograma
[
Continua de Home
]
Login
Login
Cadastro
Erro
Home logado
Erro
ANÁLISE DE REFERÊNCIAS Antes de começar os estudos de layout foram analisadas interfaces de sites de compartilhamento de imagens, comparando a versão desktop com a de celular para estudar as adaptações adotadas. Uma característica comum às referências analisadas foi a interface neutra e sintética para que as imagens sejam a principal fonte de interesse. São elas (imagens) que ocupam a maioria da dimensão da tela e que trazem as variações de cor para o layout.
Site Behance
Visualização desktop Desktop Grid principal de 5 colunas com larguras constantes e variação da altura de acordo com o input dos usuários. A versão desktop mostra informações adicionais: no exemplo a coluna da esquerda com largura diferente apresenta dois projetos em fase de desenvolvimento e chama usuários para darem feedback ao criador.
Celular Adaptação do conteúdo a uma só coluna com largura e altura constantes. Ordem parece ser dada com o sentido da leitura da esquerda para a direita. Ou seja, o browser no celular mostra as fotos da primeira linha, em seguida as da segunda linha etc.
Visualização celular
Site Pinterest
Visualização desktop Desktop Grid de 5 colunas com larguras constantes e variação da altura de acordo com o tamanho das imagens enviadas. Assim como no caso anterior, a versão desktop mostra uma coluna com informações secundárias que é escondida no celular.
Celular Adaptação do conteúdo a duas colunas seguindo a ordem da leitura da esquerda para a direita, como aconteceu no Behance.
Visualização celular
Site Huncwot
Visualização desktop Desktop Grid de 2 colunas com larguras constantes e variação da altura. Menor competição de imagens, mais destaque para cada foto.
Celular Adaptação do conteúdo a uma coluna, mantendo a largura constante e alterando alturas. Ordem parece começar pelas fotos da primeira coluna, com as imagens da segunda indo para o final. Texto ganha destaque em relação a foto na adaptação.
Visualização celular
NOME Primeiramente foi feito um brainstorming para levantar possibilidades de nome.
É importante que o nome e subtítulo sejam específicos e comuniquem conceitos chave do projeto de modo conciso uma vez que o usuário precisa entender rapidamente do que se trata um site. Por isso, foram cortados nomes ou subtítulos que soassem genéricos ou parecessem muito acadêmicos. Ao final desse processo sobraram os quatro nomes ao lado e o subtítulo em verde. O nome VOZ VIVA foi escilhido porque ele comunica a renovação e a pulsação presentes na rua. Além disso, ele é enérgico e intenso, e a presença da palavra “texto”no subtítulo tirou a pressão de explicar no nome que se tratam de registros de coisas escritas. Ele também destaca o espírito de autoexpressão das mensagens fotografadas.
PRIMEIROS ESTUDOS Telas O primeiro estudo desenvolvido (páginas 18-19) possuía muitas funcionalidades na mesma tela, fazendo com que a hierarquia ficasse confusa e tornando difícil sua adaptação a telas menores como de celulares e tablets.
Logo Primeiramente, foram feitas algumas experimentações gráficas buscando destacar os seguintes conceitos:
voz
VIVA
Sua galeria de textos urbanos
voz
VIVA
Pulsante Renovação Intenso Enérgico Gestual Cores quentes Ágil Efêmero Atual / Contemporâneo Movimento
VOZ VIVA
VOZ VI VA
voz
VIVA
leria de Sua gaurbanos textos
VOZ VIVA
Sua galeria de textos urbanos
voz
VIVA
voz A VIV
Para fazer uma escolha consciente da marca que seria desenvolvida, fiz um levantamento de pontos positivos e negativos das opções mais interessantes.
VOZVIVA
Sua galeria de textos urbanos
VOZ VIVA
Sua galeria de textos urbanos
voz VIVA
Sua galeria de textos urbanos
Pontos positivos: passa uma ideia de algo gestual, lembra um rabisco / traços manuais. Pontos negativos: é um pouco confuso, pode parecer um pouco infantil.
Pontos positivos: enfatiza o aspecto da voz, de haver um emissor de opinião. Pontos negativos: pode ser muito figurativo/ literal.
Pontos positivos: passa uma ideia de diálogo, troca de opiniões. Pontos negativos: pode ser muito figurativo/ literal.
voz
VIVA
Escolhi desenvolver melhor essa opção pelas características que a logo comunica. Principalmente por captar energia e movimento, principais atrativos da rua. A Futura em caixa alta é uma fonte pontuda, que passa energia. Esse aspecto foi mais acentuado na escolha do itálico e na ênfase da palavra “viva”.
Sua galeria de textos urbanos
voz
VIVA
leria des a g a u S rbano textos u
Pontos positivos: passa ideia de intervenção, interagir com algo que já existe. Pontos negativos: parece um pouco duro.
Pontos positivos: é intenso e enérgico, passa ideia de movimento e agilidade. Tem força, parece gritar. Pontos negativos: o cruzamento dos traços faz o grafismo ficar figurativo, lembra um pouco uma explosão/ estrela.
SEGUNDOS ESTUDOS Telas Os próximos estudos (páginas 24 - 28) foram criados primeiro pensando as telas que serão visualizadas no celular, pois nelas estarão explícitos os principais problemas de design. Ao sintetizar o conteúdo para melhor aproveitamento nas menores telas, as maiores estarão consequentemente bem resolvidas. A síntese visual torna necessário mostrar menos informações de cada vez,
liberando apenas o que for necessário ao usuário em cada página. Assim foram criadas uma página de apresentação para o 1º contato (pg24), uma de cadastro (pg25), uma home com um primeiro feed padrão (pg 26), um menu (pg 27) e uma demonstração de como os filtros serão acessados (pg 28).
Logo Para neutralizar os aspectos negativos apontados nos primeiros estudos, fiz outros experimentos do grafismo tentando mantê-lo somente abaixo do título, protegendo o subtítulo.
voz
VIVA
leria des a g a u S rbano textos u
voz A VIV
ria de e l a g a Su rbanos u s o t x e t
voz
VIVA
ria de Sua gaulerbanos textos
Pontos positivos: síntese do movimento, menos distrativo, entendimento mais rápido. Pontos negativos: lembra um z, associação com zorro.
Pontos positivos: síntese do movimento, não conformidade, explosão. Pontos negativos: ainda lembra um z, o espaço vertical ocupado torna a marca mais difícil de ser alocada no header horizontal do site.
Pontos positivos: espontaneidade. Pontos negativos: lembra um eletrocardiograma, parece exagerado, distrativo, associação com musica.
PARÂMETROS Logo Foi decidido adotar uma abordagem mais sintética do grafismo, diminuindo seus espaços internos para quebrar a associação com a letra z. Há opção de duas assinaturas para aplicação em espaços preponderantemente verticais ou horizontais. O subtítulo foi escrito todo em caixa baixa para diminuir sua formalidade, e seu tipo foi mudado para o utilizado nas telas do site: Source Sans Pro.
assinatura vertical
assinatura horizontal
Futura Book Oblique AaBbCcDdEeFfGgHhIiJjLlMmNnOoPpQqRrSsTtUuVvXxZz
voz
VIVA
sua galeria de textos urbanos
Futura Extra Bold Oblique AaBbCcDdEeFfGgHhIiJjLlMmNnOoPpQqRrSsTtUuVvXxZz
Source Sans Pro Semibold AaBbCcDdEeFfGgHhIiJjLlMmNnOoPpQqRrSsTtUuVvXxZz
#000000
#ed7719
voz
VIVA
sua galeria de textos urbanos
Utilização em fundos claros
voz
VIVA
sua galeria de textos urbanos
Utilização em fundos escuros
voz
VIVA
sua galeria de textos urbanos
Utilização em fundos com cores fortes
Telas Telas iniciais: Em relação à última experimentação, foi decidido usar fotos coloridas como fundo. Ele seria diferente a cada acesso, pois a interface puxaria uma outra foto enviada por algum usuário. Essa escolha pode ser feita priorizando as fotos melhores avaliadas dentro do sistema, garantindo uma certa qualidade. Essa dinâmica mantem as páginas interessantes e trás um pouco da vivacidade das ruas.
página inicial de apresentação
pรกgina de cadastro
página home
Na home foi feita a tentativa de diminuir e otimizar ao máximo o espaço do header, dando mais foco ao feed de fotos. Este chama atenção ao ser colorido em contraponto à foto de header preto e branca, e por estar em primeiro plano devido ao seu fundo branco sobreposto. O quadrado laranja simula a entrada de notícias, que ao ser introduzido ao feed quebra a monotonia de se estar olhando só para fotos por muito tempo.
A janela simula o click no botão de filtros. Parte central ao funcionamento do site, pois seu objetivo é permitir a acessibilidade às fotos e oferecer um controle preciso ao usuário do que ele gostaria de ver. Por isso, há os 3 assuntos principais técnica, mensagem e suporte - seguido por opções de localização, data e popularidade (fotos melhores avaliadas). Ênfase na tentativa de controle sob elementos que são efêmeros, sejam eles os textos urbanos em meio à rua ou as fotos em meio à sua alta quantidade .
página home, mostrando os filtros
As telas ao lado simulam o click no botão de menu, resultando na sobreposição de uma camada laranja com opacidade sobre a tela em que o usuário estava.
página home, com click no botão de menu
Ao clicar em um dos thumbnails do feed de fotos da home, o usuário é direcionado para uma tela de ampliação. É jogada uma camada com opacidade preta no feed, e por cima é aberta a foto clicada, com uma janela de comentários na direita e uma galeria de fotos relacionadas com o tema embaixo. Ao fim dos comentários, está disponível os filtros e tags marcados, junto com uma chamada para o usuário completá-los ou corrigí-los caso estejam errados. As fotos dos usuários possuem um outline preto para diferenciá-las semânticamente das fotos dos textos urbanos.
página com click em um thumbnail mostrando uma foto horizontal
pรกgina com click em um thumbnail mostrando uma foto vertical
Na tela de perfil é mantido um registro das interações do usuário no site. Ficam salvas todas as fotos já enviadas, fotos que ele avaliou, boards feitos, interações de outros usuários com ele, assim como uma breve descrição pessoal. Está presente mais uma vez a necessidade de guardar, categorizar e quantificar dados, transformando-os em informações.
página de perfil
Entrando, por exemplo, em um dos boards criados, aparecem todas as fotos incluídas nele, assim como opção de chamar outros usuários para ajudá-lo na tarefa. É mantigo na parte inferior da página um atalho para criar um outro board e outro para voltar para a primeira página de perfil.
página de perfil com click em um board
página “participe“
Na página “participe” há um breve texto expondo as motivações do projeto, seguido de um diagrama de como integrar a comunidade do site e, por fim, um apanhado das cidades que já começaram a ter seus textos registrados. Como nessa página não há fotos dos usuários para serem filtradas, a barra de busca não é necessária no header. A cor laranja também aparece mais, para fazer um contraponto com as fotos preto e brancas do sistema.
No formulário de envio de foto todas as opções de fitros são disponibilizadas para o usuário apenas escolher. O objetivo é facilitar o preenchimento para evitar desistências. Além disso, nem todas as informações são obrigatórias para o envio. Apenas a localização é essencial, uma vez que os filtros podem ser complementados ou corrigidos pelos outros usuários.
página de envio de foto
CONCLUSÃO Fazer um site em projeto conclusão foi um desafio pessoal. A primeira vez que encarei a tarefa de desenvolver um, em projeto 1003, foi um desastre. Na época prometi a mim mesma que nunca mais tentaria, no entanto, dois anos e meio depois, tive que fazer outro para projeto 1005. Foi consideravelmente melhor em comparação ao primeiro, mas ainda assim não fiquei satisfeita com o resultado. Agora, três anos e meio depois do 1003, acho que finalmente consegui chegar ao resultado que limpará as inseguranças iniciais. Nesse sentido, acho que o projeto conclusão me proporcionou tudo que eu poderia esperar dele. Tive tempo de ler livros sobre UX e usabilidade, que eram assuntos que me interessavam. Dediquei-me a aprender sobre linguagens web como HTML e CSS, sabendo que ajudaria a entender o funcionamento do meu produto. Enfim, pude fazer exatamente o que gostaria de estar fazendo nessa etapa da minha vida acadêmica e profissional. Sei também que ele me proporcionou amadurecimento projetual no sentido de tomar decisões e argumentá-las.
REFERÊNCIAS BIBLIOGRÁFICAS FINIZOLA, F. Tipografica Vernacular Urbana: uma análise dos letreiramentos populares. São Paulo: Editora Edgard Blucher ltda, 2010 SIMMEL, G. A metrópole e a vida mental In: VELHO, O. (Org.). O Fenômeno Urbano. Rio de Janeiro: Zahar Editores, 2a edição, 1973. LUPTON, E. in: HELLER, S. (Org.). Design em Diálogo. São Paulo: Editora Cosac Naify, p183, 2013. TILL, J H W. Paisagem gráfica da cidade: um olhar sobre o Rio de Janeiro. Rio de Janeiro: UFRJ / FAU, 2014. Site Behance. Disponível em < https://www. behance.net/> Acesso em abr. de 2015.
Site Pinterest. Disponível em < https://br.pinterest.com/> Acesso em abr. de 2015. Site Huncwot. Disponível em <http://huncwot.com/> Acesso em abr. de 2015.