prática de design - introducao
Post on 19-May-2015
1.154 Views
Preview:
DESCRIPTION
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 do trabalho a ser desenvolvido
• O que deve ser feito Levantar a missão, visão, valores da empresa Levantar os públicos alvo do site e priorizá-los. Entender as características, diretrizes de linguagem ou de
abordagem de cada público alvo. Levantar a proposta de valor do site Levantar os objetivos do projeto e prioriza-los Levantar todos os conteúdos e serviços do site, priorizá-los e
verificar como eles atendem aos objetivos do site Levantar requisitos que possam limitar a usabilidade Entender o funcionamento de sistemas legados
• 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ção
INOVAÇÃO
Público (Para quem?)
Conteúdo (O que será mostrado?)
Formato (Como?)
Resposta (O que se espera como retorno?)
o Cronograma / Investimento / ROI
Desenvolvimento do conceito criativo
• Definir / Redefinir: Objetivos (Para quê?)
Objetivos
Desenvolvimento do conceito criativo
www.ford.com.br
Objetivos
Desenvolvimento do conceito criativo
Desenvolvimento do conceito criativo
Público
www.barbie.com.br
Desenvolvimento do conceito criativo
Público
www.cocacolazero.com.br
Desenvolvimento do conceito criativo
Público
Desenvolvimento do conceito criativo
Público
Desenvolvimento do conceito criativo
Formato
www.cocacolalight.com.br
Desenvolvimento do conceito criativo
Formato
uno.fiat.com.br
Desenvolvimento do conceito criativo
Formato = Design Responsivo
Desenvolvimento do conceito criativo
Resposta
www.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 para
transmiti-la Essa informação deve se relacionar com algo que seja
previamente 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 (maiormenor, carobarato, 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 o estilo de vida que ele gostaria de ter?6) Porque o personagem comprou o produto?7) O personagem adquiriu este produto por status?8) O personagem acredita que faz parte de um grupo social específico
por possuir o produto?9) O personagem usa o produto?10)O personagem acredita que o produto funciona melhor do que os
similares?11)O personagem gosta da cor do produto?12)O personagem gosta do estilo do produto?13)O produto é esteticamente prazeroso para o personagem?14)Onde e como o personagem guarda o produto?15)O personagem se sente satisfeito ao utilizar o produto?
Personas
Regina, auxiliar de projeto de 40 anos, trabalha na cooperativa de tecnologia da informação Tecnocoop Sistemas. Mora na Tijuca, zona norte do Rio de Janeiro, é casada com Ricardo e tem dois filhos: Pedro, com 10 anos, e Mariana, com 7 anos.
Formada em administração, Regina está na cooperativa há cinco anos, sempre como auxiliar de coordenação de projeto.
Personas
O cenário é uma história baseada em pessoas e nas suas
atividades.
Os itens básicos de um cenário são:
1. Configuração (contexto que explica ou motiva os objetivos, ações e reações do atores);
2. Atores (pessoas que interagem com o produto ou com o contexto);
3. Tarefas e Objetivos (atua na situação que motiva os atores);
4. Planejamento (atividade mental convertida responsável pela comportamento dos atores);
5. Avaliação (interpretação de uma situação apresentada);
6. Ações (comportamentos que são observados);
7. Eventos (ações e reações produzidas pelo produto que podem não ser aparentes para os atores, embora sejam relevantes para o cenério).
Cenários
Exemplo 1:
Jane, uma estudante de biologia, precisa criar uma homapage para o seu grupo de pesquisa. Esta página tem como objetivo encorajar os participantes a participarem do seu estudo. Considerando que a pesquisa de campo ocorrerá em uma montanha, ela pensou primeiramente em utilizar uma foto relacionada com a natureza.
Em seguida, os colaboradores da pesquisa de Jane preencheram os campos no EVIDII, associando as imagens com as suas impressões. Portanto, em uma nova fase a estudante poderá utilizar o aplicativo para buscar as imagens classificadas como “natural”.
4.1. Jane usa o “Word View”no ambiente “Image-based space” para saber quais imagens foram classificadas como “natural” e por quem.
4.2. O sistema mostra que “Jane” e “Jack”, pesquisador chefe do estudo, selecionaram a mesma imagem como “natural”.
Cenários
Exemplo 1:
4.3 Ela fica interessada em saber o que “Jack” pensa sobre as outras imagens, logo Jane seleciona o “Person View” do “Image-based space” para “Jack”(Figura 3 - (c)).
4.4 O EVIDII exibe as palavras que expressam sentimentos e as imagens associadas por Jack. Na interface ela descobre uma imagem de um rio com uma encosta verde sendo classificada como “refreshing” perto daquela imagem que fora classificada como “natural”. Isto lembra a estudante que a palavra “refreshing” está melhor relacinada com o conceito desejado.
4.5. Ela procura no “Person View” no “NCDR-Word Space” quais outras imagens “Jack” considerou como sendo “refreshing” ”(Figura 4 - (b)).
4.6. Das imagens selecionadas por “Jack” ela gostou do “pasto verde com um ceú azul”.
Cenários
Exemplo 1:
4.7. Em seguida ela muda para o “Image View” no “NCDR - Word Space” para saber o que os outros colaboradores pensam desta imagem (Figura - 4 (c)). Nesta interface ela descobre que Bob, seu orientar, classificou esta imagem como “natural”.
4.8. Jane resolve utilizar a imagem do “pasto verde com um ceú azul” em na homepage.
Cenários
Exemplo 2:
Regina, auxiliar de projeto de 40 anos, trabalha na cooperativa de tecnologia da informação Tecnocoop Sistemas. Mora na Tijuca, zona norte do Rio de Janeiro, é casada com Ricardo e tem dois filhos: Pedro, com 10 anos, e Mariana, com 7 anos.
Formada em administração, Regina está na cooperativa há cinco anos, sempre como auxiliar de coordenação de projeto. Como seu coordenador passa mais da metade do dia fora da empresa, ela fica responsável pelos contatos com clientes e cooperados dos projetos e busca novas oportunidades de negócio na Internet.
Na mesma sala em que trabalha, ficam Laura, que exerce a mesma função, e Tiago, responsável por pagar contas em banco e outras tarefas na rua. O ambiente é descontraído, todos, especialmente Regina, são comunicativos e adoram conversar sobre assuntos como o último capítulo da novela das 8 ou fofocas da empresa.
Cenários
Exemplo 2 (continuação):
Logo que chegou ao trabalho, Regina ligou seu computador, entrou com seu login e senha na Intranet, e verificou suas tarefas. Seu chefe pediu para encontrar dois profissionais programadores de Java para atender a um cliente. Fez uma busca no cadastro de cooperados usando as palavra-chaves “Java” e “Rio de Janeiro” e o filtro “não-alocados”. Na lista de 2 resultados encontrados, marcou todos e clicou em “enviar mensagem”. O programa de webmail abriu instantaneamente e Regina escreveu a mensagem com a proposta de trabalho, solicitando também currículo atualizado.
Após o almoço, Regina tornou a abrir seu webmail para verificar se havia alguma resposta. Três pessoas responderam a proposta. Ela ligou para o cliente para marcar as entrevistas com os candidatos e enviou mensagem para eles para confirmar a data. Meia hora mais tarde os três deram resposta afirmativa, confirmando a entrevista para a sexta-feira seguinte, ás 10:00h da manhã. Regina saiu do webmail e clicou em “adicionar evento” no módulo da agenda, dentro da Intranet.
Cenários
Exemplo 2 (continuação):
Logo após 15:00h, Regina recebeu outro pedido de seu chefe: fazer a assinatura da revista Linux Magazine. Entrou no site da revista, preencheu o cadastro e imprimiu o boleto bancário. Voltou à Intranet e, no módulo de documentos, clicou em “Autorização de Lançamento”. Preencheu o documento marcando o item “assinatura”, o nome do fornecedor e seus dados bancários, projeto, data de solicitação e mandou imprimir. Quinze minutos depois, Paulo Almeida, seu coordenador, chegou na sala, e Regina entregou a “AL” para ele assinar. Pediu para Tiago deixá-la, junto com o boleto, no departamento Financeiro.
Paulo perguntou para Regina sobre os cooperados e a entrevista. Depois que Regina respondeu, ele lembrou que neste mês será o aniversário da Joana, do RH, e perguntou qual o dia. Ela abriu novamente a Intranet para verificar a lista de aniversariantes do mês e exclamou: “Ela faz aniversário dia 16. Vou perguntar pra ela se terá festinha!”.
Cenários
Prototipagem
Prototipagem
O Papel do Designer
DESIGN DE INTERAÇÃO
DESIGN DE INTERFACE
DESIGN DIGITAL
WEB DESIGN
GUI DESIGN
DESIGN
DESIGN GRÁFICO
DESIGN 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 Design
Responsivo
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ário sobre o que ele está fazendo.
10 segundos é o limite para manter a atenção do usuá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 do usuário no mundo real e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário, através do uso de metáforas
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
3. Controle e Liberdade do UsuárioO usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
4. Consistência e padronizações Um mesmo comando ou ação deve ter sempre o
mesmo efeito. A mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
5. Prevenção de erros
Conhecer as situações que mais provocam erros e modificar a interface ou programação para que estes erros não ocorram.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
6. Reconhecimento X Memorização
O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
7. Flexibilidade e Eficiência no Uso
Atalhos para usuários experientes executarem as operações mais rapidamente.
Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto.
Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
8. Simplificação da Estética e do Design
Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos.
A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
9. Amigabilidade nas Mensagens de Erro
Linguagem clara e sem códigos.
Devem ajudar o usuário a entender e resolver o problema.
Não devem culpar ou intimidar o usuário.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Jacob Nielsen – Projetando Websites• “10 Heurísticas de Nielsen”
10. Ajuda e documentação
O ideal é que um sistema seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação.
Se for necessária a ajuda deve estar facilmente acessível on-line.
Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário
• Mihaly Csikszentmihalyi (Dr. C) – FLOW IMERSÃO Pessoas reunidas potencializam o Flow Objetivos claros Concentração em um limitado campo de atenção Feedback direto e imediato Equilíbiro entre habilidade e desafio - a atividade não deve
ser nem tão fácil nem tão difícil; Senso de controle sobre a situação ou atividade; Motivação intrínseca - a atividade é muito recompensadora,
assim como a efetividade da ação;
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ências Experiências pessoais / Observação
LAYOUT Referências / Inspiração / Influências Artes e Design Ex: Wassily Kandinsky
Improvisação XXXI
Composição VIComposição VIII Composição IX
Composição V
Impressão Amarelo-vermelho-azul
LAYOUT Referências / Inspiração / Influências Artes e DesignEx: Beatriz Milhazes
Mariposa Beleza Pura
LAYOUT Referências / Inspiração / Influências História
Joules Cherret – “Bal du Moulin Rouge”, 1889
Toulouse-Lautrec – “Moulin Rouge”, 1891
LAYOUT Referências / Inspiração / Influências História
Bauhaus – 1919 -1933
LAYOUT Referências / Inspiração / Influências História
Bauhaus – 1919 -1933
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
• Contribuidores: Wes Wilson, Alphonse Mucha, Rick Griffin, Stanley Mouse, Victor Moscoso
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
Wes Wilson – “Concert Flyer”, 1967 Moctezuma – “James Brown”, 2007
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
Website Havaianas - 2008
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
Website Havaianas - 2008
LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
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 Brody
Punk (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 novas
tecnologias• Camadas de imagens• Uso da fotografia em movimento
New Wave (anos 70 - 80)
New Wave (anos 70 - 80)
• Contribuidor: Ettore Sottsass
Memphis (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 Vanderlands
Zuzana Lico
Revista Emigre (1985 - presente)
Revista Emigre (1985 - presente)
Revista Emigre (1985 - presente)
• Design conceitual + experimental
• Tipologias + funcionais (Legíveis)
• Contribuidor: Neville Brody
Revista 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ção visual, baseada na subversão dos padrões e códigos estabelecidos
• Visual / Verbal
• Layouts permitem múltiplas interpretações
precisam ser decifrados
apresentam níveis de transparência, revelando a estrutura interna do design
Academia de Arte Cranbrook (80 – 90)
• Contribuidora: Katherine McCoy
Acreditava em mudanças progressivas e não em modelos
permanentes
Mudar, não apenas por mudar, mas sim, para o avanço da
cultura do design
Academia de Arte Cranbrook (80 – 90)
• Gráficos Radicais (início dos anos 90)
• Convida controversos e aclamados a participarem de debates na comunidade dos designers
• Contesta aqueles que acreditam que a função do design é apenas facilitar o entendimento da mensagem
• Trabalhos requerem envolvimento do observador para serem compreendidos
• Rejeitam que todos devem entender o design da mesma forma
• Cultura corporativa incorpora o design radical
• Sucesso o torna menos radical
• Contribuidores: David Carson
Rejeita as noções convencionais de sintaxe visual, hierarquia visual e representações visuais
Acredita que não existe leitura “ilegível” em comunicação
Vai na direção contrária, usando sobreposições, camadas, cortes não convencionais
“The End of Print” – refere-se ao seu trabalho como tendo um visual mais parecido com o de vídeo
Gráficos Radicais (início dos anos 90)
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 promocionais e convites para festas e baladas
• União da neo-psicodelia, mangás, video-games, imagens ilusórias, fantásticas (fantasias), tipologia futurista
• Revela um fetiche pela tecnologia
• O estilo foi adaptado pela indústria da propaganda para atingir o público jovem
• 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 e amadores a criarem novas tipologias
• Os novos designs de tipologias mudam o 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ências Tipografia
LAYOUT Tendências Tipografia
LAYOUT Tendências Perspectiva Realista
LAYOUT Tendências Modal Boxes
LAYOUT Cópia / PlágioMadonna “Hollywood” X Ensaios Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
Still “Hollywood” Foto Guy Bourdin
LAYOUT Cópia / PlágioFoundstone X Protech
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
“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 falha
Detalhes 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 fortes
Gestalt
Gestalt
• Organização entre os elementos
Gestalt
• Imagem X Fundo
Gestalt
• Agrupamento
Gestalt
• Figuras fortes
Gestalt
• Figuras fortes
www.2advanced.com
Gestalt
• Figuras fortes
www.cocacolalight.com.br
Gestalt
• Figuras fortes
Princípios do Design
I. Proximidade e Alinhamento;
II. Equilíbrio, Proporção e Simetria
III. Contraste, cores e brancos
IV. Ordem, consistência e repetição
V. Simplificação
VI. Legibilidade
VII. Integração
I. Proximidade e Alinhamento
Reunir elementos que têm algo em comum
Agrupar e alinhar
Elementos se relacionam e ganham sentido Evitando o desconforto do leitor
Relações entre os grupos = hierarquia Facilita o acesso à informação
Alinhamento DEVE SER repetido em todas as páginas PODE SER modificado com consciência e coragem NÃO PODE SER ignorado
Princípios do Design
Princípios do Design
I. Proximidade e Alinhamento
Princípios do Design
I. Proximidade e Alinhamento
Princípios do Design
I. Proximidade e Alinhamento
Princípios do Design
I. Proximidade e Alinhamento
Princípios do Design
I. 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íbrio
Princípios do Design
Princípios do Design
II. Equilíbrio, Proporção e Simetria
Princípios do Design
II. Equilíbrio, Proporção e Simetria
Princípios do Design
II. Equilíbrio, Proporção e Simetria
Princípios do Design
II. 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 = + Interesse
Princípios do Design
Princípios do Design
III. Contrastes, Cores e Brancos
Espaços em branco
NÃO SÃO áreas perdidas NÃO DEVEM necessariamente ser preenchidas SÃO elementos importantes para o design
Entrelinhas , Colunas, Margens Equilibram espaços Reforçam unidade de grupos Harmonizam áreas Aumentam o contraste DÃO FORMA AO DESIGN
Princípios do Design
III. Contrastes, Cores e Brancos
Princípios do Design
III. Contrastes, Cores e Brancos
Princípios do Design
III. Contrastes, Cores e Brancos
Princípios do Design
III. 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 funcionam
Princípios do Design
IV. Ordem, Consistência e Repetição
www.ag2.com.br
Princípios do Design
Princípios do Design
IV. Ordem, Consistência e Repetição
http://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 more3 famílias de letras, 3 cores, 3 efeitos...Na dúvida, simplifique
Princípios do Design
V. Simplificação
http://www.hyperisland.se
Princípios do Design
V. Simplificação
http://www.shorn.com
VI. Legibilidade
Textos podem ser facilmente lidos OK
Textos não podem ser facilmente lidos Refaça
Princípios do Design
Princípios do Design
VI. Legibilidade
http://www.poscoauto.co.kr/docs/eng/index.jsp
Princípios do Design
VI. Legibilidade
http://www.poscoauto.co.kr/docs/eng/index.jsp
Princípios do Design
VI. Legibilidade
http://www.pickled.tv
Princípios do Design
VII. Integração
Reunião de todos os conceitos
Princípios do Design
VII. Integração
• O que é preciso para se criar um bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...)
• Tipos de websites
• Institucionais• Produtos• Profissionais / Portfolio• Serviços• Entretenimento• Promocionais (Hotsites)• Educativos• Comunidades• E-commerce• Portais
Grids
• Dividem o espaço visível em áreas
• Iguais para todas as páginas
• Unificação do campo visual
• Não são genéricos
Grids
• Reconhecer imagens estáveis / fortes
Grids
• Espaços horizontais e verticais / medidas
Grids
http://www.driftlab.com.index2.htm
Levantamentocompleto dos
elementos
Grids Passo 1:
Organize os elementosem grupos temáticos
Grids Passo 2:
Meça a áreatotal e útil
Grids Passo 3:
Divida o espaço emcolunas e linhas
Grids Passo 4:
Avalie os elementos de cadagrupo e determine
seus espaços
Grids Passo 5:
Padronize as dimensõesdo grid, considerando
exceções e desvios
Grids Passo 6:
Varie, crie opções dearrumação dos elementos
Grids Passo 7:
Faça os ajustes finais
Grids 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 bom Layout?
• Referências culturais (artísticas e pessoais)
• Princípios do Design e do Layout (Gestalt)
• Definir um template (grid)
• Explorar os elementos da interface (cores, grafismos, imagens, texto, background...) e interação
A Interface
Contato Humano x Máquina
Ambiente gráfico do produto digital
Nem todo mundo gosta de usar computadores
Ferramenta simples, direta, agradável
Pergunta – Resposta – Saída
Aponte / Clique
Integração
Características
Consistência navegacional e conceitual
Interatividade com a tela
Facilitar exploração e leitura
Uso de signos (ícones / símbolos)
Manipulação e descoberta
EVITAR:
Adaptação de mídias
Confundir o visitante
Labirintos e becos sem saída
Excesso de texto e fontes pequenas
Imagens que demoram a carregar
A Interface deve considerar:
Mobilidade
Conexões
Interatividade
Legibilidade / Leitura
Estética / Ergonomia
Navegação
Estímulos e Emoções
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO COM 3D!
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO COM 3D
Elementos da InterfaceÍcones e Botões
Principal ponto de contato
Práticos e de fácil compreensão
CUIDADO 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ÂNCIA
FASCÍNIO
APRENDIZADO
DOMÍNIO
ANGÚSTIA
DECEPÇÃO
HÁBITO
IDEAL
INTERATIVIDADE = “TEMPERO”INTERATIVIDADE ≠ INVASÃO
Elementos da InterfaceSom, animação e interatividade
Elementos da InterfaceSom, animação e interatividade
SOM
Evitar excessos
Evitar repetição
Deve agregar valor ao visual
Elementos da InterfaceSom, animação e interatividade
ANIMAÇÕES (Layouts em Flash)
UsabilidadeExperiência do usuárioPlanejamento estratégicoImpacto da tecnologiaInterface atrativa
Ilustração + Tecnologia + Interatividade + Movimento + Comunidade
Elementos da InterfaceSom, animação e interatividade
INTERATIVIDADE Interação
Inovação
Relacionamento (Comunidade)
Personalização
Criatividade
Elementos da InterfaceSom, animação e interatividade
INTERATIVIDADE 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 cadastro
Não deve banalizar a marca
Tecnologia difundida
Interface agradável
Sonorização adequada
Elementos da InterfaceImagem e Background
Formatos
Características
Funções
Legibilidade
Elementos da InterfaceVídeo
Complemento da informação
Composição do layout
Elementos da InterfaceTexto
BoldCAIXA ALTAItálicoS E P A R A D OColoridoSublinhado
Alinhamentos
Elementos da InterfaceCores
Denotações comuns no ocidente:
Vermelho: pare, perigo, quente, fogo; Amarelo: cuidado, devagar, teste;Verde: ande, OK, livre, vegetação, segurança; Azul: frio, água, calmo, céu;Cores quentes: ação, resposta requeridaCores frias: status, informação de fundo, distância; Cinzas, branco e azul: neutralidade.
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
top related