Design e Gestao de Web 1

BA online – Centro Universitário Belas Artes de São Paulo
Design e Gestão de Web, Mídias Digitais e Móveis
Administração Belas Artes

Dr. Paulo Antonio Gomes Cardim
Reitor
Prof. Dr. Francisco Carlos Tadeu Starke Rodrigues

Pró-Reitor Administrativo
Prof. Dr. Sidney Ferreira Leite

Pró-Reitor Acadêmico
Dra. Josiane Maria de Freitas Tonelotto

Superintendente Acadêmica
Departamento BA online
Profa. Ma. Leila Rabello de Oliveira
Coordenação
Lucas de Mattos Millan

Claudio Villa da Costa Filho
Design Instrucional
Gustavo Nogueira Pereira

João Paulo Tenório da Silva
Web Design
Gabriel Kwak
Publicação Marina de Mello Fontanelli
Este e-book é uma publicação da
Revisão de Texto
Beatriz Melhorine Basílio

Hanna Carolina Brino Barretto
Rua Dr. Álvaro Alvim, nº 90
Analise Educacional
Vila Mariana – SP
Fone: (11) 5576-7300
É proibida a venda e a
reprodução deste material sem
autorização prévia do Centro
Universitário Belas Artes de São
Paulo.
2
Educação a Distância – Centro Universitário Belas Artes de São Paulo
Profa. Ma. Denise de Paiva Tangerino
Design e Gestão de Web

Mídias Digitais Móveis
Educação a Distância
2018
Centro Universitário Belas Artes de São Paulo

Sumário
Para início de conversa 6
Módulo 1: Aspectos gerais do Design Gráfico 7

aplicado aos produtos digitais
Referências 41
4
Professora autora
Ma. Denise de Paiva Tangerino
Meu sonho sempre foi mudar o mun-

do, trazendo alegria e leveza por onde
eu passasse, e ser professora era ape-
nas consequência desse meu sonho.
Sou graduada e pós-graduada em
Design Gráfico, com foco em de-
sign editorial. Já no mestrado, parti
para os estudos da Comunicação e
das Práticas do Consumo, na ESPM,
visando compreender a juventude e
suas rotas de consumo individuais e cole-
tivas. Em 2011, começo minha carreira de docente
universitária e em 2014 entro para o time Belas Artes (afinal, deve
ser muito triste não ser Belas Artes). Paralelo a isso, mantenho pe-
quenas produções de audiovisual, como gosto, e minha profunda
formação em séries e Netflix sempre ativa.
Bon appétit!
5
Para início de conversa
Caro aluno, é com satisfação que lhe desejo boas-vindas

ao estudo da disciplina de Design e Gestão de Web, Mídias Digitais
e Móveis, preparada exclusivamente para seu curso. Você é meu
convidado especial para, ao longo de nossa jornada, compreender
os aspectos que caracterizam o estudo do design gráfico aplicado à
web, os pontos técnicos para a criação de algumas plataformas on-
line e, principalmente, as formas mais usuais e práticas de gestão
desses produtos digitais, essenciais para a formação de qualidade de
futuros profissionais. Afinal, independente da habilitação que você
estuda dentro da Comunicação Social, deverá ter um conhecimento
aprofundado em criação e gestão de produtos digitais.
Para tanto, ao longo de oito Módulos estruturados de maneira a

facilitar a absorção de seu conteúdo, daremos importância a objetivos
cruciais relacionados ao ambiente educacional, como fomentar uma
visão crítica e estratégica ante os meios de comunicação da web,
desenvolver um espírito criativo, dotá-lo de ferramentas básicas
e fundamentais para o desenvolvimento de peças, alinhadas ao
planejamento estratégico, e ensinar a gestão desses meios como
processos fundamentais para a ativação de campanhas e retenção de
público.
Do mesmo modo, abordaremos temas como: as formas básicas

do design (ponto, linha e forma) e suas aplicações relacionais; o uso
das cores em diversos suportes (impressos e digitais); morfologia e uso
coerente e eficiente das diversas tipografias existentes no mercado; o
uso de imagens e as possibilidades de edição das fotografias; criação
de marca e desenvolvimento do MIV (Manual de Identidade Visual);
aspectos gerais de criação para web (Usabilidade e Leiturabilidade);
aplicação dos aspectos imagéticos e textuais para a concepção e
aplicação em diversos suportes virtuais, especialmente sites e redes
sociais; e, por último, a gestão de todos esses aspectos. Tudo isso de
maneira leve e dialógica, com elementos que o ajudarão a conhecer o
contexto da disciplina, para que você se sinta motivado a atingir, com
sucesso, os objetivos propostos em nossos Módulos e consiga, deste
modo, êxito em suas carreiras profissional e estudantil.
6
MÓDULO 1
Aspectos gerais do Design
Gráfico aplicado aos produtos
digitais
Profa. Ma. Denise de Paiva Tangerino
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
Objetivos
Ao término dos estudos propostos nesta Unidade, você

deverá estar apto a:
 Compreender a importância dos aspectos específicos

do Design Gráfico aplicado a produtos digitais;
 aprender sistemas tonais utilizados para diferentes
suportes impressos e digitais, com o objetivo
de aplicar, com coerência, cores e texturas em
concordância com os projetos solicitados;
 utilizar as ferramentas já disponíveis como
instrumento de facilitação no momento da criação de
um produto gráfico digital;
 aplicar o sistema tonal na criação de layouts para web,
com o objetivo de alcançar os aspectos solicitados no
briefing.
Seções
1. Introdução ao conceito de design gráfico

2. Treinamento básico sobre cores
3. Característica das cores
4. Combinação de cores
5. Texturas e cores: a múltipla influência
8
Introdução
Caro aluno,
Seja bem-vindo ao primeiro Módulo de nossa disciplina

Design e Gestão de Web, Mídias Digitais e Móveis. Nele avaliaremos
os objetivos propostos, base de conteúdo de suas cinco seções. Elas
servirão de apoio para o seu aprendizado e para a construção do seu
processo cognitivo.
Com participação e reflexão, você aprenderá, de maneira

agradável e conveniente, a compreender a importância dos aspectos
específicos do design gráfico aplicado a produtos digitais.
Sendo assim, convido-o a tomar parte desta aventura para

que possamos ampliar nossos conhecimentos.
Bons estudos!
9
Seção 1
Introdução ao conceito de design gráfico
Caro aluno, bem-vindo a nossa primeira aventura: compreen-

der o que é design gráfico.
Ao consultarmos um
dicionário, passo mais simples
para se compreender o que
significa uma determinada pala-
vra, encontramos que “design”
provém do inglês e está atrelada
aos seguintes conceitos: o ato projetual de criar algo; o desígnio para
criar algo; ou, ainda, a concepção física e funcional de um produto.
Talvez esses termos e expressões ainda sejam difíceis de serem

compreendidos, então facilitarei mais um pouco dizendo:
Design é a ação de projetar algo (site, marca, móveis, roupas, espaços,

etc.), que tenha como pilar de criação dois aspectos fundamentais, a
forma e a função.
Vamos destrinchar mais um pouco!
Forma é o formato físico ou digital que um produto (no nosso

caso trabalharemos com entregas virtuais, como website, blogs,
vídeos, redes sociais, entre outros) vai receber, com o objetivo de
alcançar uma função (entreter, informar, representar uma empresa
ou pessoa, etc.).
Exemplificando
Uma cadeira tem uma forma física cujo objetivo promo-
ve o conforto na hora de sentar, que é sua função.
Ou, ainda, um cadeirão de bebê tem os pés altos
e uma mesa acoplada adequada à criança, com a
função de promover um espaço pertinente tanto
para a alimentação infantil quanto para que o res-
ponsável por dar a comida fique confortável nesse
momento.
Portanto:
forma + função = design
10
A partir desse conceito, podemos pensar que:
Intrínseco ao conceito de design, está o de usuário. E, de certa

forma, onde ele e um produto estão, há também um objetivo, o qual
costuma ser comercial. Sendo assim, o design serve para comunicar
um conceito, definido previamente pelo cliente, com o objetivo de
comunicá-lo ao usuário.
Ufa! Parece complicado, mas é bem simples: criamos um

produto comunicacional para usuários, solicitado no briefing por um
cliente e seguindo objetivos bem específicos. No entanto, lembre-se:
muitas vezes ele não corresponde ao nosso gosto estético pessoal.
Por último, podemos pensar o design como um produto

solicitado por um profissional liberal ou empresa, que tem custos
e envolve pessoas que dependem dele para viver. Nas últimas
décadas, muito tem se falado sobre gestão de projeto com o objetivo
de sistematizar cada etapa do processo criativo e poder controlar
questões, como tempo gasto em cada parte do processo, custo de cada
ação, gastos que são feitos na criação e na produção dos produtos,
valor de hora-homem, quanto cobrar do cliente, entre outros. Todos
os aspectos são importantes, mas, particularmente, eu gosto de focar
na seguinte máxima: todo projeto tem que ter um momento inicial
e um prazo de entrega final, senão o cliente não sabe quando pagar
pelo trabalho e, pior, quando parar de solicitar mais. Deixe muito claro
que cada solicitação tem um custo e um objetivo e, assim, requer um
novo trabalho.
De forma imatura, muitas vezes queremos agradar o cliente

e acabamos trabalhando muito mais do que o solicitado a princípio,
o que nos gera muita mão de obra e imensa frustração. Após a
entrega, temos o que chamamos de atualização, que grosso modo é
o cotidiano e a gestão do produto comunicacional. Na prática do dia
a dia: o cliente me encomendou um site (ponto de partida), o qual
entreguei como solicitado (ponto final do seu projeto), e o cliente me
pediu para postar coisas nele (novo projeto, logo, novo valor).
Design e a caixa de ferramentas
Ao compreender o que é design e quais são os principais focos

da área, podemos entrar nos aspectos estéticos os quais, para facilitar
nossa disciplina on-line, chamarei de caixa de ferramentas. Como
toda boa e velha caixa, as ferramentas têm usos específicos, mas
muitas vezes acabamos usando mais de uma delas para realizar uma
mesma ação. Por exemplo, para colocarmos um quadro na parede
precisamos de uma furadeira, obviamente para perfurá-la, contudo,
muitas vezes também utilizamos o martelo para encaixar a bucha no
buraco perfurado. Na área estética temos algumas ferramentas, que
podem e devem ser combinadas para chegar a um resultado coerente
ao briefing solicitado. São elas:
11
Cor: é o mundo cromático que nos rodeia, aquilo que

identificamos como matiz (o nome da cor).
Ponto: a unidade mais simples e irredutivelmente mínima de

comunicação visual.
Forma: uma linha fechada determina uma forma. As formas

mais básicas da comunicação visual são o quadrado (pouco
encontrado na natureza), o círculo e o triângulo.
Linha: um ponto em movimento ou pontos bem próximos

entre si dão a sensação de continuidade, estabelecendo uma
direção, e assim formam uma linha.
Textura: é o elemento visual que serve de substituto para as

qualidades de outro sentido, como o tato e a audição.
Proporção: nesse caso, é a relação entre dois objetos, que é

dado especialmente em função da escala dos objetos.
Direção: existem três direções básicas que conduzem nossos

olhares: horizontal e vertical; a diagonal; e a curva.
Movimento: é a sensação real ou virtual de que um corpo

não está estático, mas em deslocamento.
Tom: está relacionado ao uso da luz para identificar a gradação

da cor.
Dimensão: também é um conceito relacional, que se realiza

no tamanho de um objeto em vinculação a outro.
Segundo Donis A. Dondis (p. 85, 1997), estudiosa da área e reconhecida

pelo seu método de leitura visual, todas essas ferramentas nos ajudam
a traduzir e analisar mensagens visuais em três níveis:
Representacional
Aquilo que vemos e identificamos com
base no meio ambiente e na experiência.
12
Abstrato
A qualidade cinestésica de um fato visual

reduzido a seus componentes visuais básicos
e elementares, enfatizando os meios mais
diretos, emocionais e mesmo primitivos da
criação de mensagens.
Simbólico
O vasto universo de sistemas de símbolos

codificados que o homem criou arbitrariamente
e ao qual atribuiu significados.
O universo ao nosso redor é repleto de significados, que

são diretos ou indiretos, subjetivos ou objetivos. Entender quais
as retóricas de criação de imagem nos ajuda a analisar com mais
profundidade as imagens de nosso entorno e, assim, dominar com
segurança os produtos que criamos.
O que é criar uma marca, por exemplo?

Nada mais do que traduzir simbolicamente
todos os valores de um profissional
ou de uma empresa. E os desenhos
animados, como Masha e o Urso? A
representação visual da ideia de um
urso amistoso que pode ser amigo de
uma garota. E a trilha sonora de um
vídeo? Simples, o conceito sonoro de
sentimentos expresso de forma abstrata,
como uma batida mais forte que demonstre
tensão ou uma flauta para romance. Vamos fazer uma brincadeira
associando sons a marcas?
13
Na prática
Você já pensou que design pode ir além do visual? Que tal
pensarmos em design sonoro? Qual o som emitido por um
celular da Motorola ao ser ligado? E aquele de um computador,
com o sistema operacional Windows, ao ser iniciado? Podemos
definir design sonoro como a arte de manipular ondas sonoras
e suas frequências, de transmitir sentimentos e sensações
por meio de sonoridades diferentes e efeitos de som. Não
podemos esquecer das trilhas sonoras que enriquecem e que
dão uma sensação de realidade às cenas de um filme ou vídeo.
Atualmente, os youtubers abusam desse recurso para tornar os
vídeos mais instigantes e cativar o público. Quando preciso de
trilha branca (com direitos autorais liberados), gosto de utilizar
um site no qual consigo fazer download gratuitamente de bons
sons.
Todas essas informações são bastante pertinentes, mas como

utilizamos na web? Por que temos que saber tudo isso?
A resposta é bastante simples, acessamos nossa caixa de

ferramenta básica com a finalidade de conseguirmos transmitir um
conceito a qualquer produto comunicacional que quisermos. Assim,
com ela estamos capacitados a estabelecer uma interlocução entre
três tipologias: representacional, abstrata e simbólica.
Que tal começarmos a observar o mundo ao nosso redor? Vamos

fazer alguns exercícios de compreensão?
Multimídia
Uma tendência atual do design é a referência simbólica dos

pictogramas, cada vez mais utilizada como síntese visual de uma
determinada informação.
Como assim? Quando vamos ao banheiro de um shopping, por

exemplo, encontramos pictogramas que representam os sexos
feminino e masculino. Da mesma forma, os aeroportos estão
carregados de pictogramas para indicar restaurantes, embarque,
check-in, etc. Existe um site muito utilizado pelos designers por
disponibilizar gratuitamente milhares de pictogramas gratuitos
em vários formatos: ai, jpeg, tiff, entre outros. Faça bom uso!
14
Agora é a sua vez!
Identifique a tipologia da linguagem visual utilizada nas

imagens
1. 2.
3.
A. ( ) Abstrato
1–B/2–A/3–C
Resposta correta
B. ( ) Simbólico
C. ( ) Representacional
15
Seção 2
Treinamento básico sobre cores
De forma geral, o ponto inicial para o estudo das cores é a

compreensão de que a conceituação que damos às cores são neces-
sariamente três elementos básicos: a luz, um objeto e um observador.
A luz, incidindo sobre um objeto, terá suas propriedades físicas alte-
radas e, ao chegar aos olhos do observador, será codificada e surgirá
a sensação visual chamada de cor. Vale sempre ressaltar que a luz é
formada por ondas eletromagnéticas, compreendidas aproximada-
mente entre 400 e 700nm, e os seres humanos só conseguem captar
as cores que estão nesse espectro de luz.
Uma das etapas mais importantes na hora de trabalhar com
criação, seja de produtos impressos ou virtuais, é conseguir definir
as cores do projeto e saber como e onde aplicá-las. Para tal atividade,
torna-se extremamente importante compreender os sistemas tonais
e quando não devemos usar cada um deles. Muitas vezes, em sala de
aula, percebemos que o aluno fica perdido na hora de distinguir entre
RGB e CMYK, sobre como usar o sistema de cor RGB ou, ainda, sobre
por que não usar o CMYK. Indo um pouco mais fundo na questão: o
que é grayscale? Você já se perguntou a diferença entre os três? Não?
Então, vamos lá!
A primeira coisa que temos que levantar para entender os

sistemas tonais é que no universo inteiro todas as cores que vemos são
formadas apenas de duas formas: por luz (cor-luz) ou por pigmento.
Como o próprio nome diz, a cor-luz é formada apenas por irradiação
de raios luminosos e funciona na reprodução de dispositivos que
obrigatoriamente necessitam de energia luminosa para funcionar,
como: monitores de TV, computador, retroprojetores, celulares, entre
outros. Já a cor-pigmento é formada por materialidade, por tintas, e
funciona em suportes impressos.
16
Conheça os sistemas de cores:
RGB
A sigla RGB é a abreviatura do sistema de

síntese aditiva, cores-luz, formadas por Red,
Green e Blue (vermelho, verde e azul). Com
uma combinação apropriada de superposi-
ção das ondas verde, vermelha e violeta,
obteremos a luz branca. O principal pro-
pósito do RGB é reproduzir as cores nos
meios eletrônicos, jamais para impressão.
Nesse sistema, ao trabalhar a combinação
dessas matrizes tonais em nossos computadores, podemos formar
cerca de 16 milhões de diferentes combinações entre tons, saturação
e brilhos, nos dando uma gama gigantesca de possibilidades de cria-
ção.
CMYK
A sigla CMYK é a abreviatura do sistema

de cores subtrativas, cores pigmento, formado
pelo Cian, Magenta, Yellow e Black (Black Key).
Isto significa que os pigmentos amarelo (Y),
magenta (M) e ciano (C) são cores primá-
rias, ou seja, não resultam da mistura de
outras tinturas. Por sinal, as cores primá-
rias misturadas entre si podem formar uma
vastíssima gama de outras tonalidades.
E o preto (K), como obtemos? Cada tipo de pigmento tem seu

próprio poder seletor, ou seja, absorve (subtrai) uma ou mais radia-
ções tonais. Dessa forma, a cada sobreposição de um pigmento, dimi-
nui o número de radiações refletidas, até conseguir a ausência abso-
luta de toda radiação, isto é, a sensação visual de se enxergar o preto,
resultado final da mistura subtrativa.
Nas artes gráficas, o uso das quatro cores iniciais (CMYK) é

chamada de quadricromia, pois apenas essas quatro matrizes bási-
cas são responsáveis pela impressão de todas as outras tonalidades
conhecidas.
Sei que, quando tratamos de cor, manipulamos as imagens

nos softwares de edição em RGB, porém ao passarmos para o CMYK
(envio para impressão, envio para gráfica), perdemos consideravel-
mente o brilho e a vibração da peça. Esse fato se dá pelo fato do
CMYK apresentar uma gama menor de combinações de cores, afinal,
a composição física das cores se dá pela mistura de pigmentos.
17
MONOCROMIA
Monocromia, a rigor, é a radiação

produzida por apenas uma cor, por apenas
um comprimento de onda e que, ao contrá-
rio do que muitos acreditam, não necessa-
riamente é constituída por preto. Na verda-
de, a monocromia é conseguida pelo uso de
apenas uma cor (matiz) e os diferentes tons
que ela possui. Logo, monocromia (uma cor)
é o oposto de policromia (várias cores, como CMYK e RGB).
Na prática
Você sabe como transformar, no Photoshop, uma imagem em
RGB, CMYK e Grayscale? Não? Aproveite a dica!
RGB: Image → Mode → RGB
CMYK: Image → Mode → CMYK
Grayscale (tons de cinza): Image → Mode → Grayscale
Monocromático: a imagem tem que estar em Grayscale →

Image → Mode → Duotone → Escolhe a cor → Enter
Preste atenção: se a imagem estiver em cor Index, você não

conseguirá alterá-la enquanto não escolher um sistema de cor.
Neste caso, sugiro RGB.
CORES ESPECIAIS
Cores especiais são aquelas feitas especial-

mente para um determinado cliente ou projeto,
pois são produzidos pigmentos já na cor a ser
utilizada, sem a necessidade de misturas. Dentre
elas, o sistema mais conhecido é o Pantone, que
é também uma indústria de tintas.
Afinal, qual a necessidade de fazer uma cor

especial? Na verdade, a grande vantagem de uma cor
Pantone é a garantia que a impressão de cores fique entre 95 e 100%
estabilizadas, sem variação de tons no produto final. Contudo, a gran-
de desvantagem é o custo, que sai muito mais alto do que o CMYK.
18
CÍRCULO CROMÁTICO
O círculo cromático, também
conhecido como rosácea das cores, é
uma das formas de visualização de
cores mais comum e serve para nos
ajudar escolher entre as suas diver-
sas possibilidades de harmonização.
A harmonia entre elas é um dos fato-
res fundamentais para que uma ima-
gem (site, marca, cartaz, estampa, etc.)
transmita a mensagem para o receptor sem
que haja ruídos estéticos (lembrando que estética não se refere ape-
nas à visão, mas a todos os sentidos dos seres humanos).
Multimídia
A Adobe, empresa detentora do Photoshop e outros softwares

de edição de imagem e áudio, disponibilizou o site Adobe Kuler
onde é possível fazer combinações de cores e ver como elas
interagem em relação umas às outras. Vale a pena conferir e usar
em todos os trabalhos daqui para frente.
19
Alguns conceitos, relacionados ao círculo cromático, são ex-

tremamente necessários para nossas escolhas tonais na aplicação vi-
sual. São eles:
Cor primária: cor que não possui mistura de pigmen-
to. São três: amarelo, azul e vermelho.
Cor secundária: cor composta por duas cores primá-

rias. São três: laranja, verde e violeta.
Cor terciária: composta por uma cor primária e uma

secundária, vizinhas no círculo cromático. São seis:
amarelo-esverdeado, verde-azulado, azul-violeta, ver-
melho-violeta, vermelho-magenta, magenta-laranja.
Cores complementares: formadas por duas cores pri-

márias opostas no círculo cromático.
Cores análogas: são as vizinhas no círculo cromático.
20
Na prática
Uma empresa que deseja ser séria, e manter sua marca e produ-
tos transmitindo confiabilidade, tem a preocupação constante
de deixar as cores de seus produtos padronizados. Veja o caso
da Coca-Cola, cujo vermelho padrão é conhecido internacional-
mente, sem nunca apresentar variações de tons. Para que isso
aconteça, é criado o que chamamos de Manual de Identidade
Visual (MIV), no qual se estabelece o valor em RGB, CMYK e
Pantone de cada cor contida na marca. A cor é um dos elemen-
tos mais importantes desse material. Não se preocupe, nós
dedicaremos uma seção inteira para o estudo detalhado do MIV.
Contudo, se você for ansioso, já pode fazer uma pesquisa sobre
MIVs e ver como facilitam o uso técnico das cores pelas empre-
sas. Um bom exemplo desse uso é o site do Rio20.
Que tal descobrirmos as cores de algumas marcas do governo?

Ao descobri-las, anote ao lado de cada um dos exemplos.
Nesta seção, você pôde compreender a importância dos siste-

mas de cores para o processo de criação, bem como seus modos de
aplicação. Espero por você na próxima seção!
21
Agora é a sua vez!
Relacione os valores que têm a ver com cada frase.

1. É a abreviatura do sistema de cores subtrativas, cores
pigmento, formado pelo Cian, Magenta, Yellow e Black
(Black Key).
2. Abreviatura do sistema de síntese aditiva, cores-luz,
formadas por Red, Green e Blue (vermelho, verde e azul).
3. É obtido pelo uso de apenas uma cor (matiz) e os dife-
rentes tons que ela possui.
4. Conhecido como rosácea das cores, é uma das formas
de visualização de cores mais comuns e serve para nos
ajudar escolher entre as suas diversas possibilidades de
harmonização.
A. ( ) Círculo cromático
1–B/2–C/3–D/4–A
B. ( ) CMYK
Resposta correta
C. ( ) RGB
D. ( ) Monocromia
22
Seção 3
Características das cores
Vamos entender um pouco mais sobre as cores?
Antes de entrarmos no seu uso em diferentes contextos e no

significado de cada uma delas, é fundamental compreender suas
características e variações. Fique atento às informações apresentadas
em “Curiosidades”, pois lá ensinarei como manipular esses atributos
no Adobe Photoshop.
Multimídia
Atualmente, para nossa sorte, muitos dispositivos

tecnológicos estão sendo lançados para nos ajudar na
seleção das cores que utilizaremos em nossos projetos.
Uma das extensões que mais me ajudam no processo
de criação é o ColorZilla, que pode ser instalado nos
navegadores Firefox e Chrome, e que serve como
seletor de cor em plataformas on-line.
A grande vantagem da ferramenta é possibilitar a

precisão exata da cor, que utilizaremos em diferentes
produtos, e sem perdermos o padrão tonal.
Também sugiro o uso do site UI Color, pois ele traz diversas

tonalidades de uma mesma cor, facilitando muito a escolha do
tom a ser aplicado
MATIZ
Um matiz ou tom é a personalidade de uma cor, que se espe-

cifica com os nomes azul, vermelho, verde, amarelo, etc. De maneira
mais simples, é o nome dado ao tom.
LUMINOSIDADE
Cada matiz possui luminosidade ou brilho, que também iden-

tificamos como claridade e apontamos como a capacidade que uma
cor-pigmento tem de refletir a luz branca que recebe.
LUMINOSIDADE
Provém do inglês lightness, pois, na prática, é exatamente o

que faz uma cor aparecer mais clara ou mais escura, independente da
saturação, cujo processo se dá na adição de cor branca ao matiz.
23
É interessante ressaltar que as cores mais claras parecem

conter maior brilho, contudo, esse efeito se realiza no efeito combina-
do entre brilho e matiz.
Curiosidade
Você sabe como mexer no brilho, saturação e colorização de

uma imagem no Photoshop? Não?
Aproveite essa dica: todas as ferramentas de edição de imagem

estão dentro de Imagem > Ajustes.
Fora as propriedades já identificadas, temos a faculdade de

perceber as cores dentro de sua temperatura, na qual um determina-
do matiz pode parecer mais quente ou frio dependendo do contexto.
Cores quentes: amarelo, vermelho e laranja (de acordo com a

semelhança com o fogo).
Cores frias: ciano, violeta, verde (de acordo com a semelhan-

ça com o gelo).
Cores neutras: preto, branco, cinza, cores muito saturadas

(com adição de branco) ou com pouco brilho (que parecem mais
escuras).
Tome nota: as cores são relacionais, ou seja, podem parecer

mais quentes ou frias em relação a outras.
Também são atribuídas características psicológicas às cores,

pois provocam sensações e sentimentos diferentes em suas aplica-
ções.
Vale ressaltar que, na publicidade e no audiovisual, o uso

desses atributos tem por objetivo potencializar o significado das
peças ou das cenas ao pensar nas características listadas a seguir.
24
Cores quentes (aproximantes)
Agitação, dinamismo, emotividade, calor,

acolhida, ação, terreno, interação, energia, proximi-
dade e descontração.
Cores frias (afastantes)
Tranquilidade, equilíbrio, racionalidade,

frescor, iluminação, divindade, distanciamento,
apatia, impessoalidade e introspecção.
Cores escuras
Autoridade, seriedade, credibilidade, força,

densidade e formalidade.
Cores claras
Proximidade, descontração, abertura, flexi-

bilidade, leveza e casualidade.
Cores brilhantes
Vivacidade, desafio, irritação, energia,

agressividade, simplicidade e infantilidade.
Cores foscas
Suavidade, prudência, apaziguadora, equilí-

brio, confortantes, acolhedoras, suavidade, sofisti-
cação, maturidade.
25
LINGUAGEM DAS CORES
Confira agora as características das cores em relação à

saturação.
Quente, luminoso, vivo (saturado)
• Casual
• Descontração
• Relaxamento
• Diversão
• Jovem
• Frescor
• Imaturo
• Irreverente
• Férias
• Flexibilidade
• Receptividade
• Criatividade
Frio, escuro, fosco (não-saturado).
• Comprometimento
• Prontidão
• Ambição
• Adulto
• Credibilidade
• Maduro
• Sério
• Trabalho
• Força
• Distanciamento
• Seriedade
26
SIGNIFICADO DAS CORES
Perceba que as cores também remetem a diversos perfis,

qualidades e particularidades.
Por último, podemos apreender que uma cor tem característi-

cas diferentes e que, dependendo do fundo que colocarmos, temos a
sensação de mudança da cor em relação ao contexto no qual ela será
inserida.
Curiosidade
Todos os anos, a Pantone lança em seu site o que a empresa

chama de “cor do ano”. Esse lançamento serve para marcar as
tendências tonais que, durante os dozes meses, servirão de
norte para todos os ramos que trabalham com a criação de
base de seus resultados, como design gráfico e de interiores,
arquitetura, web, publicidade e moda.
Para este ano, 2017, a cor escolhida foi a denominada Pantone

Greenery. Vamos conhecer mais sobre essa cor?
27
Agora é a sua vez!
Em 2015, a Pantone elegeu a Marsala como a principal

tendência de cor daquele ano. Muitos arquitetos e desig-
ners aproveitaram a tendência para aplicar esta cor em
seus sites e marcas.
Identifique as imagens que comtemplem a cor Marsala.
A. ( )
B. ( )
C. ( )
D. ( )
Resposta correta
B/D
28
Seção 4
Combinação de cores
Toda teoria potencializa a prática e traz novas responsabili-

dades ao seu uso. Que tal, agora que já aprendemos bastante sobre
as cores e suas estratégias de aplicação, aprendermos a utilizá-las na
criação de produtos digitais?
Para tanto, vamos analisar algumas marcas famosas e seus

sites?
Antes de começarmos, é bom termos em mente que toda

marca tem um conceito a ser transmitido. Esse conceito é a sua essên-
cia, aquilo que ela é, seu DNA.
Após definir sua alma, podemos identificar o que chamamos

de posicionamento da marca. Não vamos nos alongar nesse caminho,
pois essa teoria será abordada em profundidade pelas disciplinas de
Marketing e Branding, porém nos ajudará muito a pensar nos produ-
tos a seguir.
Ao entrarmos em um determinado site para analisá-lo, pode-

mos levar em conta diversas características, contudo, neste momen-
to, focaremos em personalidade (DNA), representação e identidade
tonal da marca.
Exemplo 1 – Doritos
O caso do Doritos é bastante fácil, ele está no nosso dia a dia e

o consumimos com frequência.
A primeira coisa que identificamos,

graças a nossa intimidade com a marca, é
que sua essência foi construída como um
produto jovem, dinâmico e de fácil consu-
mo.
A parte gráfica da marca é a representação

física do próprio Doritos, que consiste em um triân-
gulo preto com traços de fogo marcando sua intensidade e seu dina-
mismo.
29
Suas embalagens são sempre em

cores sólidas, sem grande variação de
cores ou degradês, apoiadas nas cores
primárias e secundárias.
Seu site atual está trabalhando a

campanha dos produtos Rainbow, proje-
to que apoia uma ação social voltada
para a diversidade.
Agora, amigo, preste bem atenção. Doritos, nessa campa-

nha, quer vender diversidade. O principal símbolo da diversidade é
o arco-íris. Os dois focos principais para criar uma imagem associada
ao projeto são: o produto (ou embalagem) a ser vendido e as cores
da Bandeira do Orgulho LGBT, maior símbolo da diversidade. E o que
encontramos no site? Exatamente cores e produto sobre um fundo de
cor branca. Por quê?
Curiosidade
Além disso, incluir nessa página um periférico de Curiosidade:
Você sabia que a bandeira do Orgulho LGBT foi criada em 1978, em

São Francisco, em resposta à necessidade que os ativistas locais
tinham de se ter um símbolo da comunidade LG?
Não se sabe ao certo quais foram as influências para a composição

de seu design, mas acredita-se que vieram das bandeiras utilizadas
por várias causas e organizações de direitos sociais na década de
60, também em São Francisco.
Além disso, é importante ressaltar que a escolha de uma bandeira

de arco-íris não foi aleatória. Ela foi totalmente pensada por Gil-
bert Baker e mais 30 voluntários, buscando representar de algum
modo a comunidade LG em cada cor. Sendo assim, é claro que elas
têm um significado, os quais orginalmente eram:
• Rosa choque: sexo
• Vermelho: vida
• Laranja: cura
• Amarelo: sol
• Verde: serenidade com a natureza
• Turquesa: arte
• Índigo: harmonia
• Violeta: espírito
30
O fundo branco, tal e como está sendo usado neste caso, é

tendência de comunicação na web, pois dá destaque aos produtos
ou marcas ou valores que estão sendo vendidos, servindo como base
sem interferir na mensagem.
Outras marcas famosas estão usando a mesma estratégia visu-

al, como a Apple.
Exemplo 2 – Motorola
Vamos analisar o caso da Motorola? Quais são suas caracterís-

ticas? Seu DNA?
Motorola é uma marca de tecno-

logia, com tradição nesse mercado,
que nos últimos anos vem perdendo
consumidores para a Apple e a Samsung. Ela é
muito conhecida entre as gerações anteriores,
porém perdeu força entre os mais jovens, por
não ter produtos com tantas características
voltadas para imagem e som, e, ainda, por ter
um design defasado.
Contudo, sua última linha de produtos, Moto Z,

trouxe a inovação dos snaps, que são camadas de acessórios possíveis
de serem adicionadas ao produto básico, como um pequeno projetor
ou caixas de som potentes.
Acompanhando a evolução tecnológica dos novos Motorola,

resolveram atribuir um conceito mais jovial a suas campanhas, refor-
mulando sua velha e já não tão efetiva identidade.
Vejam, a Apple vende design e a própria imagem de seus

produtos já é icônica.
Para alcançar a mesma distinção de mercado, no lançamen-

to do Moto Z, a Motorola resolveu desenvolver sua campanha digital
inteirinha baseada em cores, que representam a diversidade de esco-
lhas. Soa familiar?
Sim, diversidade é o tema
da vez, é a tendência mercadoló-
gica que está em alta. Mais uma
vez, vemos o uso de cores sólidas,
de base primária e secundária,
que fazem o produto ressaltar,
criando o que chamamos de con-
traste.
31
Exemplo 3 – BMW
Vamos analisar nosso último exemplo, dedicado aos alucina-
dos por carros, a linda e elegante BMW. Notoriamente reconhecida
como uma marca tradicional, de altíssima qualidade, refinada e volta-
da a um público distinguido.
Apesar de ter tradição, seu conceito evoca a velocidade, o

luxo, a jovialidade e o sucesso. As cores de seus carros são neutras
(preto, branco e cinza) ou, nos modelos mais juvenis, cores primárias
(vermelho e azul).
Assim como no caso da Apple, o design de seus carros já fala por si

mesmo, que são de extrema elegância. Contudo, por decisão estraté-
gica, a BMW resolveu associar conceitos extras aos carros, marcados
pela direção de fotografia das campanhas.
Multimídia
Caso tenha interesse em entender

como são estabelecidos os conceitos e
posicionamentos de uma marca, que
servirão de base para toda a criação visual
da campanha, recomendo os livros da
Profa. Marcelia Lupetti, docente da casa:
Administração em Publicidade e Gestão

estratégica da comunicação mercadológica
são livros completos e com muitos exem-
plos e análises que ajudam na hora de
entender e, posteriormente, aplicar toda a teoria de gestão.
MARCELIA, Lupetti. Administração em publicidade – A verdadeira

alma do negócio. São Paulo: Editora Thomson, 2009.
MARCELIA, Lupetti. Gestão estratégica da comunicação mercadoló-

gica – Planejamento. São Paulo: Editora Thomson, 2012.
32
O site segue a mesma linha, trazendo fotografias imensas com

o carro em destaque, em contextos diferentes. Atualmente, o carro
aparece em um ambiente interno, de iluminação arrojada, dando a
ele o foco total, como se fosse uma vitrine de luxo.
Podemos perceber que, nesses casos, a cor, nosso principal

tópico neste Módulo, é representada pela fotografia, pela direção
de arte desenvolvida para a campanha, que teve como escolha um
fundo composto por cores neutras e frias, como o marrom e cinza.
O carro é prata de base cinza, o local é de concreto, as luzes são

amareladas e a composição tende ao marrom ou a cores terrosas.
Multimídia
Alguns sites ajudam muito na hora de compreender quais são as

tendências na publicidade e no marketing, e nos deixam atuali-
zados sobre diversas discussões que sequer nos passam pela ca-
beça, especialmente na área de comunicação e tecnologia. Listei
cinco sites e blogs bacanas que me ajudam a ficar sempre atuali-
zada e dentro das novidades.
33
Mensagem: BMW é um carro contemporâneo, mas de tradição. Atua-

lizado, mas não das massas.
Na prática
Case de sucesso: Puma e a reestruturação visual
Um dos cases de sucesso que julgo mais interessantes ultima-

mente é o da Puma, marca internacional de vestuário e produtos
esportivos. Conhecida por ser concorrente da Nike e da Adidas,
as quais mudaram suas posturas de mercado durante as últimas
décadas, assumindo práticas mais agressivas e assertivas, ela
resolveu modernizar seu posicionamento para escapar da crise
financeira pela qual estava passando, correndo o risco de ir à
falência.
Todos sabem que as marcas esportivas Nike e Adidas são imba-

tíveis no quesito tecnologia e, também, que a Puma não teria
condição técnica e financeira para concorrer nessa área. Logo,
ao analisar suas forças e potencialidades, a Puma norteou suas
decisões ao se concentrar em seus compradores, focando em um
público jovem e no seu estilo de vida, além de reforçar sua identi-
dade por meio da roupa. Com isso, ela investiu pesadamente em
marketing e estratégia, chegando assim aos meios não tradicio-
nais e massivos de comunicação, e construindo um novo concei-
to de exclusividade que foge da ideia de massificação de produ-
tos. Como levantou Erika Souza, do Portal Implantando Marke-
ting sobre o case da marca:
A Puma ousou ao acreditar que somente a busca por uma dife-

renciação de visual seria suficiente para atrair o cliente, mas
vender estilo de vida se revelou uma ótima estratégia. Isso não
só reergueu a empresa como a tirou da competição massiva com
as líderes de mercado. (Disponível em: incomum.in. Acesso em:
06 jul. 2017).
34
Sendo assim, percebemos algo fundamental na criação para web: os

sites apenas seguem os conceitos pré-estabelecidos para a marca e
para a campanha de determinados produtos.
Agora é a sua vez!
Assinale os valores que têm a ver com cada frase

1. ( ) Resolveram atribuir um conceito mais jovial a suas
campanhas, reformulando sua velha e já não tão efetiva
identidade. Vende design e a própria imagem de seus pro-
dutos já é icônica.
2. ( ) A primeira coisa que identificamos, graças a nossa
intimidade com a marca, é que sua essência foi construída
como um produto jovem, dinâmico e de fácil consumo.
3. ( ) Notoriamente reconhecida como uma marca tra-
dicional, de altíssima qualidade, refinada e voltada a um
público distinguido.
A) Doritos
1–C/2–A/3–B
Resposta correta
B) BMW
C) Motorola
35
Seção 5
Texturas e cores: a múltipla influência
Uma das características mais

importantes da construção de imagens
é a textura, pois a tessitura daqueles
elementos de nosso entorno, sejam
eles naturais ou criados pelo homem,
são sempre foco de nossa percepção
mais imediata.
A textura refere-se às caracte-
rísticas da superfície de qualquer coisa
que nos rodeia, podendo ser tanto tátil,
quanto visual.
Toda textura relaciona-se com a
sua função visual, e também com o contexto em que está inserido,
pois serve para reforçar, complementar e adicionar mensagens ao
projeto.
Texturas acentuadas são mais agressivas, enquanto texturas
de grão mais fino são mais delicadas (mas, é claro, isso não se aplica a
todas as texturas).
Quando não exerce um papel principal, que muitas vezes
é dado às cores, elas agem com força secundária, dando suporte à
composição e potencializando conceitos. Contudo, se for mal aplica-
do, pode atrapalhar completamente o processo de criação da men-
sagem final.
Não há como negar que nós percebemos esse atributo com a
nossa pele (interface dos corpos) e com os nossos olhos. Sim, a visão
percebe essas características.
Assim como as cores, as texturas pos-
suem forte envolvimento emocional com
a real sensação de se estar na presença
do material simulado. Como criativos,
especialmente no contexto da web, pre-
cisamos ter a certeza que teremos que re-
presentar as texturas de forma que sejam
apreendidas pelo olhar.
Ainda não temos a possibilidade de colocar
texturas nas interfaces gráficas, mas um dia, não muito distante, po-
deremos sentir com as pontas dos dedos, com nossa pele, as texturas
nos meios digitais.
36
Multimídia
Sabemos que no Google podemos

encontrar todos os tipos de informa-
ções e imagens que necessitamos,
porém alguns sites facilitam muito
nossa criação disponibilizando foto-
grafias em alta resolução e totalmen-
te gratuitas.
O ImageAfter é um dos lugares mais acessados para dar down-
load de imagens de texturas, de diversos contextos e com a pro-
priedade intelectual liberada para usos diversos.
Muitos alunos durante um

processo de criação consideram que,
para se ter um bom layout, é preciso
colocar muitas informações, como
cores e texturas.
Contudo, já percebemos que
a profusão de elementos mais atra-
palha do que ajuda na transmissão da mensagem para os receptores,
sem realmente adicionar conceitos positivos às imagens.
Meu conselho particular é para
não usar gradientes e texturas sem que
seja extremamente necessário. Veja, não
estou falando que essas estratégias são
erradas ou não servem para nada, porém
raramente são bem utilizadas.
As tendências de design apontam cada vez mais para uma
limpeza de elementos visuais, para uma sintetização do visual. Pode-
mos verificar essa orientação ao minimalismo em quase todos os sites
reconhecidos internacionalmente. Eu o desafio a vasculhar a web e
verificar com os próprios olhos.
37
As mesmas linguagens vi-

suais associadas às cores podem
ser aplicadas às texturas: brilho,
contraste, saturação, entre outros.
A manipulação do contraste pode
transmitir efeitos de profundidade,
peso visual e perda completa de
detalhamento. Já o brilho, quanto
maior, pode reduzir o detalhamen-
to da mensagem.
A pergunta que sempre te-
mos que fazer é: o que exatamente quero que o receptor entenda
a partir da textura que estou colocando na imagem? Eu realmente
preciso de texturas e detalhamentos?
Outra coisa interessante de se levantar sobre a textura são as
formas pelas quais podemos obtê-las para o uso na web. Para conse-
guir texturas, podemos usar diversas maneiras de captação de ima-
gens, contudo, as mais utilizadas são a fotografia e o escaneamento.
Com a tecnologia de captura fotográfica atual,
somos capazes de captar uma gama quase infinita de
imagens, em todos os seus detalhes, sejam elas cons-
truídas pela natureza ou pelo homem. Esse potencial
pode ser genial em nossa área de criação.
Já o escaneamento, quando bem feito, pode
trazer novos atributos das imagens, como as granu-
lações. Aproveite para pegar papéis com texturas di-
ferentes, amassar, molhar, dobrar ou qualquer outra
alteração, e coloque no escâner, os resultados podem
ser fascinantes. Insisto!
Pense fora da caixa! Saia do hermetismo da criação, pegue
imagens prontas nos bancos de fotografia e experimente.
Seja ousado!
Na prática
Vamos aprender a usar os efeitos do Photoshop para criar
texturas diferentes?
Em “Filtros”, encontramos várias possibilidades e formas de alte-
rar as imagens. Eu uso mais os ruídos. Teste!
38
Por último, os aplica-

tivos e os softwares de edição
trazem muitos efeitos de ma-
nipulação das texturas, como a
aplicação de texturas de linhas,
de granulações, de bolhas, en-
tre outros.
Você poderá encontrar vários tutoriais on-line explicando
como montar imagens com estilos e efeitos contemporâneos.
Na prática
Vamos colocar a mão na massa? Vamos treinar mais um pou-
quinho?
Se você tem o desejo de aprender um pouco mais sobre ferra-
mentas de criação, como o Photoshop, que nos ajuda muito na
hora de construirmos produtos comunicacionais, recomendo
seguir tutoriais disponíveis no YouTube. O youtuber Alisson Pai-
lak tem feito um trabalho interessantíssimo ensinando técnicas
simples e instigantes para iniciantes na área. Escolhi comparti-
lhar com você um de seus tutoriais, no qual ele nos ensina a criar
o efeito Chalkboard, que simula desenhos e tipografias escritos
em giz de lousa.
Confio que você aproveitará muito bem este material
Assista e leia todos os que puder, eles lhe ajudarão a crescer nesta
área. Todas essas técnicas servirão como ferramentas para uma criação ino-
vadora, diferente de tudo que vem sendo feito no mercado.
Agora é a sua vez!
Assinale os valores abaixo com Verdadeiro (V) ou Falso (F)

1. ( ) Os aplicativos e os softwares de edição trazem mui-
tos efeitos de manipulação das texturas, como a aplicação
de texturas de linhas, de granulações, de bolhas, entre
outros.
2. ( ) A textura não está relacionada com a sua função
visual, e nem com o contexto em que está inserido.
3. ( ) Uma das características mais importantes da cons-
1–V/2–V/3–V/4–V
trução de imagens é a textura.

Resposta correta
4. ( ) Não há como negar que somos seres que percebem

esse atributo com nossa pele (interface dos corpos) e com
nossos olhos.
39
Recapitulando
Nestas cinco sessões, pudemos aprender muito sobre cores e

características gerais do círculo cromático. Com certeza, ainda temos
muito a aprender, mas com esse conteúdo já estamos prontos para
responder a uma série de questões e para nos atentarmos na hora de
criar.
Umas das coisas que abordamos e que considero de grandís-
sima importância é o uso apropriado do CMYK, das cores especiais
para impressão e do RGB para criação na web. É imprescindível lem-
brar de converter todas as nossas imagens, que serão utilizadas na
web, inclusive redes sociais, para RGB, pois é o formato correto para
os dispositivos móveis, sem falar que a cor fica muito mais interessan-
te e chamativa.
Vimos, também, sites e aplicativos bárbaros que nos permi-
tem escolher as combinações de cores, nos auxiliando a trabalhar
com cores complementares e análogas, frias, quentes e neutras. Não
se esqueça de abusar desse material, que está on-line, para nos aju-
dar a ter um processo criativo mais consistente e efetivo.
Da mesma forma, aprendemos a dar grande destaque às tex-
turas, que sempre traz um ganho estético e desenvolve uma visuali-
dade instigante. É indispensável ver que as composições cromáticas
passam por uma tendência de mercado, e sua aplicabilidade está re-
lacionada aos argumentos que os grandes influenciadores colocam
como norte do momento.
40
Referências
Módulo 1
BRINGHURST, Robert. Elementos do estilo tipográfico. São Paulo:

Cosac Naify, 2005.
CLAIR, Kate; BUSIC-SNYDER, Cynhtia. Manual de tipografia: a história,

as técnicas e a arte. Porto Alegre: Bookman, 2009.
FARIAS, Priscila. Tipografia digital. Rio de Janeiro: 2AB, 1998.
FRUTIGER, Adrian. El libro de la tipografía. Barcelona: Gustavo Gili,

2007.
GRUSZYNSKI, Ana Cláudia. Design gráfico: do Invisível ao Ilegível.

São Paulo: 2AB, 2000.
KEEDY, Jeffery. The rules of typography according to crackpots

experts. In: Looking closer 2: critical writings in graphic design.
BEIRUT, Michael Beirut (org.) et al. New York: Alltworth Press and
American Institute of Graphic Arts: 1997, p.27-31.
KLEIN, Simo. Achieving good legibility and readability on the web.

Disponível em: <http://klepas.org/achieving-good-legibility-and-
readability-on-the-web/#notebook>. Acesso em: 2 mai. 2012.
LUPTON, Ellen. Pensar com tipos: Um guia para designers, escritores,

editores e estudantes. São Paulo: Cosac Naify, 2006.
__________. Tipos na tela. São Paulo: Gustavo Gili, 2015.
NIEMEYER, Lucy. Tipografia: uma apresentação. Rio de Janeiro: 2AB,

2010.
PERFECT, Christopher; AUSTEN, Jeremy. The complete typographer.

London: Wuatro, 2001.
ROCHA, Claudio. Tipografia comparada – 108 fontes clássicas

analisadas e comentadas. São Paulo: Rosari, 2005.
RUDER, Emil. Typography: a manual of design. Suíça: Zollikofer et co.

ag, 1967.
SAMARA, Timothy. Guia de tipografia. Porto Alegre: Bookman, 2011.
41
BA online – Centro Universitário Belas Artes de São Paulo

Design e Gestao de Web 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design e Gestao de Web 1

Enviado por

Direitos autorais:

Formatos disponíveis

BA online – Centro Universitário Belas Artes de São Paulo

Design e Gestão de Web, Mídias Digitais e Móveis

Administração Belas Artes

Prof. Dr. Francisco Carlos Tadeu Starke Rodrigues

Prof. Dr. Sidney Ferreira Leite

Dra. Josiane Maria de Freitas Tonelotto

Lucas de Mattos Millan

Gustavo Nogueira Pereira

Beatriz Melhorine Basílio

Design e Gestão de Web

Centro Universitário Belas Artes de São Paulo

Para início de conversa 6

Módulo 1: Aspectos gerais do Design Gráfico 7

Meu sonho sempre foi mudar o mun-

Para início de conversa

Caro aluno, é com satisfação que lhe desejo boas-vindas

Para tanto, ao longo de oito Módulos estruturados de maneira a

Do mesmo modo, abordaremos temas como: as formas básicas

Ao término dos estudos propostos nesta Unidade, você

 Compreender a importância dos aspectos específicos

1. Introdução ao conceito de design gráfico

Seja bem-vindo ao primeiro Módulo de nossa disciplina

Com participação e reflexão, você aprenderá, de maneira

Sendo assim, convido-o a tomar parte desta aventura para

Caro aluno, bem-vindo a nossa primeira aventura: compreen-

Talvez esses termos e expressões ainda sejam difíceis de serem

Design é a ação de projetar algo (site, marca, móveis, roupas, espaços,

Vamos destrinchar mais um pouco!

Forma é o formato físico ou digital que um produto (no nosso

A partir desse conceito, podemos pensar que:

Intrínseco ao conceito de design, está o de usuário. E, de certa

Ufa! Parece complicado, mas é bem simples: criamos um

Por último, podemos pensar o design como um produto

De forma imatura, muitas vezes queremos agradar o cliente

Design e a caixa de ferramentas

Ao compreender o que é design e quais são os principais focos

Cor: é o mundo cromático que nos rodeia, aquilo que

Ponto: a unidade mais simples e irredutivelmente mínima de

Forma: uma linha fechada determina uma forma. As formas

Linha: um ponto em movimento ou pontos bem próximos

Textura: é o elemento visual que serve de substituto para as

Proporção: nesse caso, é a relação entre dois objetos, que é

Direção: existem três direções básicas que conduzem nossos

Movimento: é a sensação real ou virtual de que um corpo

Tom: está relacionado ao uso da luz para identificar a gradação

Dimensão: também é um conceito relacional, que se realiza

Segundo Donis A. Dondis (p. 85, 1997), estudiosa da área e reconhecida

A qualidade cinestésica de um fato visual

O vasto universo de sistemas de símbolos

O universo ao nosso redor é repleto de significados, que

O que é criar uma marca, por exemplo?

Todas essas informações são bastante pertinentes, mas como

A resposta é bastante simples, acessamos nossa caixa de

Que tal começarmos a observar o mundo ao nosso redor? Vamos

Uma tendência atual do design é a referência simbólica dos

Como assim? Quando vamos ao banheiro de um shopping, por

Agora é a sua vez!

Identifique a tipologia da linguagem visual utilizada nas

Treinamento básico sobre cores

De forma geral, o ponto inicial para o estudo das cores é a

A primeira coisa que temos que levantar para entender os

Conheça os sistemas de cores:

A sigla RGB é a abreviatura do sistema de