SlideShare uma empresa Scribd logo
Patrícia Mallmann Garcia Unisinos 2008
Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
Processo para desenvolvimento de sites Sites de experiência  Portais de conteúdo Presença de empresas na web Aplicações
Processo para desenvolvimento de sites Sites de experiência  São sites que tem como premissa gerar uma experiência forte e única ao usuário. Esses sites são criativos, dinâmicos e interativos. Geralmente são construídos com ferramentas de animação e interação. O que não interessa: Retorno do usuário ao site Ferramentas de buscas Otimização e peso da página (tempo de carregamento). Tempo de veiculação (são sites temporais, como campanhas publicitárias) A experiência tem que ser plena e a divulgação ocorre normalmente de forma viral.
Processo para desenvolvimento de sites Sites de experiência
Processo para desenvolvimento de sites Portais de conteúdo  Um portal é um site na internet que funciona como centro aglomerador e distribuidor de conteúdo para uma série de outros sites ou subsites dentro, e também fora, do domínio ou subdomínio da empresa gestora do portal.  (Wikipedia) O que é premissa nesses projetos: Usabilidade, acessibilidade, performance da máquina, entre outros. O que não é bem vindo: Animações, vídeos e imagens de layout.
Processo para desenvolvimento de sites Portais de conteúdo
Processo para desenvolvimento de sites Presença de empresas na web  São os sites institucionais. Toda empresa deve ter sua presença no meio virtual assim como no físico. Esses sites tem fins marketeiros e a criação é secundária. O que interessa: Posicionamento no Google Retorno do usuário Usabilidade, facilidade de encontrar a informação Interface amigável Lembrança da marca Transmitir os princípios e valores da empresa Há casos que empresas trabalham sua imagem como os sites de experiência, ou seja, a cada campanha o site é remodelado.
Processo para desenvolvimento de sites Presença de empresas na web
Processo para desenvolvimento de sites 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)
Processo para desenvolvimento de sites Aplicações
Processo para desenvolvimento de sites Sites de experiência  Comercial  >  gerente de serviço  >  planejamento criativo  +  diretor de arte  +  redação  >  produção  >  codificação  >  programação  =   entrega Portais de conteúdo  Analista de negócio  >  SEO + acessibilidade  >  design de interface  >  design gráfico  >  testes de usabilidade  >  codificação  >  programação  >  homologação  =   entrega 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 Aplicações Analista de negócio  >  design de interface  >  design gráfico  >  testes de usuabilidade  >  analista de sistemas  >  programação =  entrega
Processo para desenvolvimento de sites Etapas de aprovação do projeto
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
Processo para desenvolvimento de sites 2º entrega: Wireframe  É elaborado pelo designer de interface (arquiteto de informação).
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.
Processo para desenvolvimento de sites O que faz um designer/projetista de interface? Um projetista de interface é responsável basicamente por três atributos de qualquer interface:  formato e densidade informacional , a  localização desta informação na interface  e o  modo de interação com o usuário . Atividades de um projetista de interface Entender e definir a lógica de navegação do ambiente; Fomentar acesso às páginas menos acessadas e a conteúdos relacionados; Orientar a navegação do usuário; Estabelecer áreas de apoio à sua interação; Garantir interfaces mais intuitivas e orientadas ao usuário.
Processo para desenvolvimento de sites 3° entrega: Layout É elaborado pelo design gráfico.
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.
Processo para desenvolvimento de sites SEO
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
Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
Dicas de criação Acompanhar o desenvolvimento da web Utilizar os padrões sempre que não houver um motivo muito forte para fugir deles Clean é a palavra do momento, design minimalista Fazer estudo de cores, refinar os acabamentos Deixar áreas de respiro na página Estudar o público e os concorrentes Traçar etapas do projeto e deixar que o usuário avalie Reconhecer que você não sabe tudo, procure profissionais qualificados nas demais especialidades Busque referências, sempre! Domine mais de um software Vá em eventos
Quais as funções do layout? Dicas de criação Comunicar Gerar sensações Dar valor a marca Hierarquizar o conteúdo Criar identidade
Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
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)
Novos comportamentos Cauda Longa O conceito trata basicamente do fenômeno que tem gerado migração da cultura de hits (oferta de produtos e serviços mais procurados) para a cultura de nichos (público restrito de interessados), a partir da viabilização de produção, exibição do conteúdo amador e baixo custo no comércio digital. Com essa nova disposição de produtos no mundo digital, os consumidores tornam-se menos fieis às marcas e mais propensos a novas experimentações.
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) =
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)
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)
Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
Material para desenvolvimento Fontes de sistema Fontes compatíveis com: Mac OS  (Tiger e Leopard)  e Windows OS  (XP SP2 e Vista) Arial Arial Black Comic Sans MS Courier New Georgia Impact Tahoma (- Mac OS Tiger) Times New Roman Trebuchet MS Verdana
Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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. 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.
Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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.
Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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.
Material para desenvolvimento Galerias para busca de referências www.istockphoto.com www.deviantart.com http://bestwebgallery.com www.designineurope.eu www.mydesignaward.com www.netdiver.net http://mediainspiration.com www.e-creative.net http://linkdup.com www.thefwa.com
Material para desenvolvimento Sugestões de leituras básicas Não me Faça Pensar - STEVE KRUG Design para a Internet: Projetando a Experiência Perfeita - FELIPE MEMORIA  Design de Interação - Além da Interação Homem-Computador - JENNIFER PREECE & YVONNE ROGERS & HELEN SHARP  Design para quem não é designer - ROBIN WILLIAMS WEB STANDARDS Projetando Web Sites Compatíveis - JEFFREY ZELDMAN

Mais conteúdo relacionado

Mais procurados

Palestra Blogs Profissionais e Corporativos
Palestra Blogs Profissionais e CorporativosPalestra Blogs Profissionais e Corporativos
Palestra Blogs Profissionais e Corporativos
lossio
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
Make it Loyal
 
BRAVA - Desenvolvimento Portais Liferay
BRAVA - Desenvolvimento Portais LiferayBRAVA - Desenvolvimento Portais Liferay
BRAVA - Desenvolvimento Portais Liferay
BRAVA Tecnologia
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
Carlos Franco
 
Webinar Portal Colaborativo
Webinar Portal ColaborativoWebinar Portal Colaborativo
Webinar Portal Colaborativo
Rafael Lamari Junior
 
Plataforma OpenSuite
Plataforma OpenSuitePlataforma OpenSuite
Plataforma OpenSuite
Start4up
 
Roadshow Brasília Novas funcionalidades Liferay 6
Roadshow Brasília Novas funcionalidades Liferay 6Roadshow Brasília Novas funcionalidades Liferay 6
Roadshow Brasília Novas funcionalidades Liferay 6
SEA Tecnologia
 
Abertura do Super Grand Prix
Abertura do Super Grand PrixAbertura do Super Grand Prix
Abertura do Super Grand Prix
Instituto Intranet Portal
 
Design de interfaces para CMS's
Design de interfaces para CMS'sDesign de interfaces para CMS's
Design de interfaces para CMS's
Thiago Melo
 
Autenticacao visual
Autenticacao visualAutenticacao visual
Autenticacao visual
Claudia Heidemann de Santana
 
Caso vencedor do Super Grand Prix 2012
Caso vencedor do Super Grand Prix 2012Caso vencedor do Super Grand Prix 2012
Caso vencedor do Super Grand Prix 2012
Instituto Intranet Portal
 
Pinch portfolio
Pinch portfolioPinch portfolio
Pinch portfolio
Pinch
 
O Desafio dos Blogs Corporativos
O Desafio dos Blogs CorporativosO Desafio dos Blogs Corporativos
O Desafio dos Blogs Corporativos
Jose Claudio Terra
 
Introdução ao Projeto de Plataformas de Software: o quê, por que, como
Introdução ao Projeto de Plataformas de Software: o quê, por que, comoIntrodução ao Projeto de Plataformas de Software: o quê, por que, como
Introdução ao Projeto de Plataformas de Software: o quê, por que, como
Rodrigo Reis
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
Gabriel Zavitoski
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Guilherme Costa
 
Web 2.0 - Colaboração acima de tudo!
Web 2.0 - Colaboração acima de tudo!Web 2.0 - Colaboração acima de tudo!
Web 2.0 - Colaboração acima de tudo!
Felipe J. R. Vieira
 

Mais procurados (17)

Palestra Blogs Profissionais e Corporativos
Palestra Blogs Profissionais e CorporativosPalestra Blogs Profissionais e Corporativos
Palestra Blogs Profissionais e Corporativos
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
 
BRAVA - Desenvolvimento Portais Liferay
BRAVA - Desenvolvimento Portais LiferayBRAVA - Desenvolvimento Portais Liferay
BRAVA - Desenvolvimento Portais Liferay
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Webinar Portal Colaborativo
Webinar Portal ColaborativoWebinar Portal Colaborativo
Webinar Portal Colaborativo
 
Plataforma OpenSuite
Plataforma OpenSuitePlataforma OpenSuite
Plataforma OpenSuite
 
Roadshow Brasília Novas funcionalidades Liferay 6
Roadshow Brasília Novas funcionalidades Liferay 6Roadshow Brasília Novas funcionalidades Liferay 6
Roadshow Brasília Novas funcionalidades Liferay 6
 
Abertura do Super Grand Prix
Abertura do Super Grand PrixAbertura do Super Grand Prix
Abertura do Super Grand Prix
 
Design de interfaces para CMS's
Design de interfaces para CMS'sDesign de interfaces para CMS's
Design de interfaces para CMS's
 
Autenticacao visual
Autenticacao visualAutenticacao visual
Autenticacao visual
 
Caso vencedor do Super Grand Prix 2012
Caso vencedor do Super Grand Prix 2012Caso vencedor do Super Grand Prix 2012
Caso vencedor do Super Grand Prix 2012
 
Pinch portfolio
Pinch portfolioPinch portfolio
Pinch portfolio
 
O Desafio dos Blogs Corporativos
O Desafio dos Blogs CorporativosO Desafio dos Blogs Corporativos
O Desafio dos Blogs Corporativos
 
Introdução ao Projeto de Plataformas de Software: o quê, por que, como
Introdução ao Projeto de Plataformas de Software: o quê, por que, comoIntrodução ao Projeto de Plataformas de Software: o quê, por que, como
Introdução ao Projeto de Plataformas de Software: o quê, por que, como
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Web 2.0 - Colaboração acima de tudo!
Web 2.0 - Colaboração acima de tudo!Web 2.0 - Colaboração acima de tudo!
Web 2.0 - Colaboração acima de tudo!
 

Destaque

Abraça me senhor
Abraça me senhorAbraça me senhor
Abraça me senhor
IMQ
 
Aprendizaje y Evaluación
Aprendizaje  y  EvaluaciónAprendizaje  y  Evaluación
Aprendizaje y Evaluación
JOSÉ BRITO
 
Hoje sou
Hoje souHoje sou
Hoje sou
IMQ
 
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
Daklak Training College
 
Alavancar.me comercial
Alavancar.me comercialAlavancar.me comercial
Alavancar.me comercial
Thiago Reis
 
BenficaLeague-2011-12-SLB2003
BenficaLeague-2011-12-SLB2003BenficaLeague-2011-12-SLB2003
BenficaLeague-2011-12-SLB2003
Isaura Carvalho
 
Beneficios de web 2.0
Beneficios de web 2.0Beneficios de web 2.0
Beneficios de web 2.0
kbr242
 
Todo pasa y todo queda
Todo pasa y todo quedaTodo pasa y todo queda
Todo pasa y todo queda
Paco Checa
 
Entrevista a lionel messi
Entrevista a lionel messiEntrevista a lionel messi
Entrevista a lionel messi
abril_leandro
 
Trabajo sistemas ... sistemas operativos
Trabajo sistemas   ... sistemas operativosTrabajo sistemas   ... sistemas operativos
Trabajo sistemas ... sistemas operativos
brandonxx
 
Stephen Clemens resume Oct 16
Stephen Clemens resume Oct 16Stephen Clemens resume Oct 16
Stephen Clemens resume Oct 16
Stephen Clemens
 
Criatividade nas Cidades Européias - André rabanéa
Criatividade nas Cidades Européias - André rabanéaCriatividade nas Cidades Européias - André rabanéa
Criatividade nas Cidades Européias - André rabanéa
inovaDay .
 
Recopilación
RecopilaciónRecopilación
Recopilación
hellenrz
 
Contrato de trabajo
Contrato de trabajoContrato de trabajo
Contrato de trabajo
EdderMaqueraMamani
 
Monografia barba
Monografia barbaMonografia barba
Monografia barba
Nicolas Rugger
 
6 formação
6 formação6 formação
6 formação
Karensantos
 
Sesi palestra 10_06
Sesi  palestra 10_06Sesi  palestra 10_06
Sesi palestra 10_06
kleber.torres
 
Credenciales Executor
Credenciales Executor Credenciales Executor
Credenciales Executor
Executor
 
Secuencia didáctica hist.p.final
Secuencia didáctica hist.p.finalSecuencia didáctica hist.p.final
Secuencia didáctica hist.p.final
lahistoriameproyecta
 

Destaque (20)

Abraça me senhor
Abraça me senhorAbraça me senhor
Abraça me senhor
 
Aprendizaje y Evaluación
Aprendizaje  y  EvaluaciónAprendizaje  y  Evaluación
Aprendizaje y Evaluación
 
Hoje sou
Hoje souHoje sou
Hoje sou
 
Certificate
CertificateCertificate
Certificate
 
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
HuongKieuLoan's PPS_Tinh khuc heo may _Nhac Tung Nguyen
 
Alavancar.me comercial
Alavancar.me comercialAlavancar.me comercial
Alavancar.me comercial
 
BenficaLeague-2011-12-SLB2003
BenficaLeague-2011-12-SLB2003BenficaLeague-2011-12-SLB2003
BenficaLeague-2011-12-SLB2003
 
Beneficios de web 2.0
Beneficios de web 2.0Beneficios de web 2.0
Beneficios de web 2.0
 
Todo pasa y todo queda
Todo pasa y todo quedaTodo pasa y todo queda
Todo pasa y todo queda
 
Entrevista a lionel messi
Entrevista a lionel messiEntrevista a lionel messi
Entrevista a lionel messi
 
Trabajo sistemas ... sistemas operativos
Trabajo sistemas   ... sistemas operativosTrabajo sistemas   ... sistemas operativos
Trabajo sistemas ... sistemas operativos
 
Stephen Clemens resume Oct 16
Stephen Clemens resume Oct 16Stephen Clemens resume Oct 16
Stephen Clemens resume Oct 16
 
Criatividade nas Cidades Européias - André rabanéa
Criatividade nas Cidades Européias - André rabanéaCriatividade nas Cidades Européias - André rabanéa
Criatividade nas Cidades Européias - André rabanéa
 
Recopilación
RecopilaciónRecopilación
Recopilación
 
Contrato de trabajo
Contrato de trabajoContrato de trabajo
Contrato de trabajo
 
Monografia barba
Monografia barbaMonografia barba
Monografia barba
 
6 formação
6 formação6 formação
6 formação
 
Sesi palestra 10_06
Sesi  palestra 10_06Sesi  palestra 10_06
Sesi palestra 10_06
 
Credenciales Executor
Credenciales Executor Credenciales Executor
Credenciales Executor
 
Secuencia didáctica hist.p.final
Secuencia didáctica hist.p.finalSecuencia didáctica hist.p.final
Secuencia didáctica hist.p.final
 

Semelhante a Desenvolvimento de Sites V.2

Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
.add
 
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
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
wudrs
 
Ai1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-aAi1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-a
Duarte Gomes
 
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
 
Ferramentas GP - Cleyton Santana
Ferramentas GP - Cleyton SantanaFerramentas GP - Cleyton Santana
Ferramentas GP - Cleyton Santana
Cleyton De Sousa
 
Intro web cms
Intro web cmsIntro web cms
Intro web cms
Wander Costa
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
Carla Suelen
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
Inteligência Coletiva Empresarial
Inteligência Coletiva EmpresarialInteligência Coletiva Empresarial
Inteligência Coletiva Empresarial
Elvis Fusco
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
Ponto Final Design
 
06 - Experiência do Usuário - User Experience - Parte 2.pptx
06 - Experiência do Usuário - User Experience - Parte 2.pptx06 - Experiência do Usuário - User Experience - Parte 2.pptx
06 - Experiência do Usuário - User Experience - Parte 2.pptx
franmafesoni
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
Leandro Borges
 
Champion Troca Pulseira
Champion Troca PulseiraChampion Troca Pulseira
Champion Troca Pulseira
Durval Amorim
 
Champion Troca Pulseiras - Gerenciamento de Projeto
Champion Troca Pulseiras - Gerenciamento de ProjetoChampion Troca Pulseiras - Gerenciamento de Projeto
Champion Troca Pulseiras - Gerenciamento de Projeto
Aline Magno
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 
Portais Corporativos e Estratégia Empresarial
Portais Corporativos e Estratégia EmpresarialPortais Corporativos e Estratégia Empresarial
Portais Corporativos e Estratégia Empresarial
Marcelo Pimenta (menta90)
 

Semelhante a Desenvolvimento de Sites V.2 (20)

Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
 
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
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Ai1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-aAi1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-a
 
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...
 
Ferramentas GP - Cleyton Santana
Ferramentas GP - Cleyton SantanaFerramentas GP - Cleyton Santana
Ferramentas GP - Cleyton Santana
 
Intro web cms
Intro web cmsIntro web cms
Intro web cms
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Inteligência Coletiva Empresarial
Inteligência Coletiva EmpresarialInteligência Coletiva Empresarial
Inteligência Coletiva Empresarial
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
 
06 - Experiência do Usuário - User Experience - Parte 2.pptx
06 - Experiência do Usuário - User Experience - Parte 2.pptx06 - Experiência do Usuário - User Experience - Parte 2.pptx
06 - Experiência do Usuário - User Experience - Parte 2.pptx
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Champion Troca Pulseira
Champion Troca PulseiraChampion Troca Pulseira
Champion Troca Pulseira
 
Champion Troca Pulseiras - Gerenciamento de Projeto
Champion Troca Pulseiras - Gerenciamento de ProjetoChampion Troca Pulseiras - Gerenciamento de Projeto
Champion Troca Pulseiras - Gerenciamento de Projeto
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Portais Corporativos e Estratégia Empresarial
Portais Corporativos e Estratégia EmpresarialPortais Corporativos e Estratégia Empresarial
Portais Corporativos e Estratégia Empresarial
 

Desenvolvimento de Sites V.2

  • 2. Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
  • 3. Processo para desenvolvimento de sites Sites de experiência Portais de conteúdo Presença de empresas na web Aplicações
  • 4. Processo para desenvolvimento de sites Sites de experiência São sites que tem como premissa gerar uma experiência forte e única ao usuário. Esses sites são criativos, dinâmicos e interativos. Geralmente são construídos com ferramentas de animação e interação. O que não interessa: Retorno do usuário ao site Ferramentas de buscas Otimização e peso da página (tempo de carregamento). Tempo de veiculação (são sites temporais, como campanhas publicitárias) A experiência tem que ser plena e a divulgação ocorre normalmente de forma viral.
  • 5. Processo para desenvolvimento de sites Sites de experiência
  • 6. Processo para desenvolvimento de sites Portais de conteúdo Um portal é um site na internet que funciona como centro aglomerador e distribuidor de conteúdo para uma série de outros sites ou subsites dentro, e também fora, do domínio ou subdomínio da empresa gestora do portal. (Wikipedia) O que é premissa nesses projetos: Usabilidade, acessibilidade, performance da máquina, entre outros. O que não é bem vindo: Animações, vídeos e imagens de layout.
  • 7. Processo para desenvolvimento de sites Portais de conteúdo
  • 8. Processo para desenvolvimento de sites Presença de empresas na web São os sites institucionais. Toda empresa deve ter sua presença no meio virtual assim como no físico. Esses sites tem fins marketeiros e a criação é secundária. O que interessa: Posicionamento no Google Retorno do usuário Usabilidade, facilidade de encontrar a informação Interface amigável Lembrança da marca Transmitir os princípios e valores da empresa Há casos que empresas trabalham sua imagem como os sites de experiência, ou seja, a cada campanha o site é remodelado.
  • 9. Processo para desenvolvimento de sites Presença de empresas na web
  • 10. Processo para desenvolvimento de sites 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. Processo para desenvolvimento de sites Aplicações
  • 12. Processo para desenvolvimento de sites Sites de experiência Comercial > gerente de serviço > planejamento criativo + diretor de arte + redação > produção > codificação > programação = entrega Portais de conteúdo Analista de negócio > SEO + acessibilidade > design de interface > design gráfico > testes de usabilidade > codificação > programação > homologação = entrega 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 Aplicações Analista de negócio > design de interface > design gráfico > testes de usuabilidade > analista de sistemas > programação = entrega
  • 13. Processo para desenvolvimento de sites Etapas de aprovação do projeto
  • 14. 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. Processo para desenvolvimento de sites 2º entrega: Wireframe É elaborado pelo designer de interface (arquiteto de informação).
  • 16. 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.
  • 17. Processo para desenvolvimento de sites O que faz um designer/projetista de interface? Um projetista de interface é responsável basicamente por três atributos de qualquer interface: formato e densidade informacional , a localização desta informação na interface e o modo de interação com o usuário . Atividades de um projetista de interface Entender e definir a lógica de navegação do ambiente; Fomentar acesso às páginas menos acessadas e a conteúdos relacionados; Orientar a navegação do usuário; Estabelecer áreas de apoio à sua interação; Garantir interfaces mais intuitivas e orientadas ao usuário.
  • 18. Processo para desenvolvimento de sites 3° entrega: Layout É elaborado pelo design gráfico.
  • 19. 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.
  • 21. 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
  • 22. Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
  • 23. Dicas de criação Acompanhar o desenvolvimento da web Utilizar os padrões sempre que não houver um motivo muito forte para fugir deles Clean é a palavra do momento, design minimalista Fazer estudo de cores, refinar os acabamentos Deixar áreas de respiro na página Estudar o público e os concorrentes Traçar etapas do projeto e deixar que o usuário avalie Reconhecer que você não sabe tudo, procure profissionais qualificados nas demais especialidades Busque referências, sempre! Domine mais de um software Vá em eventos
  • 24. Quais as funções do layout? Dicas de criação Comunicar Gerar sensações Dar valor a marca Hierarquizar o conteúdo Criar identidade
  • 25. Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
  • 26. 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)
  • 27. Novos comportamentos Cauda Longa O conceito trata basicamente do fenômeno que tem gerado migração da cultura de hits (oferta de produtos e serviços mais procurados) para a cultura de nichos (público restrito de interessados), a partir da viabilização de produção, exibição do conteúdo amador e baixo custo no comércio digital. Com essa nova disposição de produtos no mundo digital, os consumidores tornam-se menos fieis às marcas e mais propensos a novas experimentações.
  • 28. 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) =
  • 29. 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)
  • 30. 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)
  • 31. Processo para desenvolvimento de sites Dicas de criação Novos comportamentos Material para desenvolvimento
  • 32. Material para desenvolvimento Fontes de sistema Fontes compatíveis com: Mac OS (Tiger e Leopard) e Windows OS (XP SP2 e Vista) Arial Arial Black Comic Sans MS Courier New Georgia Impact Tahoma (- Mac OS Tiger) Times New Roman Trebuchet MS Verdana
  • 33. Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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. 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.
  • 34. Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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.
  • 35. Material para desenvolvimento As 10 heurísticas de Nielsen 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. 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. 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.
  • 36. Material para desenvolvimento Galerias para busca de referências www.istockphoto.com www.deviantart.com http://bestwebgallery.com www.designineurope.eu www.mydesignaward.com www.netdiver.net http://mediainspiration.com www.e-creative.net http://linkdup.com www.thefwa.com
  • 37. Material para desenvolvimento Sugestões de leituras básicas Não me Faça Pensar - STEVE KRUG Design para a Internet: Projetando a Experiência Perfeita - FELIPE MEMORIA Design de Interação - Além da Interação Homem-Computador - JENNIFER PREECE & YVONNE ROGERS & HELEN SHARP Design para quem não é designer - ROBIN WILLIAMS WEB STANDARDS Projetando Web Sites Compatíveis - JEFFREY ZELDMAN