Bauhaus e Google. Padronização, modernização e evolução. Design Digital - Noturno - 1º Semestre

Transcrição

1 s u a h u a BD es i gn m at er ia l

2 Bauhaus e Google Padronização, modernização e evolução Design Digital - Noturno - 1º Semestre Agatha Cristina André Vasconcelos James Gomes José Paulo Michel Costa Rafael França Orientadores: Marcelo Falco Universidade Anhembi Morumbi São Paulo 2015

3 Sumário 1. Conceito de Criação 1.1. Objetivo 1.2. Público Alvo Estratégias de Comunicação 2.1. Banner 2.2. Cartaz Marketing 2.4. Site 2.5. Vídeo Design de Interação 3.1. Conteúdo 3.2. Navegação Design de Interface 4.1. Paleta de Cores 4.2. Tipografia Tecnologias 6.1. Softwares 6.2. Linguagens de Programação

4 Conceito de Criação 4

5 Objetivo O objetivo principal do projeto é apresentar uma comparação visual e sistemática entre os padrões gráficos da escola alemã Bauhaus e os novos layouts do Android Lollipop, nova versão do sistema operacional da americana Google, lançado em Público Alvo O público alvo do projeto são estudantes das áreas de artes e design, que queiram conhecer um pouco mais do padrão da Bauhaus e do novo estilo das interfaces da americana Google, que se inspira nos conceitos da escola alemã para recriar um layout mais sofisticado. Professores das áreas de artes e design, que tenham conhecimento dos padrões da Bauhaus e em dia com as novas novidades do mercado de design. 5

6 Estratégias de Comunicação 6

7 Estratégias de Comunicação Banner A primeira peça de apoio para divulgação de nosso conteúdo é o Banner Digital. 790 px 90 px Sua principal função é a de atrair o nosso público alvo de sites parceiros para o nosso website. Wireframe do Banner Bauhaus Clique para conhecer Google Banner Finalizado Para visualizar o Banner completo, abra o arquivo digital entitulado: bauhaus_banner. Ele pode ser encontrado no CD que acompanha este Plano Executivo. 7

8 Estratégias de Comunicação Cartaz A segunda peça de apoio para divulgação de nosso conteúdo é o Cartaz Impresso. Sua principal função é a de atrair o nosso público alvo de locais específicos (como faculdades e eventos de design) para o nosso website. Para visualizar o Cartaz completo, abra o arquivo digital entitulado: bauhaus_cartaz. Ele pode ser encontrado no CD que acompanha este Plano Executivo. Cartaz Impresso em A3 Padrão CMYK 8

9 Estratégias de Comunicação Marketing A terceira peça de apoio para divulgação de nosso conteúdo é o Marketing. Sua principal função é a de atrair o nosso público alvo através do envio de s para usuários cadastrados em sites parceiros. <table> <table> <table> <table> <table> O Marketing é feito em HTML4. Encontre-o no CD como bauhaus_ 9

10 Estratégias de Comunicação Website O Website é a nossa principal peça de divulgação e exposição de conteúdo. Todas as peças de divulgação atraem o público para o website. Sua principal função é a de expor nosso contéudo e projeto, permitir o contato conosco e permitir o download de nosso Artigo. Vídeo O Layout de nosso website foi idealizado em formato One Page. A navegação do usuário (que cobriremos mais a frente) é feita por meio do scroll. História O website funciona como várias páginas (seções), no qual ao rolar para baixo, a seção é mudada completamente. Bauhaus Assim, controlamos o storytelling do website, que se inicia em Bauhaus, e termina com o Material Design. Material O artigo e o contato também estarão disponíveis na última página. Veja mais sobre o conteúdo na página: Comparativo Contato Idealização 10 Veja mais sobre a navegação na página: Acesse nosso website:

11 Layout Seção 2 (História de Bauhaus) Layout Seção 5 (Design Material) 11

12 Estratégias de Comunicação Vídeo O Website é a nossa última peça de divulgação e exposição do projeto. O vídeo foi feito utilizando a técnica de Motion Graphics e possui 01m:32s de duração. Sua principal função é a de expor dinamicamente nosso projeto, gerar interesse e trazer nosso público alvo do YouTube para nosso Website. Bauhaus & Material Design (YouTube) 12 Assista o vídeo usando o seguinte link:

13 Screencaps 00:05 00:20 00:45 00:55 01:15 01:28 13

14 Design de Interação 14

15 Design de Interação Conteúdo O conteúdo de nosso website foi resumido e simplificado. Nossa ideia é transmitida através do Vídeo e interatividade na navegação do website. Para aqueles que desejam conhecer mais sobre o projeto, o Artigo é disponibilizado na última seção (9). Design de Interação Navegação Vídeo Bauhaus Cores A navegação do website é realizada ao rolar com o mouse para baixo, ou clicar nos circulos no canto direito. O site é composto de 9 seções. Ao trocar de seção, a seção atual é deslizada para cima enquanto a nova seção entra em cena. Assim, criamos uma linha de pensamento linear para passar nosso conteúdo e projeto. Formas Tipografia A cor de fundo do website começa em um amarelho Bauhaus, e é alterada gradativamente até atingir o cinza do Material Design, assim como neste Plano Executivo. Material Design 15

16 Design de Interface 16

17 Design de Interface Paleta de Cores Para este projeto, utilizamos duas paleta de cores similares. Decidimos por este tipo de paleta pois estamos comparando dois estilos de design, e portanto as paletas são compostas por cores similares. Nossas referências são os trabalhos de Bauhaus e a comunidade do Adobe Color CC para a Paleta de Bauhaus. Para a paleta do Material Design, utilizamos a paleta oficial, disponível em: Paleta Bauhaus #6D6E70 #D7C8AE #F26621 #BE3726 # #1F201A #F0592B #EF4437 # #3E2722 Paleta Google #478FCC #F9FAFA 17

18 Design de Interface Tipografia Durante todo o projeto (com exceção do Artigo, que segue a norma ABNT), são utilizados ao todo 3 diferentes fontes. A escolha destas fontes foi baseada em pesquisas e referências. A seguir, segue as famílias de tipos utilizadas: Tipo 1: Bauhaus 93 Utilizada apenas em títulos e artes, a Bauhaus 93 é uma fonte padrão da Microsoft, e portanto é uma das mais conhecidas dentre as que utilizamos. Porém, a Bauhaus 93 não foi criada na época de Bauhaus, portanto a utilizamos apenas por seu estilo artístico e chamativo. ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz ?! 18

19 Tipo 2: Futura LT A fonte mais utilizada em nossos projetos artísticos como referência de Bauhaus, a Futura LT foi criada em 1927 por Paul Renner, e é baseada em formas geométricas que são representativas de elementos visuais do estilo de Bauhaus de Esta fonte é utilizada neste Plano Executivo para todos os textos e títulos, alternando entre as famílias Regular e Heavy. ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz ?! ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz ?! Tipo 3: Roboto A fonte mais conhecida dentre as 3, a Roboto é a fonte padrão do Material Design, e é utilizada como padrão nos dispositivos com Android. Utilizamos a Roboto sempre que nos referenciamos a Material Design, e é utilizada nos textos de nosso website. ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz ?! 19

20 Tecnologias 20

21 Tecnologias Softwares Neste projeto, utilizamos diversos Softwares para a criação das Artes, Vídeo e Websites. Estes softwares utilizados foram: Adobe After Effects CC 2014 Adobe Illustrator CS6 e CC Adobe InDesign CC 2014 Adobe Photoshop CS6 Notepad ++ Microsoft Word 2013 OpenOffice Tecnologias Linguagens de Programação O website foi criado em HTML5, com os estilos em CSS3. Porém, para a realização das interações das seções, foram utilizados alguns recursos de Javascript, como o JQuery. O nome do recurso utilizado do JQuery é Parallax. 21

22