Trabalho apresentado como exigência parcial para a aprovação na Disciplina Projeto Interdiscipinar – 3º período do Curso de Graduação - Design Digital - Universidade Anhembi Morumbi sob a orientação de Prof. Drausio Vicente Camarnado Junior e Prof. Álvaro Santos Gregório Filho.
O site experimental DigitalBüscher tem como objetivo apresentar os Bauhausbüchers, explorando suas características gráficas, retomando um princípio das próprias publicações que era o de propagar as ideologias conceituais da Bauhaus. Aqui, de maneira digital, o intuito é o mesmo: apresentar ao interator os principais aspectos que caracterizam os livros, tais como tipografia, fotografia, cores e elementos gráficos, divulgando seus ideais de concepção que foram tão representativos para o período, marcando uma inovação na forma de comunicação visual a partir de sua criação. Nesta proposta, a preocupação é criar um acesso às informações de forma interativa, para que o conteúdo seja levado ao interator de um jeito não-convencional, numa navegação que seja atraente e provoque a imersão, promovendo uma divulgação dos conceitos de criação que originaram as obras escolhidas como referências.
3
O foco do projeto, em sua versão final, ficou delimitado à abordagem dos Bauhausbücher, entretanto, a evolução do processo de desenvolvimento passou por diferentes momentos, transformando-se e desdobrando-se ao longo do caminho até chegar ao recorte final. As propostas foram sendo deixadas de lado e substituídas por que em sua maioria A proposta inicial do grupo era bem distinta a essa. As ideias foram de Itten e Lego à simulador de ambientes, passando por galerias de imagens. Entretanto todas careciam de fundamentos e não foram levadas adiante. De fato, o tema aprofundou-se nos trabalhos gráficos de Moholy-Nagy e então começaram a surgir as primeiras ideias para as interfaces e todas derivaram dessa última ideia: apresentar as produções gráficas de Moholy-Nagy, mas até essa fase o que havia eram somente roughs. O arremate foi direcionar o foco para o alvo dos Bauhausbücher, e a partir daí foram desenvolvidos os primeiros layouts para o site experimental. Foram criadas algumas interfaces com paletas de cores, disposição de elementos e conteúdos que ao longo da evolução foram sendo modificados até chegar ao ponto de divulgação final. A seguir, algumas propostas das interfaces elaboradas no princípio do desenvolvimento. do projeto.
evolução do site
4
Layouts primários para interfaces Fonte: Imagens produzidas pelo grupo
interfaces do site Como apontado anteriormente, a proposta é apresentar no site as características visuais e gráficas existentes nos Bauhausbücher. Assim, o intuito é aplicar nas interfaces elementos que, já num primeiro olhar do interator, possam ser claramente identificáveis como referência aos elementos que compunham as publicações. Após todo o processo de desenvolvimento da pesquisa teórica e dos primeiros estudos de criação, optou-se por dividir o site em interfaces nas quais seriam pontuadas, em cada uma delas, uma das caracteristicas especificas dos conceitos presentes nos livros, como por exemplo tipografia ou elementos gráficos.
Layout da interface de abertura
Layout da interface de tipografia
Layout da interface de fotografia - plano 2
5 Layout da interface de fotografia - plano 1
Fonte: Imagens produzidas pelo grupo
Layout da interface de elementos gráficos plano 1
Layout da interface de elementos gráficos plano 2
Layout da interface da paleta de cores
Layout da interface de livre interação
6 Fonte: Imagens produzidas pelo grupo
Layout da interface de livre interação
mapas do site Haverá cinco grandes divisões para o site, cada uma com sua respectiva interface, sendo que em cada uma delas será analisado um aspecto que constitui parte relevante das composições visuais das publicações sendo: abertura, tipografia, fotografia, elementos gráficos e numeração além de uma área dedicada à criação do próprio interator. Nessas grandes áreas, haverá novas interfaces, derivadas da interatividade da navegação.
Mapa de Navegação do Site Livre
Elementos Gráficos
Fotografia Livre
Livre Inicial
Tipografia
Paleta de Cores
Livre
7
Mapa de Informação do Site Home
Fotografia
Tipografia
conteúdo 1
conteúdo 2
conteúdo 1
= Interface = Interface = Conteúdo
8
conteúdo 2
Cor
Gráfico
conteúdo 1
conteúdo 2
conteúdo 1
Livre
conteúdo 2
Outra exigência para o semestre é a criação de um aplicativo para dispositivos móveis. Para essa etapa do projeto a ideia foi basicamente a mesma desde o princípio das discussões entre o grupo, o que facilitou o desenvolvimento da proposta, tanto para a criação das interfaces quanto para a definição do conceito. Para tanto, optou-se por criar um aplicativo, o Whats Bauhaus que tem como objetivo mapear a cidade de São Paulo com pontos que tenham referências da Bauhaus, destacando os pontos que os interatores considerem característicos da escola, seja pelos aspectos arquitetônicos, gráficos, composições fotográficas, ou até mesmo de mobiliário ou objetos diversos presentes no local selecionado. O aplicativo conta com recursos fotográficos, recursos de Geolocalização e de redes sociais. Por meio do aplicativo, o interator fotografa pontos da cidade de São Paulo que julgue ter características da escola e envia a imagem ao Whats Bauhaus pelo próprio dispositivo móvel. Esta foto vai para votação, concorrendo com imagens de outros usuários que também postaram suas fotos. As fotografias mais votadas são utilizadas para mapear a cidade e criam uma rota com os pontos de destaque, que pode ser vista numa outra área do aplicativo. Também é possível manter uma galeria dentro do aplicativo. O recurso da votação só é habilitado nas fotos que tenham sido previamente marcadas e ativadas com a função de geolocalização antes da publicação. Além disso, o Whats Bauhaus procura manter uma navegação simples, boa interatividade e sincronização com as redes sociais, quesitos básicos para um bom desempenho e 9 conquista do interator.
interfaces do mobile Para o aplicativo, graficamente a solução visual foi semelhante à aplicada no site experimental, trazendo as mesmas referências visuais de elementos gráficos, paleta de cores e tipografia, respeitando a limitação de espaço necessária para o bom desempenho das funções do aplicativo. Para explorar tais recursos, haverá quatro interfaces: FOTO - A primeira é a da captura de imagem, onde o interator fotografa o local que considera “Bauhaus” e pode contribuir enviando sua foto. É nessa área que haverá a interação com o sistema de geolocalização (que pode ser ativado para que suas informações sejam utilizadas tanto no aplicativo quanto nas redes sociais) e, também, com as redes sociais Facebook, Twitter e Flickr por meio das quais poderá enviar suas imagens. Somente as imagens que tiverem a opção de geolocalização ativada participam da votação.
10
GALERIA - A interface seguinte também conta com recursos de fotografia. Aqui o interator visualiza as próprias fotos enviadas, exibidas numa galeria, sendo-lhe permitido editar esse conteúdo, excluindo alguma foto que não deseje mais em seu álbum.
VOTE – Nessa área o interator irá visualizar simultaneamente duas imagens, de dois usuários, apresentadas de maneira aleatória, para que possa votar em uma delas, escolhendo a que considerar “Mais Bauhaus”. A sequência de imagens será apresentada indefinidamente, até que o usuário vá para uma outra área.
MAPA – Nessa interface, o interator poderá visualizar e, também, acessar os pontos mais votados por todos os usuários do aplicativo, que estarão em destaque. As localizações selecionadas serão exibidas no Google Maps, que ainda possibilita ao usuário traçar uma rota para que chegue aos locais destacados.
Assim, o aplicativo, por meio da interação dos usuários, promove uma competição entre eles mesmos, uma vez que votam nas imagens que consideram mais coerentes com o tema proposto, e permite traçar na cidade uma rota de locais que podem serem vistos e visitados ou até mesmo revistos e revisitados, sob um olhar com as 11 características da escola alemã.
mapas do mobile Mapa de Navegação do Mobile
Geolocalização
Votação
Galeria
Fotografe
Mapa de Informação do Mobile
12
Votar
GPS
Mapa
Galeria
Fotografia
Redes Sociais
Iconografia
13
A escolha das imagens que inspiraram a composição visual partiram das publicações Bauhausbücher; foram escolhidas imagens das capas ou das páginas de conteúdo das publicações. Aqui está uma amostra dos principais elementos apresentados nas interfaces do site: linhas e barras destacadas, que atuam como organizador espacial, fontes sem serifa, grandes áreas de fundos sem preenchimento que atuam como parte da composição, uso de fotografias que já carregam informação em si mesmas, não figurando meramente como ilustrativas. Todas essas características estão presentes no site experimental, aplicadas isoladamente ou somadas.
1 | Contracapa de Bauhausbücher
2 | Página interna de Bauhausbücher
FONTE: http://www.christies.com/LotFinder/lo t_details.aspx?intObjectID=5404360
3, 5 e 6 | Capas
4 | Contracapa de Bauhausbüchers
15
1 | bauhaus
2 | helvetica neue
3 | architype bayer 4 | sturm blond
As tipografias utilizadas no site e no mobile foram a Bauhaus, usada para títulos e a Helvetica Neue, para os blocos de textos. A escolha por esses tipos deve-se ao fato de essas fontes serem as mais próximas do que era utilizado originalmente nas publicações da Bauhaus. A tipografia foi um elemento bastante valorizado nas composições de László Moholy-Nagy e integrava a criação com destaque. Era frequente o uso de fontes sem serifa e idealizavam o uso de uma fonte universal, somente com o uso de caixa baixa. FONTES: 1-http://www.identifont.com/samples/ microsoft/Bauhaus93.gif
6 | akzidenz-grotesk 5 | universal
2-http://www.identifont.com/samples/a dobe/HelveticaNeue.gif 3-http://benpittdesign.files.wordpress.c om/2011/11/abayer.png 4-http://tipografos.net/tipos/sturm-blo nd.jpg 5-http://www.tipografos.net/tipos/baye r-universal.jpg
16
6-http://upload.wikimedia.org/wikipedi a/commons/thumb/AkzidenzGrotesksp ec.png
#E30613 #000000
17
#E9DFC4 As cores utilizadas em predominância nesse projeto, tanto no site quanto no aplicativo, são o preto e o vermelho, cores fortemente destacadas nas composições dos Bauhausbücher. A busca por apresentar características particulares e próprias das publicações, reflete-se no cuidado em utilizar uma paleta de cores fiel ao padrão encontrado nos livros, com o uso destacado e predominante do preto e vermelho e para destacar todas as composições e compor um fundo neutro que permitisse destacar as imagens e ilustrações, fez-se uso de um tom bege.
s e r a w t Sof izados l i t U
18
Para a realização da pesquisa teórica referencial, utilizamos somente o Microsoft Word. A produção da Proposta Projetual foi feita através do Adobe Illustrator e o Adobe Photoshop. O Photoshop também foi utilizado nos storyboards. No site utilizamos o Adobe Flash Pro, com suporte para a linguagem de programação em AS3. O Dreamweaver só será utilizado para incorporar o flash em uma página HTML para acessar na WEB.