SlideShare uma empresa Scribd logo
Patrícia Mallmann Garcia Unisinos 2008
[object Object],[object Object],[object Object],[object Object]
1.  Processo para desenvolvimento de sites A.  Sites de experiência  B.  Portais de conteúdo C.  Presença de empresas na web D.  Aplicações
1.  Processo para desenvolvimento de sites A.   Sites de experiência  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1.  Processo para desenvolvimento de sites A.   Sites de experiência
1.  Processo para desenvolvimento de sites B.   Portais de conteúdo  ,[object Object],[object Object],[object Object],[object Object],[object Object]
1.  Processo para desenvolvimento de sites B.   Portais de conteúdo
1.  Processo para desenvolvimento de sites C.   Presença de empresas na web  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1.  Processo para desenvolvimento de sites C.   Presença de empresas na web
1.  Processo para desenvolvimento de sites D.   Aplicações Aplicação Web é o termo utilizado para designar, de forma geral, sistemas de informática projetados para utilização através de um navegador, na internet ou em redes privadas ( Intranet ). Trata-se de um conjunto de programas que é executado em um servidor de HTTP (Web Host). O desenvolvimento da tecnologia web está relacionado, entre outros fatores, à necessidade de simplificar a atualização e manutenção mantendo o código-fonte em um mesmo local, de onde ele é acessado pelos diferentes usuários. Podemos definir uma aplicação Web como uma aplicação de software que utiliza a Web, através de um browser como ambiente de execução. (Wikipedia)
1.  Processo para desenvolvimento de sites D.   Aplicações
1.  Processo para desenvolvimento de sites A.   Sites de experiência  Comercial  >  gerente de serviço  >  planejamento criativo  +  diretor de arte  +  redação  >  produção  >  codificação  >  programação  =   entrega B.   Portais de conteúdo  Produto  >  SEO + acessibilidade  >  design de interface  >  design gráfico  >  testes de usabilidade  >  codificação  >  programação  >  homologação  =   entrega C.   Presença de empresas na web Comercial  >  analista de negócio  >  gerente de projeto  >  design de interface  >  design gráfico  >  redação  >  codificação  >  programação  =   entrega D.   Aplicações Produto  >  design de interface  >  design gráfico  >  testes de usuabilidade  >  analista de sistemas  >  programação =  entrega
1.  Processo para desenvolvimento de sites Etapas de aprovação do projeto
1.  Processo para desenvolvimento de sites 1ª entrega: Sitemap  É elaborado pelo produto, analista de negócio ou gerente de projeto. A. Capa principal C. Vídeos D.3 Blogs I. RSS C.1 Vídeos C.2 Áudios C.3 Fotos D. Blogs (lista) A.1 Capa Time A.2 Capa  Campeonato Link Dúvidas freqüentes B.1 Lista B.2 Notícia  Aberta Link Fale Conosco Link Anuncie Atemdimento Destaque Login Legenda Seção de 1º nível Home Sub-seções Seção externa Link Estrutural Skin Seção totalmente restrita RSS Grupo de  crosslinks A. Esportes E.X. Página  do Blog B. Notícias
2º entrega: Wireframe  É elaborado pelo designer de interface (arquiteto de informação). 1.  Processo para desenvolvimento de sites
O que é wireframe? O wireframe pode ser considerado o esqueleto de uma interface. Através dele é possível definir posicionamento, navegação, agrupamento, ordem, hierarquia e peso de conteúdos, ou seja, ele responde pela organização dos elementos de interface sem trabalhar a apresentação visual. Seus componentes devem ser realizados de acordo com seu grau de relevância e criticidade de acesso, o modo de exibição e interação dessa informação com o usuário. Validar organização dos elementos na interface: posicionamento, navegação, agrupamento, ordem, hierarquia e peso; •  Relevância entre áreas e componentes; •  Modo de interação e exibição do conteúdo ao usuário. 1.  Processo para desenvolvimento de sites
O que faz um designer/projetista de interface? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],1.  Processo para desenvolvimento de sites
3° entrega: Layout É elaborado pelo design gráfico. 1.  Processo para desenvolvimento de sites
4° entrega: Codificação e produção É entregue pelo htmller (web standards), flasher, 3D designer e outros. 5° entrega: Programação É entregue pelo programador já com todas interações e pronto para publicação. Esse processo pode ser bem complexo, envolvendo analista de sistemas e diversas tecnologias. 1.  Processo para desenvolvimento de sites
SEO 1.  Processo para desenvolvimento de sites
O que é SEO? Search Engine Optimization, é a otimização de Sites, refere-se ao conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca. As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras-chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes concluem a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo). www.google.com.br/webmasters 1.  Processo para desenvolvimento de sites
[object Object],[object Object],[object Object],[object Object]
2.  Dicas de criação ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A.   proximidade  de dois ou mais elementos de uma composição gráfica tende a determinar a unidade entre eles. Quanto maior for essa proximidade, mais forte parece ser a relação que os une. O propósito básico da proximidade é, de acordo com Robin Williams, no livro  Design para quem não é designer , o de organizar. O simples agrupamento de elementos cria, automaticamente, uma organização.  No livro  Gestalt do objeto , João Gomes Filho lembra que a proximidade não aparece apenas na distância entre dois ou mais elementos, mas também nas relações de forma, cor, tamanho, textura, brilho, peso e direção.  Princípios básicos do design gráfico 2.  Dicas de criação
B.   Robin Williams, no livro  Design para quem não é designer , disse que “nada deve ser arbitrariamente colocado em uma página” e que “cada item deve ter uma conexão visual com algo na página”. Uma das formas mais simples e eficazes de prover essa conexão visual entre os elementos é através do  alinhamento . O alinhamento, juntamente com a proximidade, ajuda a criar uma organização visual dos elementos, além de estabelecer relações entre eles. Os alinhamentos mais comuns são centralizado (horizontal ou verticalmente) e pelas bordas (pela direita, pela esquerda, por cima ou por baixo). O alinhamento também pode ser feito por aspectos marcantes dentro dos elementos, como pontos luminosos que contrastem com fundo escuros. Textos podem ter ainda o alinhamento justificado (pela esquerda e pela direita simultaneamente). Williams sugere evitar o alinhamento central, pois considera as outras formas mais atraentes. Ela também recomenda usar, sempre que possível, apenas um alinhamento por página. Princípios básicos do design gráfico 2.  Dicas de criação
C.   A  repetição  é o terceiro princípio básico do design gráfico. Essa repetição, de acordo com Robin Williams, no livro  Design para quem não é designer , pode ser de elementos, como uma linha, um desenho ou uma logomarca, de um estilo, como um tamanho ou tipo de letra, ou ainda de relações entre os elementos, como a disposição, peso e o tamanho deles. Deve apenas ser a repetição de algo que o leitor reconheça visualmente. João Gomes Filho, no livro  Gestalt do objeto , afirma que a semelhança (gerada pela repetição) cria um estímulo de agrupamento, de unidade dos objetos. Williams sugere que a repetição deve ser marcante para que seja percebida, mas ela também recomenda evitar o excesso que pode tornar a composição enfadonha, ao invés de interessante. Princípios básicos do design gráfico 2.  Dicas de criação
D.   De acordo com João Gomes Filho, no livro  Gestalt do objeto , a capacidade de percepção de alguns elementos é aumentada através da segregação deles. Essa segregação, que permite a separação, identificação, evidenciação ou destaque, é feita através do  contraste . Contraste, para Robin Williams, no livro  Design para quem não é designer  é qualquer forma de diferenciação, desde que suficiente para eliminar qualquer similaridade. Para a autora, uma diferenciação pequena, tímida, não leva ao contraste, mas ao conflito. O contraste entre dois elementos pode ser feito de várias formas: tamanho, espessura, cor, estilo, ângulo, espaçamento, textura, brilho, volume, sombra, etc. Além disso, pode ser aplicado a um ou mais elementos. Por exemplo, uma foto de uma propaganda de carro deve ter um alto contraste do carro com os elementos de fundo, mas um baixo contraste entre os elementos de fundo, pois isso diminuiria a evidência do próprio carro. Williams lembra que o contraste tem dois objetivos: criar interesse sobre o material, através de uma estética mais agradável, e auxiliar na organização das informações, facilitando que o usuário perceba instantaneamente sua estrutura. Princípios básicos do design gráfico 2.  Dicas de criação
E.   O  fechamento  é mais um princípio básico do design gráfico. Ele ajuda, de acordo com João Gomes Filho no livro  Gestalt do objeto  a formar as unidades, a partir da percepção visual do usuário.  Princípios básicos do design gráfico 2.  Dicas de criação
F.   O último princípio básico do design gráfico tratado aqui é a  continuidade . Por continuidade, João Gomes Filho, no livro  Gestalt do objeto  “entende a impressão visual de como as partes se sucedem através da organização perceptiva da forma de modo coerente, sem quebras ou interrupções na sua trajetória ou na sua fluidez visual”. A continuidade pode ocorrer através de pontos, linhas, planos, volumes, cores, texturas, brilhos, tons, etc.  Texto retirado do blog.kutova.com Princípios básicos do design gráfico 2.  Dicas de criação
[object Object],[object Object],[object Object],[object Object]
3.  Novos comportamentos Web 2.0 Web 2.0 é um termo cunhado em 2004 pela empresa estadunidense O'Reilly Media[1] para designar uma segunda geração de comunidades e serviços baseados na plataforma Web, como wikis, aplicações baseadas em folksonomia e redes sociais. Embora o termo tenha uma conotação de uma nova versão para a Web, ele não se refere à atualização nas suas especificações técnicas, mas a uma mudança na forma como ela é encarada por usuários e desenvolvedores.  (Wikipedia)
Cauda Longa Cauda longa (do inglês The Long Tail) é um termo utilizado na Estatística para identificar distribuições de dados da curva de Pareto, onde o volume de dados são classificados de forma decrescente. No mercado do consumo de bens, é vulgar encontrar curvas deste tipo para ilustrar a procura dos consumidores. Tipicamente, procura elevada para um conjunto pequeno de produtos e procura muito reduzida para um conjunto elevado de produtos. Na Economia Tradicional, os custos fixos de manutenção de estoques e catálogos, permitem calcular um valor para a procura que define a fronteira entre o lucro e o prejuízo.  Apostar na Cauda Longa, torna-se economicamente interessante, ao contrário do que acontecia antes. No limite, o conjunto dos produtos que existem na zona da Cauda Longa têm um valor comercial equivalente aos dos produtos populares.  (Wikipedia) 3.  Novos comportamentos
Redes Sociais São as relações entre os indivíduos na comunicação mediada por computador. Esses sistemas funcionam através da interação social, buscando conectar pessoas e proporcionar sua comunicação e, portanto, podem ser utilizados para forjar laços sociais. As pessoas levam em conta diversos fatores ao escolher conectar-se ou não a alguém.  (Wikipedia) = 3.  Novos comportamentos
RSS A tecnologia do RSS permite aos usuários da internet se inscreverem em sites que fornecem "feeds" (fontes) RSS. Estes são tipicamente sites que mudam ou atualizam o seu conteúdo regularmente. Para isso, são utilizados Feeds RSS que recebem estas atualizações, desta maneira o usuário pode permanecer informado de diversas atualizações em diversos sites sem precisar visitá-los um a um.  (Wikipedia) 3.  Novos comportamentos
Widgets Um widget é um componente de uma interface gráfica do utilizador (GUI), o que inclui janelas, botões, menus, ícones, barras de rolagem, etc.  Outro emprego do termo são os widgets da área de trabalho, pequenos aplicativos que flutuam pela área de trabalho e fornecem funcionalidade específicas ao utilizador (previsão do tempo, cotação de moedas, relógio, ...)  (Wikipedia) 3.  Novos comportamentos
[object Object],[object Object],[object Object],[object Object]
4.  Material para desenvolvimento Fontes de sistema ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
As 10 heurísticas de Nielsen 1.   Feedback 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.   Falar a linguagem do usuário A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário. 3.   Saídas claramente demarcadas O 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 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. 4.  Material para desenvolvimento
As 10 heurísticas de Nielsen 5.   Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6.   Minimizar a sobrecarga de memória do usuário 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.   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. 4.  Material para desenvolvimento
As 10 heurísticas de Nielsen 8.   Diálogos simples e naturais 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.   Boas 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 software 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. 4.  Material para desenvolvimento
Galerias para busca de referências ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],4.  Material para desenvolvimento
Sugestões de leituras básicas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],4.  Material para desenvolvimento

Mais conteúdo relacionado

Mais procurados

Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
Carlos Franco
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
Israel Degasperi
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
Andrea Dalforno
 
Work Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes SociaisWork Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes Sociais
João Roberto Magalhães Lima
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
Vinícius Silva de Andrade
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Ap iii
Ap iiiAp iii
Ap iii
LP Maquinas
 
Alberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do TrabalhoAlberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do Trabalho
AlbertoRui
 
Producao para web
Producao para webProducao para web
Producao para web
Alex Sanches
 
Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
Luis Marcelo Zanlucki
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
Make it Loyal
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
Helder Soares
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
Danilo Rosisca Pereira
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
carbgarcia
 
Personal Branding através dos Blogs - #Wordcampsp 2015
Personal Branding através dos Blogs - #Wordcampsp 2015Personal Branding através dos Blogs - #Wordcampsp 2015
Personal Branding através dos Blogs - #Wordcampsp 2015
Priscilla Saldanha
 
Capitulo 6 Livro Nielsen
Capitulo 6 Livro NielsenCapitulo 6 Livro Nielsen
Capitulo 6 Livro Nielsen
Luiz Agner
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
aiadufmg
 
Projetos governamentais: ajustes no seu template Joomla!
Projetos governamentais: ajustes no seu template Joomla!Projetos governamentais: ajustes no seu template Joomla!
Projetos governamentais: ajustes no seu template Joomla!
Trídia Criação
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Augusto César Albuquerque
 

Mais procurados (19)

Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Work Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes SociaisWork Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes Sociais
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Ap iii
Ap iiiAp iii
Ap iii
 
Alberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do TrabalhoAlberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do Trabalho
 
Producao para web
Producao para webProducao para web
Producao para web
 
Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
Personal Branding através dos Blogs - #Wordcampsp 2015
Personal Branding através dos Blogs - #Wordcampsp 2015Personal Branding através dos Blogs - #Wordcampsp 2015
Personal Branding através dos Blogs - #Wordcampsp 2015
 
Capitulo 6 Livro Nielsen
Capitulo 6 Livro NielsenCapitulo 6 Livro Nielsen
Capitulo 6 Livro Nielsen
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
Projetos governamentais: ajustes no seu template Joomla!
Projetos governamentais: ajustes no seu template Joomla!Projetos governamentais: ajustes no seu template Joomla!
Projetos governamentais: ajustes no seu template Joomla!
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 

Destaque

Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
Moderadora
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
Claudia Bordin Rodrigues
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Haccp
HaccpHaccp
Haccp
llillianna
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
Leonardo Pereira
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
Renato Melo
 
Lab Integrado de Design IED SP
Lab Integrado de Design IED SPLab Integrado de Design IED SP
Lab Integrado de Design IED SP
Fabio Silveira: Designer | Professor
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
Dra. Camila Hamdan
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Tersis Zonato
 
Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01
Fabio Silveira: Designer | Professor
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
Fabio Silveira: Designer | Professor
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
Dra. Camila Hamdan
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
Lijo M Loyid
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
Nécio de Lima Veras
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
Fabio Silveira: Designer | Professor
 
CRP-422-2016-12
CRP-422-2016-12CRP-422-2016-12
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
Felipe Fernandes
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
Fabio Silveira: Designer | Professor
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
Fabio Silveira: Designer | Professor
 
Design/ Design Gráfico
Design/ Design GráficoDesign/ Design Gráfico
Design/ Design Gráfico
BrendaLeticia17
 

Destaque (20)

Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Haccp
HaccpHaccp
Haccp
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
 
Lab Integrado de Design IED SP
Lab Integrado de Design IED SPLab Integrado de Design IED SP
Lab Integrado de Design IED SP
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01Projeto Grafico V | Aula 01
Projeto Grafico V | Aula 01
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
Projeto grafico II | Aula 01
Projeto grafico II | Aula 01Projeto grafico II | Aula 01
Projeto grafico II | Aula 01
 
CRP-422-2016-12
CRP-422-2016-12CRP-422-2016-12
CRP-422-2016-12
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Design/ Design Gráfico
Design/ Design GráficoDesign/ Design Gráfico
Design/ Design Gráfico
 

Semelhante a Desenvolvimento de Sites

Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Luiz da Silveira
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Silva
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Design: um diferencial estratégico para projetos web
Design: um diferencial estratégico para projetos webDesign: um diferencial estratégico para projetos web
Design: um diferencial estratégico para projetos web
Ondaweb Criação de Sites
 
Guia da Gestão de Projectos Web
Guia da Gestão de Projectos WebGuia da Gestão de Projectos Web
Guia da Gestão de Projectos Web
Arlindo Santos
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
Israel Degasperi
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67
Reideson Rocha
 
Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
Odair Cavichioli
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
Jose Claudio Terra
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
Jonathan Prateat
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
Ingresa al Digital 2008 - SEO - Peru
Ingresa al Digital 2008 - SEO - PeruIngresa al Digital 2008 - SEO - Peru
Ingresa al Digital 2008 - SEO - Peru
Willie Taminato
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Desenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add TechnologiesDesenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add Technologies
.add
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
Neca Boullosa
 
Dream 02
Dream 02Dream 02
Dream 02
Anderson Maciel
 
Dream 02
Dream 02Dream 02

Semelhante a Desenvolvimento de Sites (20)

Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Design: um diferencial estratégico para projetos web
Design: um diferencial estratégico para projetos webDesign: um diferencial estratégico para projetos web
Design: um diferencial estratégico para projetos web
 
Guia da Gestão de Projectos Web
Guia da Gestão de Projectos WebGuia da Gestão de Projectos Web
Guia da Gestão de Projectos Web
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67Gestaodesenvolvimento19 67
Gestaodesenvolvimento19 67
 
Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Ingresa al Digital 2008 - SEO - Peru
Ingresa al Digital 2008 - SEO - PeruIngresa al Digital 2008 - SEO - Peru
Ingresa al Digital 2008 - SEO - Peru
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Desenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add TechnologiesDesenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add Technologies
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Dream 02
Dream 02Dream 02
Dream 02
 
Dream 02
Dream 02Dream 02
Dream 02
 

Último

História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!
Jonathas Muniz
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 

Último (7)

História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 

Desenvolvimento de Sites

  • 2.
  • 3. 1. Processo para desenvolvimento de sites A. Sites de experiência B. Portais de conteúdo C. Presença de empresas na web D. Aplicações
  • 4.
  • 5. 1. Processo para desenvolvimento de sites A. Sites de experiência
  • 6.
  • 7. 1. Processo para desenvolvimento de sites B. Portais de conteúdo
  • 8.
  • 9. 1. Processo para desenvolvimento de sites C. Presença de empresas na web
  • 10. 1. Processo para desenvolvimento de sites D. Aplicações Aplicação Web é o termo utilizado para designar, de forma geral, sistemas de informática projetados para utilização através de um navegador, na internet ou em redes privadas ( Intranet ). Trata-se de um conjunto de programas que é executado em um servidor de HTTP (Web Host). O desenvolvimento da tecnologia web está relacionado, entre outros fatores, à necessidade de simplificar a atualização e manutenção mantendo o código-fonte em um mesmo local, de onde ele é acessado pelos diferentes usuários. Podemos definir uma aplicação Web como uma aplicação de software que utiliza a Web, através de um browser como ambiente de execução. (Wikipedia)
  • 11. 1. Processo para desenvolvimento de sites D. Aplicações
  • 12. 1. Processo para desenvolvimento de sites A. Sites de experiência Comercial > gerente de serviço > planejamento criativo + diretor de arte + redação > produção > codificação > programação = entrega B. Portais de conteúdo Produto > SEO + acessibilidade > design de interface > design gráfico > testes de usabilidade > codificação > programação > homologação = entrega C. Presença de empresas na web Comercial > analista de negócio > gerente de projeto > design de interface > design gráfico > redação > codificação > programação = entrega D. Aplicações Produto > design de interface > design gráfico > testes de usuabilidade > analista de sistemas > programação = entrega
  • 13. 1. Processo para desenvolvimento de sites Etapas de aprovação do projeto
  • 14. 1. Processo para desenvolvimento de sites 1ª entrega: Sitemap É elaborado pelo produto, analista de negócio ou gerente de projeto. A. Capa principal C. Vídeos D.3 Blogs I. RSS C.1 Vídeos C.2 Áudios C.3 Fotos D. Blogs (lista) A.1 Capa Time A.2 Capa Campeonato Link Dúvidas freqüentes B.1 Lista B.2 Notícia Aberta Link Fale Conosco Link Anuncie Atemdimento Destaque Login Legenda Seção de 1º nível Home Sub-seções Seção externa Link Estrutural Skin Seção totalmente restrita RSS Grupo de crosslinks A. Esportes E.X. Página do Blog B. Notícias
  • 15. 2º entrega: Wireframe É elaborado pelo designer de interface (arquiteto de informação). 1. Processo para desenvolvimento de sites
  • 16. O que é wireframe? O wireframe pode ser considerado o esqueleto de uma interface. Através dele é possível definir posicionamento, navegação, agrupamento, ordem, hierarquia e peso de conteúdos, ou seja, ele responde pela organização dos elementos de interface sem trabalhar a apresentação visual. Seus componentes devem ser realizados de acordo com seu grau de relevância e criticidade de acesso, o modo de exibição e interação dessa informação com o usuário. Validar organização dos elementos na interface: posicionamento, navegação, agrupamento, ordem, hierarquia e peso; • Relevância entre áreas e componentes; • Modo de interação e exibição do conteúdo ao usuário. 1. Processo para desenvolvimento de sites
  • 17.
  • 18. 3° entrega: Layout É elaborado pelo design gráfico. 1. Processo para desenvolvimento de sites
  • 19. 4° entrega: Codificação e produção É entregue pelo htmller (web standards), flasher, 3D designer e outros. 5° entrega: Programação É entregue pelo programador já com todas interações e pronto para publicação. Esse processo pode ser bem complexo, envolvendo analista de sistemas e diversas tecnologias. 1. Processo para desenvolvimento de sites
  • 20. SEO 1. Processo para desenvolvimento de sites
  • 21. O que é SEO? Search Engine Optimization, é a otimização de Sites, refere-se ao conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca. As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras-chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes concluem a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo). www.google.com.br/webmasters 1. Processo para desenvolvimento de sites
  • 22.
  • 23.
  • 24. A. proximidade de dois ou mais elementos de uma composição gráfica tende a determinar a unidade entre eles. Quanto maior for essa proximidade, mais forte parece ser a relação que os une. O propósito básico da proximidade é, de acordo com Robin Williams, no livro Design para quem não é designer , o de organizar. O simples agrupamento de elementos cria, automaticamente, uma organização. No livro Gestalt do objeto , João Gomes Filho lembra que a proximidade não aparece apenas na distância entre dois ou mais elementos, mas também nas relações de forma, cor, tamanho, textura, brilho, peso e direção. Princípios básicos do design gráfico 2. Dicas de criação
  • 25. B. Robin Williams, no livro Design para quem não é designer , disse que “nada deve ser arbitrariamente colocado em uma página” e que “cada item deve ter uma conexão visual com algo na página”. Uma das formas mais simples e eficazes de prover essa conexão visual entre os elementos é através do alinhamento . O alinhamento, juntamente com a proximidade, ajuda a criar uma organização visual dos elementos, além de estabelecer relações entre eles. Os alinhamentos mais comuns são centralizado (horizontal ou verticalmente) e pelas bordas (pela direita, pela esquerda, por cima ou por baixo). O alinhamento também pode ser feito por aspectos marcantes dentro dos elementos, como pontos luminosos que contrastem com fundo escuros. Textos podem ter ainda o alinhamento justificado (pela esquerda e pela direita simultaneamente). Williams sugere evitar o alinhamento central, pois considera as outras formas mais atraentes. Ela também recomenda usar, sempre que possível, apenas um alinhamento por página. Princípios básicos do design gráfico 2. Dicas de criação
  • 26. C. A repetição é o terceiro princípio básico do design gráfico. Essa repetição, de acordo com Robin Williams, no livro Design para quem não é designer , pode ser de elementos, como uma linha, um desenho ou uma logomarca, de um estilo, como um tamanho ou tipo de letra, ou ainda de relações entre os elementos, como a disposição, peso e o tamanho deles. Deve apenas ser a repetição de algo que o leitor reconheça visualmente. João Gomes Filho, no livro Gestalt do objeto , afirma que a semelhança (gerada pela repetição) cria um estímulo de agrupamento, de unidade dos objetos. Williams sugere que a repetição deve ser marcante para que seja percebida, mas ela também recomenda evitar o excesso que pode tornar a composição enfadonha, ao invés de interessante. Princípios básicos do design gráfico 2. Dicas de criação
  • 27. D. De acordo com João Gomes Filho, no livro Gestalt do objeto , a capacidade de percepção de alguns elementos é aumentada através da segregação deles. Essa segregação, que permite a separação, identificação, evidenciação ou destaque, é feita através do contraste . Contraste, para Robin Williams, no livro Design para quem não é designer é qualquer forma de diferenciação, desde que suficiente para eliminar qualquer similaridade. Para a autora, uma diferenciação pequena, tímida, não leva ao contraste, mas ao conflito. O contraste entre dois elementos pode ser feito de várias formas: tamanho, espessura, cor, estilo, ângulo, espaçamento, textura, brilho, volume, sombra, etc. Além disso, pode ser aplicado a um ou mais elementos. Por exemplo, uma foto de uma propaganda de carro deve ter um alto contraste do carro com os elementos de fundo, mas um baixo contraste entre os elementos de fundo, pois isso diminuiria a evidência do próprio carro. Williams lembra que o contraste tem dois objetivos: criar interesse sobre o material, através de uma estética mais agradável, e auxiliar na organização das informações, facilitando que o usuário perceba instantaneamente sua estrutura. Princípios básicos do design gráfico 2. Dicas de criação
  • 28. E. O fechamento é mais um princípio básico do design gráfico. Ele ajuda, de acordo com João Gomes Filho no livro Gestalt do objeto a formar as unidades, a partir da percepção visual do usuário. Princípios básicos do design gráfico 2. Dicas de criação
  • 29. F. O último princípio básico do design gráfico tratado aqui é a continuidade . Por continuidade, João Gomes Filho, no livro Gestalt do objeto “entende a impressão visual de como as partes se sucedem através da organização perceptiva da forma de modo coerente, sem quebras ou interrupções na sua trajetória ou na sua fluidez visual”. A continuidade pode ocorrer através de pontos, linhas, planos, volumes, cores, texturas, brilhos, tons, etc. Texto retirado do blog.kutova.com Princípios básicos do design gráfico 2. Dicas de criação
  • 30.
  • 31. 3. Novos comportamentos Web 2.0 Web 2.0 é um termo cunhado em 2004 pela empresa estadunidense O'Reilly Media[1] para designar uma segunda geração de comunidades e serviços baseados na plataforma Web, como wikis, aplicações baseadas em folksonomia e redes sociais. Embora o termo tenha uma conotação de uma nova versão para a Web, ele não se refere à atualização nas suas especificações técnicas, mas a uma mudança na forma como ela é encarada por usuários e desenvolvedores. (Wikipedia)
  • 32. Cauda Longa Cauda longa (do inglês The Long Tail) é um termo utilizado na Estatística para identificar distribuições de dados da curva de Pareto, onde o volume de dados são classificados de forma decrescente. No mercado do consumo de bens, é vulgar encontrar curvas deste tipo para ilustrar a procura dos consumidores. Tipicamente, procura elevada para um conjunto pequeno de produtos e procura muito reduzida para um conjunto elevado de produtos. Na Economia Tradicional, os custos fixos de manutenção de estoques e catálogos, permitem calcular um valor para a procura que define a fronteira entre o lucro e o prejuízo. Apostar na Cauda Longa, torna-se economicamente interessante, ao contrário do que acontecia antes. No limite, o conjunto dos produtos que existem na zona da Cauda Longa têm um valor comercial equivalente aos dos produtos populares. (Wikipedia) 3. Novos comportamentos
  • 33. Redes Sociais São as relações entre os indivíduos na comunicação mediada por computador. Esses sistemas funcionam através da interação social, buscando conectar pessoas e proporcionar sua comunicação e, portanto, podem ser utilizados para forjar laços sociais. As pessoas levam em conta diversos fatores ao escolher conectar-se ou não a alguém. (Wikipedia) = 3. Novos comportamentos
  • 34. RSS A tecnologia do RSS permite aos usuários da internet se inscreverem em sites que fornecem "feeds" (fontes) RSS. Estes são tipicamente sites que mudam ou atualizam o seu conteúdo regularmente. Para isso, são utilizados Feeds RSS que recebem estas atualizações, desta maneira o usuário pode permanecer informado de diversas atualizações em diversos sites sem precisar visitá-los um a um. (Wikipedia) 3. Novos comportamentos
  • 35. Widgets Um widget é um componente de uma interface gráfica do utilizador (GUI), o que inclui janelas, botões, menus, ícones, barras de rolagem, etc. Outro emprego do termo são os widgets da área de trabalho, pequenos aplicativos que flutuam pela área de trabalho e fornecem funcionalidade específicas ao utilizador (previsão do tempo, cotação de moedas, relógio, ...) (Wikipedia) 3. Novos comportamentos
  • 36.
  • 37.
  • 38. As 10 heurísticas de Nielsen 1. Feedback 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. Falar a linguagem do usuário A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário. 3. Saídas claramente demarcadas O 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 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. 4. Material para desenvolvimento
  • 39. As 10 heurísticas de Nielsen 5. Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6. Minimizar a sobrecarga de memória do usuário 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. 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. 4. Material para desenvolvimento
  • 40. As 10 heurísticas de Nielsen 8. Diálogos simples e naturais 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. Boas 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 software 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. 4. Material para desenvolvimento
  • 41.
  • 42.