PROJETO INTERDISCIPLINAR | DESIGN DIGITAL (NOTURNO) | JULHO 2016 PLANO EXECUTIVO
QUEM SOMOS | NEW ORDER NEW MINDS Grupo criado desde o 2º semestre do curso de graduação de Design na Universidade Anhembi Morumbi (Morumbi) se compromete a fazer do design um agente de transformação das grandes cidades,contribuindo de forma objetiva para a promoção e valorização do design e seu exercício profissional no Brasil.
Douglas Duarte, DIREÇÃO DE ARTE
Kauan Dantas, WEBDESIGNER
Bruno Andrade, DIREÇÃO DE ARTE
Bruno Veiga, REVISOR
Paulo Suassuna, VIDEOMAKER
Igor Kretteis, MOTION GRAPHICS
Luis Baricatti, MARKETING
ESCOLA SUIÇA O Estilo Internacional surgiu entre 1950 e 1970 na Suíça. Esse estilo tem a característica principal de buscar a padronização da forma visual através de informações simples, concretas e racionais, retirando tudo que era considerado interferência visual objetivando de ser compreendida universalmente.
Marcelo Falco, PROF. ORIENTADOR
CURRICULUM Mestre pelo Programa de Pós-Graduação da Universidade Anhembi Morumbi, em São Paulo, Brasil, PósGraduado no MBA em Marketing e Graduado em Design Digital pela mesma instituição. Pesquisador do Design Lab TVDi e professor na graduação de Design Digital na Universidade.
KNOLL AD - HERBERT MATTER ( 1946-1966)
UNIVERSALIZAÇÃO Na universalização do design, foi adotado o uso de grids como sistema de ordenação e organização do espaço, já que expressavam uma atitude de que o designer concebia o seu trabalho em termos que são racionais, construtivos e orientados para o futuro. Acreditava-se que o trabalho do designer deveria possuir uma qualidade de fácil compreensão, objetiva, funcional e estética, do pensamento matemático. O seu trabalho deveria ser uma contribuição para a cultura geral, passando a formar parte dela. Trabalhar com o sistema de grids significava submeter-se a leis do design universal.
O movimento foi uma ramificação do Funcionalismo que tinha como proposta de expressão o princípio de que “a forma segue a função” e qualquer outro tipo de ornamento fora do propósito era visto como inútil. Desta forma as características do Estilo Internacional mudaram a arquitetura, que começou a construir edifícios buscando a funcionalidade e eliminando todos os ornamentos característicos de construções antigas.
CONCEITOS DE CRIAÇÃO Naquela época (1951), informar com objetividade, sem a intromissão dos sentimentos subjetivos do designer, com o objetivo de democratizar o acesso ao design, passou a ser um dos anseios daqueles que seguiam este estilo. O projeto teve como conceito base aplicar os elementos supostamente “objetivos” e “impessoais” que o movimento propunha na criação de um website interativo que aplica aos elementos compositivos do design (como por exemplo: grid, tipografia, formas, paleta de cores, etc.) às convicções de acessíbilidade do estilo suíço e posiciona-se a favor da utilização de uma linguagem visual que facilite a percepção do design até mesmo por leigos no assunto.
PALETA DE CORES
PÚBLICO-ALVO
Foi escolhida como cor principal do projeto o verde-limão 354 C das cores PANTONE. Pensando ainda na questão de universalização e padronização, decidimos aplica-la apenas em sua monocromia, com intuito de facilitar assim a sua utilização.
PRIMÁRIO Principalmente pessoas da classe trabalhadora, de ambos os sexos, com um mínimo de conhecimento sobre a rede digital e interessados em tecnologia, informação, tipografia, design contemporâneo, web arte e mídia. SECUNDÁRIO Em segundo plano estudantes e profissionais da área de comunicação e design, entre 15 a 25 anos, de ambos os sexos, que tenham como objetivo conhecer um pouco do conceito de democratização/universalização visual propostos pela escola suiça (swiss design) e pelo movimento Estilo Internacional.
“A solução para o problema do design deve emergir do seu conteúdo”, 1918.
R:0 G:148 B:87
C:85 M:17 Y:87 K:4
#009457 TONS A tonalidade é conseguida pela adição de preto em qualquer matiz pura. Neste exemplo, #007C48 é a cor mais escura, ao mesmo tempo #3DB773 a mais clara.
GRADIENTE O gradiente deve sempre ser aplicado em oposição a cor amarela #f9ed32, mantendo-se sempre o raio alocado apenas 50% dentro do objeto
#5DBA47 R:93 G:186 B:71
C:66 M:0 Y:100 K:0
#f9ed32
#3DB773 R:61 G:183 B:115
C:72 M:0 Y:75 K:0
#00AE66 R:0 G:174 B:102
C:80 M:2 Y:82 K:0
#007C48 R:0 G:124 B:72
C:89 M:27 Y:90 K:15
A IMPORTÂNCIA DA GRID Grid é uma malha formada por linhas guias, colunas e margens. Esta malha serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor. Elas existem e são usadas desde a idade média para diagramação de livros e documentos e algumas das estruturas criadas naquela época permanecem até hoje. Mesmo vinte anos depois da Bauhaus ter fechado as portas, os Suíços vieram a ser os verdadeiros executores da Neue Typographie, que era caracterizada por utilizar exclusivamente tipos sem serifas, fotografia, composição assimétrica, contrastes de tamanhos e posições dos elementos gráficos, sempre estruturados por uma grid auxiliar.
“Estou interessado num meio de comunicação que apresente processos simples e complicados de tal maneira que qualquer um que o contemple entenda imediatamente seu sentido".
PESQUISA ICONOGRÁFICA | PAINEL SEMÂNTICO
LOGOTIPO Um logotipo é a tradução visual da personalidade da marca. Um bom logo comunica as qualidades mais importantes de uma empresa e estabelece imediatamente o reconhecimento da mesma pelo público. Em um mercado concorrido, a presença de um logotipo bem feito faz a empresa ou o produto se destacar entre seus concorrentes, transmitindo profissionalismo e confiabilidade. Para realizar a tradução desses conceitos tão subjetivos, em algo visualmente concreto e facilmente entendido, tudo é cuidadosamente pensado. A combinação das cores, a escolha da fonte, a espessura dos traços, a criação de um ícone: cada detalhe tem um significado implícito.
PERSPECTIVA ISOMÉTRICA Entre todas as perspectivas paralelas, as isométricas são as mais comuns de serem utilizadas no dia-a-dia de escritórios de projetos de mecânica, devido à sua versatilidade e facilidade de montagem.
APLICAÇÕES VERTICAL A versão vertical do logo é composta do símbolo a cima e centralizado da tipologia e a distância é demilitada por 2x a largura de colunagem do tipo.
HORIZONTAL A versão horizontal do logo é composta do símbolo a esquerda com a tipologia a direita e espaçadas pela largura de colunagem da tipografia.
base = altura = x
SIMBOLO O símbolo é formado pelas iniciais do nome do grupo : N(new), O(order), N(new), M(minds)
TIPOLOGIA Foi usada a fonte principal do projeto (GOTHAM BLACK) com apenas uma reflexão no ultimo R
TIPOGRAFIA O sucesso dos tipos criados no Estilo Internacional como a UNIVERS (Adrian Frutiger) e a HELVETICA (Max Miedinger) advinham da grande proposta visionária de padronização da forma visual através de informações simples, concretas e racionais, eliminando qualquer tipo de interferência visual, objetivando ser compreendida universalmente. Adrian Frutiger também foi o expoente máximo da tipografia dita moderna, mais precisamente, da tipografia suíça do pós-guerra, aquela tipografia que conseguiu pôr em prática a visionária proposta dos adeptos da neue typographie: a letra universal, apropriada para todos os fins, em todos os sítios e para todas as culturas. Algumas de suas fontes são hoje “clássicos” do século XX: a Univers, a Frutiger, a Vectora, a Glipha, etc.
PRINCIPAL As fontes escolhidas para o projeto tinham de ser capazes de englobar todo o conceito de universalização tão marcante do projeto, assim como possuir características que as aproximasse historicamente da Suiça, país de origem do movimento artístico. Sendo assim, foi escolhida como fonte principal do projeto a fonte GOTHAM, pois além de ser bem geométrica, se trata de uma fonte sem serifa e sem adornos exagerados e desnecessários. AUXILIAR A HELVETICA foi escolhida como fonte auxiliar para o projeto por causa da sua origem suiça. Foi criada em 1957 por Max Miedinger e Eduard Hoffman em Münchenstein, Suíça. O objetivo do novo design foi o de criar uma tipografia neutra, clara e sem significados intrínsecos a sua forma, além de poder ser usado em uma gama de sinais.
A TIPOGRAFIA SUIÇA A Helvetica foi desenvolvida em 1957 em Münchenstein, Suíça. Miedinger quis desenvolver uma nova tipografia semserifa que pudesse competir com o aclamado Akzidenz-Grotesk no mercado Suíço. Originalmente batizado de Neue Haas Grotesk, seu design foi baseado no Schelter-Grotesk. Em 1960, o nome da tipografia foi alterada. A idéia inicial era que a fonte se chamasse Helvetia (que significa “Suíça” em latim). Entretanto, consideraram muita pretenção batizar uma fonte com o nome de uma nação. Dessa forma resolveram alterar o nome para HelvetiCA. (que em latim significa “DA” Suíça).
HOT SITE
VINHETA
A inspiração para o site do projeto New Order, New Minds surgiu da busca de referências de sites one page modernos focados em interação do usuário (através do parallax scroller). Após uma longa pesquisa, pensamos em utilizar o conceito principal da democralização do design no movimento estilo internacional de forma a tornar o aprender design mais intuitivo para leigos porém interessados no assunto. O menu fixo do site está localizado acima da home page e é acessado através do botão minimalista que se localiza a esquerda da tipografia/logo do projeto. Em sua home, o site apresentará o logotipo do projeto ao lado de uma vinheta retângular que exibirá um video conceitual sobre a geometrização da forma, uso de fotografia, e abordagem universal tão utilizados nas propostas projectuais do movimento.
O design do site valoriza o seu conteúdo tipográfico e geométrico de forma a criar uma identidade visual minimalista e limpa muito marcante. É muito comum gostarmos de um site, mesmo que seja um site antigo, apenas pelo design de suas páginas, pois uma dos principais objetivos de um site é criar essa identificação com o usuário e transmitir uma maior credibilidade através de sua interface interativa.
O conceito principal da vinheta era o de transmitir ao usuário em pouco tempo e sem nenhum som a idéia visual de universalização e geometrização das formas básicas aplicadas a situações cotidianas, assim como apresentar os integrantes do grupo New Order que propõem o projeto.
DESIGN DE INTERAÇÃO | NAVEGAÇÃO SITE Como neste projeto objetivamos a criação de um Web Art (site artístico) responsivo seguindo referências da Escola Suiça ou Estilo Internacional, decidimos guiar a navegação do usuário por etapas na construção de um cartaz, de forma que o mesmo aprenda um pouco sobre a universalização do design através de tipografia, grids, paleta de cores, etc. Assim o usuário poderá criar um cartaz de seu gosto, tanto incluindo seus próprios elementos (de forma guiada que segue o propósito da escola) quanto com alguns elementos que iremos disponibilizar, fazendo com que o usuário tenha uma interação direta com o nosso projeto. Abaixo listamos algumas das tarefas principas do site nessa construção:
1. HOME PAGE Em primeiro lugar o usuário tem um contato interativo e de identificação visual com o site. A home é composta do logotipo animado, que se movimenta o tempo inteiro, da tipologia do logo que interage caindo verticalmente, uma aba fixa lateral e uma breve explicação do conceito de universalização. Tudo começa apartir do momento que o usuário decide continuar.
2. VIDEO INTRODUTÓRIO Em segundo lugar o usuário tem um contato informativo ao se deparar com um video animado narrativo que vai explicar a ele o conceito chefe da universalização, como ela pode ser aplicada através de elementos como grid, paleta de cores, tipografia, e etc.
3. ENTENDA CRIANDO Na terceira parte do site o usuário tem um contato direto com tudo que aprendeu e põe a mão na massa ao fazer escolhas visuais que irão direciona-lo a criar um cartaz que siga os moldes do design suiço. Nesse aspecto, ele é guiado a aprender se divertindo, oque faz do site um projeto diferenciado.
4. GRIDS (GRELHAS) Na quarta fase do site o usuário tem um contato interativo e de grande importância estrutural: a escolha da grid. A grid vai ser o elemento que irá delimitar os espaços usados (utéis) do papel para a construção do cartaz, sendo essa etapa fundamental para a producão de um cartaz visualmente democratizador.
5. TIPOGRAFIA Na quinta fase compositiva o usuário tera em suas mãos 3 possibilidades de tipografias sem serifa e geométricas para a utilização, são essas: GOTHAM (que serve para um propósito de maior peso visual), DOLCE VITA (que serve para um conceito mais angular/geométrizado) e HELVETICA (que serve para um proposito mais limpo e leve.
6. PALETA DE CORES Nessa sexta fase o usuário tem a oportunidade de conhecer o quanto as cores podem influir sobre a objetividade do projeto pessoal do mesmo. Nela são dispostas 3 paletras de cores que serve para 3 tipos de propósitos diferentes: CORES FRIAS, QUENTES, E CONTRASTANTES.
7. CONSTRUÇÃO Nessa última etapa do site o usuário tem um contato direto com tudo que aprendeu e põe a mão na massa ao ter de compor conforme as escolhas visuais feitas anteriormente, que irão direciona-lo a gerar o cartaz final que siga os moldes do design suiço. Nesse aspecto, ele é guiado a aprender se divertindo, oque faz do site um projeto diferenciado.
“Estou interessado num meio de comunicação que apresente processos simples e complicados de tal maneira que qualquer um que o contemple entenda imediatamente seu sentido".
NAVEGAÇÃO | APP A versão de app para celular e tablet é quase idêntica com a versão do site para PC. O modo de navegar continua sendo por parallax, e todas as páginas e opções que são encontradas na versão continuam as mesmas, apenas reposicionadas para se adequarem corretamente a tela. Inicialmente temos a home do site com um menu lateral, uma vinheta animada sem som, o logo e o nome do projeto.
Depois temos uma página onde é reproduzido um vídeo explicativo sobre a universalização do design, para que o usuário possa se informar sobre o assunto e logo em seguida é possível começar a interagir com através da montagem de cartazes, através da escolha de tipografias, grids, paleta de cores e adição de elementos e imagens, reforçando a ideia de que qualquer pessoa pode fazer design apartir de algo.
RESPONSIVIDADE Com o crescimento da variedade de dispositivos onde os websites podem ser visualizados, pensamos que seria muito complicado desenhar múltiplas versões de um mesmo site que se encaixassem em cada uma dessas variações de resolução de tela disponíveis no mercado, por isso criamos o site do projeto responsível: um site que é compatível com todos os tamanhos de tela utilizados, ou seja, ele se adequa reposicionando os elementos a fim de mantê-lo apenas com uma rolagem vertical, eliminando a rolagem horizontal. A responsividade do site não se aplica apenas para PC, celular e tablet, mas também para navegadores que não estejam com a tela maximizada e computadores com monitores pequenos.
CONCLUSÃO Baseando-se no conteúdo acima, concluímos que o Estilo Internacional sugere que as informações devem ser transmitidas de forma mais clara e limpa possível, com poucos recursos, isto é, na composição de suas obras são usadas apenas uma tipografia, uma fotografia de fundo, restringindo o uso massivo de ilustrações, facilitando a visualização e a transmissão de seus ideais. Contudo, entendemos também que a universalização também busca a inovação, a objetivação das ideias, na montagem de obras dentro do Estilo Internacional, utilizando grids e mantendo a ordem para que as pessoas possam perceber facilmente a ideia central, a qual, o criador da mesma queira transmitir.
TECNOLOGIA | FERRAMENTAS No processo do projeto foram utilizadas diversas ferramentas tecnológicas. Dentre elas as ferramentas de produção, digital e física, envolvendo os softwares do pacote Adobe em diversos níveis. Essas ferramentas foram escolhidas por motivo de todas elas interagirem muito bem entre si (por permitirem exportação e importanção entre ambas), sendo elas:
ADOBE ILLUSTRATOR CC
ADOBE PHOTOSHOP CC
ADOBE INDESIGN CC
DREAMWEAVER, HTML5, JAVA E JQUERY
ADOBE AFTER EFFECTS
ADOBE AUDITION
PROCESSING 3.1.1