09/05/2017

1

Noções de Designer GráficoProfessora

Janaide Nogueira

NOÇÕES D E D ES IGNER GRÁF ICO 1

Técnica:

� Secretária Escolar(FDR)

Graduação:

� Bacharelado em Sistemas de Informação(FIED)

Pós-Graduação:

� Especialização em Engenharia de Software(FGF)

� MBA em Sistemas de Informação(ESAB)

� Mestranda em Ciências da Computação (UECE)

Atividades Profissionais:

� Profª. Faculdade IEducare.

APRESENTAÇÃO

2NOÇÕES D E D ES IGNER GRÁF ICO

NOÇÕES D E D ES IGNER GRÁF ICO 3

CURSO TÉCNICO EM INFORMÁTICADisciplina: Noções de Designer Gráfico

� Semestre: 4º

� Turno: Tarde

� Carga Horária: 80 horas

NOÇÕES D E D ES IGNER GRÁF ICO 4

Horários Segunda Terça Quarta Quinta Sexta

18:30 X

19:20 X

20:10 Intervalo Intervalo Intervalo Intervalo Intervalo

20:20 X

21:10 X

NOÇÕES DE DESIGNER GRÁFICO

Profª. Esp.: Janaide Nogueira

E-mail: nogueirajanaide@gmail.com

WhatsApp:(88)99250-7107

NOÇÕES D E D ES IGNER GRÁF ICO 5

EMENTA DA DISCIPLINA

1. Introdução ao design gráfico: conceitos, princípios, tipos e aplicações.

2. Estudo das cores: psicologia, combinações e paletas.

3. Estudo e criação de interfaces: usabilidade, acessibilidade e produção em ambientes heterogêneos de acordo com princípios reconhecidos como boas práticas.

4. Principais ferramentas de designer

NOÇÕES D E D ES IGNER GRÁF ICO 6

09/05/2017

2

CONTEÚDOS A SEREM ESTUDADOS

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

� Conceitos básicos;

� Princípios básicos;

� Aplicações do design gráfico;

� Elementos, layouts, temas e projetos;

� Projeto, planejamento e arquitetura de informação;

NOÇÕES D E D ES IGNER GRÁF ICO 7

CONTEÚDOS A SEREM ESTUDADOSUnidade II – Elementos visuais

� Estudo das cores;

� Textos e fontes;

� Tipografia;

Unidade III – Usabilidade e Acessibilidade

� Conceitos e elementos;

� Desafios;

� Aspectos técnicos;

� Legislação;

NOÇÕES D E D ES IGNER GRÁF ICO 8

CONTEÚDOS A SEREM ESTUDADOS

Unidade IV – Estudo dirigido em ambientes heterogêneos

� Ambiente WEB;

� Ambiente Desktop;

� Modelagem Prática e exercícios.

NOÇÕES D E D ES IGNER GRÁF ICO 9

AVALIAÇÃOEm fórmulas:

x1 = ((2 * exercícios manuscritos) + (1* seminário) +(2 *avaliação teórico) ) /5

x2 = ((3 * avaliação teórica) + (1 * trabalhos)+(2* exercícios manuscritos)+ (2*seminários)) /8

MS = (2 * x1 + 3 * x2) / 5

Se MS >= 6 Então Aprovado

Senão Se MS >= 3 Então Exame Final Senão Reprovado

MF = (MS + AF) / 5

Se MF >= 5 Então Aprovado

Senão Reprovado.

NOÇÕES D E D ES IGNER GRÁF ICO 10

Legendas:

x1 = Média da Primeira Etapa

x2 = Média da Segunda Etapa

MF= Média Final

AF= Avaliação Final

OBJETIVOS DA DISCIPLINA

� Conhecer os princípios do Design Gráfico;

� Contextualizar as variadas aplicações do design gráfico no mundo dodesenvolvimento de softwares;

� Diferenciar e adequar combinação de cores conforme critérios de psicologia dascores;

� Perceber os diferentes tipos de textos e fontes;

� Visualizar os conceitos sobre usabilidade e acessibilidade;

� Realizar estudo prático de produção de interfaces em ambientes heterogêneos (WEB,desktop e móvel) usando ferramentas.

NOÇÕES D E D ES IGNER GRÁF ICO 11

PERGUNTAS, DÚVIDAS, SUGESTÕES,...

NOÇÕES D E D ES IGNER GRÁF ICO 12

09/05/2017

3

AGENDA

-Introdução e conceitos básicos;

NOÇÕES D E D ES IGNER GRÁF ICO 13

LEITURAS

NOÇÕES D E D ES IGNER GRÁF ICO 14

LINHA DO TEMPO

NOÇÕES D E D ES IGNER GRÁF ICO 15

LINHA DO TEMPO

NOÇÕES D E D ES IGNER GRÁF ICO 16

LINHA DO TEMPO

NOÇÕES D E D ES IGNER GRÁF ICO 17

CONCEITOS 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.

NOÇÕES D E D ES IGNER GRÁF ICO 18

09/05/2017

4

CONCEITOS BÁSICOS

Responsabilidade Social

� O produto do Design estabelece uma relação física direta com o homem.

� Para o Design, o homem é um usuário.

� O produto do Design visa atender às necessidades do homem.

� Para o Design, o homem é parte da sociedade.

NOÇÕES D E D ES IGNER GRÁF ICO 19

CONCEITOS BÁSICOS

Características do Design

� Ver e transmitir experiência visual para interlocutores.

� Levar em conta:

– Dinamismo;

– Legibilidade;

– Equilíbrio.

NOÇÕES D E D ES IGNER GRÁF ICO 20

CONCEITOS BÁSICOS

NOÇÕES D E D ES IGNER GRÁF ICO 21

Características do Design

� Ser inteligente;

� Saber transmitir uma mensagem usando representações visuais;

DESIGN EM DIAGRAMAÇÃO

NOÇÕES D E D ES IGNER GRÁF ICO 22

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;

NOÇÕES D E D ES IGNER GRÁF ICO 23

DESIGN EM DIAGRAMAÇÃO

NOÇÕES D E D ES IGNER GRÁF ICO 24

DESIGN EM DIAGRAMAÇÃO

09/05/2017

5

� 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.

NOÇÕES D E D ES IGNER GRÁF ICO 25

PRINCÍPIOS DE CONTRASTE

NOÇÕES D E D ES IGNER GRÁF ICO 26

EXEMPLOS

NOÇÕES D E D ES IGNER GRÁF ICO 27

EXEMPLOS

� Dar consistência ao material gráfico:

�Através 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.

NOÇÕES D E D ES IGNER GRÁF ICO 28

PRINCÍPIOS DA REPETIÇÃO

*Repetições:

*Fonte bold / Fonte

*Indentações

*Espaçamento

*Alinhamentos

*Sinais de tópicos quadrados

NOÇÕES D E D ES IGNER GRÁF ICO 29

EXEMPLOS

� 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.

NOÇÕES D E D ES IGNER GRÁF ICO 30

PRINCÍPIOS DO ALINHAMENTO

09/05/2017

6

Elementos jogados em qualquer lugar.

� Nenhum dos elementos tem qualquer conexão comoutro elemento do cartão.

NOÇÕES D E D ES IGNER GRÁF ICO 31

EXEMPLOS

� Informações organizadas ;

� Além de terem sido agrupadas pelo Princípio da Proximidade;

NOÇÕES D E D ES IGNER GRÁF ICO 32

EXEMPLOS

Alinhamento Fantasia

NOÇÕES D E D ES IGNER GRÁF ICO 33

EXEMPLOS

NOÇÕES D E D ES IGNER GRÁF ICO 34

EXEMPLOS

� Itens relacionados entre si, devem ser agrupados.

� Quando vários itens 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.

NOÇÕES D E D ES IGNER GRÁF ICO 35

PRINCÍPIOS DA PROXIMIDADE

NOÇÕES D E D ES IGNER GRÁF ICO 36

EXEMPLOS

09/05/2017

7

Agrupe as informações graficamente.

� No início de uma criação determine, pelalógica, quais informações devem serenfatizadas e quais devem ser abrandadas.

NOÇÕES D E D ES IGNER GRÁF ICO 37

EXEMPLOS

NOÇÕES D E D ES IGNER GRÁF ICO 38

EXEMPLOS

NOÇÕES D E D ES IGNER GRÁF ICO 39

EXEMPLO CRAP

NOÇÕES D E D ES IGNER GRÁF ICO 40

EXEMPLO CRAP

NOÇÕES D E D ES IGNER GRÁF ICO 41

BIBLIOGRAFIA

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)

*Prof. Nécio (Noções de Design Gráfico)

NOÇÕES D E D ES IGNER GRÁF ICO 42