Prática de Design - Introducao
Upcoming SlideShare
Loading in...5
×
 

Prática de Design - Introducao

on

  • 1,278 views

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

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

Statistics

Views

Total Views
1,278
Views on SlideShare
1,278
Embed Views
0

Actions

Likes
2
Downloads
49
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Prática de Design - Introducao Prática de Design - Introducao Presentation Transcript

  • 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 Criação; Define limitações; Move o ato criador (desafio).
  • 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
  • • 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
  • • 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
  • 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
  •  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ê?)
  •  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; 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
  • 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á 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
  • 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
  • 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
  • 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í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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Prototipagem
  • Prototipagem
  • O Papel do DesignerDESIGN DE INTERAÇÃODESIGN DE INTERFACEDESIGN DIGITALWEB DESIGNGUI DESIGNDESIGNDESIGN GRÁFICODESIGN INDUSTRIAL
  • 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 Experiência do UsuárioJesse James Garrett
  • 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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;
  • 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
  • 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
  • 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 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
  • 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 VIII Composição IXComposição VImpressão Amarelo-vermelho-azul
  • 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 – “Moulin Rouge”,1891
  • 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, RickGriffin, Stanley Mouse, Victor Moscoso
  • 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 >> Psicodélico
  • 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 Layout (Gestalt)• Definir um template (grid)• Explorar os elementos da interface (cores,grafismos, imagens, texto, background...)
  • 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 as propriedades visuais das fontes• Padrões e formas criados pelas novastecnologias• Camadas de imagens• Uso da fotografia em movimentoNew Wave (anos 70 - 80)
  • 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 jovem• Tecnologia mais presente no dia a dia• Softwares  criação maciça de layouts e tipologias
  • • 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
  • • 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• Contribuidores:Rudy VanderlandsZuzana LicoRevista Emigre (1985 - presente)
  • Revista Emigre (1985 - presente)
  • Revista Emigre (1985 - presente)
  • • Design conceitual + experimental• Tipologias  + funcionais (Legíveis)• Contribuidor: Neville BrodyRevista Fuse (final dos anos 80 - presente)
  • 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 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
  • 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
  • Academia de Arte Cranbrook (80 – 90)
  • • 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
  • • 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)
  • 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 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
  • • 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 de tipologias mudamo visual das publicações• Contribuidores: Elliott Peter
  • • Fontismo (anos 90)
  • • 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
  • • 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 Guy BourdinStill “Hollywood” Foto Guy Bourdin
  • 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 Layout (Gestalt)• Definir um template (grid)• Explorar os elementos da interface (cores,grafismos, imagens, texto, background...)
  • “Pensar Visualmente”• Curiosidade• Riquezas e particularidades do mundo• Talento = estímulo + disciplina• Nenhuma solução é definitiva• Ver e transmitir experiência visual
  • “Pensar Visualmente”
  • • 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”
  • “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• Causa 2: Prazo• Causa 3: Stress
  • 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 que deve ser lido (visto)• Layout: Seqüência (orientar a visão do leitor)
  • 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. Ordem, consistência e repetiçãoV. SimplificaçãoVI. LegibilidadeVII. Integração
  • 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
  • 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ó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
  • 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 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
  • 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
  • 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 Páginas com layouts diferentes não funcionamPrincípios do Design
  • 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 “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
  • 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 Layout (Gestalt)• Definir um template (grid)• Explorar os elementos da interface (cores,grafismos, imagens, texto, background...)
  • • Tipos de websites• Institucionais• Produtos• Profissionais / Portfolio• Serviços• Entretenimento• Promocionais (Hotsites)• Educativos• Comunidades• E-commerce• PortaisGrids
  • • 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 Layout (Gestalt)• Definir um template (grid)• Explorar os elementos da interface (cores, grafismos,imagens, texto, background...) e interação
  • 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
  • CaracterísticasConsistência navegacional e conceitualInteratividade com a telaFacilitar exploração e leituraUso de signos (ícones / símbolos)Manipulação e descoberta
  • EVITAR:Adaptação de mídiasConfundir o visitanteLabirintos e becos sem saídaExcesso de texto e fontes pequenasImagens que demoram a carregar
  • A Interface deve considerar:MobilidadeConexõesInteratividadeLegibilidade / LeituraEstética / ErgonomiaNavegaçãoEstímulos e Emoções
  • 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ÚSTIADECEPÇÃOHÁBITOIDEAL
  • 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árioPlanejamento estratégicoImpacto da tecnologiaInterface atrativaIlustração + Tecnologia +Interatividade + Movimento + Comunidade
  • Elementos da InterfaceSom, animação e interatividadeINTERATIVIDADE  InteraçãoInovaçãoRelacionamento (Comunidade)PersonalizaçãoCriatividade
  • 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âneaRecompensaMaior visibilidadeCadastrosPúblicos variadosDivulgação viralMaior retornoComunicação amigávelCOMUNIDADE
  • 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
  • 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, 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.
  • 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