Redesenhando uma home page

E se a home do Google fosse redesenhada apenas com tipografia?

Ver ampliado

A idéia foi utilizar apenas as palavras e o alinhamento entre elas para compor um grid imaginário na interface do site. A nova proposta contém apenas elementos vetoriais (os textos e a caixa de busca), garantindo mais leveza ao usuário. O Google prima sempre pela simplicidade, e uma interface all-type é a solução mais próxima desse raciocínio. Além disso, o uso de uma única família de fontes reforça o caráter de leveza e simplicidade.

Preocupações técnicas envolvidas:

• A eliminação de imagens em bitmap (como o logotipo antigo) deixa a página com menos bytes, sendo carregada mais rapidamente que a antiga.
• A ausência de grids e tabelas faz com que o site seja compatível com mais dispositivos (telas, aparelhos, computadores).
• A largura da página foi reduzida, facilitando a adaptação a outras plataformas (celulares, handhelds, smartphones, mini notebooks etc.).
• Algumas informações foram reorganizadas (iGoogle tratado como um serviço como os outros) e o botão Pesquisar foi eliminado, já que o usuário está habituado a usar a tecla enter para confirmar a pesquisa.
• As cores do logotipo e as serifas na fonte foram mantidas, já que são reconhecidas mundialmente e possuem uma forte lembrança de marca.
• A semelhança com o site atual é proposital, já que uma mudança brusca poderia causar estranhamento por parte do usuário ou complicações nas regras de negócios da empresa.
• A fonte Garamond é reconhecida por mais de 98% dos browsers presentes atualmente no mercado.

Interessante o exercício. Retomar alguns pontos vistos na teoria e colocá-los em prática é a melhor forma de fixar um conteúdo – ainda mais sabendo dosá-los com as restrições técnicas dos meios digitais envolvidos.

Exemplos de animações

Uso de várias camadas com textos e imagens
Segue um exercício de releitura dos créditos do filme Psicose, de Hitchcock. A camada de fundo é uma imagem que por diversas vezes é “fatiada” durante o andamento dos créditos. As camadas da frente contêm os textos, que percorrem os diversos espaços da tela.

Uso de máscaras
No exemplo abaixo, a camada das algas, ao fundo, aparece com uma máscara. Trata-se de um exercício do uso de máscaras no software After Effects.

Efeitos diferentes nas camadas
Abaixo um exemplo rápido de camadas diferentes se movendo sob o efeito de sombras e texturas diferentes, ao ritmo da trilha-sonora.

Efeitos de câmeras e/ou luz
Alguns vídeos se utilizam de efeitos criados com a câmera e a luz, como o exemplo abaixo. O fundo escuro ressalta as luzes em movimento, e a lente da câmera desfoca as imagens.

Simetria
O vídeo abaixo utiliza o recurso da simetria visual, de forma que a imagem da metade de cima seja refletida na metade de baixo.

Animações matemáticas
Neste site há um exemplo de animação gerada matematicamente de acordo com a interação do usuário: http://www.toshiba.eu/whatnext/pt-pt/

Pesquisa de Imagens em Pixel Art

Pesquisei algumas imagens em pixel art para o trabalho de Design em Meios Digitais. Abaixo uma imagem sobre uma cidade sustentável:

Nas demais pesquisas, procurei encontrar imagens que contivessem elementos da natureza e elementos da cidade, pois provavelmente os utilizaremos na composição sobre Sustentabilidade.

Construção de fonte digital

Como exercício da aula, criei uma tipografia baseada na fonte Garamond, alterando sua composição de vetores e vértices. Tenho pouca habilidade em softwares de ilustração, mas tentei criar 3 caracteres e suas variações em negrito e itálico. A idéia é de uma fonte que está em decomposição, e os estados negrito e itálico servem para acentuar essa decomposição. Vejam abaixo:

Fonte original, Garamond:

Fonte Derretida estado normal:

Fonte Derretida estado itálico:

Fonte Derretida estado negrito:

Interessante observar que é possível misturar esses três estados na hora de compor um texto, para que ele fique irregular.

Criação em pixel – Pop Art

Escolhi o movimento artístico Pop Art e criei uma composição em pixel art para representá-lo. Para isso escolhi a obra Marilyn Monroe, de Andy Warhol.

Em detalhes, a formação dos pixels:

Por fim, criei um pattern com a imagem aplicada repetidas vezes pela tela e com um efeito de meios-tons na palavra “POP”:

Reprodução de um estilo gráfico

O artista escolhido foi Romero Britto. Abaixo algumas obras do artista.

Pontos marcantes do traço do artista:

• Linhas grossas, que alternam de espessura durante o desenho.
• Cor preta delimitando as formas geométricas que compõem a figura e o cenário.
• Diferentes padrões preenchendo as formas geométricas: listrados, bolinhas, riscos, formas abstratas.
• Composições simples, com traços quase infantis.

Abaixo minha criação, “Árvore do Britto”, baseada no traçado do artista.

A busca de referências é um trabalho primordial em Design. Analisar o trabalho de outros artistas e identificar suas características faz parte do processo de composição de um estilo para si próprio, multifacetado, plural. As possibilidades de criação de um produto de design são infinitas, e normalmente são construídas a partir da mistura de elementos e traços de outros produtos já conhecidos. Com o tempo, a busca e o processamento de referências se dá de forma automática no cérebro, a cada novo objeto, forma ou ambiente com os quais os olhos se deparam.

Conjunto de Estruturas

Inicialmente, redesenhei o naipe de ouro a partir de 4 quadrados rotacionados em 45 graus.

Em seguida, criei a composição de uma carta de baralho utilizando réplicas das estruturas utilizadas e o vetor do número da carta.

Estrutura gráfica da forma

Abaixo um exemplo de desenho criado a partir de um elemento único (círculo).

Depois modifiquei a posição e o tamanho dos elementos que compõem a forma e obtive três variações da primeira.

Biblioteca de vetores

A partir de uma composição pode-se extrair outro tipo de processo, que é o de criar bibliotecas gráficas com elementos vetoriais para utilização em diversos projetos visuais.

Um modelo básico de biblioteca é um conjunto de elementos gráficos mais comuns, como setas e polígonos. Uma fonte pode ser entendida como esta “biblioteca de vetores”. Cada vez que uma ilustração é feita, ela é armazenada e pode ser reutilizada em partes ou no todo de diversas maneiras diferentes.

Abaixo a biblioteca de Estrelas criada como exercício para o assunto.

Composição Vetorial

Abaixo uma composição feita com elementos vetoriais. Para a composição, utilizei alguns processos de Osamu Sato, como a duplicação, rotação, redução de tamanho.

No passo 5 a composição já estava formada. Atribuí cores e variações de cores a alguns elementos para desenhar uma representação gráfica de uma vitória-régia.