Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis aroldo.leonardo@aes.edu.br

Princípios Básicos de Design Tanto a diagramação de materiais para o suporte impresso quanto para o online está submetida a princípios básicos de design. A questão é saber em que grau os princípios válidos para papel estão sendo aproveitados também na Web. A designer Robin Williams destaca quatro destes princípios que regem o design gráfico de páginas em geral. São eles: proximidade, alinhamento, repetição e contraste.

Proximidade O princípio da proximidade é baseado no agrupamento de itens que têm relação entre si. Itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação. Itens ou conjuntos de informações que não estão relacionados entre si não deveriam estar próximos; isto oferece ao leitor uma pista visual imediata da organização e do conteúdo da página. (Williams, p.15, 1995)

Proximidade Acima temos um exemplo de cartão de visitas dando um endereço. É baseado num exemplo do livro de William. Neste cartão, o seu olho pára cinco vezes, pois há cinco itens separados. Onde você começará a ler? No meio, provavelmente, pois a letra é mais grossa. Onde você vai ler depois? Em geral, da esquerda pra direira, porque somos ocidentais. Quando você chega ao canto inferior direito, onde seus olhos vão?

Proximidade Exercício 1: Resolva o problema de proximidade do cartão.

Alinhamento O princípio do alinhamento é, segundo Williams, uma forma de conexão visual entre os elementos de um material gráfico, e, portanto, nada deve ser colocado arbitrariamente em uma página. Quando os itens são alinhados na página, há uma unidade coesa, mais forte. Mesmo quando os elementos estiverem fisicamente separados uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os, tanto em relação aos seus olhos quanto a sua mente. (...) é o princípio do alinhamento que avisará ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo material. (Williams, p. 27, 1995)

Alinhamento Exercício 2: Resolva o problema de alinhamento do cartão.

Repetição A repetição é o princípio que prega que algum aspecto do design deve repetir-se no material inteiro, conforme diz Williams. Este aspecto pode ser qualquer elemento que o leitor reconheça visualmente. O elemento repetitivo pode ser uma fonte em bold (negrito), um fio (linha) grosso, algum sinal de tópico, um elemento do design, algum formato específico, relações espaciais etc. (Williams, p. 43, 1995) Williams coloca no seu livro que elementos de repetição como fonte em negrito, linhas grossas, marcadores de litas, color, elementos de design, formato, relações espaciais e outros podem dar um reconhecimento visual ao relacionamento dos elementos. 

Repetição Exercício 3: Resolva o problema de repetição do cartão.

Contraste Contraste é o princípio que funciona como um atrativo visual e cria uma hierarquia organizacional. Williams define o contraste como algo que realmente faz com que uma pessoa queira olhar para um determinado produto gráfico. ... para o contraste ser realmente eficaz, ele deve ser forte. (...) Cria-se o contraste quando dois elementos são diferentes. Se eles diferirem um pouco mas não muito, não acontecerá contraste e sim um conflito. (Williams, p.53, 1995)

Contraste pode ser criado em várias maneiras, como por exemplo: Letras grandes e pequenas; Linhas finas e grossas; Cores quentes e cores frias; Elementos horizontais e verticais; Figura pequena e figura grande. O exemplo pode ser visto no próximo slide. Observe que a figura da direita é muito mais fácil de ler que a da esquerda. 

Contraste

Princípios Básicos de Design Estes conceitos básicos aqui apresentados podem dar soluções muito simples que vão auxiliar imensamente na leitura e visualização da maioria das telas. Tais ferramentas são extremamente úteis no começo, portanto, pratique bastante e compare seus trabalhos com os de profissionais. Vá atrás e estude bastante para poder melhorar sempre.

Cadastro de carros a venda – Loja de veículos: Exercício Aplique os conceitos de design para a construção de uma tela de cadastro (Web) no Visual Studio .Net. Cadastro de carros a venda – Loja de veículos: Dados da Loja Nome, Logo.. Dados pessoais Nome, endereço, CEP, cidade, estado, telefone, e-mail, celular Dados do Carro Marca, ano, cor, modelo, kilometragem, foto Ações

BIBLIOGRAFIA Básica: JAKOB NIELSEN, Projetando Websites. São Paulo. Campus, (2000). ISBN 8535206566. OLIVEIRA NETTO, A. A. IHC - Modelagem e Gerência de Interfaces com o Usuário. Visual Books, (2004). ISBN 8575021389. Williams, Robin / Tollett, John, Web Design para Não Designers. Ciência Moderna (1995) ISBN: 8573931485 Complementar: PAULA FILHO, W. P. Engenharia de Software: fundamentos, métodos e padrões. Rio de Janeiro. LTC, (2003). ISBN 8521613393. Apoio: Prof. Daniel Di Domênico pelo material e orientação.