prática de design - introducao
DESCRIPTION
Aula 01 da disciplina Prática de Design do curso de Sistemas para Internet da FATEC de Carapicuíba.TRANSCRIPT
![Page 1: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/1.jpg)
![Page 2: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/2.jpg)
História Antiga da Web (1995-2000) WebMASTER
![Page 3: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/3.jpg)
História Antiga da Web (1995-2000) “Páginas”
![Page 4: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/4.jpg)
Web Evoluiu• Ergonomia + IHC
Aspectos sociais
Semióticos
Psicológicos
Estéticos
Físicos
![Page 5: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/5.jpg)
O Processo de Produção Evluiu
![Page 6: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/6.jpg)
![Page 7: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/7.jpg)
![Page 8: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/8.jpg)
Web Atual
• Arquitetura de Informação Análise e Documentação
• Design de Interação Prototipação
• Produção
![Page 9: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/9.jpg)
Processo de Produção “Ideal”
![Page 10: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/10.jpg)
![Page 11: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/11.jpg)
Processo de Produção
• Briefing (Cliente)
Reúne o maior número possível de informações;
Direciona o rumo e a intuição da Criação;
Define limitações;
Move o ato criador (desafio).
![Page 12: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/12.jpg)
Processo de Produção
• Briefing (Cliente) ESTRATÉGIA DE MERCADO
Definição do problema / necessidades Pesquisas (números) de mercado Análise competitiva (diferenciais) Público-Alvo prévio Objetivos e metas prévias Conteúdo prévio
![Page 13: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/13.jpg)
• LEVANTAMENTO DE REQUISITOS• Objetivo
Entender detalhadamente o problema e definir o escopo do trabalho a ser desenvolvido
• O que deve ser feito Levantar a missão, visão, valores da empresa Levantar os públicos alvo do site e priorizá-los. Entender as características, diretrizes de linguagem ou de
abordagem de cada público alvo. Levantar a proposta de valor do site Levantar os objetivos do projeto e prioriza-los Levantar todos os conteúdos e serviços do site, priorizá-los e
verificar como eles atendem aos objetivos do site Levantar requisitos que possam limitar a usabilidade Entender o funcionamento de sistemas legados
![Page 14: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/14.jpg)
• LEVANTAMENTO DE REQUISITOS• Fontes de Informação
Pesquisas de usuários (Focus group, Entrevistas, etc) Relatórios internos (Reclamações / elogios no Call Center,
WebTrends, etc) Entrevistas com funcionários da empresa (Marketing, Vendas,
Atendimento aos Clientes, etc) Análise de sites concorrentes e sites similares Análise de tarefas Análise da plataforma cliente
![Page 15: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/15.jpg)
Processo de Produção
• Brainstorming Briefing de Criação
• Nenhuma sugestão é criticada;
• Todas as idéias são encorajadas;
• Mais quantidade, menos qualidade;
• Ambiente relaxante.
Conceito de Criação
INOVAÇÃO
![Page 16: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/16.jpg)
Público (Para quem?)
Conteúdo (O que será mostrado?)
Formato (Como?)
Resposta (O que se espera como retorno?)
o Cronograma / Investimento / ROI
Desenvolvimento do conceito criativo
• Definir / Redefinir: Objetivos (Para quê?)
![Page 17: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/17.jpg)
Objetivos
Desenvolvimento do conceito criativo
www.ford.com.br
![Page 18: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/18.jpg)
Objetivos
Desenvolvimento do conceito criativo
![Page 19: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/19.jpg)
Desenvolvimento do conceito criativo
Público
www.barbie.com.br
![Page 20: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/20.jpg)
Desenvolvimento do conceito criativo
Público
www.cocacolazero.com.br
![Page 21: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/21.jpg)
Desenvolvimento do conceito criativo
Público
![Page 22: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/22.jpg)
Desenvolvimento do conceito criativo
Público
![Page 23: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/23.jpg)
Desenvolvimento do conceito criativo
Formato
www.cocacolalight.com.br
![Page 24: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/24.jpg)
Desenvolvimento do conceito criativo
Formato
uno.fiat.com.br
![Page 25: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/25.jpg)
Desenvolvimento do conceito criativo
Formato = Design Responsivo
![Page 26: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/26.jpg)
Desenvolvimento do conceito criativo
Resposta
www.the-eviltwin.co.uk
![Page 27: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/27.jpg)
O Papel do Arquiteto de Informação
Planejamento da informação Informação acessível e compreensível a qualquer pessoa;
Definir caminhos que o usuário poderá percorrer no site; Solucionar problemas de acesso; Organização de dados Estabelecer rotas de acesso Definir aspectos estruturais
Site Map Fluxogramas
![Page 28: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/28.jpg)
O Papel do Arquiteto de Informação
![Page 29: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/29.jpg)
O Papel do Arquiteto de InformaçãoSegundo Richard Wurman:
Identificar o que o interlocutor não compreende Verificar se há interesse do interlocutor em compreender Classificar particularidades do conteúdo Reunir temas relevantes Realizar estudos de navegabilidade Definir pontos de interatividade Organizar a informação através da melhor estrutura para
transmiti-la Essa informação deve se relacionar com algo que seja
previamente compreensível ao interlocutor e... ... trazer alguma vantagem no processo
![Page 30: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/30.jpg)
O Papel do Arquiteto de InformaçãoFormas de Organizar Informação:
Richard Wurman LATCH Localização (Mapas) Alfabeto Tempo (períodos históricos / linhas do tempo, data) Categoria (grupos genéricos) Hierarquia (maiormenor, carobarato, acessos, etc.)
Thomas Vander Wal Folksonomia Tags Relevância Ambíguos Assunto / Metáfora / Tarefa / Audiência
![Page 31: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/31.jpg)
O Papel do Arquiteto de Informação
• Entender as necessidades dos usuários
Testes de Usabilidade / Análises Heurísticas Card Sorting Benchmarking
Heurísticas de Nielsen Personas e Cenários Inventário de Conteúdo Prototipagem
![Page 32: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/32.jpg)
Teste de Usabilidade
![Page 33: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/33.jpg)
Teste de Usabilidade
![Page 34: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/34.jpg)
Teste de Usabilidade
![Page 35: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/35.jpg)
Card Sorting
![Page 36: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/36.jpg)
Personas
![Page 37: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/37.jpg)
Algumas perguntas para criar as personas:
1) O que o personagem gosta de fazer?2) Como o personagem se relaciona com a família?3) Que tipo de sonhos o personagem tem?4) O personagem tem algum plano para o futuro?5) Existe alguma diferença entre o estilo de vida que o personagem
leva e o estilo de vida que ele gostaria de ter?6) Porque o personagem comprou o produto?7) O personagem adquiriu este produto por status?8) O personagem acredita que faz parte de um grupo social específico
por possuir o produto?9) O personagem usa o produto?10)O personagem acredita que o produto funciona melhor do que os
similares?11)O personagem gosta da cor do produto?12)O personagem gosta do estilo do produto?13)O produto é esteticamente prazeroso para o personagem?14)Onde e como o personagem guarda o produto?15)O personagem se sente satisfeito ao utilizar o produto?
Personas
![Page 38: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/38.jpg)
Regina, auxiliar de projeto de 40 anos, trabalha na cooperativa de tecnologia da informação Tecnocoop Sistemas. Mora na Tijuca, zona norte do Rio de Janeiro, é casada com Ricardo e tem dois filhos: Pedro, com 10 anos, e Mariana, com 7 anos.
Formada em administração, Regina está na cooperativa há cinco anos, sempre como auxiliar de coordenação de projeto.
Personas
![Page 39: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/39.jpg)
O cenário é uma história baseada em pessoas e nas suas
atividades.
Os itens básicos de um cenário são:
1. Configuração (contexto que explica ou motiva os objetivos, ações e reações do atores);
2. Atores (pessoas que interagem com o produto ou com o contexto);
3. Tarefas e Objetivos (atua na situação que motiva os atores);
4. Planejamento (atividade mental convertida responsável pela comportamento dos atores);
5. Avaliação (interpretação de uma situação apresentada);
6. Ações (comportamentos que são observados);
7. Eventos (ações e reações produzidas pelo produto que podem não ser aparentes para os atores, embora sejam relevantes para o cenério).
Cenários
![Page 40: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/40.jpg)
Exemplo 1:
Jane, uma estudante de biologia, precisa criar uma homapage para o seu grupo de pesquisa. Esta página tem como objetivo encorajar os participantes a participarem do seu estudo. Considerando que a pesquisa de campo ocorrerá em uma montanha, ela pensou primeiramente em utilizar uma foto relacionada com a natureza.
Em seguida, os colaboradores da pesquisa de Jane preencheram os campos no EVIDII, associando as imagens com as suas impressões. Portanto, em uma nova fase a estudante poderá utilizar o aplicativo para buscar as imagens classificadas como “natural”.
4.1. Jane usa o “Word View”no ambiente “Image-based space” para saber quais imagens foram classificadas como “natural” e por quem.
4.2. O sistema mostra que “Jane” e “Jack”, pesquisador chefe do estudo, selecionaram a mesma imagem como “natural”.
Cenários
![Page 41: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/41.jpg)
Exemplo 1:
4.3 Ela fica interessada em saber o que “Jack” pensa sobre as outras imagens, logo Jane seleciona o “Person View” do “Image-based space” para “Jack”(Figura 3 - (c)).
4.4 O EVIDII exibe as palavras que expressam sentimentos e as imagens associadas por Jack. Na interface ela descobre uma imagem de um rio com uma encosta verde sendo classificada como “refreshing” perto daquela imagem que fora classificada como “natural”. Isto lembra a estudante que a palavra “refreshing” está melhor relacinada com o conceito desejado.
4.5. Ela procura no “Person View” no “NCDR-Word Space” quais outras imagens “Jack” considerou como sendo “refreshing” ”(Figura 4 - (b)).
4.6. Das imagens selecionadas por “Jack” ela gostou do “pasto verde com um ceú azul”.
Cenários
![Page 42: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/42.jpg)
Exemplo 1:
4.7. Em seguida ela muda para o “Image View” no “NCDR - Word Space” para saber o que os outros colaboradores pensam desta imagem (Figura - 4 (c)). Nesta interface ela descobre que Bob, seu orientar, classificou esta imagem como “natural”.
4.8. Jane resolve utilizar a imagem do “pasto verde com um ceú azul” em na homepage.
Cenários
![Page 43: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/43.jpg)
Exemplo 2:
Regina, auxiliar de projeto de 40 anos, trabalha na cooperativa de tecnologia da informação Tecnocoop Sistemas. Mora na Tijuca, zona norte do Rio de Janeiro, é casada com Ricardo e tem dois filhos: Pedro, com 10 anos, e Mariana, com 7 anos.
Formada em administração, Regina está na cooperativa há cinco anos, sempre como auxiliar de coordenação de projeto. Como seu coordenador passa mais da metade do dia fora da empresa, ela fica responsável pelos contatos com clientes e cooperados dos projetos e busca novas oportunidades de negócio na Internet.
Na mesma sala em que trabalha, ficam Laura, que exerce a mesma função, e Tiago, responsável por pagar contas em banco e outras tarefas na rua. O ambiente é descontraído, todos, especialmente Regina, são comunicativos e adoram conversar sobre assuntos como o último capítulo da novela das 8 ou fofocas da empresa.
Cenários
![Page 44: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/44.jpg)
Exemplo 2 (continuação):
Logo que chegou ao trabalho, Regina ligou seu computador, entrou com seu login e senha na Intranet, e verificou suas tarefas. Seu chefe pediu para encontrar dois profissionais programadores de Java para atender a um cliente. Fez uma busca no cadastro de cooperados usando as palavra-chaves “Java” e “Rio de Janeiro” e o filtro “não-alocados”. Na lista de 2 resultados encontrados, marcou todos e clicou em “enviar mensagem”. O programa de webmail abriu instantaneamente e Regina escreveu a mensagem com a proposta de trabalho, solicitando também currículo atualizado.
Após o almoço, Regina tornou a abrir seu webmail para verificar se havia alguma resposta. Três pessoas responderam a proposta. Ela ligou para o cliente para marcar as entrevistas com os candidatos e enviou mensagem para eles para confirmar a data. Meia hora mais tarde os três deram resposta afirmativa, confirmando a entrevista para a sexta-feira seguinte, ás 10:00h da manhã. Regina saiu do webmail e clicou em “adicionar evento” no módulo da agenda, dentro da Intranet.
Cenários
![Page 45: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/45.jpg)
Exemplo 2 (continuação):
Logo após 15:00h, Regina recebeu outro pedido de seu chefe: fazer a assinatura da revista Linux Magazine. Entrou no site da revista, preencheu o cadastro e imprimiu o boleto bancário. Voltou à Intranet e, no módulo de documentos, clicou em “Autorização de Lançamento”. Preencheu o documento marcando o item “assinatura”, o nome do fornecedor e seus dados bancários, projeto, data de solicitação e mandou imprimir. Quinze minutos depois, Paulo Almeida, seu coordenador, chegou na sala, e Regina entregou a “AL” para ele assinar. Pediu para Tiago deixá-la, junto com o boleto, no departamento Financeiro.
Paulo perguntou para Regina sobre os cooperados e a entrevista. Depois que Regina respondeu, ele lembrou que neste mês será o aniversário da Joana, do RH, e perguntou qual o dia. Ela abriu novamente a Intranet para verificar a lista de aniversariantes do mês e exclamou: “Ela faz aniversário dia 16. Vou perguntar pra ela se terá festinha!”.
Cenários
![Page 46: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/46.jpg)
Prototipagem
![Page 47: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/47.jpg)
Prototipagem
![Page 48: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/48.jpg)
O Papel do Designer
DESIGN DE INTERAÇÃO
DESIGN DE INTERFACE
DESIGN DIGITAL
WEB DESIGN
GUI DESIGN
DESIGN
DESIGN GRÁFICO
DESIGN INDUSTRIAL
![Page 49: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/49.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
“Art-Storming”
![Page 50: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/50.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Rafe (rough)
![Page 51: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/51.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Relações entre os espaços
![Page 52: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/52.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Design Estrutural Conceito de Navegação
(Wireframe)
![Page 53: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/53.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Design Estrutural Conceito de Navegação
(Wireframe)
![Page 54: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/54.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Layout
![Page 55: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/55.jpg)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL:
Layout
![Page 56: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/56.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário UX Design
Responsivo
![Page 57: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/57.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário UX Design
![Page 58: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/58.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário UX Design
![Page 59: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/59.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Não Me Faça Pensar!Steve Krug
• Elementos da Experiência do UsuárioJesse James Garrett
![Page 60: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/60.jpg)
![Page 61: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/61.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
1. Feedback do Estado do Sistema
O sistema deve informar continuamente ao usuário sobre o que ele está fazendo.
10 segundos é o limite para manter a atenção do usuário focalizada no diálogo.
![Page 62: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/62.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
2. Compatibilidade com a Linguagem do UsuárioA terminologia deve ser baseada na linguagem do usuário no mundo real e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário, através do uso de metáforas
![Page 63: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/63.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
3. Controle e Liberdade do UsuárioO usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.
![Page 64: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/64.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
4. Consistência e padronizações Um mesmo comando ou ação deve ter sempre o
mesmo efeito. A mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
![Page 65: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/65.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
5. Prevenção de erros
Conhecer as situações que mais provocam erros e modificar a interface ou programação para que estes erros não ocorram.
![Page 66: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/66.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
6. Reconhecimento X Memorização
O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico
![Page 67: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/67.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
7. Flexibilidade e Eficiência no Uso
Atalhos para usuários experientes executarem as operações mais rapidamente.
Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto.
Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.
![Page 68: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/68.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
8. Simplificação da Estética e do Design
Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos.
A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.
![Page 69: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/69.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
9. Amigabilidade nas Mensagens de Erro
Linguagem clara e sem códigos.
Devem ajudar o usuário a entender e resolver o problema.
Não devem culpar ou intimidar o usuário.
![Page 70: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/70.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
10. Ajuda e documentação
O ideal é que um sistema seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação.
Se for necessária a ajuda deve estar facilmente acessível on-line.
![Page 71: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/71.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Mihaly Csikszentmihalyi (Dr. C) – FLOW IMERSÃO Pessoas reunidas potencializam o Flow Objetivos claros Concentração em um limitado campo de atenção Feedback direto e imediato Equilíbiro entre habilidade e desafio - a atividade não deve
ser nem tão fácil nem tão difícil; Senso de controle sobre a situação ou atividade; Motivação intrínseca - a atividade é muito recompensadora,
assim como a efetividade da ação;
![Page 72: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/72.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Mihaly Csikszentmihalyi (Dr. C) – FLOW
Senso de serenidade - sem preocupações consigo,
sentimento de crescimento além do ego;
Êxtase - estar fazendo alguma coisa fora da rotina;
Perda da noção de tempo.
RELAÇÕES HUMANAS DESAFIOS
INTERFACE TRANSPARENTE EXTENSÃO DO CORPO
FACILIDADE DE USO + DESAFIOS
![Page 73: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/73.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Mihaly Csikszentmihalyi (Dr. C) – FLOW ASPECTOS VISUAIS E CONTEÚDO
Velocidade Feedback Navegação clara Compatibilidade entre desafios e habilidades Simplicidade (SENSE AND SIMPLICITY) Importância Design funcional / divertido Evitar tecnologias de última geração Poucas animações
![Page 74: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/74.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Mihaly Csikszentmihalyi (Dr. C) – FLOW
![Page 75: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/75.jpg)
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Atributos Fundamentais
Fácil aprendizado Eficiência / facilidade de uso Fácil recordação / memorização Baixa taxa de erros Cumprir o que promete (efetividade) Satisfação subjetiva Segurança
![Page 76: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/76.jpg)
LAYOUT Referências / Inspiração / InfluênciasCatálogos e diretórios especializados
![Page 77: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/77.jpg)
LAYOUT Referências / Inspiração / Influências Experiências pessoais / Observação
![Page 78: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/78.jpg)
LAYOUT Referências / Inspiração / Influências Artes e Design Ex: Wassily Kandinsky
Improvisação XXXI
Composição VIComposição VIII Composição IX
Composição V
Impressão Amarelo-vermelho-azul
![Page 79: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/79.jpg)
LAYOUT Referências / Inspiração / Influências Artes e DesignEx: Beatriz Milhazes
Mariposa Beleza Pura
![Page 80: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/80.jpg)
LAYOUT Referências / Inspiração / Influências História
Joules Cherret – “Bal du Moulin Rouge”, 1889
Toulouse-Lautrec – “Moulin Rouge”, 1891
![Page 81: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/81.jpg)
LAYOUT Referências / Inspiração / Influências História
Bauhaus – 1919 -1933
![Page 82: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/82.jpg)
LAYOUT Referências / Inspiração / Influências História
Bauhaus – 1919 -1933
![Page 83: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/83.jpg)
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
• Contribuidores: Wes Wilson, Alphonse Mucha, Rick Griffin, Stanley Mouse, Victor Moscoso
![Page 84: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/84.jpg)
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
![Page 85: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/85.jpg)
Wes Wilson – “Concert Flyer”, 1967 Moctezuma – “James Brown”, 2007
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
![Page 86: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/86.jpg)
Website Havaianas - 2008
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
![Page 87: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/87.jpg)
Website Havaianas - 2008
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
![Page 88: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/88.jpg)
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
![Page 89: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/89.jpg)
Japonês Moderno (anos 60 - 70)
• Contribuidor: Tadanori Yokoo
![Page 90: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/90.jpg)
Japonês Moderno (anos 60 - 70)
![Page 91: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/91.jpg)
Japonês Moderno (anos 60 - 70)
![Page 92: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/92.jpg)
Japonês Moderno (anos 60 - 70)
![Page 93: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/93.jpg)
Japonês Moderno (anos 60 - 70)
![Page 94: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/94.jpg)
• Contribuidor: Neville Brody
Punk (anos 70 - 80)
![Page 95: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/95.jpg)
Punk (anos 70 - 80)
![Page 96: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/96.jpg)
Punk (anos 70 - 80)
![Page 97: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/97.jpg)
• Wolfgang Weingart• Experiências e misturas com a tipografia• Rejeição à organização e à nitidez
• April Greiman• Explora as propriedades visuais das fontes• Padrões e formas criados pelas novas
tecnologias• Camadas de imagens• Uso da fotografia em movimento
New Wave (anos 70 - 80)
![Page 98: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/98.jpg)
New Wave (anos 70 - 80)
![Page 99: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/99.jpg)
• Contribuidor: Ettore Sottsass
Memphis (final dos anos 80)
![Page 100: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/100.jpg)
Memphis (final dos anos 80)
![Page 101: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/101.jpg)
Memphis (final dos anos 80)
![Page 102: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/102.jpg)
• Digital (1985 - presente)
• Contra o modernismo corporativo
• Mídias digitais experimentações
• Design para uma geração jovem
• Tecnologia mais presente no dia a dia
• Softwares criação maciça de layouts e tipologias
![Page 103: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/103.jpg)
• Digital (1985 - presente)
• Designers desafio de unir beleza e funcionalidade
• Imagens em movimento textos ilegíveis, camadas
• Idéias radicais adaptam-se aos interesses comerciais
• Usuário Designer
• Comodidade Novas experiências
• Movimento / Som / Vídeo / Interatividade
![Page 104: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/104.jpg)
• Digital (1985 - presente)
![Page 105: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/105.jpg)
• Digital (1985 - presente)
![Page 106: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/106.jpg)
• Digital (1985 - presente)
![Page 107: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/107.jpg)
• Digital (1985 - presente)
![Page 108: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/108.jpg)
• Berço das fontes digitais
• Laboratório de experimentos em design
• Metodologia do layout une tecnologia e intuição
• Contribuidores:
Rudy Vanderlands
Zuzana Lico
Revista Emigre (1985 - presente)
![Page 109: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/109.jpg)
Revista Emigre (1985 - presente)
![Page 110: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/110.jpg)
Revista Emigre (1985 - presente)
![Page 111: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/111.jpg)
• Design conceitual + experimental
• Tipologias + funcionais (Legíveis)
• Contribuidor: Neville Brody
Revista Fuse (final dos anos 80 - presente)
![Page 112: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/112.jpg)
Revista Fuse (final dos anos 80 - presente)
![Page 113: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/113.jpg)
• Academia de Arte Cranbrook (80 – 90)
• Exploração não-linear da forma e da comunicação visual, baseada na subversão dos padrões e códigos estabelecidos
• Visual / Verbal
• Layouts permitem múltiplas interpretações
precisam ser decifrados
apresentam níveis de transparência, revelando a estrutura interna do design
![Page 114: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/114.jpg)
Academia de Arte Cranbrook (80 – 90)
• Contribuidora: Katherine McCoy
Acreditava em mudanças progressivas e não em modelos
permanentes
Mudar, não apenas por mudar, mas sim, para o avanço da
cultura do design
![Page 115: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/115.jpg)
Academia de Arte Cranbrook (80 – 90)
![Page 116: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/116.jpg)
• Gráficos Radicais (início dos anos 90)
• Convida controversos e aclamados a participarem de debates na comunidade dos designers
• Contesta aqueles que acreditam que a função do design é apenas facilitar o entendimento da mensagem
• Trabalhos requerem envolvimento do observador para serem compreendidos
• Rejeitam que todos devem entender o design da mesma forma
• Cultura corporativa incorpora o design radical
• Sucesso o torna menos radical
![Page 117: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/117.jpg)
• Contribuidores: David Carson
Rejeita as noções convencionais de sintaxe visual, hierarquia visual e representações visuais
Acredita que não existe leitura “ilegível” em comunicação
Vai na direção contrária, usando sobreposições, camadas, cortes não convencionais
“The End of Print” – refere-se ao seu trabalho como tendo um visual mais parecido com o de vídeo
Gráficos Radicais (início dos anos 90)
![Page 118: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/118.jpg)
Gráficos Radicais (início dos anos 90)
![Page 119: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/119.jpg)
Gráficos Radicais (início dos anos 90)
![Page 120: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/120.jpg)
• Rave (final dos anos 90)
• Estilo techno usado em flyers, cartões promocionais e convites para festas e baladas
• União da neo-psicodelia, mangás, video-games, imagens ilusórias, fantásticas (fantasias), tipologia futurista
• Revela um fetiche pela tecnologia
• O estilo foi adaptado pela indústria da propaganda para atingir o público jovem
![Page 121: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/121.jpg)
• Rave (final dos anos 90)
![Page 122: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/122.jpg)
• Rave (final dos anos 90)
![Page 123: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/123.jpg)
• Kinetics (anos 90)
• Gráficos e fontes “em movimento”
• Efeitos 3D
• Contribuidor: Kyle Cooper
Multiplas camadas
Rabiscos
![Page 124: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/124.jpg)
• Kinetics (90)
![Page 125: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/125.jpg)
• Fontismo (anos 90)
• Softwares de fontes capacitam especialistas e amadores a criarem novas tipologias
• Os novos designs de tipologias mudam o visual das publicações
• Contribuidores: Elliott Peter
![Page 126: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/126.jpg)
• Fontismo (anos 90)
![Page 127: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/127.jpg)
• Caos Controlado (anos 90)
• Modernismo = Ordem e limpeza
• Pós-Modernismo = Caos e misturas
• Caos controlado = sinergia entre ordem e desordem
• Técnicas avançadas + rudimentares
• Improviso premeditado
• Computador designs visualmente irracionais
![Page 128: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/128.jpg)
• Caos Controlado (anos 90)
![Page 129: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/129.jpg)
• Caos Controlado (anos 90)
![Page 130: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/130.jpg)
• Caos Controlado (anos 90)
![Page 131: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/131.jpg)
• Caos Controlado (anos 90)
![Page 132: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/132.jpg)
• Caos Controlado (anos 90)
![Page 139: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/139.jpg)
LAYOUT Tendências Tipografia
![Page 141: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/141.jpg)
LAYOUT Tendências Tipografia
![Page 144: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/144.jpg)
LAYOUT Tendências Perspectiva Realista
![Page 147: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/147.jpg)
LAYOUT Tendências Modal Boxes
![Page 156: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/156.jpg)
LAYOUT Cópia / PlágioMadonna “Hollywood” X Ensaios Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
![Page 157: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/157.jpg)
LAYOUT Cópia / PlágioFoundstone X Protech
![Page 158: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/158.jpg)
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
![Page 159: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/159.jpg)
“Pensar Visualmente”
• Curiosidade
• Riquezas e particularidades do mundo
• Talento = estímulo + disciplina
• Nenhuma solução é definitiva
• Ver e transmitir experiência visual
![Page 160: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/160.jpg)
“Pensar Visualmente”
![Page 161: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/161.jpg)
• Mundo MULTIDIMENSIONAL Emoções Cheiros Tato Pensamentos Memórias
• Verbalização = falhas de compreensão visual• Imagem facilita a informação• Todos os sentidos são reforçados pela visão• Ver = sintetizar todos os sentidos• Reconhecer + diferenciar + representar = design
“Pensar Visualmente”
![Page 162: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/162.jpg)
“Pensar Visualmente”
![Page 163: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/163.jpg)
“Pensar Visualmente”
![Page 164: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/164.jpg)
“Pensar Visualmente”
![Page 165: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/165.jpg)
“Pensar Visualmente”
![Page 166: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/166.jpg)
“Pensar Visualmente”
![Page 167: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/167.jpg)
“Pensar Visualmente”
![Page 168: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/168.jpg)
“Pensar Visualmente”
![Page 169: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/169.jpg)
“Pensar Visualmente”
![Page 170: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/170.jpg)
“Pensar Visualmente”
![Page 171: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/171.jpg)
“Pensar Visualmente”
![Page 172: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/172.jpg)
Detalhes X Qualidade
• Acabamento
• Efeito: Estranhamento, incômodo (inexplicável)
• Causa 1: + Empolgação / - Refinamento
• Causa 2: Prazo
• Causa 3: Stress
![Page 173: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/173.jpg)
Detalhes X Qualidade
![Page 174: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/174.jpg)
Detalhes X Qualidade
• Solução: SEJA DETALHISTA!
![Page 175: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/175.jpg)
• Resultado de um mau acabamento:
Talento desperdiçado
Idéia brilhante Execução falha
Detalhes X Qualidade
![Page 176: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/176.jpg)
Gestalt
• Os elementos do campo visual: Definem estruturas
Eliminam ambigüidades
Impõem conexões
Indicam e ordenam o que deve ser lido (visto)
• Layout: Seqüência (orientar a visão do leitor)
![Page 177: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/177.jpg)
Gestalt
![Page 178: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/178.jpg)
• Organização entre os elementos
• Imagem X Fundo
• Agrupamento de imagens
• Uso de figuras fortes
Gestalt
![Page 179: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/179.jpg)
Gestalt
• Organização entre os elementos
![Page 180: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/180.jpg)
Gestalt
• Imagem X Fundo
![Page 181: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/181.jpg)
Gestalt
• Agrupamento
![Page 182: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/182.jpg)
Gestalt
• Figuras fortes
![Page 183: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/183.jpg)
Gestalt
• Figuras fortes
![Page 184: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/184.jpg)
www.2advanced.com
Gestalt
• Figuras fortes
![Page 185: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/185.jpg)
www.cocacolalight.com.br
Gestalt
• Figuras fortes
![Page 186: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/186.jpg)
Princípios do Design
I. Proximidade e Alinhamento;
II. Equilíbrio, Proporção e Simetria
III. Contraste, cores e brancos
IV. Ordem, consistência e repetição
V. Simplificação
VI. Legibilidade
VII. Integração
![Page 187: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/187.jpg)
I. Proximidade e Alinhamento
Reunir elementos que têm algo em comum
Agrupar e alinhar
Elementos se relacionam e ganham sentido Evitando o desconforto do leitor
Relações entre os grupos = hierarquia Facilita o acesso à informação
Alinhamento DEVE SER repetido em todas as páginas PODE SER modificado com consciência e coragem NÃO PODE SER ignorado
Princípios do Design
![Page 188: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/188.jpg)
Princípios do Design
I. Proximidade e Alinhamento
![Page 189: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/189.jpg)
Princípios do Design
I. Proximidade e Alinhamento
![Page 190: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/190.jpg)
Princípios do Design
I. Proximidade e Alinhamento
![Page 191: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/191.jpg)
Princípios do Design
I. Proximidade e Alinhamento
![Page 192: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/192.jpg)
Princípios do Design
I. Proximidade e Alinhamento
![Page 193: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/193.jpg)
II. Equilíbrio, Proporção e Simetria
Layout simétrico = Convite de casamento
Elementos centralizados ou espelhados Monótono e sem graça
Equilíbrio dinâmico
Elementos que se destacam Pesos e tamanhos diferentes Criam movimento e interesse
Impressão de algo faltando ou sobrando Não há / falta equilíbrio
Princípios do Design
![Page 194: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/194.jpg)
Princípios do Design
II. Equilíbrio, Proporção e Simetria
![Page 195: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/195.jpg)
Princípios do Design
II. Equilíbrio, Proporção e Simetria
![Page 196: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/196.jpg)
Princípios do Design
II. Equilíbrio, Proporção e Simetria
![Page 197: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/197.jpg)
Princípios do Design
II. Equilíbrio, Proporção e Simetria
![Page 198: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/198.jpg)
III. Contrastes, Cores e Brancos
Relação Concordante
Não há contraste os elementos Resultado monótono
Relação Conflitante
Inovação com pouca ousadia Pequenas variações de estilo, tamanho, posição
Relação Contrastante
Cria curiosidade e interesse Variações no tamanho, estilo, forma, peso e cor + Contraste = + Interesse
Princípios do Design
![Page 199: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/199.jpg)
Princípios do Design
III. Contrastes, Cores e Brancos
Espaços em branco
NÃO SÃO áreas perdidas NÃO DEVEM necessariamente ser preenchidas SÃO elementos importantes para o design
Entrelinhas , Colunas, Margens Equilibram espaços Reforçam unidade de grupos Harmonizam áreas Aumentam o contraste DÃO FORMA AO DESIGN
![Page 200: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/200.jpg)
Princípios do Design
III. Contrastes, Cores e Brancos
![Page 201: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/201.jpg)
Princípios do Design
III. Contrastes, Cores e Brancos
![Page 202: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/202.jpg)
Princípios do Design
III. Contrastes, Cores e Brancos
![Page 203: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/203.jpg)
Princípios do Design
III. Contrastes, Cores e Brancos
![Page 204: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/204.jpg)
IV. Ordem, Consistência e Repetição
Tudo é permitido, menos mudar as regras
Repetir tipologias, cores, espaços e fundos
Páginas com layouts diferentes não funcionam
Princípios do Design
![Page 205: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/205.jpg)
IV. Ordem, Consistência e Repetição
www.ag2.com.br
Princípios do Design
![Page 206: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/206.jpg)
Princípios do Design
IV. Ordem, Consistência e Repetição
http://www.guga.com.br/br
![Page 207: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/207.jpg)
V. Simplificação
Objetividade, firmeza, clareza, elegância no design
Branco ocupa lugar estudado
Problema 1: Cliente “xarope”
Solução: Convencer o cliente
Problema 2: Designer “showman”
Solução: Pensar + “Bauhaus”
Princípios do Design
Less is more3 famílias de letras, 3 cores, 3 efeitos...Na dúvida, simplifique
![Page 208: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/208.jpg)
Princípios do Design
V. Simplificação
http://www.hyperisland.se
![Page 209: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/209.jpg)
Princípios do Design
V. Simplificação
http://www.shorn.com
![Page 210: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/210.jpg)
VI. Legibilidade
Textos podem ser facilmente lidos OK
Textos não podem ser facilmente lidos Refaça
Princípios do Design
![Page 211: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/211.jpg)
Princípios do Design
VI. Legibilidade
http://www.poscoauto.co.kr/docs/eng/index.jsp
![Page 212: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/212.jpg)
Princípios do Design
VI. Legibilidade
http://www.poscoauto.co.kr/docs/eng/index.jsp
![Page 213: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/213.jpg)
Princípios do Design
VI. Legibilidade
http://www.pickled.tv
![Page 214: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/214.jpg)
Princípios do Design
VII. Integração
Reunião de todos os conceitos
![Page 215: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/215.jpg)
Princípios do Design
VII. Integração
![Page 216: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/216.jpg)
![Page 217: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/217.jpg)
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
![Page 218: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/218.jpg)
• Tipos de websites
• Institucionais• Produtos• Profissionais / Portfolio• Serviços• Entretenimento• Promocionais (Hotsites)• Educativos• Comunidades• E-commerce• Portais
Grids
![Page 219: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/219.jpg)
• Dividem o espaço visível em áreas
• Iguais para todas as páginas
• Unificação do campo visual
• Não são genéricos
Grids
![Page 220: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/220.jpg)
• Reconhecer imagens estáveis / fortes
Grids
![Page 221: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/221.jpg)
• Espaços horizontais e verticais / medidas
Grids
http://www.driftlab.com.index2.htm
![Page 222: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/222.jpg)
![Page 223: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/223.jpg)
![Page 224: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/224.jpg)
![Page 225: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/225.jpg)
![Page 226: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/226.jpg)
![Page 227: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/227.jpg)
Levantamentocompleto dos
elementos
Grids Passo 1:
![Page 228: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/228.jpg)
Organize os elementosem grupos temáticos
Grids Passo 2:
![Page 229: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/229.jpg)
Meça a áreatotal e útil
Grids Passo 3:
![Page 230: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/230.jpg)
Divida o espaço emcolunas e linhas
Grids Passo 4:
![Page 231: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/231.jpg)
Avalie os elementos de cadagrupo e determine
seus espaços
Grids Passo 5:
![Page 232: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/232.jpg)
Padronize as dimensõesdo grid, considerando
exceções e desvios
Grids Passo 6:
![Page 233: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/233.jpg)
Varie, crie opções dearrumação dos elementos
Grids Passo 7:
![Page 234: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/234.jpg)
Faça os ajustes finais
Grids Passo 8:
![Page 235: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/235.jpg)
http://www.thehollywoodblot.com
![Page 236: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/236.jpg)
http://123klan.free.fr/panel_control.html
![Page 237: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/237.jpg)
http://www.036style.com/
![Page 238: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/238.jpg)
![Page 239: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/239.jpg)
http://www.3am.net/
![Page 240: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/240.jpg)
http://www.aleborghe.it/we7/index.asp
![Page 241: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/241.jpg)
http://www.adidas.com
![Page 242: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/242.jpg)
http://www.afterlab.com
![Page 243: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/243.jpg)
http://www.andys.dk
![Page 244: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/244.jpg)
http://www.artofdisplay.com/flash
![Page 245: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/245.jpg)
http://www.colorpeople.com
![Page 246: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/246.jpg)
http://www.designchapel.com
![Page 247: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/247.jpg)
ttp://www.musikkbiblioteket.no
![Page 248: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/248.jpg)
![Page 249: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/249.jpg)
Grid Responsivo
![Page 250: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/250.jpg)
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...) e interação
![Page 251: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/251.jpg)
A Interface
Contato Humano x Máquina
Ambiente gráfico do produto digital
Nem todo mundo gosta de usar computadores
Ferramenta simples, direta, agradável
Pergunta – Resposta – Saída
Aponte / Clique
Integração
![Page 252: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/252.jpg)
Características
Consistência navegacional e conceitual
Interatividade com a tela
Facilitar exploração e leitura
Uso de signos (ícones / símbolos)
Manipulação e descoberta
![Page 253: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/253.jpg)
EVITAR:
Adaptação de mídias
Confundir o visitante
Labirintos e becos sem saída
Excesso de texto e fontes pequenas
Imagens que demoram a carregar
![Page 254: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/254.jpg)
A Interface deve considerar:
Mobilidade
Conexões
Interatividade
Legibilidade / Leitura
Estética / Ergonomia
Navegação
Estímulos e Emoções
![Page 255: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/255.jpg)
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO COM 3D!
![Page 256: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/256.jpg)
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO COM 3D
![Page 257: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/257.jpg)
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO COM 3D
![Page 258: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/258.jpg)
![Page 259: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/259.jpg)
www.ag2.com.br
![Page 260: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/260.jpg)
![Page 261: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/261.jpg)
Elementos da InterfaceEntrada de dados / resposta
![Page 262: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/262.jpg)
![Page 263: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/263.jpg)
Elementos da InterfaceSom, animação e interatividade
![Page 264: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/264.jpg)
Elementos da InterfaceSom, animação e interatividade
![Page 265: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/265.jpg)
![Page 266: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/266.jpg)
Elementos da InterfaceSom, animação e interatividade
![Page 267: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/267.jpg)
![Page 268: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/268.jpg)
Elementos da InterfaceSom, animação e interatividade
(O “Ciclo da Paranóia Digital”)
IGNORÂNCIA
FASCÍNIO
APRENDIZADO
DOMÍNIO
ANGÚSTIA
DECEPÇÃO
HÁBITO
IDEAL
![Page 269: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/269.jpg)
INTERATIVIDADE = “TEMPERO”INTERATIVIDADE ≠ INVASÃO
Elementos da InterfaceSom, animação e interatividade
![Page 270: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/270.jpg)
Elementos da InterfaceSom, animação e interatividade
SOM
Evitar excessos
Evitar repetição
Deve agregar valor ao visual
![Page 271: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/271.jpg)
Elementos da InterfaceSom, animação e interatividade
ANIMAÇÕES (Layouts em Flash)
UsabilidadeExperiência do usuárioPlanejamento estratégicoImpacto da tecnologiaInterface atrativa
Ilustração + Tecnologia + Interatividade + Movimento + Comunidade
![Page 272: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/272.jpg)
![Page 273: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/273.jpg)
Elementos da InterfaceSom, animação e interatividade
INTERATIVIDADE Interação
Inovação
Relacionamento (Comunidade)
Personalização
Criatividade
![Page 274: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/274.jpg)
Elementos da InterfaceSom, animação e interatividade
INTERATIVIDADE InteraçãoREALIDADE AUMENTADA
![Page 275: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/275.jpg)
Elementos da InterfaceSom, animação e interatividade
( Games Interativos )
Sensação de controleSugestão e resposta simultâneaRecompensaMaior visibilidadeCadastrosPúblicos variadosDivulgação viralMaior retornoComunicação amigávelCOMUNIDADE
![Page 276: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/276.jpg)
Elementos da InterfaceSom, animação e interatividade
( Games Interativos Advergames )
Mesma identidade da campanha
“Timing” do cadastro
Não deve banalizar a marca
Tecnologia difundida
Interface agradável
Sonorização adequada
![Page 277: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/277.jpg)
![Page 278: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/278.jpg)
![Page 281: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/281.jpg)
Elementos da InterfaceImagem e Background
Formatos
Características
Funções
Legibilidade
![Page 282: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/282.jpg)
Elementos da InterfaceVídeo
Complemento da informação
Composição do layout
![Page 283: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/283.jpg)
![Page 284: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/284.jpg)
![Page 285: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/285.jpg)
Elementos da InterfaceTexto
BoldCAIXA ALTAItálicoS E P A R A D OColoridoSublinhado
Alinhamentos
![Page 286: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/286.jpg)
![Page 287: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/287.jpg)
Elementos da InterfaceCores
Denotações comuns no ocidente:
Vermelho: pare, perigo, quente, fogo; Amarelo: cuidado, devagar, teste;Verde: ande, OK, livre, vegetação, segurança; Azul: frio, água, calmo, céu;Cores quentes: ação, resposta requeridaCores frias: status, informação de fundo, distância; Cinzas, branco e azul: neutralidade.
![Page 288: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/288.jpg)
Elementos da InterfaceMapas de Navegação
![Page 289: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/289.jpg)
Elementos da InterfaceMapas de Navegação
![Page 290: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/290.jpg)
Elementos da InterfaceMapas de Navegação
![Page 291: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/291.jpg)
Elementos da InterfaceMapas de Navegação
![Page 292: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/292.jpg)
Elementos da InterfaceMapas de Navegação
![Page 293: Prática de Design - Introducao](https://reader037.vdocuments.net/reader037/viewer/2022102805/555b2d63d8b42ae82e8b4b10/html5/thumbnails/293.jpg)
Elementos da InterfaceMapas de Navegação