-
Neste vídeo vamos falar sobre o design com grades
-
e o uso de agrupamento e alinhamento para transmitir estrutura.
-
Aqui está um exemplo de uma grade: Isso vem do Java Look and Feel Design Guidelines,
-
e é anotado pela Sun e é um recurso web.
-
Esta é uma caixa de diálogo de Find, e que você pode ver é que
-
todos os elementos na caixa de diálogo foram arranjados usando uma grade.
-
E o que entendemos por uma grade é que há um conjunto de linhas invisíveis
-
nas quais todos os elementos na tela se encaixam.
-
Você pode ver que na parte superior da caixa de diálogo está o Find e, em seguida, a área de pesquisa,
-
e, em seguida, abaixo, que são todos os parâmetros,
-
e abaixo deles estão ainda os botões Find e Close.
-
Você vai perceber que a borda esquerda das linhas de parâmetros alinham com a borda esquerda da caixa de pesquisa,
-
e a borda o direito das linhas de botões com a borda direita da caixa de pesquisa.
-
Você também vai notar que o Find, que é o título da caixa de diálogo,
-
está mais para a esquerda, de modo que é fácil identificar o título.
-
Você pode ver que a informação mais importante está perto do topo,
-
e como as coisas que são conceitualmente mais relacionadas -
-
como os parâmetros que parametrizam o sistema de busca - são mais próximos entre si do que os botões -
-
parte ainda da mesma caixa de diálogo, mas um pouco mais distantes - e assim eles obtem mais espaço.
-
Foi na Bauhaus na Alemanha na década de 1920
-
que as estratégias para projetar com grades realmente se consolidaram.
-
A Bauhaus, na época, era uma escola de design revolucionário,
-
E seu designer gráfico, Jan Tschichold, escreveu este livro, chamado «A Nova Tipografia»
-
para mostrar sua visão para o design gráfico moderno.
-
Ele defende a tipografia assimétrica, fontes sem serifa,
-
e um monte de outras coisas que hoje pensamos como Modernismo.
-
Uma coisa que é notável sobre o livro de Tschichold sobre tipografia
-
é que ele lê como um manifesto político:
-
Ele realmente tinha essa crença de que ele estava mudando o que design significava para o mundo,
-
despojando-a de todos os seus excessos e destilando-o aos seus elementos básicos.
-
Você pode ou não optar por seguir os seus princípios;
-
algumas dessas idéias parecem agora um pouco reducionistas, ou excessivamente didácticas, ou demasiado moralista;
-
mas há muita coisa aqui que são extremamente úteis.
-
Essa foto sou eu na Bauhaus alguns verões atrás.
-
Portanto, há um número de partes que compõem um sistema de rede. A principal delas é um conjunto de colunas -
-
neste caso elas são da mesma largura, mas não precisa necessariamente ser assim.
-
E a segunda parte é um conjunto de calhas, que é o espaço em branco entre as colunas.
-
Além disso, as coisas são geralmente alinhadas horizontalmente usando uma linha base.
-
Você pode adicionar texto hierarquicamente - Aqui vemos um título e um subtítulo,
-
ou talvez uma assinatura ou algo parecido.
-
E não há necessidade de que todas as grades tenham a mesma largura.
-
Aqui está um mockup, por exemplo, de uma coluna da esquerda estreita que você pode usar para a navegação,
-
e, em seguida, uma coluna central larga que pode ter o corpo do artigo ou o conteúdo principal da página.
-
Grades são usados amplamente em jornais, livros e na web.
-
Aqui está um exemplo do MySpace, cuja a página inicial nesse momento é um design fortemente gradeado,
-
e você pode ver uma boa combinação de imagens e texto em sua página inicial.
-
Aqui você pode ver a página inicial Stanford, e a grade invisível conecta toda esta estrutura.
-
Mas isso não significa que tudo tem a largura de uma coluna por toda a extensão.
-
Um coisa que gosto sobre esta página é que elementos diferentes atravessam múltiplas colunas.
-
E você também pode ver como esta grade de cinco colunas atravessa quase toda a página:
-
Você pode ver como a navegação na parte superior tem cinco colunas;
-
o logotipo de Stanford está centrado sobre a primeira dessas duas colunas;
-
e essas cinco colunas continuam para baixo ao longo da parte branca principal da página.
-
A grade é quebrada um pouco na parte inferior, com o rodapé.
-
Aqui está o homepage do New York onde, novamente, você pode ver uma grade de cinco colunas para o conteúdo,
-
com uma sexta coluna para a navegação no lado esquerdo.
-
Você pode ver como essas cinco colunas invisivelmente percorrem a página inteira,
-
e que algumas partes do conteúdo no meio, por exemplo, tem duas colunas de largura,
-
e que as partes que tem duas colunas de largura variam pela página,
-
e assim a faz um pouco mais dinâmico, assim ela não parece demasiado rotineira e chata.
-
Jornais têm se beneficiado de sistemas de rede e realmente tem desenvolvido essa técnica por um longo tempo
-
Essas são algumas *screen shots* do New York Times mostrar lhe dar uma ideia das diferentes formas que eles usam grades.
-
Aqui está um exemplo que combina texto e imagens.
-
Aqui você pode ver uma visão "foco mais contexto", onde o artigo mais recente, no topo, é o maior,
-
e os artigos mais abaixo são menores.
-
Aqui está um exemplo de uma grade na homepage do New York Times que está muito abaixo do topo,
-
mostrando seções e, em seguida, artigos dentro de cada seção,
-
com uma imagem em miniatura para cada uma das seções.
-
A grade não tem que ser sem sobreposição:
-
Você pode ter linhas diferentes de conteúdo em uma página conectadas a grades diferentes -
-
muitas vezes elas terão alguma relação uma com a outro.
-
Fiz uma mockup rápido aqui, onde temos seis elementos em duas fileiras,
-
e a grade é escalonada.
-
Quando você tem conteúdo que vem em várias pedaços -
-
por ejemplo títulos de classes e números de cursos -
-
como você deve organizá-los para que apareçam bem em conjunto e sejam fáceis de ler?
-
Estou surpreso com a freqüência com que livros pegam conteúdo como este
-
e colocam esses pontos - ou de alguma forma separaram as duas partes.
-
Não é, obviamente, impossível de ler, mas acho que podemos fazer melhor.
-
Aqui está um exemplo onde temos alinhado o menor elemento à direita -
-
que poderia ser números de página ou números de cursos, ou datas, ou algo assim -
-
e, em seguida, alinhamos à esquerda o maior elemento - que é o título ou algum outro pedaço maior do texto.
-
A outra coisa que fizemos aqui é que nós mudamos o peso da fonte
-
de modo que o número tenha um peso diferente do texto.
-
Agora, qual é pesado e qual é leve? Depende de qual você quer enfatizar.
-
Aqui, o nome do curso é provavelmente mais importante - é o que você vai olhar primeiro -
-
e, em seguida, quando você quiser se inscrever, você pode precisar encontrar o número do curso,
-
e assim ele tem um peso mais leve porque é isso que você vai procurar em segundo lugar.
-
Se você tiver três pedaços de texto - por exemplo, se você adicionar um nome de instrutor -,
-
você pode compensar isso tipograficamente.
-
Aqui temos apenas um exemplo, adicionando-o a direita.
-
Adicionando uma terceira coluna pode tornar as coisas um pouco confusas;
-
[mas], dependendo do seu conteúdo, pode funcionar também.
-
Outra estratégia, é claro, é que você pode colocar esse terceiro elemento em uma linha separada.
-
Aqui vemos os instrutores abaixo do número do curso.
-
E, se você vai fazer isso, coloque as coisas que se agupam (chunk) juntas mais próximas,
-
e as chunks separadps mais distantes.
-
Então, o que estamos vendo agora é que o leading -
-
o espaçamento intervinhas entre cada linha - é idêntico,
-
e isso é sub-ótimo, porque isso é menos claro com que elemento o nome do instrutor se associa.
-
Se adicionarmos um pouco de espaço entre os nossos elementos,
-
torna-se claro que instrutores pertencem a que curso.
-
Você também pode ver uma troca aqui, onde, por termos duas linhas por curso, se lê muito claramente,
-
mas estamos usando mais espaço vertical - talvez menos espaço horizontal.
-
Dependendo em que espaço da tela ou espaço de impressão você está imprimindo,
-
suas decisões de design mudam.
-
Outra coisa que podemos fazer se quisermos realmente tirar a ênfase do números dos cursos
-
é diminuir o valor de cinza desses números, para fazê-los desaparecer ainda mais.
-
Uma dica rápida é: quando você está criando sistemas como este,
-
certifique-se de trabalhar com o bloco de texto mais longo primeiro.
-
Pode ser fácil projetar usando um título curto
-
e depois ter um sistema de grade ou alinhamento que falha quando você chegar a algo mais longo.
-
Isto é especialmente verdadeiro se você está projetando para várias línguas diferentes.
-
Por exemplo, textos em alemão, muitas vezes consomes muito mais espaço
-
que textos do Inglês ou Espanhol ou Francês.
-
Vamos ver exemplos de estilos diferentes de alinhamento
-
e quando eles funcionam em circunstâncias diferentes nesta aula.
-
Em geral, uma regra de ordem prática é que, para línguas onde se lê da esquerda para a direita,
-
texto alinhado à esquerda é o mais rápido para se percorrer rapidamente.
-
E você pode ver isso aqui: estou pegando o mesmo conteúdo e centralizando-o,
-
e deixei todas tabulações, e é por isso que você vê esse zig-zag louco.
-
Na verdade, parece até legal e se você estiver tentando ser dinamismo, isso pode funcionar muito bem.
-
No entanto, se você quer ser capaz de ler rapidamente as coisas,
-
com esse vai ser um pouco mais lento do que se tudo estiver alinhado.
-
Aqui está um exemplo de uma estratégia de design comum, onde "tudo é centralizado"
-
E você pode, é claro, ler as informações desta página [quando] você precisa;
-
Mas a centralização torna difícil procurar as coisas que você precisa.
-
Além disso, há um monte de lixo gráfico nesta página -
-
as caixas em torno do resumo e das publicações são desnecessárias
-
e fazem com que seus olhos percebam mais lentamente as coisas que você precisa.
-
Se esta página fosse projetada usando uma grade, e o lixo gráfico fosse eliminado,
-
então o conteúdo em si apareceria com mais força.
-
Então, para resumir, usando-se bem o alinhamento se ajuda a orientar os olhos e a reduzir a desordem.
-
Evite pequenos desalinhamentos, pois eles minam a sua capacidade de sinalizar a organização.
-
Nós automaticamente detectar padrões e também desvios,
-
por isso use padrões quando você quiser transmitir consistência,
-
e desvie-se deles apenas quando desejar intencionalmente distinguir um conteúdo.
-
Se o seu desvio do padrão é acidental ou por preguiça,
-
ele vai se destacr e desviar a atenção da mensagem que você está tentando transmitir.
-
Você usa proximidade visual - mantendo os agrupamentos (chunks) próximos e auto-contidos,
-
e separando agrupamentos entre si - para distinguir quais são os elementos.
-
E você pode usar escala e hierarquia - fazendo as coisas mais importantes maiores
-
e as coisas menos importantes menores ou com menos cores -
-
como uma forma de enfatizar as partes mais e menos importantes numa página.
-
Quais seriom os exemplos de quando você pode usar alinhamentos diferentes para finalidades diferentes?
-
Temos um bom exemplo no site da Amazon.
-
A Amazon tem diferentes partes do seu site onde eles usam diferentes tipos de alinhamento.
-
E você pode ver o primeiro exemplo aqui, onde na caixa de diálogo "Adicionar um endereço",
-
o formulário está alinhado de modo que todos os rótulos estejam alinhados à direita e os campos de entrada estejam alinhados à esquerda,
-
desse modo se obtem esta separação clara, como a que vimos em nosso exemplo de cursos e títulos.
-
Isso faz o que você precisa preencher extremamente claro.
-
Aqui, na página da sua conta, você pode ver que todos os rótulos são alinhados à esquerda.
-
Esta página também oferece um bom exemplo de hierarquia visual,
-
onde a peça chave do label é muito grande,
-
e o sub-cabeçalho - que explica em mais detalhes - é muito menor
-
e também está com tom de cinza mais claro.
-
E, finalmente, no lado direito desta mesma página, podemos ver um exemplo de alinhamento superior,
-
onde os cabeçalhos do formulário estão acima do formulário.
-
E esta diversidade não é porque três designers diferentes da Amazon fezeram cada parte diferente
-
sem nunca se coordenara=em - ou pelo menos assumo que não seja o caso.
-
Meu palpite é que a Amazon decidiu estrategicamente qual a parte mais importante de cada elemento,
-
e como deixar claro para o leitor a que eles deviam prestar atenção:
-
Para as coisas que estamos familiarizados,
-
os cabeçalhos podem ser menos importante do que para as coisas que não estamos familiarizados.
-
Assim, para sinalização, os cabeçalhos devem aparecer menos, enquanto que para os características de nossa conta,
-
que podemos usar com menos frequência, como um elemento de página, precisamos que se destaque mais.
-
Neste curso introdutório, não teremos chance de falar muito sobre cores,
-
mas quero lhes falar um pouco agora.
-
A primeira coisa e o mais importante a dizer sobre cores é: Preste atenção a elas!
-
E se posso dar-lhe uma estratégia para o uso eficaz das cores, é para desenhar em escalas de cinza em primeiro lugar.
-
Muitas vezes as pessoas contam com a cor como uma muleta para fazer distinções visuais nos designs,
-
E, realmente, você vai querer usar as outras ferramentas primeiro:
-
Comece por trabalhar com a escala e disposição como forma de distinguir elementos na página.
-
Então, uma vez que você usou escala e a layout, tanto quanto possível,
-
você pode usar a luminância como uma forma de indicar o que é mais e menos imortante -
-
luminância é apenas uma palavra chique para valor de cinza, por isso, se você está projetando em escalas de cinza,
-
isso significa alguma coisa é preta, alguma coisa é cinza, alguma coisa é branca.
-
E uma vez que você tenha o melhor design que você puder em tons de cinza - em preto e branco -,
-
então adicione cores como uma forma de dar uma codificação redundante adicional para salientar coisas.
-
Para usar a Amazon como um exemplo denovo, aqui está uma de suas páginas de resultados de busca em tons de cinza.
-
Você pode ver que todas a informação que você precisa
-
é claramente marcada em termos de ordem visual da página -
-
quais os elementos que são maiores, quais os elementos que são menores.
-
Então a coisa toda funciona em escala de cinza - em preto-e-branco -, mas se você adicionar cores, fica ainda melhor.
-
E isso, acho, é a maneira mais eficaz de usar cores.
-
A outra coisa a dizer sobre a cor que acho que é útil é: Em geral, não exagere!
-
Não tendo influencias de outras coisas, menos cores são geralmente mais poderosas e menos esmagadoras do que mais.
-
Isto, obviamente, vai depender do seu gosto,
-
e isso, obviamente, vai depender do que você está tentando transmitir.
-
Mais uma vez do Java and Feel Guidelines,
-
aqui está um exemplo de como esta versão do Java usou seis cores -
-
três tons de cinza, três tons de roxo -
-
como uma forma de organizar todos os elementos em sua biblioteca de widgets.
-
Um modo em que eles usaram a cor é que qualquer coisa que você pode clicar tem um tom de roxo,
-
e qualquer coisa que você não pode clicar em uma certa tonalidade de cinza.
-
e isso fornece uma boa característica de organização,
-
e dá um sentido para os usuários do que eles podem fazer quando vêem uma tela especial.
-
E porque a cor é usada de forma tão consistente - cor significa clicável -
-
é realmente fácil de aprender, mesmo que inconscientemente.
-
E gostaria de fechar com este exemplo de um livro. Aqui está a primeira página do livro de Umberto Eco,
-
«A Ilha do Dia de Antes», e é um livro muito bem editorado.
-
Gostaria de apontar um par de coisas sobre este livro.
-
Para começar, há uma citação de um diário que está no início da página
-
que está em itálico para mostrar que é diferente.
-
Em seguida, cada capítulo começa com um par de palavras do texto em small caps,
-
e há uma boa quantidade de espaço acima da linha de texto.
-
E, finalmente, há um monte de espaço em branco em torno do texto em geral,
-
e proporcionar espaços é importante.
-
Livros e textos que têm pouco espaço ao seu redor são mais fáceis de ler
-
do que aqueles que são empacotados até as bordas das margens.
-
Essa é uma razão pela qual você vai ver que livros capa duras têm mais espaço em branco mais do que livros de bolso mais baratos.
-
No caso de bolso, eles estão tentando economizar a papel para fazer um preço mais baixo;
-
mas os capas duras, onde se pode cobrar um pouco mais, oferecem mais espaço
-
E são mais fáceis de ler.
-
Se você estiver interessado em aprender mais sobre grades e alinhamento,
-
há um monte de livros grandes, [mas] há alguns que recomendo:
-
Um é clássico Jan Tschichold, «A Novo Tipografia ».
-
Outra é Kevin Mullet e Darrel San «Interfaces Designing Visual».
-
E um terceiro é Luke Wroblewski do «Design Web Form»;
-
este é um dos livros de Rosenfeld, e toda esta série é excelente em termos de HCI.
