-
Ao longo das próximas aulas, gostaria de apresentá-los ao Design Gráfico
-
e um conjunto de estratégias para ajudá-los a se comunicarem visualmente de forma eficaz.
-
Para iniciar, vamos observar este exemplo:
-
Um texto indiferenciado.
-
O que poderíamos fazer para melhorar este texto tipograficamente e como avaliar se fizemos bem?
-
Uma coisa que podemos é introduzir alguns espaços em branco;
-
e como Robert Bringhurst diz, com espaço em branco,
-
"Alguns espaços devem ser reduzidos para que outros se torne maior,
-
e alguns espaços devem ser esvaziados de modo que outros possam ser preenchidos."
-
Então, vamos esvaziar alguns espaços e preencher outros.
-
E o que você pode ver aqui é que adicionando um pouco de espaço em banco somos capazes de "blocar" o design visual
-
de modo que as partes relevantes estão agrupados e as demais estão afastadas.
-
Mas eu aposto que poderíamos fazer mais.
-
Então, o que mais poderíamos fazer aqui?
-
Vamos explorar usando variação de tipografia e contraste de tamanho para dar algum sentido de hierarquia individual
-
e como descreve Edward Tufte, informação consiste de diferenças que fazem a diferença.
-
Então aqui nós fizemos algo adicionando uma certa escala e um pouco de "peso" —
-
Você sabe, isso pode ou não ser a melhor invenção de design do mundo, mas lhe dá uma direção
-
no tipo de importância que você pode obter adicionando algumas variações tipográficas
-
Claro que você não quer exagerar, mas eu gosto muito desse exercício.
-
Me inspirei no livro de Jenifer Tidwell "Designing Interfaces"
-
que fortemente recomendo e planejava trazer para mostrar neste vídeo.
-
Tenho duas copias mas recomendo ele com frequência
-
que ambos estão emprestados agora, então vocês terão que procurá-lo.
-
Frequentemente, um bom design visual — tal como bom desempenho ou boa visibilidade —
-
passa despercebido porque o conteúdo vem por meio de clareza e desobstrução.
-
Claro, algumas vezes realmente notamos bons projetos e bem executados
-
por sua essência ou pela sua capacidade de comunicar uma determinada ideia.
-
Porém nos percebemos isto de forma diferente em relação aos projetos ruins e mal executados.
-
Projetos ruins nós notamos quando tropeçamos sobre ele.
-
Como lentes que estão sujas, arranhadas ou contém a prescrição errada,
-
temos que apertar os olhos para compreender as coisas; e nem sempre consciente —
-
alguns momentos isto é pouco incomodo — seria subconscientemente, mas ainda estaríamos apertando os olhos
-
e então em muitos projetos a questão é apresentar as informações importantes de forma clara.
-
E para fazer isto, acredito que existem três metas principais para muitos dos design visuais.
-
O primeiro objetivo é orientar as pessoas para transmitir a estrutura, a importância relativa e suas relações.
-
O segundo é configurar o andamento da interação para atrair as pessoas,
-
ajudar a orientar e fornecer ganchos para mergulhar fundo.
-
E o terceiro é usar o design visual para expressar a mensagem da informação —
-
para dar algum significado, estilo e vida ao conteúdo.
-
Então pense nisso, gostaria de mostrar quatro páginas de diferentes sites.
-
Aqui está o New York Times.
-
Google.
-
Craigslist.
-
E o Webby Awards.
-
E eu acredito que em todos os quatro casos, cada um deles são realmente eficaz no uso das ferramentas do design visual,
-
alguns mais obviamente que outros.
-
Vamos passar por eles novamente. Desta vez, vou desfocar cada página
-
para tornar a hierarquia mais destacada e tirar a ênfase do texto real.
-
Então, aqui está o New York Times desfocado, e você pode ver
-
que a hierarquia geral da página ainda é bastante clara.
-
Você pode ver o cabeçalho,
-
a imagem empolgante para atraí-lo, um conjunto de artigos,
-
navegação ao longo do lado esquerdo e outro conjunto de navegação ao longo do topo
-
Aqui está a página inicial do Google desfocada e o desfoque nela lhe informa algo em relação a relevância:
-
Com um pequeno desfoque apenas, a busca em destaque e a barra de navegação
-
desaparecem em relação ao fundo da mesma forma que o resto desta barra de navegação.
-
Porém isso não tem problema pois quando a maioria das pessoas vêm a tela, elas provavelmente tem ideia do que fazer.
-
De certa forma, a função mais importante da navegação destacada no topo
-
é sinalizar a possibilidade de clicar em outros itens para chegar a outras páginas.
-
O logo do Google, por outro lado, mesmo com certa quantidade de desfoque, ainda é possível ler claramente.
-
A página minimalista famosa faz a web complicada parecer manuseável.
-
E combinado com isso, as cores primárias ajudam a enfatizar a facilidade de tudo.
-
Como um pouco de curiosidade, aqui está o original Google
-
de quando Larry Page e Sergey Brin eram alunos de doutorado em Stanford.
-
Eles construíram o seu primeiro disco rígido a partir dessas peças de lego,
-
e eu tenho quase certeza que é de onde vem as cores do logo do Google
-
ou são inspiradas por estes legos.
-
Aqui está a página inicial do Craigslist.
-
Muitas pessoas podem achar que estou louco em acreditar que ela tem um bom design visual.
-
Afinal, parece que ela foi construída por volta de 1996
-
e na verdade provavelmente foi, exceto por um pouco de atualização sobre o conteúdo.
-
Outra razão para as pessoas criticarem com frequência o Craigslist é porque
-
há muitas abreviações e outras coisas aqui.
-
que no geral pode parecer deselegante ou desajeitado ou projetado apenas para mais experientes.
-
Porém muitos usuários do Craigslist são usuários comuns, e o que você vê aqui é que
-
na versão desfocada existe na verdade uma hierarquia de informação muito boa sendo transmitida.
-
Então novamente podemos ver o título acima, no canto superior esquerdo.
-
Podemos ver o widget de calendário.
-
Podemos ver também como a parte de administração das coisas é separada para o lado esquerdo.
-
E por fim podemos ver um conjunto de conteúdo categorizado no centro
-
e podemos ver que há um tipo de navegação diferente no lado direito —
-
Na versão sem desfoque podemos ver que isso é para as cidades.
-
E aqui está o Webbie Awards.
-
Como com todas as quatro páginas que você pode ver como a cor é usada com moderação e de forma muito eficaz.
-
Boa parte da página está em preto e branco.
-
As principais "pedaços" de cores que vemos são no canto inferior esquerdo -
-
existe um bloco de texto vermelho, que lhe convida a assistir os mais recentes Webbie Awards.
-
E no canto superior esquerdo, podemos ver um pouco de cor para as mídias sociais que tem relação com o site.
-
e novamente, vemos um elemento de navegação forte ao longo do lado esquerdo,
-
o título no canto superior esquerdo, temos o cabeçalho da página aqui no centro, e o conteúdo abaixo dele,
-
e então temos um grande elemento de navegação na parte superior.
-
Quando você pensa sobre isso, todas essas quatro páginas
-
que incluem alguns dos mais acessados sites na web, estão usando ferramentas visuais muito simples
-
para ser capaz de transmitir organização e hierarquia e onde atrair seu olhar na página.
-
Eles estão usando tipografia, layout e cor.
-
E estas são de certa forma ferramentas muito simples.
-
O que sempre me impressiona é o poder que essas ferramentas proporcionam.
-
Quando juntas nos fornece a orientação, estímulo e mensagens que falamos no início.
-
E que por sua vez ajudam as pessoas a ler, navegar e fazer sentido do mundo da informação.
-
Existe um jogo de tabuleiro, um camarada que foi anunciado com o slogan,
-
"Um minuto para aprender, uma vida inteira para dominar."
-
E isto se aplica perfeitamente para o design visual.
-
Você pode começar a tirar proveito desses princípios agora, e espero que estes vídeos façam você iniciar.
