Design para Web aula 08

Prévia do material em texto

Design para Web
Aula 08: Concepção da página web
Apresentação
Abordaremos alguns princípios de design e a associação do layout com a marca do cliente, analisando a aplicação do uso
de cores em interfaces digitais, bem como a importância da de�nição da paleta do website. O design do site deve valorizar
o conteúdo e ampli�car a identidade visual da empresa.
No protótipo, �camos mais próximos do layout �nal, mas ainda não aplicamos cores, tipogra�a, imagens, texturas, vídeos,
ícones e outros elementos não centrais. Nessa aula, veremos como inserir tais elementos no design do website.
Objetivos
Analisar os quatro princípios do design para websites;
De�nir e aplicar o uso das cores e paletas de cores em websites.
Princípios do design
 Fonte: Shutterstock
Existem quatro princípios que, muitas vezes, aplicamos no layout de websites ou projetos web mobile inconscientemente, e que
alcunhei de PARC, pois reúne as iniciais de cada um deles: Proximidade, Alinhamento, Repetição e Contraste. Esses princípios
sempre se destacam em websites (e outros produtos) bem diagramados. Cabe ressaltar que não são de uso exclusivo em
websites.
Abaixo, na Tabela 1, um resumo de cada princípio:
Princípio Resumo
Proximidade Itens relacionados devem estar próximos, como uma unidade visual, o que colabora com a organização das informações,
a redução da confusão (visual e cognitiva) e proporciona uma leitura clara do conteúdo pela forma como está
estruturado.
Alinhamento Nenhum elemento deve ser posto de qualquer forma e em qualquer local na página, sem significado ou lógica. Os
elementos precisam ter conexão visual com os demais elementos. O visual resultante é limpo, claro e com ar de
sofisticação.
Repetição Repita elementos visuais relevantes por todo o website (em suas várias páginas). Refiro-me a elementos como: Cores,
formas, texturas, espessura de linhas, relações de espaço, fontes (tipo e tamanho), imagens, conceitos gráficos, dentre
outros.
Contraste Contraste os elementos distintos; se os elementos não são iguais, deixe-os bem diferentes. Em geral, é o atrativo mais
relevante da página, sendo a primeira percepção do usuário.
Tabela 1: Resumo dos quatro princípios do design
Em [ROBIN, Williams], o autor diz: “O Bom design é tão fácil quanto 1, 2 e 3:”
1
Aprenda os princípios (são simples)
2
Reconheça quando não os está usando
(expresse em palavras) e
3
Aplique os princípios (você vai se
surpreender)
A aplicação dos quatro princípios trará mais controle sobre as páginas do website, e deve acontecer de forma integrada e não
isoladamente, pois os mesmos se completam e se integram.
Proximidade
Cenário: Imagine uma página web em que os elementos �cam espalhados (sem haver uma lógica para isso), dando a
impressão de desorganização � a consequência pode ser di�culdade do internauta em compreender a informação.
O princípio da Proximidade nos diz que:
Devemos agrupar (tornar próximo) itens relacionados para que sejam
visualmente identi�cados como um grupo coeso. Em contrapartida, os itens
não relacionados não devem estar próximos.
A proximidade de elementos a�ns possibilita ao usuário uma visão mais clara da organização e conteúdo da página. A
proximidade, portanto, indica uma relação.
Ao agrupar elementos a�ns, percebemos, com mais clareza:
1
Página �ca mais organizada;
2
Onde começar a ler o conteúdo e onde
terminar;
3
Melhor organização do espaço em branco,
separando os elementos sem a�nidade ou
relação.
Observe as duas listas abaixo (Tabela 2): A da esquerda mostra todos os elementos no mesmo patamar, sem agrupamento. Já
na lista da direita temos duas linhas em branco entre três grupos de elementos, que claramente os divide.
Combobox 
Radio button 
Checkbox 
Edit 
Spin edit 
Label 
Botões
Combobox 
Radio button 
Checkbox 
Spinedit 
 
Edit 
Label 
 
Botões
Tabela 2: Exemplo de proximidade
O primeiro grupo (combobox, radio button, checkbox e spinedit) são elementos de seleção, de escolha de opções. O segundo
grupo (edit, e label) são elementos de edição (label e edit), e o terceiro (botões) refere-se a elementos de ação.
A leitura da lista à direita deixa clara a relação de proximidade entre os diferentes elementos de interface apresentados.
Abaixo, um exemplo mais cotidiano (Tabela 3): Uma lista de supermercado. À esquerda, vemos a lista descrita do jeito que veio
à cabeça, como anotação imediata. À direita, a lista organizada por itens.
Linguiça
Sabonete líquido 
Sabão em pó 
Shampoo 
Condicionador 
Cebola 
Catchup 
Tomate 
Água sanitária 
Pão 
Pimentão 
Creme dental
Higiene Pessoal 
    Sabonete líquido 
    Shampoo 
    Condicionador 
    Creme dental 
 
Limpeza da casa 
    Sabão em pó 
    Agua sanitária 
 
Cachorro quente 
    Linguiça 
    Tomate 
    Pimentão 
    Pão
Tabela 2: Exemplo de proximidade
O que podemos concluir sobre a lista agrupada por aproximação (a�nidade dos itens):
Pode-se agrupar os itens por vários critérios, conforme a necessidade;
Os dois primeiros agrupamentos ajudam na compra em si, já que os elementos de Limpeza Pessoal e Limpeza da casa
devem estar na mesma seção do mercado;
O terceiro agrupamento deu-se pelo objetivo “fazer cachorro quente”;
A forma de separação pode ser diferenciada: O tão temido espaço em branco, fonte em negrito, linhas separadores, dados
num grid. A escolha vai de encontro à �nalidade e estilo adotado no design.
 Entenda melhor a relação de proximidade a partir de alguns exemplos
 Clique no botão acima.
Para aplicar o princípio da Proximidade, observe:
Quantas vezes o seu olhar parou?
Indica a quantidade de grupos de informações distintas.
Onde você começa a leitura?
Provavelmente pelo local central da tela ou destaque de algum elemento (negrito, cor,
sublinhado ou outro destaque).
Poucas vezes aplicar o princípio da Proximidade é a única solução para ajustar uma página web. O mais provável é a
aplicação de todos, porém trabalhe com um princípio por vez, começando pela Proximidade.
Aplicar a Proximidade tende a melhorar as páginas web, deixando-as mais navegáveis se as informações forem
agrupadas com critério lógico.
A �nalidade básica do princípio da Proximidade é organizar. Se a informação está organizada, será mais facilmente
identi�cada, lida e, consequentemente, lembrada.
Abaixo, algumas dicas do que deve ser evitado ao aplicar a Proximidade:
Não insira elementos no centro ou cantos apenas por estarem vazios;
Evite muitos elementos separados em uma página, pois traz a ideia de ausência de relação entre eles;
Deixe espaços em branco proporcionais aos agrupamentos realizados;
Não agrupe elementos que não devem estar juntos.
 Imagem 1: Exemplo de lista sem o princípio da Proximidade | Fonte: Imagem
adaptada de [ROBIN, Williams]
A aproximação ou sua falta indica a relação. Por exemplo, o
conteúdo relevante (informação principal) deve estar
claramente destacado na região nobre da tela (central), e as
informações complementares, menos destacadas (região
não nobre, tamanho menor, ausência de negrito e outras
formas de segregar).
Vejamos mais um exemplo, conforme a Imagem 1 a seguir,
sobre os problemas de clareza na diagramação abaixo de
uma lista agrupada: todos os elementos estão próximos,
não sendo possível visualizar as relações e a
organização.
Agora analise a Imagem 2, com a aplicação do princípio da
Proximidade, e perceba as melhorias: além de um
espaçamento (branco) ao �nal do último item de cada
grupo, foi aplicado um contraste (negrito) destacando
(contraste, outro princípio) o nome dos grupos e
diferenciando a forma de escrever (tipogra�a) dos itens.
O contrate foi repetido (repetição, outro princípio).
 Imagem 2: Exemplo de lista sem o princípio da Proximidade | Fonte: Imagem
adaptada de [ROBIN, Williams]
Alinhamento
O princípio do Alinhamento diz que:
Quando os elementos estão alinhados na página web, há uma forte coesão entre eles; mesmo que tenha aplicado o princípio
da Proximidade e haja um alinhamento entre elementos �sicamente separados, há uma linha invisívelque os conecta.
O princípio do alinhamento, em última análise, informa ao internauta que, mesmo os elementos estando �sicamente distantes,
eles fazem parte de uma mesma unidade informacional.
Vamos observar o cartão de visitas apresentado na Imagem 3, a seguir:
 Imagem 3: Cartão de visita com elementos aleatórios | Fonte: Imagem adaptada de [ROBIN, Williams]
Parece que os elementos foram inseridos sem nenhum critério;
Não mostra com clareza as conexões entre os elementos.
Uma solução para o problema da Imagem 3 acima pode ser a Imagem 4, a seguir:
 Imagem 4: Cartão de visita aplicado com Proximidade e Alinhamento | Fonte: Imagem adaptada de [ROBIN, Williams]
O que foi aplicado para resultar na Imagem 4, acima:
Alinhamento à direita;
Agrupamento da empresa à pessoa e dados de contato (endereço e telefone).
Existem quatro tipos de alinhamento possíveis, apresentados na Tabela 3, a seguir:
Tipo de alinhamento Descrição e aplicação
À esquerda Mais comum, seguro e simples. 
Sentido de nossa leitura, favorecendo-a (leitura mais rápida).
À direita Oposto do alinhamento à esquerda. 
Passa uma mensagem disruptiva. 
Útil para dar contraste de direção em legendas de imagens.
Centralizado Mais usado pelos iniciantes por parecer seguro e confiável. 
Gera um visual formal, sereno, porém tedioso. 
Tem que saber usar e ser o alinhamento que você deseja. 
Usado para títulos e chamadas.
Justificado O espaçamento desigual entre as palavras é prejudicial ao ritmo da leitura, dificultando a.
Tabela 3: Exemplo mais cotidiano de proximidade
Atenção
Até dominar a aplicação desse princípio, procure usar apenas um tipo de alinhamento na página.
Vejamos a Imagem 5, a seguir, com os quatro tipos de alinhamento:
 Imagem 5: Os tipos de alinhamento | Fonte: Imagem adaptada de [ROBIN, Williams]
E quando outros elementos, não textuais, são inseridos na página;
deve haver o alinhamento?
Sim, e cada um deve ter alinhamento visual com os demais.
A ausência de alinhamento é, muito provavelmente, a maior causa de documentos com visual desagradável. Alinhe os títulos e
subtítulos com o mesmo alinhamento do texto. A ideia básica do alinhamento é uni�car e organizar (como a Proximidade) a
página.
O alinhamento pode ser obtido da seguinte
forma:
• Ache sempre outro elemento na página com
o qual alinhar um elemento, mesmo que
estejam distantes. O que deve ser evitado no
Alinhamento? 
• Evite usar mais de um tipo de alinhamento
para os textos da página; 
• Liberte-se do alinhamento centralizado, a
menos que sua escolha seja consciente.
Cabe ressaltar que estudos de
comportamento identi�caram que:
• Nas primeiras linhas, o leitor faz uma leitura
horizontal; 
• A partir daí, o olho do leitor passa a ler menos
palavras das linhas seguintes; 
• Nas linhas �nais, o leitor dá atenção apenas
às primeiras palavras, com um olhar vertical
para as palavras do texto.
Repetição
O princípio da repetição diz que:
Alguns elementos do design devem ser
repetidos por todas as páginas do website;
O elemento a repetir pode ser qualquer coisa
que o leitor reconheça: Negrito em fonte, uma
linha, marcador, relações de espaço, cor.
No Microsoft Word, quando de�nimos um cabeçalho que vai ser usado em todas as páginas, estamos aplicando a repetição.
A repetição tem o sentido da consistência, que garante o visual coeso. Por exemplo, títulos e subtítulos são bons exemplos de
repetição coerente e consistente.
A Imagem 6, a seguir, apresenta alguns exemplos de elementos repetitivos.
 Imagem 6: Os tipos de alinhamento | Fonte: Imagem adaptada de [ROBIN,
Williams]
A repetição ajuda a:
Organizar as informações;
Guiar o leitor;
Uni�car diferentes partes de um design;
Estabelecer continuidade so�sticada.
Eventualmente, os elementos repetitivos não são
exatamente iguais, mas, havendo uma relação forte entre
eles, a leitura será facilitada. O princípio da repetição é útil
em website de uma página e fundamental para website de
várias páginas.
A �nalidade básica da Repetição é uni�car e gerar mais
interesse visual.
Evite, quanto à repetição:
Repetir em excesso, de forma que o elemento �que
irritante ou excessivo.
Contraste
 Fonte: Shutterstock
Muitos classi�cam o Contraste como o princípio mais forte dos quatro, pois é um dos mais e�cazes para aumentar o interesse
visual de uma página.
O contraste é criado entre diferentes elementos, e sua função é �xar e atrair a atenção do internauta.
REGRA 1
Para o contraste ser efetivo, ele precisa ser forte;
REGRA 2
Se dois itens não são exatamente iguais, faça-os bem diferentes.
De que formas o contraste pode ser implementado:
Fonte grande x fonte pequena;
Fonte com estilos diferentes: Fonte com serifa x fonte sem serifa;
Linha �na x linha grossa;
Cor fria x cor quente;
Textura suave x textura áspera;
Elemento horizontal (linha longa de texto, por exemplo) x elemento vertical (coluna alta e �na de texto);
Linhas bem espaçadas x linhas bem próximas;
Imagem pequena x imagem grande;
Letra maiúscula x letra minúscula.
 Imagem 7: O princípio do contraste| Fonte: Imagem adaptada de [ROBIN,
Williams]
O contraste atrai o olhar do internauta. Sua �nalidade básica
é:
Criar interesse na página;
Ajudar na organização do conteúdo.
O foco do princípio do contraste é colocar em evidência o
que é valioso.
Evite contrastar:
Linha meio grossa x linha um pouco mais grossa;
Texto marrom x títulos pretos;
Duas ou mais fontes parecidas.
A Imagem 7, lado representa com clareza o princípio do
contraste.
Cores na web
 Fonte: Shutterstock
A escolha das cores do website é um momento relevante, um dos passos mais importantes, pois precisamos selecionar o que
for melhor para a empresa naquele projeto. Em geral, as cores são selecionadas pela identidade da marca, e podem ter
in�uência psicológica em seus usuários.
Existe, no mercado, um conjunto vasto de ferramentas que ajudam na escolha e gestão de uma paleta de cores para websites.
A pesquisa “Impacto da Cor no Marketing” (Impact of Color on Marketing) detectou que até 90% dos julgamentos precipitados
de produtos (em geral) podem ser baseados apenas na cor.
Clique nos botões para ver as informações.
A marca da empresa já pode ter sido de�nida ou não. Vamos aqui partir da premissa que sim: A identidade da marca já
existe e vamos apenas extrair suas cores para o website.
O uso de cores da marca, consistentemente, proporcionará um aspecto uni�cado e tudo será facilmente reconhecido,
dando à empresa mais visibilidade. Uma das heurísticas de usabilidade de Nielsen diz: Reconhecimento ao invés de
lembrança.
As cores da marca devem ser usadas em: Logo da empresa, esquema de cores do site, design do cartão de visitas, redes
sociais e anúncios (digitais ou mesmo impresso). Para empresas que operam em local físico (lojas e salas comerciais),
deve-se usar as cores da marca em seu layout, nas embalagens, nos uniformes dos funcionários e em peças
promocionais.
A identidade da marca de�ne as cores 
Como auxílio para a seleção das cores, podemos usar as tendências de cada setor, conforme a Tabela 4, a seguir:
O signi�cado das cores 
Setor Tendência de cores
Alimentação Cores quentes para ressaltar o apetite: Vermelho, amarelo e laranja. 
Verde: Nutrição (saúde das verduras). 
Azul e rosa: Sobremesas (doces , frutas etc.).
Saúde e bem estar Azul: Limpeza e confiabilidade. 
Verde: Natureza. 
Laranja: Vitalidade e energia.
Moda e beleza Preto: Sofisticação e glamour. 
Cores quentes: Vermelho, laranja e rosa -> entusiasmo, paixão.
Tecnologia Azul: Eficiência, confiança e inteligência. 
Laranja: Amigável. 
Roxo: Criatividade e qualidade.
Tabela 4: Uso de cores nos setores empresariais.
Setor Tendência de cores
Azul Confiabilidade, seriedade, profissionalismo.
Vermelho Urgência (correção), entusiasmo, juventude, coragem.
Roxo Criatividade, imaginação, luxo, realeza.
Laranja Confiabilidade, alegria, acolhimento, amizade.
Verde Crescimento, equilíbrio, serenidade.
Branco Pureza, clareza, simplicidade.
Preto Imponência, poder,elegância, clássico.
Tabela 5: A psicologia das cores
Há uma classi�cação de quentes e frias, criada pelo psicólogo alemão Wilhelm Wundt (1832-1920), baseada em suas
pesquisas a respeito de como as pessoas sentem (sensação) as cores. Segundo ele, as cores quentes são estimulantes e
relacionadas com: Alegria, movimento, vitalidade, descontração e excitação. Já as cores frias são suaves e estáticas,
relacionadas ao efeito tranquilizante, calmante e à esperança.
Cores frias têm associação com o gelo, a água e a lua, e transmitem sensação de frio. São elas: azul, violeta (roxo ou púrpura) e
verde.
As cores quentes transmitem a sensação de calor, estando associadas ao sol, ao fogo e ao sangue, denotando vivacidade,
movimento e dinamismo. São elas: Amarelo, laranja e vermelho.
Por �m, temos as cores neutras, que não estão associadas à sensação de frio ou calor, pois possuem pouca re�exão de luz.
Exemplos: Tons acinzentados, marrons e pastéis.
A Imagem 8, a seguir, apresenta o círculo cromático ou círculo de cores, composto pelas 12 cores do espectro (vermelho, azul,
amarelo, verde, laranja, roxo, vermelho-arroxeado, vermelho-alaranjado, amarelo-esverdeado, amarelo-alaranjado, azul-
arroxeado, azul-esverdeado). As cores quentes estão no lado direito do círculo, e as frias do lado esquerdo.
 Imagem 8: Círculo cromático.
Cores primárias: Amarelo, vermelho e azul.
Cores secundárias: Mistura de duas cores primárias.
Cores terciárias: Mistura das cores primárias com cores
secundárias.
Paleta de cores
Vimos que as cores devem estar relacionadas com a identidade visual da empresa e seu site, sendo relevantes na criação de
hierarquias visuais, destacando itens de maior e menor relevância ao contexto.
A de�nição de paleta de cores é:
• Conjunto de cores usadas, de forma harmônica, em seu website (adaptando a de�nição para nosso contexto); 
• Não há uma regra para de�nir a quantidade de cores mínima ou máxima. Existem duas formas tradicionais de criar sua paleta
de cores: 
• Básica: A partir das cores da identidade visual. Utilizamos as cores já usadas na marca ou em outras peças que a compõem e
de�nimos as cores dominantes, secundárias e de ênfase; 
• Alternativa: O foco é a mensagem que se deseja passar ao usuário. Nesse caso, as cores do website não determinam,
exclusivamente, as cores da paleta. Eventualmente, uma marca é �exível para se ter esse tipo de adaptação. 
• Outras: Outros fatores que podem ser usados: Tipo de negócio, tipo de produto ou serviço comercializado, veri�cando as
cores usadas nas principais empresas do setor.
Não há regra estabelecida para determinar a quantidade máxima de cores que deve ter uma palheta. Isso não é o mais
relevante, mas sim sua capacidade de entendê-las e usá-las. Um erro comum, especialmente dos iniciantes, é usar um número
exagerado de cores diferentes. As recomendações mais razoáveis sugerem que se use entre 12 e 7 cores.
O excesso de cores pode criar confusão visual e afastar os usuários.
Atividade
1. Avalie as assertivas abaixo e assinale a opção que corretamente informa o princípio de design em questão:
I. Possui duas �nalidades em conjunto: Criar interesse na página e possibilitar melhor organização.
II. As formas de intensi�car esse princípio são: Espessura das linhas, das cores, dos espaços, dentre outros.
III. Uma das máximas desse princípio diz: Se os elementos não forem exatamente iguais, faça-os serem bem diferentes.
Estamos falando de qual princípio de design?
a) Afastamento.
b) Proximidade.
c) Alinhamento.
d) Repetição.
e) Contraste.
2. Avalie as assertivas abaixo e assinale a opção que corretamente informa o princípio de design em questão:
I. Se os elementos tiverem relação uns com os outros, agrupe-os.
II. Elementos separados não se relacionam.
III. Ajuda na visualização do conteúdo e na clareza da comunicação.
Estamos falando de qual princípio de design?
a) Afastamento.
b) Contraste.
c) Alinhamento.
d) Repetição.
e) Proximidade.
3. Relacione as duas colunas apresentadas: Princípio de design e Características (podem existir princípios sem correlação):
Proximidade - 1 Contraste - 2 Repetição - 3 Alinhamento - 4 Afastamento - 5
a) Poderosa maneira de ser consistente. Ajuda a aumentar a sensação de reconhecimento do usuário.
b) Itens relacionados devem estar próximos, como uma unidade.
c) Os elementos precisam ter conexão visual com os demais.
d) Em geral, é o atrativo mais relevante da página, sendo a primeira percepção do usuário.
4. Avalie as assertivas a seguir no que se refere ao protótipo de alta �delidade:
I. Cores frias têm associação com o gelo, a água e a lua.
II. As cores frias transmitem sensação de frio. São elas: Amarelo, laranja e vermelho.
III. As cores quentes transmitem a sensação de calor, estando associadas ao sol, ao fogo e ao sangue, denotando vivacidade,
movimento e dinamismo.
IV. As cores quentes são: Azul, violeta (roxo ou púrpura) e verde.
Com base em sua análise, assinale a opção que apresenta as assertivas corretas, indicando verdadeiro (V) ou falso (F):
a) Apenas I.
b) Apenas III.
c) I, II e III.
d) I e II.
e) I e III.
5. Relacione as duas colunas apresentadas: Cor e sensações que transmitem ou provocam (podem existir cores sem
correlação):
Azul - 1 Vermelho - 2 Roxo - 3 Laranja - 4 Verde - 5
a) Con�abilidade, alegria, acolhimento, amizade.
b) Criatividade, imaginação, luxo, realeza.
c) Urgência (correção), entusiasmo, juventude, coragem.
d) Con�abilidade, seriedade, pro�ssionalismo.
Notas
Referências
BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2012. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788582601969/. Acesso em 3 ago. 2020.
KALBACH, J. Design de Navegação Web: Otimizando a Experiência do Usuário. Porto Alegre, RS: Bookman, 2009. Disponível
em: https://integrada.minhabiblioteca.com.br/#/books/9788577805310/. Acesso em 3 ago. 2020.
javascript:void(0);
javascript:void(0);
MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
NIELSON, J. Livro clássico, precursor, sobre usabilidade. Chestnut Hill, MA, Academic Press, 1993.
ROBIN, W. Design para quem não é design: princípios de design e tipogra�a para iniciantes. 4.ed.; São Paulo: Callis ed.; 2013.
Disponível em https://plataforma.bvirtual.com.br/Leitor/Publicacao/7034/pdf/0?
code=3hcG4B5kRs5T4YaB5XGNy2v8CdqxG4Xl7Ucyx8+uBGFGp+NpZRh87VDztoejO7eQR2wKM+wpYNN7QIBQELsfYg==.
Acesso em 3 ago. 2020.
SANTA ROSA, J.G. Avaliação do Projeto no design de interfaces. Teresópolis, RJ: 1.ed., 2AB editora, 2012. Acesso em 3 ago.
2020.
Próxima aula
Uso tipográ�co em interfaces digitais;
Uso das imagens interfaces digitais;
Uso de ícones.
Explore mais
Con�ra o Material de design Google .
Con�ra Os melhores construtores de sites em 2020 (português) .
Leia o texto Psicologia das cores no design grá�co .
Acesse 25 bancos de imagens gratuitos .
Leia o texto Cores para Sites: Inspire-se nas Paletas Utilizadas em 50 Páginas Impactantes.
javascript:void(0);
javascript:void(0);
javascript:void(0);
javascript:void(0);
javascript:void(0);
javascript:void(0);