Minimalismo por Toda Parte by Anhembi Morumbi

Minimalismo por toda parte

Sumário Sobre o Block

Objetivo do Projeto e Justificativa

Público Alvo

Tipografia

Paleta de Cores

Conceito de Criação

Estratégia de Comunicação

Criação de layout

Wireframe

Mock-Ups do Site

Sumário Conceito de Navegação

Formulário de Contato

Infográficos

Vinheta de Apresentação e Vídeo Conceitual

Elementos Sonoros

Ferramentas de Podcast

Estudo dos Materiais Promocionais

Embalagens e Rótulos

Cartaz de Divulgação

Créditos

Sobre o Block O grupo Block foi criado no intuito de realizar o projeto interdisciplinar do 2º Semestre de Design Digital da universidade Anhembi Morumbi. O projeto que será explicado ao longo desta proposta de desenvolvimento trabalha basicamente com blocos e encaixe de informações. Pensando nisto criamos o nome para o grupo e usamos a representação de um bloco de montar para ilustrar a ideia principal do projeto.

Objetivo do projeto e justificativa

Público alvo

O Projeto tem como objetivo criar um site documental para reunir as informações mais importantes sobre o contexto histórico, características, artistas do passado e atuais do Minimalismo, para mostrar como essa escola de arte do século XX faz parte da nossa vida e como identificá-la em nossa rotina; mostrar quais são as vantagens e desvantagens de seguir os ideais minimalistas e como isso pode ser aplicado na nossa comunicação e no Design. O site servirá como fonte de informação e de dicas sobre o Minimalismo para estudantes da área de comunicação visual e design.

O público alvo escolhido são estudantes da área de comunicação visual e Design, dos 18 aos 24 anos de ambos os sexos que residem no Brasil. Esse intervalo de idade foi fechado através de uma pesquisa online que realizamos para sabermos o que o nosso usuário acharia de um site documental sobre o Minimalismo, além disso, essa também costuma ser a faixa de idade das pessoas que estão começando a cursar o ensino superior e estariam necessitando de uma nova fonte de estudos para expandir os seus conhecimentos dentro da área de comunicação e design.

Tipografia A tipografia experimental pode ser definida como uma abordagem não convencional e mais artística ao desenho do tipo. Segundo o tipógrafo e idealizador da revista Tupigrafia, Cláudio Rocha: “Tipografia experimental, de forma geral, está ligada ao que se costuma chamar design de autor, em que a visão e o estilo de um designer são expressos em seu trabalho amarrados por uma proposta mais ou menos reconhecível […] O experimentalismo pode seguir em várias direções. A mistura de estilos, distorções óticas, caligrafias inusitadas e todo tipo de variações geométricas são alguns dos caminhos.” (ROCHA, Cláudio. Projeto tipográfico: análise e produção de fontes digitais.)

Assim, quando a tipografia é criada mais para expressar sua forma e menos seu conteúdo, quando ela é criada como expressão de seu designer, temos uma experimentação tipográfica. Tipografia para Títulos: - Champagne & Limousines Tipografia para textos: - Quicksand São tipografias simples, porém bonitas e impactantes. Em um mundo com excesso de informações, ter um site “limpo” pode atrair usuários por destacar o conteúdo essencial. Por esta ótica, devemos fazer com que o visitante fique focado nas informações transmitidas através de recursos que

permitam a facilidade no uso das páginas. Para isso utilizamos essas tipografias como aliadas por serem sem serifa, de bom entrelinhamento e pregnância, o que prioriza a legibilidade

Experimentação Tipografica do grupo Block

Tipografia

Experimentação Tipografica do grupo Block

Paleta de cores Procuramos utilizar cores em tons neutros e cores um pouco mais chamativas para ter um contraste maior com cores neutras. As cores serĂŁo usadas em transparencia e tons completos.

Paleta de cores final

Conceito de criação

Estratégia de Comunicação

Através da nossa pesquisa percebemos que o usuário final costuma perder o interesse em sites documentais de maneira muito rápida e acaba não assimilando o conteúdo do mesmo, então concluímos que se explorássemos mais a hipertextualidade e tirássemos o menu tradicional apresentando os conteúdos em blocos de informação, o usuário teria a liberdade de criar a sua linha de raciocínio e decidir quais informações ele vai acessar primeiro, o que o manteria mais tempo dentro do site, já que ele pode navegar conforme o seu interesse.

Usando as características do minimalismo organizaremos o conteúdo do site em blocos que apresentaram as informações além de novos links para serem consultados pelo usuário final. Para auxiliar a sua navegação ele poderá usar o mapa de navegação e a trilha que mostrará por onde ele já passou evitando que ele se perca.

Estratégia de Comunicação Home Inspirando

Artistas

Contexto Histórico

Categorias

Atualidades

Dicas

Frank Stella

Outros Nomes

Arquitetura

Sobre o Block

O Minimalismo e o Web Design

Donald Judd

Definição

Artes Plásticas

Minimalismo em embalagens de produtos famosos

Dan Flavin

O Minimalismo

Design Minimalista

Quadro de imagens

Sol LeWitt

Principais características do Minimalismo

Literatura

Minimalismo – Séries populares por Albert Exergian

Prós e Contras Thalles Trouva Robert Morris

Cinema

Sites com design minimalista

Karl Arruda Carl André

Fotografia

Richard Serra

Música

Minimalismo Atual

Pedro Vidotto

A arte de Christian Jackson

Yves Klein

Gente feliz com menos

Samuel Beckett Raymond Clevie Carver

Minimalismo: tendência confirmada para o futuro

Philip Glass Robert Bresson

O presente minimalismo.

Richard Meier Ludwig Mies van der Rohe

Fluxo de navegação do site

Galeria

Block

Contato

Mapa de navegação

Criação do Layout

Layouts Experimentais

Foi explorado o uso de layouts assimétricos diagonais e fontes tipográficas sem serifas, tudo claramente organizado dentro de uma malha estrutural. Assim como nas experimentações tipográficas, os layouts expressam a visão de cada designer e promovem uma rica mistura de estilos e ideias.

Experimentação de layout do grupo Block

Criação do Layout

Wireframe

Layout e Wireframe da página Home

Criação do Layout

Wireframe

Layout e Wireframe da página Artistas

Layout e Wireframe da página Categorias

Criação do Layout

Wireframe

Layout e Wireframe da página Galeria

Layout e Wireframe de uma página Aberta

Criação do Layout

Wireframe

Layout e Wireframe de uma página Aberta

Layout e Wireframe da página Mapa do Site

Criação do Layout

Wireframe

Layout e Wireframe da página Sobre o Block

Criação do Layout

Wireframe

Layout e Wireframe da página Área Restrita

Mock-ups do Site iPad

Mock-ups do Site iPhone

Mock-ups do Site Samsung Galaxy S4

Mock-ups do Site Tablet

Conceito de navegação Com uma interface intuitiva, cada bloco trará resumos e prévias do que o navegante encontrará caso clique nelas. Ele não será obrigado a seguir um certo tipo de caminho para chegar ao destino desejável, pois tudo que o site traz está ao seu alcance na Home. O usuário será livre para clicar nas áreas do site que mais lhe agradará e que mais lhe chamará atenção. Assim que clicarem no bloco desejável, conteúdos serão explicitados, assim como links externos de conteúdos relacionados como sugestão, caso o mesmo queira se aprofundar mais no assunto abordado. Aos cantos direito e esquerdo de cada conteúdo, haverá pequenos blocos

mostrando prévias sucintas de outras partes do site, no intuito de chamar a atenção e despertar a curiosidade, prendendo-os por mais tempo no site e no campo levantado. Logo abaixo dos conteúdos está presente a Trilha (ou Breadcrumb), onde mostrará o caminho que o usuário percorreu no site até chegar ao destino. Ela será importante pois caso o visitante queira voltar para a Home, o mesmo não precisará voltar o caminho andado mas sim, apenas, clicar no ícone Home e ser direcionado automaticamente para a Página Inicial. A navegação por mapa

nos traz uma segunda opção de exploração do site, caso o usuário fique confuso ou se sinta mais confortável em visualizar as ideias totais trazidas pelo website, a fim de poder decidir diretamente aonde ele queira clicar primeiro. A navegação por Mapa está representada no lado direito da barra inferior por meio de um ícone de um Mapa.

Formulário contato Além da exploração do site, outra forma de interação é alcançada com o formulário de contato onde o usuário pode entrar em contato conosco.

Formulário de contato

Infográficos Infográfico interativo sobre releituras minimalistas. Em 1, se clicarmos e arrastarmos o meio do quadro, podemos ver a transformação que a imagem sofreu. Em 2, após ter apenas uma das imagens na tela, nos é dado a opção de clicar no quadro para ver uma breve descrição da imagem. Em 3, ao clicar na descrição no quadro, abrirá ao lado uma tela com mais informações sobre a imagem. Storyboard do Infográfico

Infográficos Infográfico animado sobre 10 mandamentos para se ter uma vida minimalista. Este infográfico vai revelando mandamento por mandamento ao longo da animação e por fim mostra de onde tiramos essas informações e o nome do compositor e a musica que acompanha a animação.

Storyboard do Infográfico

Infográficos Esse infográfico animado mostra as características principais do minimalismo que são usadas dentro do design e traz como exemplo imagens de 4 tipos de design: o digital, o de embalagens, de interiores e de games. Além disso, esse infográfico irá complementar a categoria design do site que contempla o assunto de um modo mais geral.

Storyboard do Infográfico

Vinheta de Apresentação e Vídeo Conceitual

O vídeo conceitual mostra um breve resumo sobre o minimalismo e será colocado na pagina do contexto histórico para complementar o conteúdo da mesma. Já a introdução do site será uma pequena apresentação de como o usuário irá encontrar as informações dentro do site.

Storyboard Video conceitual Storyboard Vinheta de Apresentação

Elementos Sonoros

Ferramentas Podcast

Para complementar o conteúdo do site sobre os compositores usaremos como auxílio um player na página do principal compositor minimalista Philip Glass que tocará as suas obras e também na página Música em categorias que terá uma playlist com outros compositores incluindo o Philip Glass. Na página Música será disponibilizado o links desses outros compositores que entraram na playlist para que o usuário possa saber mais sobre o mesmo.

O podcast será um recurso disponível nas categorias arquitetura, fotografias e cinema para que o usuário possa fazer o download dos mesmos tendo assim a opção de ouvir o conteúdo da página ao invés de ler.

Exemplo de Player do podcast Exemplo de Player

Estudo dos Materiais Promocionais Em nossas peças promocionais procuramos utilizar as cores mais neutras da nossa paleta e mais repetições, duas características minimalistas bem marcantes que tornaram as nossas peças mais objetivas e claras. Como o objetivo do site é ser uma fonte para estudo criamos peças que reforcem essa ideia e possam auxíliar no mesmo, como o marca-páginas e o bloco de notas e também peças que foquem mais na divulgação do projeto e do grupo que é o caso das capinhas para celular, dos wallpapers e das camisetas.

Marca páginas

Bloco de Notas

capa de celular + wallpaper

Camisetas Block

Embalagens e Rótulos As embalagens foram pensadas para sempre lembrarem um bloco para marcamos essa característica que nos acompanha desde o logo do grupo até o layout do site e fixarmos a ideia de montagem, criação, e conexões em nosso projeto.

Rótulo do CD

Demonstração da embalagem do CD

Embalagem pra entrega do trabalho

Embalagem do CD

Cartaz de Divulgação

O cartaz para a divulgação da apresentação segue o estilo visual da capa desta proposta de desenvolvimento usando blocos e cores mais vivas para destacar as informações entre os blocos de cores neutras. As informações estão escritas de forma clara e objetiva.

Cartaz de Divulgação

Créditos Integrantes do grupo:

Beatriz Salazar

Ingrid Schwinden

André Bruneira

André Mori

Professor/Orientador: Ricardo Alexandre Bontempo

Jessica Losano

Gabriel Vecchio

Renata Bueno

Guilherme Soares

Créditos Técnicas Utilizadas

Softwares Utilizados