Prática de Design - Introducao

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).


• 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


• 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


www.ford.com.br

Objetivos



Público

www.barbie.com.br


Público

www.cocacolazero.com.br


Público


Público


Formato

www.cocacolalight.com.br


Formato

uno.fiat.com.br


Formato = Design Responsivo


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çã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


• 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



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”


Rafe (rough)


Relações entre os espaços


Design Estrutural Conceito de Navegação

(Wireframe)


Design Estrutural Conceito de Navegação

(Wireframe)


Layout


Layout

Arquitetura de Informação + Design UsabilidadeDesign centrado no Usuário UX Design

Responsivo



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


• 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.



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



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.



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.



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.



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



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.



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.



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.



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.


• 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;


• 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


• 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


• Mihaly Csikszentmihalyi (Dr. C) – FLOW


• 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

http://www.fortesvilaca.com.br/artista/beatriz-milhazes/popup/foto-7.html

http://www.fortesvilaca.com.br/artista/beatriz-milhazes/popup/foto-2.html

LAYOUT Referências / Inspiração / Influências História

Joules Cherret – “Bal du Moulin Rouge”, 1889

Toulouse-Lautrec – “Moulin Rouge”, 1891


Bauhaus – 1919 -1933


Bauhaus – 1919 -1933

LAYOUT Referências / Inspiração / InfluênciasHistória >> Psicodélico

• Contribuidores: Wes Wilson, Alphonse Mucha, Rick Griffin, Stanley Mouse, Victor Moscoso


Wes Wilson – “Concert Flyer”, 1967 Moctezuma – “James Brown”, 2007


Website Havaianas - 2008


Website Havaianas - 2008


• 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





• 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)



• 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


• 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





• 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)



• 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)



• 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



• 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






LAYOUT TendênciasSplash Logos / Splash Headers

http://ma.tt/

LAYOUT Tendências Imagens / Fotos enormes

http://www.spoongraphics.co.uk/

LAYOUT Tendências Imagens / Fotos enormes

http://digitalmash.com/

LAYOUT Tendências Layout Rabiscado / Desenhado a mão

http://www.biola.edu/undergrad/

LAYOUT Tendências Layout Rabiscado / Desenhado a mão

http://www.christiansparrow.com/

LAYOUT Tendências Cartaz (Slab)

http://www.edgepointchurch.com/

LAYOUT Tendências Tipografia

LAYOUT Tendências Flat Design

http://www.elysiumburns.com/

LAYOUT Tendências Tipografia

LAYOUT Tendências One-Page Layout

http://www.zachklein.com/

LAYOUT Tendências Perspectiva Realista

http://downsign.deviantart.com/art/Book-Store-136542851

LAYOUT Tendências Perspectiva Realista

http://kpucu.deviantart.com/art/Pastorant-Restaurant-71565329

LAYOUT Tendências Design Intuitivo

http://www.crowleywebb.com/

LAYOUT Tendências Modal Boxes

http://digg.com/

LAYOUT Tendências Modal Boxes

LAYOUT Tendências Minimalismo

http://www.kylestanding.com/

LAYOUT Tendências Espaço “branco”

http://www.pixelcraft.ie/

LAYOUT Tendências Minimalismo

http://www.kinoz.com/

LAYOUT Tendências Footer (rodapé) Gigante

http://www.duirwaigh.com/

LAYOUT Tendências Footer (rodapé) Gigante

http://oldloft.com/

LAYOUT Tendências Retrô

http://www.level2d.com/

LAYOUT Tendências Blocos Introdutórios (Intro Blocks)

http://www.45royale.com/

LAYOUT Tendências Layout de Revista

http://www.bmivoyager.com/

LAYOUT Cópia / PlágioMadonna “Hollywood” X Ensaios Guy Bourdin

Still “Hollywood” Foto Guy Bourdin



LAYOUT Cópia / PlágioFoundstone X Protech






“Pensar Visualmente”

• Curiosidade

• Riquezas e particularidades do mundo

• Talento = estímulo + disciplina

• Nenhuma solução é definitiva

• Ver e transmitir experiência visual


• 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












Detalhes X Qualidade

• Acabamento

• Efeito: Estranhamento, incômodo (inexplicável)

• Causa 1: + Empolgação / - Refinamento

• Causa 2: Prazo

• Causa 3: Stress



• Solução: SEJA DETALHISTA!

• Resultado de um mau acabamento:

Talento desperdiçado

Idéia brilhante Execução falha


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













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










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




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









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



www.ag2.com.br




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”


Less is more3 famílias de letras, 3 cores, 3 efeitos...Na dúvida, simplifique


V. Simplificação

http://www.hyperisland.se


V. Simplificação

http://www.shorn.com

VI. Legibilidade

Textos podem ser facilmente lidos OK

Textos não podem ser facilmente lidos Refaça



VI. Legibilidade

http://www.poscoauto.co.kr/docs/eng/index.jsp


VI. Legibilidade

http://www.poscoauto.co.kr/docs/eng/index.jsp


VI. Legibilidade

http://www.pickled.tv


VII. Integração

Reunião de todos os conceitos


VII. Integração






• 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





• 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!




CUIDADO COM 3D




CUIDADO COM 3D

www.ag2.com.br

Elementos da InterfaceEntrada de dados / resposta

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



SOM

Evitar excessos

Evitar repetição

Deve agregar valor ao visual


ANIMAÇÕES (Layouts em Flash)

UsabilidadeExperiência do usuárioPlanejamento estratégicoImpacto da tecnologiaInterface atrativa

Ilustração + Tecnologia + Interatividade + Movimento + Comunidade


INTERATIVIDADE Interação

Inovação

Relacionamento (Comunidade)

Personalização

Criatividade


INTERATIVIDADE InteraçãoREALIDADE AUMENTADA


( Games Interativos )

Sensação de controleSugestão e resposta simultâneaRecompensaMaior visibilidadeCadastrosPúblicos variadosDivulgação viralMaior retornoComunicação amigávelCOMUNIDADE


( Games Interativos Advergames )

Mesma identidade da campanha

“Timing” do cadastro

Não deve banalizar a marca

Tecnologia difundida

Interface agradável

Sonorização adequada

Car Town: Honda + Facebook

http://www.facebook.com/photo.php?pid=4985049&id=256799621935

Car Town: Honda + Facebook

http://www.facebook.com/CarTown

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




