Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590

Noções de Design Gráfico

Unidade I - Introdução ao Design Gráfico

Prof. Nécio de Lima Verashttp://lattes.cnpq.br/8284657916723590

Objetivo

Conhecer os princípios do Design Gráfico.

Prof. Nécio Veras

Leituras recomendadasLeituras recomendadas

Prof. Nécio Veras

Conceitos básicosConceitos básicos

● Design– Concepção de um projeto ou modelo;

planejamento.

● Designer– Indivíduo que planeja ou concebe um projeto ou

modelo.

● Web design e web designer.

Prof. Nécio Veras

O que é Design?O que é Design?

• [...] Design pode ser compreendido de várias formas:– habilidade, estilo, engenharia, invenção,

planejamento, refinamento, simples exercício de bom gosto.

Texto de abertura da exposição “Design fo Life” Cooper-Hewitt National Design Museum, Nova York, EUA

Prof. Nécio Veras

DesignDesign

• Ver e transmitir experiência visual para interlocutores.

• Levar em conta:– Dinamismo;– Legibilidade;– Equilíbrio.

Prof. Nécio Veras

DesignDesign

• Ser inteligente;• Saber transmitir uma mensagem usando

representações visuais;

Prof. Nécio Veras

Traduzindo o outdoorTraduzindo o outdoor

Prof. Nécio Veras

DesignDesign

• Saber colecionar referências visuais e como profissionais do mundo inteiro resolvem problemas similares.

• Aprende a montar as partes para construir um todo;

• Requer tempo, paciência e cuidado em cada detalhe;

• Talento é só um pré-requisito.

Prof. Nécio Veras

Design DigitalDesign Digital

• Computador nas comunicações:– Desktop Publishing: substitui todo processo de

design gráfico;– Vídeo Digital: substitui processo de edição

usando fitas magnéticas e gerações;– Internet: chega para deixar todo mundo confuso!

:)• Escola de design: www.risd.edu

Prof. Nécio Veras

RISD.EDURISD.EDU

Prof. Nécio Veras

Design DigitalDesign Digital

• Criação digital não é outra língua, mas sim, outra forma de comunicação.

• Internet não é a última revolução: TV interativa, papel digital, etc.

• Revista digital não pode competir com seu equivalente em papel.

• Design para web não é fácil!– Cada tela pode se comportar de uma forma diferente.– Não há como projetar documentos que fiquem iguais

em todos os sistemas: Só se nivelar por baixo .

Prof. Nécio Veras

Design para WebDesign para Web

• Riqueza da mídia é bem maior do que foi quando começamos a ver a cor no material impresso.

• Web é:– Ágil como o rádio, abrangente como o jornal, rica

como o videogame, envolvente como a TV, móvel como o celular.

• Pode ser:– Cativante como a correspondência, profunda como

uma consulta a um especialista, imprevisível como um papo de boteco.

Prof. Nécio Veras

Design para WebDesign para Web

• Páginas podem mudar de tamanho e proporção a todo instante.

• Depende totalmente:– Condições do computador;

– Capacidade de processamento;

– Recursos multimídia;

– Tamanhos dos monitores e janelas;

– Famílias de letras;

– Navegadores;

– Plug-ins;

– Tecnologia;

– Velocidade de acesso.

Prof. Nécio Veras

Design para a WebDesign para a Web

• Cada leitor consultará as telas na ordem que quiser;

• Quanto mais rico for o conteúdo, maiores as chances de que a experiência de cada visitante seja única;

• Internet não é linear.

Prof. Nécio Veras

Design em DiagramaDesign em Diagramaççãoão

• Diagramação:– Ato ou efeito de criar diagramas ou ordenação

e distribuição de elementos gráficos para melhor conduzir o fluxo de leitura, de ideias e de conceitos.

• Princípios Básicos (CRAP):– Proximidades;– Alinhamento;– Repetição;– Contraste;

Prof. Nécio Veras

Princípio: ProximidadePrincípio: Proximidade

Itens relacionados entre si, devem ser agrupados.

Quando vários ítens estão próximos, tornam-se uma unidade visual e não várias unidades individualizadas.

Isso ajuda a organizar informações e reduz a desordem.

Prof. Nécio Veras

ExemploExemplo

Prof. Nécio Veras

ExemploExemplo

Agrupe as informações graficamente.

No início de uma criação determine, pela lógica, quais informações devem ser enfatizadas e quais devem ser abrandadas.

Prof. Nécio Veras

ExemploExemplo

Prof. Nécio Veras

Princípio: AlinhamentoPrincípio: Alinhamento

• Dar coesão aos elementos. • Mesmo elementos separados fisicamente

uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os, tanto em relação aos seus olhos quanto a sua mente.

• Avisar ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo grupo de elementos.

Prof. Nécio Veras

ExemploExemplo

Elementos jogados em qualquer lugar. Nenhum dos elementos tem qualquer conexão com outro elemento do cartão.

Informações organizadas,além de terem sido agrupadas pelo Princípio da Proximidade

Prof. Nécio Veras

Capa com formato padrão, sem brilho.A reação inicial do leitor é negativa.

O alinhamento à esquerda confere força à capa, além de aparência mais sofisticada.O nome do autor, mesmo longe do título, está conectado pelo alinhamento.

Centralizado no bloco.Bloco descentralizado na página.

Prof. Nécio Veras

Alinhamento FantasiaAlinhamento Fantasia

Prof. Nécio Veras

Para que a página fique visualmente organizada, encontre uma linha e guie-se através dela.

Não centralize o título se o texto for alinhado à esquerda. Como as laterais são mal-definidas, não é possível observar que o título está centralizado.

Evite a endentação de parágrafo em colunas pequenas. Prefira um espaçamento maior entre os parágrafos.

Se houver ilustrações ou fotos, alinhe pela esquerda ou pela linha base.

ObserveObserve

Prof. Nécio Veras

Se seus alinhamentos estiverem bem-delimitados, você poderá interromper conscientemente os alinhamentos e esta interrupção terá uma aparência intencional.

Prof. Nécio Veras

Princípio: RepetiPrincípio: Repetiççãoão

• Dar consistência ao material gráfico:– Através do uso do uso do princípio da

repetição, o material terá uniformidade, ou seja, uma parte será reconhecida como pertencente ao restante do todo.

• É um esforço consciente para unificar todos os elementos do design.

Prof. Nécio Veras

Os títulos e subtítulos são elementos repetitivos (TAHOMA BOLD) e

mantém a consistência entre eles.

ExemploExemplo

Prof. Nécio Veras

ExemploExemplo

Repetições:

Fonte bold / Fonte lightEndentaçõesEspaçamentoAlinhamentosSinais de tópicos quadrados

Prof. Nécio Veras

ExemploExemplo

Repetições:

Um dos elementos da imagem (o triângulo) foi repetido na página, dando unidade ao todo.

Prof. Nécio Veras

Princípio: ContrastePrincípio: Contraste

• Acrescentar algum atrativo visual à página, criando uma hierarquia organizacional entre diferentes elementos.

• Cria-se um contraste quando dois elementos são diferentes. – Se eles diferirem só um pouco, não acontecerá

o contraste, mas um conflito.

• Se dois elementos não forem exatamente os mesmos, diferencie completamente.

Prof. Nécio Veras

ExemploExemplo

Prof. Nécio Veras

ExemploExemplo

Prof. Nécio Veras

Exemplo (CRAP)Exemplo (CRAP)

Prof. Nécio Veras

Exemplo (CRAP)Exemplo (CRAP)

Prof. Nécio Veras

Exemplo (CRAP)Exemplo (CRAP)

Prof. Nécio Veras

ExercíciosExercícios

Prof. Nécio Veras

ReferênciasReferências

Esta apresentação foi inspirada e baseada nos materiais didáticos de:

– Prof. Wanderlei Paré (Oficina de Produção Gráfica);

– Graciana Somoni Fischer (Design na Web);

– Prof. Régis Pires (Curso de Introdução ao Web Design)