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

4

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çãodo site

Layouts primários para

interfaces Fonte: Imagens

produzidas pelo grupo

5

interfacesdo 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 1

Layout da interface de fotografia - plano 2

Fonte: Imagens produzidas pelo grupo

6

Layout da interface de elementos gráficosplano 1

Layout da interface de livre interação

Layout da interface de elementos gráficosplano 2

Layout da interface da paleta de cores

Layout da interface de livre interação

Fonte: Imagens produzidas pelo grupo

7

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.

mapasdo site

Elementos Gráficos

Fotografia

Tipografia

Paleta de Cores

Livre

Livre

Livre

LivreInicial

Mapa de Navegação do Site

8

conteúdo 1 conteúdo 1 conteúdo 1 conteúdo 1conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2

Home

Fotografia Gráfico CorTipografia Livre

=

=

=

Interface

Interface

Conteúdo

Mapa de Informação do Site

9

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 conquista do interator.

10

interfacesdo 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.

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.

11

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

características da escola alemã.

12

Geolocalização

GaleriaVotação

Fotografe

Mapa de Navegação do Mobile

mapasdo mobile

RedesSociais

FotografiaGPSVotar

Mapa Galeria

Mapa de Informação do Mobile

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.

2 | Página interna de Bauhausbücher

1 | Contracapa de Bauhausbücher

3, 5 e 6 | Capas 4 | Contracapa de Bauhausbüchers

FONTE:http://www.christies.com/LotFinder/lot_details.aspx?intObjectID=5404360

15

16

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.

1 | bauhaus

3 | architype bayer

4 | sturm blond

6 | akzidenz-grotesk

5 | universal

2 | helvetica neue

FONTES:

1-http://www.identifont.com/samples/microsoft/Bauhaus93.gif

2-http://www.identifont.com/samples/adobe/HelveticaNeue.gif

3-http://benpittdesign.files.wordpress.com/2011/11/abayer.png

4-http://tipografos.net/tipos/sturm-blond.jpg

5-http://www.tipografos.net/tipos/bayer-universal.jpg

6-http://upload.wikimedia.org/wikipedia/commons/thumb/AkzidenzGroteskspec.png

17

#E30613 #E9DFC4

#000000 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.

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.

Softwares

Utilizados

18