brincantes

39

site que estimula a troca e o compartilhamento de experiĂŞncias sobre o brincar

38

sumário 1

introdução, 3

site, 4

levantamento de dados e análise, 5 abordagem e estrutura arquitetura fluxograma/navegação parâmetros técnicos referências gráficas

projeto/ definições e critérios, 11

resultados, 18

estudos iniciais

home

partido gráfico

menu

tipografia

como você brincava?

recortes

como você brinca?

cores

newsletter

grid

peças de divulgação

nome e logo

agradecimentos, 34

bibliografia, 35

considerações finais, 33

2

3

introdução O brincar é um dos atos mais ancestrais desenvolvidos pelo homem, tanto para se conhecer melhor, como para se relacionar com o mundo. A brincadeira é primordial à natureza humana. Através do “espírito lúdico”, o homem pode se relacionar com a criança que mora dentro dele.

Essa é a discussão proposta pelo documentário “Tarja Branca - A revolução que faltava”, que discorre sobre a pluralidade do ato de brincar, a partir dos depoimentos de adultos de gerações, origens e profissões diferentes.

Paralelamente, o filme “Sementes do Nosso Quintal” retrata uma escola “onde a criança está acima de métodos e fórmulas de se educar. Onde natureza, música, arte, conflitos, magia e cultura popular regem o encontro das crianças, que convivem diariamente entre diferentes faixas etárias”. Ao colocar essa importância na criança, afirma o brincar como expressão natural e valoriza o seu potencial na formação e na educação.

Partindo destes dois filmes, percebi a minha intenção e interesse em trabalhar com o tema, focando no panorama atual, apresentado por eles, de uma não valorização do ato de brincar e também no quanto resgatar esse valor é importante enquanto afirmação de identidades, de culturas, e enquanto um exercício de naturalizar a brincadeira não só na infância, mas em qualquer fase da vida.

Levando em conta esses dados como motivadores para o projeto, foi possível definir o meu objetivo geral: provocar o compartilhamento das memórias do brincar e também o acesso a elas, como uma forma de estabelecer laços.

Delimitando esse objetivo, entendi que a minha justificativa de realizar esse projeto é uma busca de destacar o potencial do espírito lúdico, da atitude brincalhona, que principalmente no cotidiano urbano vem se perdendo.

Dessa maneira, acabava por concluir que a minha tarefa principal ao longo do semestre seria disponibilizar e pensar um espaço em que esse fluxo de conteúdo, a princípio de texto e imagem, compartilhados pelos usuários, acontecesse. E assim, algumas questões a serem

4

resolvidas já surgiam, como pensar o funcionamento de uma plataforma que fosse visualmente estimulante para que as pessoas pudessem acompanhar a sua construção e adensamento. Como ela se apresentaria? Gerar interesse e provocar reflexão sobre como é a postura de cada um sobre o brincar atualmente. Estabelecer critérios que norteiem e dêem unidade aos conteúdos, entre outros.

site Com recorte de tema e objetivos traçados, o primeiro passo foi definir o suporte. A decisão por essa plataforma foi guiada por algumas motivações. Nos últimos anos, com a maior facilidade de acesso à internet, nota-se que os sites passam a ter uma utilidade mais diversa, e inclusive mais simples, como alguns casos em que cumprem a função de cartões de visita, ou apenas peças de divulgação para eventos. Isso me chamou atenção para como a plataforma digital vem se aproximando dos impressos, salvas, obviamente, algumas particularidades. No meu caso, é favorável por fornecer fácil acesso a um número maior de pessoas, e principalmente possibilitar o compartilhamento e troca de conteúdo pelos usuários, além de por contar com o meio da internet ter a capacidade de se ligar às redes sociais, expandindo o raio de ação e inclusão do projeto. Outra vantagem é ser uma mídia que abriga imagens em movimento, e especialmente para o tema brincadeira achei esse fator bastante adequado.

5

levantamento de dados e análise definições de abordagem e estrutura Assim, um próximo passo foi entender que tipo de abordagem e viés eu trabalharia no site, para então começar os estudos de estrutura, fluxograma e arquitetura da plataforma.

Voltando para o meu objetivo, [provocar o compartilhamento das memórias do brincar e também o acesso a elas, como uma forma de estabelecer laços], ficou claro que eu deveria o tempo todo estar atenta para a tensão entre assunto e interesse. Com ajuda dos professores, pude identificar que se o site funcionasse apenas em cima do compartilhamento de memórias poderia ser pouco eficiente, já que há uma intenção de provocar reflexões sobre o brincar pós-infância e, ainda, de gerar discussão sobre o que significa brincar no presente.

Simultaneamente, procurei referências e projetos similares que me ajudassem a levantar e definir questões mais específicas sobre o funcionamento do site.

Encontrei o projeto Mapa do Brincar, um site desenvolvido pela Folha de São Paulo, que coletou brincadeiras relatadas por crianças de todo o Brasil e tem um grande acervo, com textos, ilustrações e vídeos que mapeiam as brincadeiras populares, as quais são divididas em categorias.

Há ainda um glossário e um espaço para links falando sobre o tema.

Há também alguns livros, como o Folclore Infantil, de Veríssimo de Melo, que reúne histórias sobre as brincadeiras brasileiras, também categorizadas em seu sumário.

Pude notar que o recurso de organizar as brincadeiras por categorias era comum em muitos projetos, e inclusive os termos que nomeavam tais categorias eram os mesmos, como brincadeira de roda, de esconder, de correr, entre outras. Percebi que aquele sistema tem uma utilidade reconhecida e que eu não deveria seguir outro caminho, portanto resolvi adotá-lo. Como o foco deste projeto não

6

está no levantamento de conteúdo e sim na plataforma que possibilita esse levantamento, outro ponto positivo reconhecido foi o de poder contar com todas as brincadeiras lá disponíveis para alimentar as simulações do meu site.

Ainda, um aprendizado foi identificar e confirmar que o meu projeto não tem a pretensão de se tornar um acervo, mas sim um espaço que propõe que se pense e reflita sobre o assunto. Este dado foi decisivo para propor, então, uma nova abordagem para o site. Estabelecer o link entre passado e presente, memória e agora, baseando-se nestas duas perguntas: “Como você brincava?” e “Como você brinca?” (esta última referindo-se ao significado do que o filme Tarja Branca chamou de “espírito lúdico”, que pode também ser entendido como atitude brincalhona).

Dessa maneira, ficou mais claro que o foco do projeto está nessa tomada de atitude, em uma provocação que alerta para um comportamento, a busca de ter a brincadeira como um recurso ou uma ferramenta do dia-a-dia.

Portanto, o público chave do site, ou seja, seus potenciais usuários são jovens, adultos e idosos, pessoas que não se considera ter (ainda) a brincadeira como expressão natural, além de terem idade suficiente para esse olhar da memória do brincar e percebam a proposta do site.

arquitetura Com as definições anteriores, já era possível esboçar a arquitetura do site, para estipular cada um dos elementos pertencentes a cada página, o número de páginas, chegando a um esqueleto da plataforma a ser desenvolvida.

Depois de algumas decisões e reformulações durante o semestre, a estrutura final foi composta por 4 páginas principais, mais subpáginas, que são janelas pop-ups, a seguir listadas com seus respectivos elementos: Home; Menu; Como você brincava?; Como você brinca?.

7

arquitetura

1.Home -logo -breve texto intro

3.Como você brincava?

2.Menu

4. Como você brinca?

-como você brincava?

+3 pop-ups

-como você brinca?

+2 pop-ups

-botão “adicionar brincadeira”;

-botão “adicionar brincadeira”

-botão “assinar newsletter”;

-conteúdo compartilhado pelos

-12 categorias de brincadeiras

usuários: texto (140 caracteres)

-conteúdo compartilhado

e/ou imagem, ou vídeo.

pelos usuários: texto e

Esta seção é mais livre, onde a

imagem (opcional)

intenção é compartilhar breves textinhos e depoimentos que expressem a opinião e visão do que

3.1. adic. brincadeira formulário com entrada de texto e imagem (opcional)

é ser brincante.

Esta página não agrupa o conteúdo por categorias, porque o objetivo é ter uma visão geral e cruzada, um painel que vai sendo construido pelos usuários.

3.2. ler brincadeira

4.1. adic. brincadeira

-acesso a texto e imagem compartilhados por usuários -botão compartilhar

formulário com entrada de texto (140 caracteres) e/ou imagem, ou vídeo

3.3. assinar newsletter

4.2. visualizar vídeo

formulário com entrada de nome, email do usuário e escolha de categorias e de frequência dos emails

assistir ao vídeo em tamanho ampliado

8

fluxograma/navegação

9

parâmetros técnicos Quanto ao funcionamento do site, sua interface deve ser o mais intuitiva e simplificada possível, pois se todo o conteúdo depende da interação do usuário, é importante que o site seja convidativo ao uso.

Uma outra questão definida é que todo conteúdo compartilhado deve ter mesma hierarquia, para valorizar o todo e a ideia de que o site funciona em rede.

Para viabilizar a navegação do site como foi planejada no fluxograma e garantir a sua programação futura, consultei amigos que trabalham na área para fazer decisões técnicas.

Resolução responsiva: Quanto à resolução adotada, ou seja, as dimensões em pixels da tela, optei pela resolução responsiva, esse recurso possibilita que a página se adapte a todos os tamanhos de monitores dos usuários.

Pesquisando e observando sites que utilizam recursos não convencionais, percebi que era importante pensar no roteiro de navegação do site, ou seja, como o caminho percorrido pelo usuário pode ser reforçado, tornando sua experiência mais intuitiva.

Efeitos: Rolagem “smooth” para as transições entre as páginas principais, fazem o mesmo desenho de movimento exposto no fluxograma. Mouseover, para gerar mais interesse na interação com o site.

Utilização de banco de dados para armazenar o conteúdo compartilhado nos formulários. Criação de layouts no software Adobe Indesign, com ajustes para WEB, unidade de medida em pixels.

Programação simulada no software Adobe Muse.

10

referências gráficas Colecionei durante o processo imagens que me trouxessem inputs gráficos, para começar a pensar qual seria a “cara” do site. As cores e formas simples foram características que valorizei e procurei nessas imagens. Além disso, pensando no público que o site pretende tocar, jovens, adultos e idosos, cuidei para selecionar elementos que não fossem necessariamente presos ao universo infantil, e que pelas formas e composições possuissem certa maturidade, por serem abstratas e até poéticas.

11

projeto/ definições e critérios assumidos estudos iniciais A partir das informações visuais absorvidas da pesquisa de referências, alguns estudos já podiam ser feitos. Neles comecei a entender que tipo de resultado os recortes em papel e as cores fortes poderiam dar.

Alternativa para a Home.

Utilizando cores primárias e aproveitando que o site teria três páginas principais, este estudo foi feito também com apenas três cores, RGB. Os recortes usados como ornamentos que entrariam no site como imagem em movimento, na extensão GIF. Além disso, essa alternativa apresentava já na home os dois botões, links para as outras duas páginas do site.

Neste caso a home seria um grande GIF, em que os textos de apresentação e os recortes ficariam alternando seus movimentos.

As imagens recortadas eram mistas entre elementos reconhecíveis e abstratos.

Neste experimento a home ia sendo apresendada aos poucos

12

e os primeiro elemento era uma animação gerada a partir da interação entre os recortes e a logo, fazendo um movimento de fora para dentro. Outra característica é que esta primeira tela seria apenas uma introdução

Aqui já começava a usar os recortes com formas menos figurativas.

partido gráfico Da coleção de referências, muito me chamaram atenção as ilustrações com formas recortadas, colagens, presença de cores fortes e alegres. Considerei estas técnicas muito adequadas, por serem bastante simples e no entanto conterem uma consistência gráfica e uma força visual positiva.

As linhas imperfeitas dos recortes trazem uma linguagem coloquial/informal que achei interessante trazer para o projeto, além de assumir a textura dos materiais utilizados, o aspecto não-digital, revelando o manual e despertando certa familiaridade. Essas características são próximas e conversam com o universo da brincadeira e, portanto, foram os princípios que escolhi seguir.

Esses recortes seriam então usados como grafismos que compusessem uma narrativa visual, de cores e formas construindo juntas um roteiro de navegação para o site.

Aliado aos grafismos, para gerar interesse ao conteúdo e à utilização da plataforma, poderia contar com alguns efeitos de movimento aplicados aos recortes.

13

tipografia

vesta extrabold vesta regular abcdef ghijlm nopqrs tuvxyz abcdef ghijlm nopqrs tuvxyz

Experimentei algumas fontes até chegar na Vesta, desenhada por Gerard Unger na foundry Linotype. É uma webfont e pode também ser utilizada como fonte display.

Tem o desenho bastante amigável, o qual me agradou no contraste e nas sutilezas da relação dos finos e grossos.

Também funciona bem quando aplicada a textos corridos.

Alguns testes foram feitos para avaliar a necessidade de uma tipografia de apoio. Concluí que as variações de peso da Vesta já davam conta de criar eventuais niveis de diferenciação no layout, como títulos e frases de chamada, por exemplo.

Além disso, optei por sua aplicação sempre em caixa baixa, exceto nas ocasiões de texto corrido, apostando em sua regularidade, que implica em um tom informal, mais simpático do que quando em caixa alta.

14

recortes Para escolher que linguagem os recortes deveriam seguir, fiz uma série de experimentos.

O último deles, e mais bem sucedido, foi o de papeis recortados em formas mais simplificadas, com os quais foi possível composições mais consistentes e menos ornamentais.

15

cores Seguindo as definições do partido gráfico, este estudo visou atender à relação narrativa que as cores criam ao longo do site. Para isso, gerei paletas de tons quentes e frios, destinadas a criar a identidade de cada uma das duas páginas em que o site é dividido: “Como você brincava?” e “Como você brinca?”.

As cores frias (azul, lilás e verde) foram aplicadas à página “Como você brincava?”, remetendo às memórias do brincar, enquanto as cores quentes aplicadas à página “Como você brinca?”, remetendo à tomada de atitude, uma chamada, ou ainda um alerta para o brincar no presente.

Como você brincava?

R 139 G 111 B 175

R 45 G 174 B 159

R 77 G 182 B 222

R 241 G 137 B 43

R 254 G 221 B 91

Como você brinca?

R 204 G 87 B 80

16

grid Como as páginas do site possuem funcionamentos diferentes, foi preciso criar uma grid modular quadriculada, que possibilita uma grande flexibilidade para a diagramação dos elementos, porém sem perder as relações de proporção entre as distâncias.

brinc antes

nome e logo Queria que o nome do site remetesse ao brincar acontecendo no momento presente, a mensagem de maior valor que pretendo reforçar com o projeto. A palavra “brincantes” me interessou não só por ser um adjetivo que significa exatamente o estado de brincar, mas também esteticamente, por sua forma bastante regular que permite algumas brincadeiras na escrita. É divertido o fato de uma palavra que fala sobre o presente, ter o sufixo “antes” e resolvi adotá-la.

Para a logo optei por reforçar esse aspecto, dividindo a palavra em duas partes “brinc” e “antes”, de acordo com as definições tipográficas feitas para o site: Vesta em caixa baixa. Alguns ajustes de entrelinha e entreletra permitiram um encaixe entre a ascendente do “t” com a linha de base do “i” e do “n”. Apesar de resultar em uma contraforma blocada, o movimento gerado por esses ajustes já começava a trazer leveza e personalidade. Para dar o tratamento de recorte e unidade à logo em relação aos outros elementos presentes nas páginas, eliminei os olhos do “b”, do “a” e do “e”. Por fim, vazei a sua forma sobre os próprios recortes que aparecem no site. Assim, as variações de fundo determinam as suas diferentes possíveis aplicações.

17

18

resultados

19

home A home possui 5 layouts, com diferentes composições das formas recortadas. A cada vez que o usuário entra no site, é sorteado aleatoriamente um dos layouts.

Os textos de abertura e introdução são revelados atrás de cada recorte, com o recurso “mouseover”. Cada um deles se move ao passar do mouse sobre eles.

800 px

1080 px

20

21

Ao clicar, a página é direcionada para o menu, através do efeito de rolagem “smooth” entre dois pontos.

vesta regular corpo 24

vesta regular corpo 42

22

menu Esta página é dividida em dois botões, que direcionam para as duas seções do site. A separação dos recortes em tons frios e quentes corresponde a cada uma das seções.

Ao passar o mouse sobre cada botão, os recortes se agrupam e formam a imagem que é ícone de suas respecivas páginas.

Ao clicar em cada botão, a página é direcionada para o lado esquerdo ou direito, sob o mesmo efeito de rolagem “smooth entre dois pontos.

vesta extrabold corpo 70

23

como você brincava?

Esta é a página para consulta e compartilhamento das memórias relativas às brincadeiras. O conteúdo compartilhado pelos usuários é organizado, então, nas 12 categorias de brincadeiras dispostas.

Ao passar o mouse sobre elas, os recortes as ressaltam.

Ao clicar em uma das categorias, desce uma lista dos conteúdos compartilhados, em que é possível escolher qual conteúdo deseja ser lido, clicando sobre ele.

vesta regular corpo 24

vesta extrabold corpo 32 vesta regular corpo 18

vesta extrabold corpo 42

vesta regular corpo 20

909 px

24

vesta regular corpo 18

As janelas para entrada e leitura de conteúdo, assim como a de assinatura de newsletter são pop-ups, que se abrem no centro da tela, se sobrepondo à tela principal. Elas são formulários, que preenchidos, são armazenados em um banco de dados que o site dispõe.

647 px

25

como você brinca?

Esta é a página para consulta e compartilhamento de depoimentos sobre qual é o significado de brincar nos dias de hoje. Ela funciona como um painel infinito em que os depoimentos vão sendo depositados e preenchendo aleatoriamente a grade. Conforme os conteúdos vão excedendo as proporções de tela do usuário, é possível arrastar o cursor e ir navegando por esse painel. Cada vez que o usuário acessa a página, aparece um enquadramento aleatório dele, para evitar repetições e tornar a leitura mais divertida. O espaço ocupado por texto, imagem e vídeo na grade possui este padrão estabelecido, com diferentes hierarquias, o que garante a formação espontânea de um mosaico coletivo.

41 px

114 px

vesta regular corpo 24

vesta regular corpo 18

26

As imagens quando compartilhadas pelo usuário ganham um tratamento duotone, nas cores da página.

Na janela pop-up adicionar brincadeira, é possível compartilhar imagem, texto (até no máximo 140 caracteres) ou link de vídeo.

Quando o usuário compartilha texto e imagem juntos, estes são depositados no painel lado a lado ou um em cima do outro, obedecendo os limites da grade.

27

Ao clicar sobre um vídeo, sua visualização é expandida, colocada ao centro da tela, enquanto todo o resto do conteúdo fica em menor destaque.

28

newsletter Como as atualizações do site chegam no corpo de email dos usuários que assinaram newsletter.

Além de possuir acesso direto a cada brincadeira, clicando sobre a categoria (roda, construir, etc) é possível retornar ao site para ver todas as brincadeiras compartilhadas.

618 px

variável de acordo com a quantidade de conteúdo assinado

29

peças de divulgação Como todo o conteúdo apresentado pelo site depende da postagem feita pelos usuários, pensar peças de divulgação é fundamental como estratégia de expandir o seu raio de alcance. Com mais potencial e eficácia, o meio digital foi escolhido como ambiente principal para essa função.

banner digital 590 px

590 px

30

Outra possibilidade traçada é criar uma página do projeto no Facebook, como uma maneira de trazer novos e frequentes usuários ao site. Para isso, a página deve ter um planejamento de postagens que façam essa ponte.

Mais eficientes em divulgação são aquelas imagens que instigam as pessoas a compartilhá-las em seu própirio facebook.

Pensando nisso, criei algumas peças em que as pessoas possam se reconhecer e fazer circular a informação.

504 px

504 px

vesta extrabold corpo 40

vesta extrabold corpo 104

31

Pรกgina do projeto no Facebook

32

Seguindo a mesma linha de criar aplicações em que as pessoas possam se apropriar da divulgação, a estampa do banner digital poderia também ser aplicada a camisetas.

www.brincantes.com.br

33

considerações finais A escolha de um tema pelo qual tenho enorme interesse foi fundamental para o desenvolvimento do trabalho, o que realmente me instigou a pensar o funcionamento desta plataforma.

Realizar o projeto de um site pela primeira vez na disciplina de projeto foi muito proveitoso, por destinar um bom tempo a cada detalhe, o que é raro e inviável no meio profissional, gerou aprender a importância de planejamento e ritmo.

Trabalhar pela primeira vez individualmente foi desafiador, não por conta do volume de trabalho, mas por estar o tempo todo com o poder de decisão sobre as demandas do projeto, principalmente nesta disciplina em que o nível de detalhamento exigido é superior a todas as outras. Foi uma oportunidade enorme de amadurecimento do pensamento em design, sobretudo para defender os argumentos e escolhas projetuais. Esse processo é intenso, acaba por ser um exercício constante de transpor o nosso repertório e os nossos valores, subjetivos, para a objetividade.

Por outro lado, isso fez com que eu buscasse o tempo todo expor minhas ideias e o andamento delas a um grupo de pessoas e reconheci o potencial dessa atitude, que deve ser levada como um hábito.

Com a conclusão deste projeto, posso confirmar que foi um semestre muito produtivo e de muitos aprendizados.

34

agradecimentos Agradeço ao Miguel, meu orientador, por desde o início do semestre mostrar seu interesse no tema e na proposta que eu começava a desenvolver. Gerou grande expectativa de que o semestre seria levado com leveza e alegria.

Agradeço por sua postura nas orientações, ao estabelecer uma relação horizontal comigo e fazer questão de dizer que o aprendizado é de via dupla. Gerou durante todo o processo conforto em expor todas as dúvidas e as inseguranças, em compartilhar tudo o que pensava e buscar sempre a minha força e o meu motivo de estar fazendo o projeto. Reconheço e agradeço por que essa relação funcionou muito e trouxe produtividade.

Agradeço à Suzana por todo o suporte dado ao longo das semanas. Muito carinho e boa vontade em passar suas impressões e conhecimentos sobre cada detalhe que eu trazia. Sinto que aproveitei muito todas as conversas e sugestões, e agora com um distanciamento reconheço que foi uma reação e contribuição ao interesse mostrado por ela em ver se o trabalho estava ou não estava andando.

Agradeço pela insistência e paciência em mostrar que em alguns momentos eu mesma não estava satisfeita com os resultados que produzi. Gerou uma inquietação, que por dias foi dolorosa, mas depois que aceitei esse dado, considero que tive um grande salto. E nessa ocasião os aprendizados e a satisfação foram multiplicados.

Agradeço à Vera Bernardes e à Evelyn Grumach pelas colaborações pontuais, por mostrarem um novo olhar ao trabalho, quando o meu já estava saturado e confuso.

Suas dicas foram fundamentais para o que o projeto se tornou por fim.

Agradeço à Fernanda Varella, à Viviane Giaquinta e ao Pedro Zylbersztajn, amigos de turma que acompanharam mais de perto o desenvolvimento do projeto e não economizaram energia para dar sugestões e trazer alegria para a rotina de trabalho.

35

bibliografia MELO, VERÍSSIMO DE. Folclore Infantil. - ED. Itatiaia MAPA DO BRINCAR. Disponível em: <http://mapadobrincar.folha.com.br>. [Consult.2014-09-03] INSTITUTO BRINCANTE. Disponível em: <http:// institubrincante.org.br>. [Consult.2014-09-10] TARJA BRANCA: A revolução que faltava. Disponível em:<http://cirandadefilmes.com.br/ tarja-branca>.

[Consult.2014-08-20] SEMENTES DO NOSSO QUINTAL. Disponível em:<http:// sementesdonossoquintal.com.br>. [Consult.2014-08-20]

40