História Antiga da Web (1995-2000)  WebMASTER
História Antiga da Web (1995-2000)  “Páginas”
Web Evoluiu• Ergonomia + IHC Aspectos sociais Semióticos Psicológicos Estéticos Físicos
O Processo de Produção Evluiu
Web Atual• Arquitetura de Informação Análise e Documentação• Design de Interação Prototipação• Produção
Processo de Produção “Ideal”
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 ...
Processo de Produção• Briefing (Cliente) ESTRATÉGIA DE MERCADO Definição do problema / necessidades Pesquisas (números)...
• LEVANTAMENTO DE REQUISITOS• Objetivo Entender detalhadamente o problema e definir o escopo dotrabalho a ser desenvolvid...
• LEVANTAMENTO DE REQUISITOS• Fontes de Informação Pesquisas de usuários (Focus group, Entrevistas, etc) Relatórios inte...
Processo de Produção• Brainstorming  Briefing de Criação• Nenhuma sugestão é criticada;• Todas as idéias são encorajadas;...
 Público (Para quem?) Conteúdo (O que será mostrado?) Formato (Como?) Resposta (O que se espera como retorno?)o Cronog...
 ObjetivosDesenvolvimento do conceito criativowww.ford.com.br
 ObjetivosDesenvolvimento do conceito criativo
Desenvolvimento do conceito criativo Públicowww.barbie.com.br
Desenvolvimento do conceito criativo Públicowww.cocacolazero.com.br
Desenvolvimento do conceito criativo Público
Desenvolvimento do conceito criativo Público
Desenvolvimento do conceito criativo Formatowww.cocacolalight.com.br
Desenvolvimento do conceito criativo Formatouno.fiat.com.br
Desenvolvimento do conceito criativo Formato = Design Responsivo
Desenvolvimento do conceito criativo Respostawww.the-eviltwin.co.uk
O Papel do Arquiteto de Informação Planejamento da informaçãoInformação acessível e compreensível a qualquer pessoa; De...
O Papel do Arquiteto de Informação
O Papel do Arquiteto de InformaçãoSegundo Richard Wurman: Identificar o que o interlocutor não compreende Verificar se h...
O Papel do Arquiteto de InformaçãoFormas de Organizar Informação: Richard Wurman  LATCH Localização (Mapas) Alfabeto ...
O Papel do Arquiteto de Informação• Entender as necessidades dos usuários Testes de Usabilidade / Análises Heurísticas C...
Teste de Usabilidade
Teste de Usabilidade
Teste de Usabilidade
Card Sorting
Personas
Algumas perguntas para criar as personas:1) O que o personagem gosta de fazer?2) Como o personagem se relaciona com a famí...
Regina, auxiliar de projeto de 40 anos, trabalha nacooperativa de tecnologia da informação TecnocoopSistemas. Mora na Tiju...
O cenário é uma história baseada em pessoas e nas suasatividades.Os itens básicos de um cenário são:1. Configuração (conte...
Exemplo 1:Jane, uma estudante de biologia, precisa criar umahomapage para o seu grupo de pesquisa. Estapágina tem como obj...
Exemplo 1:4.3 Ela fica interessada em saber o que “Jack”pensa sobre as outras imagens, logo Jane selecionao “Person View” ...
Exemplo 1:4.7. Em seguida ela muda para o “Image View” no“NCDR - Word Space” para saber o que os outroscolaboradores pensa...
Exemplo 2:Regina, auxiliar de projeto de 40 anos, trabalha nacooperativa de tecnologia da informação TecnocoopSistemas. Mo...
Exemplo 2 (continuação):Logo que chegou ao trabalho, Regina ligou seucomputador, entrou com seu login e senha na Intranet,...
Exemplo 2 (continuação):Logo após 15:00h, Regina recebeu outro pedido de seuchefe: fazer a assinatura da revista Linux Mag...
Prototipagem
Prototipagem
O Papel do DesignerDESIGN DE INTERAÇÃODESIGN DE INTERFACEDESIGN DIGITALWEB DESIGNGUI DESIGNDESIGNDESIGN GRÁFICODESIGN INDU...
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: “Art-Storming”
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Rafe (rough)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Relações entre os espaços
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Design Estrutural Conceito de Navegação(Wireframe)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Design Estrutural Conceito de Navegação(Wireframe)
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Layout
O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Layout
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX DesignResponsivo
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX Design
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX Design
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Não Me Faça Pensar!Steve Krug• Elementos da Exp...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Jacob Nielsen – Projetando Websites• “10 Heurís...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Mihaly Csikszentmihalyi (Dr. C) – FLOW IMERSÃO...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Mihaly Csikszentmihalyi (Dr. C) – FLOW Senso d...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Mihaly Csikszentmihalyi (Dr. C) – FLOW ASPECTO...
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Mihaly Csikszentmihalyi (Dr. C) – FLOW
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Atributos Fundamentais Fácil aprendizado Efic...
LAYOUT  Referências / Inspiração / InfluênciasCatálogos e diretórios especializados
LAYOUT  Referências / Inspiração / InfluênciasExperiências pessoais / Observação
LAYOUT  Referências / Inspiração / InfluênciasArtes e DesignEx: Wassily KandinskyImprovisação XXXIComposição VIComposição...
LAYOUT  Referências / Inspiração / InfluênciasArtes e DesignEx: Beatriz MilhazesMariposa Beleza Pura
LAYOUT  Referências / Inspiração / InfluênciasHistóriaJoules Cherret – “Bal du MoulinRouge”, 1889Toulouse-Lautrec – “Moul...
LAYOUT  Referências / Inspiração / InfluênciasHistóriaBauhaus – 1919 -1933
LAYOUT  Referências / Inspiração / InfluênciasHistóriaBauhaus – 1919 -1933
LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico• Contribuidores: Wes Wilson, Alphonse Mucha, RickGr...
LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
Wes Wilson – “Concert Flyer”, 1967 Moctezuma – “James Brown”, 2007LAYOUT  Referências / Inspiração / InfluênciasHistória ...
Website Havaianas - 2008LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
Website Havaianas - 2008LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
• O que é preciso para se criarum bom Layout?• Referências culturais (artísticas e pessoais)• Princípios do Design e do La...
Japonês Moderno (anos 60 - 70)• Contribuidor: Tadanori Yokoo
Japonês Moderno (anos 60 - 70)
Japonês Moderno (anos 60 - 70)
Japonês Moderno (anos 60 - 70)
Japonês Moderno (anos 60 - 70)
• Contribuidor: Neville BrodyPunk (anos 70 - 80)
Punk (anos 70 - 80)
Punk (anos 70 - 80)
• Wolfgang Weingart• Experiências e misturas com a tipografia• Rejeição à organização e à nitidez• April Greiman• Explora ...
New Wave (anos 70 - 80)
• Contribuidor: Ettore SottsassMemphis (final dos anos 80)
Memphis (final dos anos 80)
Memphis (final dos anos 80)
• Digital (1985 - presente)• Contra o modernismo corporativo• Mídias digitais  experimentações• Design para uma geração j...
• Digital (1985 - presente)• Designers  desafio de unir beleza e funcionalidade• Imagens em movimento textos ilegíveis, c...
• Digital (1985 - presente)
• Digital (1985 - presente)
• Digital (1985 - presente)
• Digital (1985 - presente)
• Berço das fontes digitais• Laboratório de experimentos em design• Metodologia do layout une tecnologia e intuição• Contr...
Revista Emigre (1985 - presente)
Revista Emigre (1985 - presente)
• Design conceitual + experimental• Tipologias  + funcionais (Legíveis)• Contribuidor: Neville BrodyRevista Fuse (final d...
Revista Fuse (final dos anos 80 - presente)
• Academia de Arte Cranbrook (80 – 90)• Exploração não-linear da forma e da comunicaçãovisual, baseada na subversão dos pa...
Academia de Arte Cranbrook (80 – 90)• Contribuidora: Katherine McCoy Acreditava em mudanças progressivas e não em modelos...
Academia de Arte Cranbrook (80 – 90)
• Gráficos Radicais (início dos anos 90)• Convida controversos e aclamados a participarem dedebates na comunidade dos desi...
• Contribuidores: David Carson Rejeita as noções convencionais de sintaxe visual, hierarquiavisual e representações visua...
Gráficos Radicais (início dos anos 90)
Gráficos Radicais (início dos anos 90)
• Rave (final dos anos 90)• Estilo techno usado em flyers, cartões promocionaise convites para festas e baladas• União da ...
• Rave (final dos anos 90)
• Rave (final dos anos 90)
• Kinetics (anos 90)• Gráficos e fontes “em movimento”• Efeitos 3D• Contribuidor: Kyle Cooper Multiplas camadas Rabiscos
• Kinetics (90)
• Fontismo (anos 90)• Softwares de fontes capacitam especialistas eamadores a criarem novas tipologias• Os novos designs d...
• Fontismo (anos 90)
• Caos Controlado (anos 90)• Modernismo = Ordem e limpeza• Pós-Modernismo = Caos e misturas• Caos controlado = sinergia en...
• Caos Controlado (anos 90)
• Caos Controlado (anos 90)
• Caos Controlado (anos 90)
• Caos Controlado (anos 90)
• Caos Controlado (anos 90)
LAYOUT  TendênciasSplash Logos / Splash Headers
LAYOUT  TendênciasImagens / Fotos enormes
LAYOUT  TendênciasImagens / Fotos enormes
LAYOUT  TendênciasLayout Rabiscado / Desenhado a mão
LAYOUT  TendênciasLayout Rabiscado / Desenhado a mão
LAYOUT  TendênciasCartaz (Slab)
LAYOUT  TendênciasTipografia
LAYOUT  TendênciasFlat Design
LAYOUT  TendênciasTipografia
LAYOUT  TendênciasOne-Page Layout
LAYOUT  TendênciasPerspectiva Realista
LAYOUT  TendênciasPerspectiva Realista
LAYOUT  TendênciasDesign Intuitivo
LAYOUT  TendênciasModal Boxes
LAYOUT  TendênciasModal Boxes
LAYOUT  TendênciasMinimalismo
LAYOUT  TendênciasEspaço “branco”
LAYOUT  TendênciasMinimalismo
LAYOUT  TendênciasFooter (rodapé) Gigante
LAYOUT  TendênciasFooter (rodapé) Gigante
LAYOUT  TendênciasRetrô
LAYOUT  TendênciasBlocos Introdutórios (Intro Blocks)
LAYOUT  TendênciasLayout de Revista
LAYOUT  Cópia / PlágioMadonna “Hollywood” X Ensaios Guy BourdinStill “Hollywood” Foto Guy BourdinStill “Hollywood” Foto G...
LAYOUT  Cópia / PlágioFoundstone X Protech
• O que é preciso para se criarum bom Layout?• Referências culturais (artísticas e pessoais)• Princípios do Design e do La...
“Pensar Visualmente”• Curiosidade• Riquezas e particularidades do mundo• Talento = estímulo + disciplina• Nenhuma solução ...
“Pensar Visualmente”
• Mundo MULTIDIMENSIONAL Emoções Cheiros Tato Pensamentos Memórias• Verbalização = falhas de compreensão visual• Imag...
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
“Pensar Visualmente”
Detalhes X Qualidade• Acabamento• Efeito: Estranhamento, incômodo (inexplicável)• Causa 1: + Empolgação / - Refinamento• C...
Detalhes X Qualidade
Detalhes X Qualidade• Solução: SEJA DETALHISTA!
• Resultado de um mau acabamento: Talento desperdiçado Idéia brilhante  Execução falhaDetalhes X Qualidade
Gestalt• Os elementos do campo visual: Definem estruturas Eliminam ambigüidades Impõem conexões Indicam e ordenam o qu...
Gestalt
• Organização entre os elementos• Imagem X Fundo• Agrupamento de imagens• Uso de figuras fortesGestalt
Gestalt• Organização entre os elementos
Gestalt• Imagem X Fundo
Gestalt• Agrupamento
Gestalt• Figuras fortes
Gestalt• Figuras fortes
www.2advanced.comGestalt• Figuras fortes
www.cocacolalight.com.brGestalt• Figuras fortes
Princípios do DesignI. Proximidade e Alinhamento;II. Equilíbrio, Proporção e SimetriaIII. Contraste, cores e brancosIV. Or...
I. Proximidade e Alinhamento Reunir elementos que têm algo em comum Agrupar e alinhar Elementos se relacionam e ganham ...
Princípios do DesignI. Proximidade e Alinhamento
Princípios do DesignI. Proximidade e Alinhamento
Princípios do DesignI. Proximidade e Alinhamento
Princípios do DesignI. Proximidade e Alinhamento
Princípios do DesignI. Proximidade e Alinhamento
II. Equilíbrio, Proporção e Simetria Layout simétrico = Convite de casamentoElementos centralizados ou espelhadosMonóto...
Princípios do DesignII. Equilíbrio, Proporção e Simetria
Princípios do DesignII. Equilíbrio, Proporção e Simetria
Princípios do DesignII. Equilíbrio, Proporção e Simetria
Princípios do DesignII. Equilíbrio, Proporção e Simetria
III. Contrastes, Cores e Brancos Relação ConcordanteNão há contraste os elementosResultado monótono Relação Conflitant...
Princípios do DesignIII. Contrastes, Cores e Brancos Espaços em brancoNÃO SÃO áreas perdidasNÃO DEVEM necessariamente s...
Princípios do DesignIII. Contrastes, Cores e Brancos
Princípios do DesignIII. Contrastes, Cores e Brancos
Princípios do DesignIII. Contrastes, Cores e Brancos
Princípios do DesignIII. Contrastes, Cores e Brancos
IV. Ordem, Consistência e Repetição Tudo é permitido, menos mudar as regras Repetir tipologias, cores, espaços e fundos...
IV. Ordem, Consistência e Repetiçãowww.ag2.com.brPrincípios do Design
Princípios do DesignIV. Ordem, Consistência e Repetiçãohttp://www.guga.com.br/br
V. Simplificação Objetividade, firmeza, clareza, elegância no design Branco ocupa lugar estudado Problema 1: Cliente “x...
Princípios do DesignV. Simplificaçãohttp://www.hyperisland.se
Princípios do DesignV. Simplificaçãohttp://www.shorn.com
VI. Legibilidade Textos podem ser facilmente lidos OK Textos não podem ser facilmente lidos RefaçaPrincípios do Design
Princípios do DesignVI. Legibilidadehttp://www.poscoauto.co.kr/docs/eng/index.jsp
Princípios do DesignVI. Legibilidadehttp://www.poscoauto.co.kr/docs/eng/index.jsp
Princípios do DesignVI. Legibilidadehttp://www.pickled.tv
Princípios do DesignVII. Integração Reunião de todos os conceitos
Princípios do DesignVII. Integração
• O que é preciso para se criar um bomLayout?• Referências culturais (artísticas e pessoais)• Princípios do Design e do La...
• Tipos de websites• Institucionais• Produtos• Profissionais / Portfolio• Serviços• Entretenimento• Promocionais (Hotsites...
• Dividem o espaço visível em áreas• Iguais para todas as páginas• Unificação do campo visual• Não são genéricosGrids
• Reconhecer imagens estáveis / fortesGrids
• Espaços horizontais e verticais / medidasGridshttp://www.driftlab.com.index2.htm
Levantamentocompleto doselementosGrids  Passo 1:
Organize os elementosem grupos temáticosGrids  Passo 2:
Meça a áreatotal e útilGrids  Passo 3:
Divida o espaço emcolunas e linhasGrids  Passo 4:
Avalie os elementos de cadagrupo e determineseus espaçosGrids  Passo 5:
Padronize as dimensõesdo grid, considerandoexceções e desviosGrids  Passo 6:
Varie, crie opções dearrumação dos elementosGrids  Passo 7:
Faça os ajustes finaisGrids  Passo 8:
http://www.thehollywoodblot.com
http://123klan.free.fr/panel_control.html
http://www.036style.com/
http://www.3am.net/
http://www.aleborghe.it/we7/index.asp
http://www.adidas.com
http://www.afterlab.com
http://www.andys.dk
http://www.artofdisplay.com/flash
http://www.colorpeople.com
http://www.designchapel.com
ttp://www.musikkbiblioteket.no
Grid Responsivo
• O que é preciso para se criar um bomLayout?• Referências culturais (artísticas e pessoais)• Princípios do Design e do La...
A InterfaceContato Humano x MáquinaAmbiente gráfico do produto digitalNem todo mundo gosta de usar computadoresFerramenta ...
CaracterísticasConsistência navegacional e conceitualInteratividade com a telaFacilitar exploração e leituraUso de signos ...
EVITAR:Adaptação de mídiasConfundir o visitanteLabirintos e becos sem saídaExcesso de texto e fontes pequenasImagens que d...
A Interface deve considerar:MobilidadeConexõesInteratividadeLegibilidade / LeituraEstética / ErgonomiaNavegaçãoEstímulos e...
Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D!
Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D
Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D
www.ag2.com.br
Elementos da InterfaceEntrada de dados / resposta
Elementos da InterfaceSom, animação e interatividade
Elementos da InterfaceSom, animação e interatividade
Elementos da InterfaceSom, animação e interatividade
Elementos da InterfaceSom, animação e interatividade(O “Ciclo da Paranóia Digital”)IGNORÂNCIAFASCÍNIOAPRENDIZADODOMÍNIOANG...
INTERATIVIDADE = “TEMPERO”INTERATIVIDADE ≠ INVASÃOElementos da InterfaceSom, animação e interatividade
Elementos da InterfaceSom, animação e interatividadeSOMEvitar excessosEvitar repetiçãoDeve agregar valor ao visual
Elementos da InterfaceSom, animação e interatividadeANIMAÇÕES (Layouts em Flash)UsabilidadeExperiência do usuárioPlanejame...
Elementos da InterfaceSom, animação e interatividadeINTERATIVIDADE  InteraçãoInovaçãoRelacionamento (Comunidade)Personali...
Elementos da InterfaceSom, animação e interatividadeINTERATIVIDADE  InteraçãoREALIDADE AUMENTADA
Elementos da InterfaceSom, animação e interatividade( Games Interativos )Sensação de controleSugestão e resposta simultâne...
Elementos da InterfaceSom, animação e interatividade( Games Interativos  Advergames )Mesma identidade da campanha“Timing”...
Car Town: Honda + Facebook
Car Town: Honda + Facebook
Elementos da InterfaceImagem e BackgroundFormatosCaracterísticasFunçõesLegibilidade
Elementos da InterfaceVídeoComplemento da informaçãoComposição do layout
Elementos da InterfaceTextoBoldCAIXA ALTAItálicoS E P A R A D OColoridoSublinhadoAlinhamentos
Elementos da InterfaceCoresDenotações comuns no ocidente:Vermelho: pare, perigo, quente, fogo;Amarelo: cuidado, devagar, t...
Elementos da InterfaceMapas de Navegação
Elementos da InterfaceMapas de Navegação
Elementos da InterfaceMapas de Navegação
Elementos da InterfaceMapas de Navegação
Elementos da InterfaceMapas de Navegação
Elementos da InterfaceMapas de Navegação
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Prática de Design - Introducao
Upcoming SlideShare
Loading in …5
×

Prática de Design - Introducao

1,398 views
1,291 views

Published on

Aula 01 da disciplina Prática de Design do curso de Sistemas para Internet da FATEC de Carapicuíba.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,398
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Prática de Design - Introducao

  1. 1. História Antiga da Web (1995-2000)  WebMASTER
  2. 2. História Antiga da Web (1995-2000)  “Páginas”
  3. 3. Web Evoluiu• Ergonomia + IHC Aspectos sociais Semióticos Psicológicos Estéticos Físicos
  4. 4. O Processo de Produção Evluiu
  5. 5. Web Atual• Arquitetura de Informação Análise e Documentação• Design de Interação Prototipação• Produção
  6. 6. Processo de Produção “Ideal”
  7. 7. 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).
  8. 8. 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
  9. 9. • LEVANTAMENTO DE REQUISITOS• Objetivo Entender detalhadamente o problema e definir o escopo dotrabalho 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 deabordagem 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 everificar como eles atendem aos objetivos do site Levantar requisitos que possam limitar a usabilidade Entender o funcionamento de sistemas legados
  10. 10. • 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
  11. 11. 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çãoINOVAÇÃO
  12. 12.  Público (Para quem?) Conteúdo (O que será mostrado?) Formato (Como?) Resposta (O que se espera como retorno?)o Cronograma / Investimento / ROIDesenvolvimento do conceito criativo• Definir / Redefinir: Objetivos (Para quê?)
  13. 13.  ObjetivosDesenvolvimento do conceito criativowww.ford.com.br
  14. 14.  ObjetivosDesenvolvimento do conceito criativo
  15. 15. Desenvolvimento do conceito criativo Públicowww.barbie.com.br
  16. 16. Desenvolvimento do conceito criativo Públicowww.cocacolazero.com.br
  17. 17. Desenvolvimento do conceito criativo Público
  18. 18. Desenvolvimento do conceito criativo Público
  19. 19. Desenvolvimento do conceito criativo Formatowww.cocacolalight.com.br
  20. 20. Desenvolvimento do conceito criativo Formatouno.fiat.com.br
  21. 21. Desenvolvimento do conceito criativo Formato = Design Responsivo
  22. 22. Desenvolvimento do conceito criativo Respostawww.the-eviltwin.co.uk
  23. 23. 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
  24. 24. O Papel do Arquiteto de Informação
  25. 25. 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 paratransmiti-la Essa informação deve se relacionar com algo que sejapreviamente compreensível ao interlocutor e... ... trazer alguma vantagem no processo
  26. 26. 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 (maiormenor, carobarato, acessos, etc.) Thomas Vander Wal  Folksonomia Tags Relevância Ambíguos  Assunto / Metáfora / Tarefa / Audiência
  27. 27. 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
  28. 28. Teste de Usabilidade
  29. 29. Teste de Usabilidade
  30. 30. Teste de Usabilidade
  31. 31. Card Sorting
  32. 32. Personas
  33. 33. 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 oestilo 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 porpossuir 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
  34. 34. Regina, auxiliar de projeto de 40 anos, trabalha nacooperativa de tecnologia da informação TecnocoopSistemas. Mora na Tijuca, zona norte do Rio de Janeiro, écasada com Ricardo e tem dois filhos: Pedro, com 10anos, e Mariana, com 7 anos.Formada em administração, Regina está na cooperativa hácinco anos, sempre como auxiliar de coordenação deprojeto.Personas
  35. 35. O cenário é uma história baseada em pessoas e nas suasatividades.Os itens básicos de um cenário são:1. Configuração (contexto que explica ou motiva osobjetivos, ações e reações do atores);2. Atores (pessoas que interagem com o produtoou com o contexto);3. Tarefas e Objetivos (atua na situação quemotiva os atores);4. Planejamento (atividade mental convertidaresponsável pela comportamento dos atores);5. Avaliação (interpretação de uma situaçãoapresentada);6. Ações (comportamentos que são observados);7. Eventos (ações e reações produzidas peloproduto que podem não ser aparentes para osatores, embora sejam relevantes para ocenério).Cenários
  36. 36. Exemplo 1:Jane, uma estudante de biologia, precisa criar umahomapage para o seu grupo de pesquisa. Estapágina tem como objetivo encorajar os participantesa participarem do seu estudo. Considerando que apesquisa de campo ocorrerá em uma montanha, elapensou primeiramente em utilizar uma fotorelacionada com a natureza.Em seguida, os colaboradores da pesquisa de Janepreencheram os campos no EVIDII, associando asimagens com as suas impressões. Portanto, em umanova fase a estudante poderá utilizar o aplicativopara buscar as imagens classificadas como “natural”.4.1. Jane usa o “Word View”no ambiente “Image-based space” para saber quais imagens foramclassificadas como “natural” e por quem.4.2. O sistema mostra que “Jane” e “Jack”,pesquisador chefe do estudo, selecionaram amesma imagem como “natural”.Cenários
  37. 37. Exemplo 1:4.3 Ela fica interessada em saber o que “Jack”pensa sobre as outras imagens, logo Jane selecionao “Person View” do “Image-based space” para“Jack”(Figura 3 - (c)).4.4 O EVIDII exibe as palavras que expressamsentimentos e as imagens associadas por Jack. Nainterface ela descobre uma imagem de um rio comuma encosta verde sendo classificada como“refreshing” perto daquela imagem que foraclassificada como “natural”. Isto lembra a estudanteque a palavra “refreshing” está melhor relacinadacom o conceito desejado.4.5. Ela procura no “Person View” no “NCDR-WordSpace” quais outras imagens “Jack” consideroucomo sendo “refreshing” ”(Figura 4 - (b)).4.6. Das imagens selecionadas por “Jack” elagostou do “pasto verde com um ceú azul”.Cenários
  38. 38. Exemplo 1:4.7. Em seguida ela muda para o “Image View” no“NCDR - Word Space” para saber o que os outroscolaboradores 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 verdecom um ceú azul” em na homepage.Cenários
  39. 39. Exemplo 2:Regina, auxiliar de projeto de 40 anos, trabalha nacooperativa de tecnologia da informação TecnocoopSistemas. Mora na Tijuca, zona norte do Rio de Janeiro, écasada com Ricardo e tem dois filhos: Pedro, com 10anos, e Mariana, com 7 anos.Formada em administração, Regina está na cooperativa hácinco anos, sempre como auxiliar de coordenação deprojeto. Como seu coordenador passa mais da metade dodia fora da empresa, ela fica responsável pelos contatoscom clientes e cooperados dos projetos e busca novasoportunidades de negócio na Internet.Na mesma sala em que trabalha, ficam Laura, que exercea mesma função, e Tiago, responsável por pagar contasem banco e outras tarefas na rua. O ambiente édescontraído, todos, especialmente Regina, sãocomunicativos e adoram conversar sobre assuntos como oúltimo capítulo da novela das 8 ou fofocas da empresa.Cenários
  40. 40. Exemplo 2 (continuação):Logo que chegou ao trabalho, Regina ligou seucomputador, entrou com seu login e senha na Intranet, everificou suas tarefas. Seu chefe pediu para encontrar doisprofissionais programadores de Java para atender a umcliente. Fez uma busca no cadastro de cooperados usandoas palavra-chaves “Java” e “Rio de Janeiro” e o filtro “não-alocados”. Na lista de 2 resultados encontrados, marcoutodos e clicou em “enviar mensagem”. O programa dewebmail abriu instantaneamente e Regina escreveu amensagem com a proposta de trabalho, solicitandotambém currículo atualizado.Após o almoço, Regina tornou a abrir seu webmail paraverificar se havia alguma resposta. Três pessoasresponderam a proposta. Ela ligou para o cliente paramarcar as entrevistas com os candidatos e envioumensagem para eles para confirmar a data. Meia horamais tarde os três deram resposta afirmativa, confirmandoa entrevista para a sexta-feira seguinte, ás 10:00h damanhã. Regina saiu do webmail e clicou em “adicionarevento” no módulo da agenda, dentro da Intranet.Cenários
  41. 41. Exemplo 2 (continuação):Logo após 15:00h, Regina recebeu outro pedido de seuchefe: fazer a assinatura da revista Linux Magazine.Entrou no site da revista, preencheu o cadastro e imprimiuo boleto bancário. Voltou à Intranet e, no módulo dedocumentos, clicou em “Autorização de Lançamento”.Preencheu o documento marcando o item “assinatura”, onome do fornecedor e seus dados bancários, projeto, datade solicitação e mandou imprimir. Quinze minutos depois,Paulo Almeida, seu coordenador, chegou na sala, eRegina entregou a “AL” para ele assinar. Pediu para Tiagodeixá-la, junto com o boleto, no departamento Financeiro.Paulo perguntou para Regina sobre os cooperados e aentrevista. Depois que Regina respondeu, ele lembrou queneste mês será o aniversário da Joana, do RH, eperguntou qual o dia. Ela abriu novamente a Intranet paraverificar a lista de aniversariantes do mês e exclamou: “Elafaz aniversário dia 16. Vou perguntar pra ela se teráfestinha!”.Cenários
  42. 42. Prototipagem
  43. 43. Prototipagem
  44. 44. O Papel do DesignerDESIGN DE INTERAÇÃODESIGN DE INTERFACEDESIGN DIGITALWEB DESIGNGUI DESIGNDESIGNDESIGN GRÁFICODESIGN INDUSTRIAL
  45. 45. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: “Art-Storming”
  46. 46. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Rafe (rough)
  47. 47. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Relações entre os espaços
  48. 48. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Design Estrutural Conceito de Navegação(Wireframe)
  49. 49. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Design Estrutural Conceito de Navegação(Wireframe)
  50. 50. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Layout
  51. 51. O Papel do Designer GráficoTornar a estrutura da informação VISÍVEL: Layout
  52. 52. Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX DesignResponsivo
  53. 53. Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX Design
  54. 54. Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário  UX Design
  55. 55. 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
  56. 56. 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áriosobre o que ele está fazendo. 10 segundos é o limite para manter a atenção dousuário focalizada no diálogo.
  57. 57. 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 dousuário no mundo real e não orientada ao sistema. Asinformações devem ser organizadas conforme o modelomental do usuário, através do uso de metáforas
  58. 58. 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 qualquermomento, abortar uma tarefa, ou desfazer umaoperação e retornar ao estado anterior.
  59. 59. 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 omesmo efeito. A mesma operação deve ser apresentada na mesmalocalização e deve ser formatada/apresentada damesma maneira para facilitar o reconhecimento.
  60. 60. 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 emodificar a interface ou programação para que esteserros não ocorram.
  61. 61. 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 epermitir que o usuário faça suas escolhas, sem anecessidade de lembrar um comando específico
  62. 62. 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 asoperaçõ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çõesque estão numa profundidade na árvore navegacionala partir da interface principal.
  63. 63. 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 ainformação que o usuário precisa nomomento, nem mais nem menos. A seqüência da interação e o acesso aosobjetos e operações devem ser compatíveiscom o modo pelo qual o usuário realiza suastarefas.
  64. 64. 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 semcódigos. Devem ajudar o usuárioa entender e resolver oproblema. Não devem culpar ouintimidar o usuário.
  65. 65. 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ãofácil de usar (intuitivo) que nãonecessite de ajuda oudocumentação. Se for necessária a ajuda deveestar facilmente acessível on-line.
  66. 66. 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 deveser 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;
  67. 67. 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
  68. 68. 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
  69. 69. Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário• Mihaly Csikszentmihalyi (Dr. C) – FLOW
  70. 70. 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
  71. 71. LAYOUT  Referências / Inspiração / InfluênciasCatálogos e diretórios especializados
  72. 72. LAYOUT  Referências / Inspiração / InfluênciasExperiências pessoais / Observação
  73. 73. LAYOUT  Referências / Inspiração / InfluênciasArtes e DesignEx: Wassily KandinskyImprovisação XXXIComposição VIComposição VIII Composição IXComposição VImpressão Amarelo-vermelho-azul
  74. 74. LAYOUT  Referências / Inspiração / InfluênciasArtes e DesignEx: Beatriz MilhazesMariposa Beleza Pura
  75. 75. LAYOUT  Referências / Inspiração / InfluênciasHistóriaJoules Cherret – “Bal du MoulinRouge”, 1889Toulouse-Lautrec – “Moulin Rouge”,1891
  76. 76. LAYOUT  Referências / Inspiração / InfluênciasHistóriaBauhaus – 1919 -1933
  77. 77. LAYOUT  Referências / Inspiração / InfluênciasHistóriaBauhaus – 1919 -1933
  78. 78. LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico• Contribuidores: Wes Wilson, Alphonse Mucha, RickGriffin, Stanley Mouse, Victor Moscoso
  79. 79. LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
  80. 80. Wes Wilson – “Concert Flyer”, 1967 Moctezuma – “James Brown”, 2007LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
  81. 81. Website Havaianas - 2008LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
  82. 82. Website Havaianas - 2008LAYOUT  Referências / Inspiração / InfluênciasHistória >> Psicodélico
  83. 83. • O que é preciso para se criarum 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...)
  84. 84. Japonês Moderno (anos 60 - 70)• Contribuidor: Tadanori Yokoo
  85. 85. Japonês Moderno (anos 60 - 70)
  86. 86. Japonês Moderno (anos 60 - 70)
  87. 87. Japonês Moderno (anos 60 - 70)
  88. 88. Japonês Moderno (anos 60 - 70)
  89. 89. • Contribuidor: Neville BrodyPunk (anos 70 - 80)
  90. 90. Punk (anos 70 - 80)
  91. 91. Punk (anos 70 - 80)
  92. 92. • 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 novastecnologias• Camadas de imagens• Uso da fotografia em movimentoNew Wave (anos 70 - 80)
  93. 93. New Wave (anos 70 - 80)
  94. 94. • Contribuidor: Ettore SottsassMemphis (final dos anos 80)
  95. 95. Memphis (final dos anos 80)
  96. 96. Memphis (final dos anos 80)
  97. 97. • 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
  98. 98. • 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
  99. 99. • Digital (1985 - presente)
  100. 100. • Digital (1985 - presente)
  101. 101. • Digital (1985 - presente)
  102. 102. • Digital (1985 - presente)
  103. 103. • Berço das fontes digitais• Laboratório de experimentos em design• Metodologia do layout une tecnologia e intuição• Contribuidores:Rudy VanderlandsZuzana LicoRevista Emigre (1985 - presente)
  104. 104. Revista Emigre (1985 - presente)
  105. 105. Revista Emigre (1985 - presente)
  106. 106. • Design conceitual + experimental• Tipologias  + funcionais (Legíveis)• Contribuidor: Neville BrodyRevista Fuse (final dos anos 80 - presente)
  107. 107. Revista Fuse (final dos anos 80 - presente)
  108. 108. • Academia de Arte Cranbrook (80 – 90)• Exploração não-linear da forma e da comunicaçãovisual, baseada na subversão dos padrões ecódigos estabelecidos• Visual / Verbal• Layouts permitem múltiplas interpretações precisam ser decifrados apresentam níveis de transparência, revelando a estruturainterna do design
  109. 109. Academia de Arte Cranbrook (80 – 90)• Contribuidora: Katherine McCoy Acreditava em mudanças progressivas e não em modelospermanentes Mudar, não apenas por mudar, mas sim, para o avanço dacultura do design
  110. 110. Academia de Arte Cranbrook (80 – 90)
  111. 111. • Gráficos Radicais (início dos anos 90)• Convida controversos e aclamados a participarem dedebates 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 seremcompreendidos• Rejeitam que todos devem entender o design da mesmaforma• Cultura corporativa incorpora o design radical• Sucesso o torna menos radical
  112. 112. • Contribuidores: David Carson Rejeita as noções convencionais de sintaxe visual, hierarquiavisual 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, cortesnão convencionais “The End of Print” – refere-se ao seu trabalho como tendo umvisual mais parecido com o de vídeoGráficos Radicais (início dos anos 90)
  113. 113. Gráficos Radicais (início dos anos 90)
  114. 114. Gráficos Radicais (início dos anos 90)
  115. 115. • Rave (final dos anos 90)• Estilo techno usado em flyers, cartões promocionaise convites para festas e baladas• União da neo-psicodelia, mangás, video-games,imagens ilusórias, fantásticas (fantasias), tipologiafuturista• Revela um fetiche pela tecnologia• O estilo foi adaptado pela indústria da propagandapara atingir o público jovem
  116. 116. • Rave (final dos anos 90)
  117. 117. • Rave (final dos anos 90)
  118. 118. • Kinetics (anos 90)• Gráficos e fontes “em movimento”• Efeitos 3D• Contribuidor: Kyle Cooper Multiplas camadas Rabiscos
  119. 119. • Kinetics (90)
  120. 120. • Fontismo (anos 90)• Softwares de fontes capacitam especialistas eamadores a criarem novas tipologias• Os novos designs de tipologias mudamo visual das publicações• Contribuidores: Elliott Peter
  121. 121. • Fontismo (anos 90)
  122. 122. • 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
  123. 123. • Caos Controlado (anos 90)
  124. 124. • Caos Controlado (anos 90)
  125. 125. • Caos Controlado (anos 90)
  126. 126. • Caos Controlado (anos 90)
  127. 127. • Caos Controlado (anos 90)
  128. 128. LAYOUT  TendênciasSplash Logos / Splash Headers
  129. 129. LAYOUT  TendênciasImagens / Fotos enormes
  130. 130. LAYOUT  TendênciasImagens / Fotos enormes
  131. 131. LAYOUT  TendênciasLayout Rabiscado / Desenhado a mão
  132. 132. LAYOUT  TendênciasLayout Rabiscado / Desenhado a mão
  133. 133. LAYOUT  TendênciasCartaz (Slab)
  134. 134. LAYOUT  TendênciasTipografia
  135. 135. LAYOUT  TendênciasFlat Design
  136. 136. LAYOUT  TendênciasTipografia
  137. 137. LAYOUT  TendênciasOne-Page Layout
  138. 138. LAYOUT  TendênciasPerspectiva Realista
  139. 139. LAYOUT  TendênciasPerspectiva Realista
  140. 140. LAYOUT  TendênciasDesign Intuitivo
  141. 141. LAYOUT  TendênciasModal Boxes
  142. 142. LAYOUT  TendênciasModal Boxes
  143. 143. LAYOUT  TendênciasMinimalismo
  144. 144. LAYOUT  TendênciasEspaço “branco”
  145. 145. LAYOUT  TendênciasMinimalismo
  146. 146. LAYOUT  TendênciasFooter (rodapé) Gigante
  147. 147. LAYOUT  TendênciasFooter (rodapé) Gigante
  148. 148. LAYOUT  TendênciasRetrô
  149. 149. LAYOUT  TendênciasBlocos Introdutórios (Intro Blocks)
  150. 150. LAYOUT  TendênciasLayout de Revista
  151. 151. LAYOUT  Cópia / PlágioMadonna “Hollywood” X Ensaios Guy BourdinStill “Hollywood” Foto Guy BourdinStill “Hollywood” Foto Guy BourdinStill “Hollywood” Foto Guy Bourdin
  152. 152. LAYOUT  Cópia / PlágioFoundstone X Protech
  153. 153. • O que é preciso para se criarum 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...)
  154. 154. “Pensar Visualmente”• Curiosidade• Riquezas e particularidades do mundo• Talento = estímulo + disciplina• Nenhuma solução é definitiva• Ver e transmitir experiência visual
  155. 155. “Pensar Visualmente”
  156. 156. • 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”
  157. 157. “Pensar Visualmente”
  158. 158. “Pensar Visualmente”
  159. 159. “Pensar Visualmente”
  160. 160. “Pensar Visualmente”
  161. 161. “Pensar Visualmente”
  162. 162. “Pensar Visualmente”
  163. 163. “Pensar Visualmente”
  164. 164. “Pensar Visualmente”
  165. 165. “Pensar Visualmente”
  166. 166. “Pensar Visualmente”
  167. 167. Detalhes X Qualidade• Acabamento• Efeito: Estranhamento, incômodo (inexplicável)• Causa 1: + Empolgação / - Refinamento• Causa 2: Prazo• Causa 3: Stress
  168. 168. Detalhes X Qualidade
  169. 169. Detalhes X Qualidade• Solução: SEJA DETALHISTA!
  170. 170. • Resultado de um mau acabamento: Talento desperdiçado Idéia brilhante  Execução falhaDetalhes X Qualidade
  171. 171. 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)
  172. 172. Gestalt
  173. 173. • Organização entre os elementos• Imagem X Fundo• Agrupamento de imagens• Uso de figuras fortesGestalt
  174. 174. Gestalt• Organização entre os elementos
  175. 175. Gestalt• Imagem X Fundo
  176. 176. Gestalt• Agrupamento
  177. 177. Gestalt• Figuras fortes
  178. 178. Gestalt• Figuras fortes
  179. 179. www.2advanced.comGestalt• Figuras fortes
  180. 180. www.cocacolalight.com.brGestalt• Figuras fortes
  181. 181. Princípios do DesignI. Proximidade e Alinhamento;II. Equilíbrio, Proporção e SimetriaIII. Contraste, cores e brancosIV. Ordem, consistência e repetiçãoV. SimplificaçãoVI. LegibilidadeVII. Integração
  182. 182. 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 ignoradoPrincípios do Design
  183. 183. Princípios do DesignI. Proximidade e Alinhamento
  184. 184. Princípios do DesignI. Proximidade e Alinhamento
  185. 185. Princípios do DesignI. Proximidade e Alinhamento
  186. 186. Princípios do DesignI. Proximidade e Alinhamento
  187. 187. Princípios do DesignI. Proximidade e Alinhamento
  188. 188. 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íbrioPrincípios do Design
  189. 189. Princípios do DesignII. Equilíbrio, Proporção e Simetria
  190. 190. Princípios do DesignII. Equilíbrio, Proporção e Simetria
  191. 191. Princípios do DesignII. Equilíbrio, Proporção e Simetria
  192. 192. Princípios do DesignII. Equilíbrio, Proporção e Simetria
  193. 193. 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 = + InteressePrincípios do Design
  194. 194. Princípios do DesignIII. 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
  195. 195. Princípios do DesignIII. Contrastes, Cores e Brancos
  196. 196. Princípios do DesignIII. Contrastes, Cores e Brancos
  197. 197. Princípios do DesignIII. Contrastes, Cores e Brancos
  198. 198. Princípios do DesignIII. Contrastes, Cores e Brancos
  199. 199. 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 funcionamPrincípios do Design
  200. 200. IV. Ordem, Consistência e Repetiçãowww.ag2.com.brPrincípios do Design
  201. 201. Princípios do DesignIV. Ordem, Consistência e Repetiçãohttp://www.guga.com.br/br
  202. 202. 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 more3 famílias de letras, 3 cores, 3 efeitos...Na dúvida, simplifique
  203. 203. Princípios do DesignV. Simplificaçãohttp://www.hyperisland.se
  204. 204. Princípios do DesignV. Simplificaçãohttp://www.shorn.com
  205. 205. VI. Legibilidade Textos podem ser facilmente lidos OK Textos não podem ser facilmente lidos RefaçaPrincípios do Design
  206. 206. Princípios do DesignVI. Legibilidadehttp://www.poscoauto.co.kr/docs/eng/index.jsp
  207. 207. Princípios do DesignVI. Legibilidadehttp://www.poscoauto.co.kr/docs/eng/index.jsp
  208. 208. Princípios do DesignVI. Legibilidadehttp://www.pickled.tv
  209. 209. Princípios do DesignVII. Integração Reunião de todos os conceitos
  210. 210. Princípios do DesignVII. Integração
  211. 211. • O que é preciso para se criar um bomLayout?• 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...)
  212. 212. • Tipos de websites• Institucionais• Produtos• Profissionais / Portfolio• Serviços• Entretenimento• Promocionais (Hotsites)• Educativos• Comunidades• E-commerce• PortaisGrids
  213. 213. • Dividem o espaço visível em áreas• Iguais para todas as páginas• Unificação do campo visual• Não são genéricosGrids
  214. 214. • Reconhecer imagens estáveis / fortesGrids
  215. 215. • Espaços horizontais e verticais / medidasGridshttp://www.driftlab.com.index2.htm
  216. 216. Levantamentocompleto doselementosGrids  Passo 1:
  217. 217. Organize os elementosem grupos temáticosGrids  Passo 2:
  218. 218. Meça a áreatotal e útilGrids  Passo 3:
  219. 219. Divida o espaço emcolunas e linhasGrids  Passo 4:
  220. 220. Avalie os elementos de cadagrupo e determineseus espaçosGrids  Passo 5:
  221. 221. Padronize as dimensõesdo grid, considerandoexceções e desviosGrids  Passo 6:
  222. 222. Varie, crie opções dearrumação dos elementosGrids  Passo 7:
  223. 223. Faça os ajustes finaisGrids  Passo 8:
  224. 224. http://www.thehollywoodblot.com
  225. 225. http://123klan.free.fr/panel_control.html
  226. 226. http://www.036style.com/
  227. 227. http://www.3am.net/
  228. 228. http://www.aleborghe.it/we7/index.asp
  229. 229. http://www.adidas.com
  230. 230. http://www.afterlab.com
  231. 231. http://www.andys.dk
  232. 232. http://www.artofdisplay.com/flash
  233. 233. http://www.colorpeople.com
  234. 234. http://www.designchapel.com
  235. 235. ttp://www.musikkbiblioteket.no
  236. 236. Grid Responsivo
  237. 237. • O que é preciso para se criar um bomLayout?• 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
  238. 238. A InterfaceContato Humano x MáquinaAmbiente gráfico do produto digitalNem todo mundo gosta de usar computadoresFerramenta  simples, direta, agradávelPergunta – Resposta – SaídaAponte / CliqueIntegração
  239. 239. CaracterísticasConsistência navegacional e conceitualInteratividade com a telaFacilitar exploração e leituraUso de signos (ícones / símbolos)Manipulação e descoberta
  240. 240. EVITAR:Adaptação de mídiasConfundir o visitanteLabirintos e becos sem saídaExcesso de texto e fontes pequenasImagens que demoram a carregar
  241. 241. A Interface deve considerar:MobilidadeConexõesInteratividadeLegibilidade / LeituraEstética / ErgonomiaNavegaçãoEstímulos e Emoções
  242. 242. Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D!
  243. 243. Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D
  244. 244. Elementos da InterfaceÍcones e BotõesPrincipal ponto de contatoPráticos e de fácil compreensãoCUIDADO COM 3D
  245. 245. www.ag2.com.br
  246. 246. Elementos da InterfaceEntrada de dados / resposta
  247. 247. Elementos da InterfaceSom, animação e interatividade
  248. 248. Elementos da InterfaceSom, animação e interatividade
  249. 249. Elementos da InterfaceSom, animação e interatividade
  250. 250. Elementos da InterfaceSom, animação e interatividade(O “Ciclo da Paranóia Digital”)IGNORÂNCIAFASCÍNIOAPRENDIZADODOMÍNIOANGÚSTIADECEPÇÃOHÁBITOIDEAL
  251. 251. INTERATIVIDADE = “TEMPERO”INTERATIVIDADE ≠ INVASÃOElementos da InterfaceSom, animação e interatividade
  252. 252. Elementos da InterfaceSom, animação e interatividadeSOMEvitar excessosEvitar repetiçãoDeve agregar valor ao visual
  253. 253. Elementos da InterfaceSom, animação e interatividadeANIMAÇÕES (Layouts em Flash)UsabilidadeExperiência do usuárioPlanejamento estratégicoImpacto da tecnologiaInterface atrativaIlustração + Tecnologia +Interatividade + Movimento + Comunidade
  254. 254. Elementos da InterfaceSom, animação e interatividadeINTERATIVIDADE  InteraçãoInovaçãoRelacionamento (Comunidade)PersonalizaçãoCriatividade
  255. 255. Elementos da InterfaceSom, animação e interatividadeINTERATIVIDADE  InteraçãoREALIDADE AUMENTADA
  256. 256. 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
  257. 257. Elementos da InterfaceSom, animação e interatividade( Games Interativos  Advergames )Mesma identidade da campanha“Timing” do cadastroNão deve banalizar a marcaTecnologia difundidaInterface agradávelSonorização adequada
  258. 258. Car Town: Honda + Facebook
  259. 259. Car Town: Honda + Facebook
  260. 260. Elementos da InterfaceImagem e BackgroundFormatosCaracterísticasFunçõesLegibilidade
  261. 261. Elementos da InterfaceVídeoComplemento da informaçãoComposição do layout
  262. 262. Elementos da InterfaceTextoBoldCAIXA ALTAItálicoS E P A R A D OColoridoSublinhadoAlinhamentos
  263. 263. Elementos da InterfaceCoresDenotaçõ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.
  264. 264. Elementos da InterfaceMapas de Navegação
  265. 265. Elementos da InterfaceMapas de Navegação
  266. 266. Elementos da InterfaceMapas de Navegação
  267. 267. Elementos da InterfaceMapas de Navegação
  268. 268. Elementos da InterfaceMapas de Navegação
  269. 269. Elementos da InterfaceMapas de Navegação

×