Aula_Design_Grafico

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Universidade Federal de Mato Grosso do Sul
Faculdade de Computação
Interação Humano Computador
Profa. Dra. Maria Istela Cagnin Machado
Design Gráfico
com enfoque em web
Renan de Olivera Telles
Diretor de Criação em
Youzoom Soluções Web
Elmo Júnior Ficagna
Frontend Developer em
Youzoom Soluções Web
“O meio nunca deve ser a mensagem.
A mensagem é a mensagem.”
- Jakob Nielsen
O que é?
 Design Gráfico é o meio de estruturar e dar forma à comunicação visual 
 Origem na pré-história
 Utiliza vários conceitos de outras áreas do conhecimento
• Psicologia
• Arquitetura da Informação
• Teoria da Arte
• Ciência da Cognição
• Semiótica
 Trabalha relação entre texto e imagem
Objetivos
 Criar um sistema útil e adaptável
 Suportar a usabilidade do sistema
 Tornar a interação com o usuário simples e eficiente
 Criar a sensação de “visualmente agradável”
Diagramação
 Distribuir textos e elementos gráficos no espaço destinado
 Herda os conceitos da mídia impressa
• Títulos
• Box ou caixas
• Rodapés
• Alinhamentos
• Dados Tabulares
• Recuos
• Marcadores
• Espaçamentos
Diagramação - Exemplo
Distribuir textos e elementos gráficos no espaço destinado
Herda os conceitos da mídia impressa
Títulos
Box ou caixas
Rodapés
Alinhamentos
Dados Tabulares
Recuos
Marcadores
Espaçamentos
Diagramação
 Alinhamentos
• Esquerda – Comum, acompanha o estilo de leitura ocidental.
• Centro – Ótimo para grandes títulos, legendas e “labels” de botões.
• Direita – Ótimo para assinaturas e referências.
• Justificado – Matem o mesmo tamanho entre as linhas pelo ajuste de espaços. Ótimo para 
mídia impressa com fontes serifadas. Deve ser evitado em Web.
Diagramação
 Hierarquização da Informação
Título mais importante
Título muito importante
Descrição do conteúdo
Diagramação
 Hierarquização da Informação
Título mais importante
Título muito importante
Descrição do conteúdo
Tipografia
 Processo de criação na composição de um texto
 Remota das antigas prensas de tipos.
Prensa mecânica de 1568
Tipografia
 Adequação ao “tom” do conteúdo a ser passado
LegívelPessoal Divertido
Clássico Temático
Tipografia
 Padrões de serifa
sem serifa
com serifa
serifas em destaque
Tipografia
 Com serifa
• Guia a visão para leitura de palavras como conjunto
• Perfeito para longos textos em mídia impressa
• Não aconselhável para textos em web
• Causa um visual “clássico” na apresentação.
Trecho de “O Festim dos Corvos – As crônicas de gelo e fogo”
Tipografia
 Sem serifa
• Melhora a legibilidade das palavras individualmente
• Perfeito para uso em títulos
• Preferido para textos na web e apresentações
• Em geral cria a ilusão de texto “moderno”.
Página inicial Apple Trecho Wikipedia
Tipografia – O caso “Comic Sans”
 Criada em 1995 para Microsoft por Vincent Connare
 Originalmente criada para representar falas de balões de HQs (Comics)
 É uma fonte “divertida” e infantil.
 Campeã de uso em contextos inadequados.
Tipografia – O caso “Comic Sans”
Tipografia – O caso “Comic Sans”
 Pode ser muito útil em contexto correto
Tipografia – O caso “Comic Sans”
 Mas também pode “matar” a seriedade necessária em uma informação
Contrastes
 Os contrastes na interface devem favorecer a visualização
 Em geral, tons de alta saturação devem ser combinados com tons de baixa saturação 
e vice-versa.
 Padrões diferenciados de contraste podem ser oferecidos para aumentar a 
acessibilidade
Contrastes
Contrastes
Contrastes
 Padrões de alto contraste ajudam a reduzir o cansaço visual ao longo do tempo e 
aumentam a visibilidade para pessoas com problemas de visão.
Cores
 Formação da “personalidade” de uma interface
 Devem sempre que possível ter um padrão funcional
 É obrigatório a consistência de uso ao longo da aplicação
 Um ótimo coringa é a escala de cinza (branco #FFFFFF – preto #000000).
Paleta de Cores
 Padrão com um número reduzido de cores (de 3 a 8 em geral)
 Gerada através de alguma “regra” de composição
 Uma vez definida deve ser utilizada para evitar quebra de consistência
Paleta de Cores
 Podem ser geradas a partir de cores de cenas da vida real
Paleta de Cores
 Podem ser geradas a partir de cores de cenas da vida real
Paleta de Cores
 Podem ser geradas a partir de cores de cenas da vida real
Paleta de Cores
 Ou através de ferramentas geradoras
kuler.adobe.com
Ícones
 Pequena imagem para representar um software, ação ou ferramenta.
 Deve ser utilizado sempre em “famílias”.
 Os ícones devem ser facilmente reconhecíveis
 Cada ícone deve ter sua função mantida ao longo do uso do sistema
Ícones
 Famílias de ícones simples são mais fáceis de utilizar em vários casos de interface
Ícones
 Ícones mais complexos exigem um esforço maior para se integrarem a interface
Processo de desenvolvimento Genérico
Análise de 
requisitos
Desenvolvimento 
de Mockups
Criação do 
Layout
Implementação 
da interface
Processo de desenvolvimento Web
Análise de 
Requisitos
• Coleta de 
informações sobre as 
necessidades do site
Mapa de 
Navegação
• Criação de um mapa 
com o fluxo de 
navegação do site
Criação do 
Wireframe
• Guia visual básico 
com visualização da 
estrutura
• É possível demonstrar 
navegação em alguns 
modelos
Desenvolvimento 
do Layout
• É gerado uma 
imagem muito 
próxima do resultado 
final com fontes, 
cores e espaçamentos 
definidos.
Implementação 
do Layout
• A imagem é então 
transformada em 
Código (HTML + CSS).
Mapa de Navegação
Wireframe
Layout
Codificação
Fechamento
Obrigado pela atenção!