PROGRAMAÇÃO WEBPROGRAMAÇÃO WEBAULA 03AULA 03

Prof. Gustavo LinharesProf. Gustavo Linhares

26/10/200926/10/2009

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Diagramação

Recursos que facilitam a legibilidade

Destaque palavras-chave utilizando cor ou fonte diferentes.

Divida o texto o máximo que puder com títulos, subtítulos e resumos significativos.

Faça listas por tópicos (como esta)

Dê preferência a vários parágrafos pequenos no lugar de poucos, porém, grandes.

Recursos que facilitam a legibilidade

Use, aproximadamente, a metade do número de palavras que você usaria em um texto impresso.Ilustre o texto com imagens relativas ao assunto, deixando-o mais dinâmico e leve.Procure utilizar na fonte do texto uma cor que contraste e se sobressaia em relação à cor do fundo.Utilize o recurso de hipertexto.

Legibilidade

Ao diagramar um site, principalmente páginas internas, onde há maior quantidade de textos, faça-o ficar o mais confortável possível de se ler.

Geralmente, usuários lêem na tela ‘decompondo’ as páginas: seus olhos selecionam automaticamente frases em destaque, gráficos ou tópicos. Dificilmente lêem um texto corrido na tela do computador.

Alinhamento

É importante que todo o site (home e páginas internas) apresente o mesmo tipo de alinhamento de texto. Faça sua escolha (alinhado à esquerda, justificado ou centralizado) e aplique em todas as páginas.

O alinhamento se transforma em mais uma característica da identidade visual (+) do site. Veja como um projeto com diferentes alinhamentos perde consistência e fica confuso:

Alinhamento à ESQUERDAAlinhamento à ESQUERDA

:: O alinhamento à ESQUERDA é visualmente mais confortável, pois resulta em comprimentos diferentes para cada linha e facilita o usuário a não se perder na leitura.

Alinhamento à DIREITAAlinhamento à DIREITA

:: O alinhamento à DIREITA deve ser utilizado apenas para parágrafos bem

curtos, por alguma opção estética, e não, aleatoriamente.

Alinhamento à JUSTIFICADOAlinhamento à JUSTIFICADO

:: O alinhamento JUSTIFICADO, ou blocado, também deve ser utilizado somente se o projeto pedir uma massa de texto quadrada ou retangular.

Alinhamento à CENTRALIZADOAlinhamento à CENTRALIZADO

:: O alinhamento CENTRALIZADO deve ser evitado para textos longos, pois dificulta

bastante a leitura.

Hierarquia da Informação

Hierarquizar informações em um site significa destacar ou priorizar alguns elementos em relação a outros. No caso de um texto, isso pode ser feito através de recursos, como:

Hierarquia da Informação

texto grifado (negrito, itálico ou sublinhado);

aumentar o corpo do texto que deseja destacar;

utilizar uma segunda cor;

utilizar caixa alta (letras maiúsculas).

Hierarquia da Informação

Hierarquia da Informação

Outra forma de destaque é utilizar as áreas privilegiadas do site. Na cultura ocidental, o processo de leitura consiste em uma “varredura” da esquerda pO lado esquerdo também é bastante importante, assimcomo a parte superior (cabeçalho). Informações não relevantespodem ficar abaixo da “dobra” do site (quando o usuárioprecisa rolar a página).ara a direita e de cima para baixo. Por isso, a parte consideradamais privilegiada do site (para onde o usuário olha primeiro) é o canto superior esquerdo.

Análise hierárquica do Portal Globo.com

coresAo criar o layout de um site, todos os elementos, inclusive as cores, devem visar que a experiência do usuário seja a mais eficiente e confortável possível.

O bom uso das cores em um site é determinante para uma usabilidade satisfatória.

coresAntes de tudo, é preciso saber se existe

uma cor institucional que deve ser usada e como integrá-la com as demais cores do layout.

O importante é que a cor mantenha as características do negócio do cliente e que a interface permaneça perfeitamente funcional.

Cor-luz – RGB

A cor-luz pode ser observada através dos raios luminosos e se baseia na luz solar. É representada pela soma de três cores aditivas: vermelho, verde e azul (em inglês: red, green e blue - RGB). Cor-luz é a própria luz que pode se decompor em muitas outras cores.

A mistura das três cores aditivas produz a luz branca. Esse sistema é o que forma as cores dos sistemas de comunicação visual, como a televisão e o monitor do seu computador.

Cor-pigmento – CMY

Cor pigmento é a substância material que, conforme sua natureza absorve, refrata e reflete os raios luminosos componentes da luz que se difunde sobre ela.

São o ciano, magenta e

amarelo (cian, magenta, yellow - CMY),

que misturadas em partes produzem outras milhões de cores subtrativamente. A soma total delas produz um preto turvo. Este modelo de cor é utilizado nas artes gráficas (impressão offset).

Teoria das cores

Cores Primárias: que não podem ser formadas por nenhuma mistura. São elas: azul, amarelo e vermelho.Cores Secundárias: formadas pela mistura das cores primárias, em diferentes tonalidades:azul + amarelo = verdeazul + vermelho = violetaamarelo + vermelho = laranja

Teoria das cores

Cores Terciárias: formadas pela mistura das cores secundárias.

Podem ser divididas, de acordo com sua temperatura, em frias e quentes.

As frias abrangem azul, verde, violeta e suas combinações. As quentes são os vermelhos, laranjas, amarelos, marrons e suas misturas.

Teoria das cores

Cores Complementares: uma cor primária é complementar a uma secundária quando ela não faz parte da mistura que forma esta última. São cores opostas no círculo cromático. Juntas, causam impacto visual.Exemplo: o vermelho é complementar do verde; azul é complementar do laranja; amarelo é complementar do violeta.

Teoria das cores

Cores Análogas: são as cores ‘vizinhas’ no círculo de cores. Formam composições harmoniosas.Cores Acromáticas: são chamadas neutras: branco, preto, cinza e marfim.Cores Monocromáticas: cores da mesma família, variações de tom. Exemplo: azul marinho, violeta, azul bebê e turquesa.

Psicologia das Cores

Lembre-se sempre de que, ao escolher uma determinada cor para seu projeto, esta provocará reações, sensações nos usuários que navegarem no site.

Psicologia das Cores

O amarelo forte transmite ansiedade, o vermelho dá fome, e os dois juntos, combinação presente nas lanchonetes desta empresa, estimulam seus clientes a comerem exagerada e rapidamente, pois, além disso, a presença destas cores gera um certo desconforto quando visualizadas por muito tempo.

Psicologia das Cores

Branco: considerada a melhor cor para demonstrar limpeza, é ofuscante, levando a um certo cansaço mental. O ideal é sempre combiná-la com outra cor. Sugere pureza.

Cria uma impressão de vazio e de infinito. Ex.: ordem, simplicidade, luz, paz, higiene, casamento, hospital, neve, harmonia.

Psicologia das Cores

Preto: utilizado sozinho é austero e confere isolamento. Associado ao branco sugere um ar moderno. As composições do preto com outras cores podem ser bem alegres e esportivas. Quando brilhante, confere nobreza, distinção e elegância. Cor preponderantemente masculina. Ex.: noite,nobreza, pessimismo, tristeza, dor, silêncio, morte.

Psicologia das Cores

Cinza: é a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da ausência de energia.

Quanto mais sombrio, mais conota desânimo, monotonia. Ex.: chuva, máquinas, seriedade, velhice, desânimo, sabedoria.

Psicologia das Cores

Vermelho: significa força, virilidade, masculinidade, dinamismo.É uma cor exalante e até enervante. Impõe- se sem discrição. É uma cor essencialmente quente, transbordante de vida e de agitação. Ex.: cereja, morango, sangue, desejo,sexo, agressividade, fogo, fome, perigo, guerra, força, energia, fúria, dinamismo, paixão.

Psicologia das Cores

Laranja: transborda irradiação e expansão. É acolhedor, quente, íntimo. Ex.: outono, pôr-do-sol, festa, comida, movimento.

Psicologia das Cores

Amarelo: estimula a criatividade, é uma cor vibrante e alegre. Incentiva a conversação. Em excesso, é cansativa.

É uma cor luminosa e muito forte para atrair a atenção. Ex.: luz, angústia, esperança, atenção.

Psicologia das Cores

:: Verde: cor universal da natureza. Tem frescor, harmonia e equilíbrio. Cor calma, que não se dirige para nenhuma direção, nem encerra algum elemento de alegria, tristeza ou eficiência.

Ex.: floresta, natureza, bem estar, tranqüilidade, juventude, umidade, saúde, tapete de jogos.

Psicologia das Cores

Azul: transmite segurança e confiança, além de tranqüilidade.Em exagero, pode deprimir as pessoas. Cor profunda, calma. Marca uma certa maturidade. Mais claro, provoca uma sensação de frescura e higiene, principalmente quando na presença de branco. Ex.: frio, céu, mar, tranqüilidade, paz, infinito, meditação, credibilidade.

Psicologia das Cores

Roxo: equivale a um pensamento meditativo e místico, mistério. Assim como o preto, remete à nobreza e ao poder.

Ex.: sonho, mistério, egoísmo, nobreza, fantasia, profundidade, doença.

Psicologia das Cores

Marrom: emana a impressão de algo maciço, denso, compacto.

Sugere segurança e solidez. Ex.: terra, outono, chocolate.

Psicologia das Cores

Rosa: é de pouca vitalidade e sugere feminilidade e afeição.

É uma cor íntima, de doçura melosa e romântica. Ex.: feminilidade, delicadeza.

Legibilidade

No livro ‘A Prática da Simplicidade’, Jakob Nielsen, considerado um dos ‘papas’ da usabilidade, cita que a ótima legibilidade requer o texto escuro em fundo claro, o que ele denomina como ‘texto positivo’.

Ex.: fundo bege e texto vinho ou texto branco e texto preto.

Navegação

É importante lembrar também a importância de saber trabalhar com as cores nos links. Geralmente, os links já visitados pelo usuário são diferenciados dos que ainda não foram vistos pelo uso de outras cores. Quando não é respeitada essa regra, o visitante pode ficar perdido, e a navegação, ineficiente.Determinar uma escala cromática e utilizá-la em todo o site ajuda a manter a coerência e a identidade visual do projeto, familiarizando o usuário durante toda a sua visita.

Cuidado com fundos coloridos ou com textura.

USO INADEQUADO

USO ADEQUADO

tipografiaO termo ‘tipografia’ significa o emprego de fontes, que nada mais são do que desenhos, representações do alfabeto.

Através de recursos gráficos, as letras podem fornecer outras informações sobre o contexto da mensagem, através de seu contorno, proporções, peso, cor etc.

tipografiaDependendo do tratamento tipográfico, um simples alfabeto pode transmitir humor, dramaticidade e uma série de outras emoções. Em meios digitais, a tipografia deve ser adequada à baixa resolução das telas, ao brilho dos monitores e à distância de leitura. Nos sites com grande quantidade de texto ou nos projetos onde seja preciso otimizar a busca por informações, a legibilidade exerce maior influência na opção do tipo.

Dicas

Usar fontes fantasia (‘desenhadas’ ou temáticas) apenas para títulos. Veja alguns exemplos dessas fontes.

tipografiaPara textos corridos, não devem ser utilizadas as fontes fantasia. Dê preferência a fontes nativas do Windows que podem ser visualizadas em qualquer computador, como Verdana, Tahoma e Arial. Evite as fontes com serifa como a Courier ou Times, que dificultam a leitura.Veja:

tipografiaA tipografia que escolhi para digitar esta frase foi a Verdana.

A tipografia que escolhi para digitar esta frase foi a

Courier.A tipografia que escolhi para digitar esta frase foi a Arial.

equilíbrio

Um website deve estar visualmente harmônico e equilibrado. Isso significa que, ao diagramar, deve-se distribuir os elementos e informações de maneira homogênea pelo site, evitando a concentração de informações em um determinado espaço ou um grande vazio em outro, exceto quando o conceito do próprio site exigir uma diagramação mais assimétrica propositadamente.

equilíbrio

Um website deve estar visualmente harmônico e equilibrado. Isso significa que, ao diagramar, deve-se distribuir os elementos e informações de maneira homogênea pelo site, evitando a concentração de informações em um determinado espaço ou um grande vazio em outro, exceto quando o conceito do próprio site exigir uma diagramação mais assimétrica propositadamente.

Tratamento de Imagens

Tratamento de Imagens