Ebook
Ebook
Ebook
Expediente
Dr. Paulo Antonio Gomes Cardim
Reitor
Departamento BA online
Profa. Ma. Leila Rabello de Oliveira
Coordenação
Gabriel Kwak
Marina de Mello Fontanelli
Revisão de Texto
Publicação
Este e-book é uma publicação da
Beatriz Melhorine Basílio
Hanna Carolina Brino Barretto
Analise Educacional
Rua Dr. Álvaro Alvim, nº 90
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.
Sumário
3
BA online – Centro Universitário Belas Artes de São Paulo
Design e Gestão de Web, Mídias Digitais e Móveis
Professora-autora
Ma. Denise de Paiva Tangerino
Meu sonho sempre foi mudar o mundo,
trazendo alegria e leveza por onde eu passas-
se, e ser professora era apenas consequência
desse meu sonho. Sou graduada e pós-gradua-
da em Design Gráfico, com foco em design 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 coletivas. Em 2011, comecei minha carreira de docente
universitária e em 2014 entrei para o time Belas Artes (afinal, deve ser
muito triste não ser Belas Artes). Paralelo a isso, mantenho pequenas
produções de audiovisual, como gosto, e minha profunda formação
em séries e Netflix sempre ativa.
Bon appétit!
5
BA online – Centro Universitário Belas Artes de São Paulo
MÓDULO 1
Aspectos gerais do Design
Gráfico aplicado aos produtos
digitais
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
Objetivos
Seções
7
BA online – Centro Universitário Belas Artes de São Paulo
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
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 obje-
tivos 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!
Seção 1
Exemplificando
Uma cadeira tem uma forma física cujo objetivo
promove 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 responsável
por dar a comida fique confortável nesse
momento.
Portanto:
forma + função = design
Representacional
Aquilo que vemos e identificamos com
base no meio ambiente e na experiência.
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.
11
BA online – Centro Universitário Belas Artes de São Paulo
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
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 compu-
tador, 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 cati-
var 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.
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 represen-
tam 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!
12
3.
1–B/2–A/3–C
A. ( ) Abstrato
Resposta correta
B. ( ) Simbólico
C. ( ) Representacional
13
BA online – Centro Universitário Belas Artes de São Paulo
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
Seção 2
14
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 mistu-
radas entre si podem formar uma vastíssi-
ma 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 consideravelmente o
brilho e a vibração da peça. Esse fato se dá pelo fato do CMYK apresen-
tar uma gama menor de combinações de cores, afinal, a composição
física das cores se dá pela mistura de pigmentos.
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).
15
BA online – Centro Universitário Belas Artes de São Paulo
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
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 especialmen-
te 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 grande
desvantagem é o custo, que sai muito mais alto do que o CMYK.
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 a escolher entre as suas
diversas possibilidades de harmoniza-
ção. A harmonia entre elas é um dos
fatores fundamentais para que uma
imagem (site, marca, cartaz, estam-
pa, etc.) transmita a mensagem
para o receptor sem que haja ruídos
estéticos (lembrando que estética
não se refere apenas à visão, mas a
todos os sentidos dos seres humanos).
16
Multimídia
A Adobe, empresa detentora do Photoshop e outros softwa-
res 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.
17
BA online – Centro Universitário Belas Artes de São Paulo
Módulo 1 – Aspectos gerais do Design Gráfico aplicado aos produtos digitais
Na prática
Uma empresa que deseja ser séria, e manter sua marca e
produtos 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 é conhe-
cido internacionalmente, 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 elementos 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 empresas. 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.
A. ( ) Círculo cromático
Resposta correta
B. ( ) CMYK
C. ( ) RGB
D. ( ) Monocromia
18
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.
19
BA online – Centro Universitário Belas Artes de São Paulo
BA online – Centro Universitário Belas Artes de São Paulo