SlideShare uma empresa Scribd logo
Web Design I # 2007-2008 ISMT - Sandra Oliveira
Introdução ao Web Design # Definição O Web Design é uma extensão da prática do design,  o foco do projecto é  criação de Web sites e documentos disponíveis no  ambiente  Web ISMT - Sandra Oliveira
Introdução ao Web Design # Definições O Wd tende à multidisciplinaridade, a construção de páginas web apoia-se em diversas áreas técnicas, além do design propriamente dito.  ISMT - Sandra Oliveira Áreas como a  programação ,  inovação   nos recursos dos navegadores  que em conjunto com o  design gráfico , estão em constante evolução.
Introdução ao Web Design # Definição /  Wikipédia “ A preocupação fundamental em  web design  é agregar os conceitos de usabilidade com o planeamento da interface, garantindo que o utilizador final atinja os  seus objectivos de forma intuitiva. ” http://pt.wikipedia.org/wiki/Web_design   ISMT - Sandra Oliveira
Introdução ao Web Design O propósito do Web Design é facilitar a comunicação entre  utilizador e conteúdo . Desenhar para a Web significa desenhar para as pessoas que usam a Web e não como achamos que usam ISMT - Sandra Oliveira
Introdução ao Web Design As pessoas chegam aos sites de variadas formas: Percorrem as páginas à procura de pistas em vez de as lerem Tiram conclusões rápidas, em vez de avaliaram cuidadosamente. Nem sempre olham para o “quadro geral” Movem-se pelos seus objectivos e não os do cliente. ISMT - Sandra Oliveira
Introdução ao Web Design Os Web Designers necessitem de capacidades para serem bem sucedidos neste ambiente. Deve conhecer perfeitamente os objectivos do site para os poder alcançar Deve ser claro o objectivo que o design vai ter, e manter esse propósito Deve ser simplista, isto é, se um elemento adiciona complexidade mas não valor, então deve ser  mudado ISMT - Sandra Oliveira
Web Design I # 2007-2008 ISMT - Sandra Oliveira
As fases do desenvolvimento ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 Variam consoante o tipos de site: educação,  experiências,  entretenimento,  actividades comerciais e informação,  combinações híbridas dos mesmos, etc. ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 [a estratégia ] Relacionar-se com  os objectivos do site,  as necessidades e gostos da hipotética audiência,  as forças e fraquezas da empresa concorrente  as capacidades da própria empresa ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 // Como definir uma estratégia? 1 - Definir a mensagem a passar.  Exemplo : para uma empresa de venda de Frutas Exóticas, a mensagem pode residir na ideia:  Comer fruta exótica é saudável, excitante e divertido ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 2 - Decidir como persuadir a audiência em aceitar essa mensagem.  Exemplo , decidir em “educar” os utilizadores nas inúmeras possibilidades de cada fruta exótica, e criar, assim, um ambiente (uma forma de estar) que os utilizadores querem participar. No fundo, tornar a compra mais fácil. ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 3 - Escolher um tom.  Sério e formal ou divertido e informal? Visionário ou conservador? Dramático ou prático?  4 - Identificar o nível de informação e detalhe oferecido no site. ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 [o planeamento] Envolve a resposta a algumas perguntas práticas: Qual o público-alvo do site? O que é preciso comunicar? Qual o objectivo ou necessidade do cliente? ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 4.  Quais os sites favoritos do cliente? 5.  Qual o esboço do site? 6.  Há algum material impresso no qual se pode basear? 7.  Que outros sites são similares à intenção e ideia do cliente?   ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 Qual o público-alvo do site?   Utilizadores   Para que os objectivos sejam alcançados, é importante compreender para quem estão orientados e subsequente forma de estruturar o conteúdo  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 Encontrar consenso entre as aptidões dos utilizadores é vital para o sucesso do projecto,  é isso importante compreender  o que disponibilizar e para quem.  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 Escolher um segmento populacional permitirá focar esforços e atrair esses utilizadores. A  -   Determinar quem estará interessado no conteúdo a disponibilizar.  Exemplo: Venda de Frutos Exóticos online Público-Alvo : Chefes de Restaurantes, Imigrantes, directores de grandes superfícies, cozinheiros experimentais e vegetarianos.  ISMT - Sandra Oliveira Como?
As fases do desenvolvimento  #1 B -  Determinar qual a capacidade para poder “servir” o público-alvo.  Exemplo : O fornecedor da empresa de Fruta exótica é uma pequena quinta com produção limitada,  Pensar em excluir como público-alvo compradores de grandes superfícies e grandes restaurantes .  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 C-  Determinar, dos restantes grupos definidos como público-alvo, quem tem acesso à Internet. ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 …  ainda no planeamento 2   O que é preciso comunicar? 3  Qual o objectivo ou necessidade do cliente? Objectivos de comunicação Entender a posição do cliente perante a  concorrência  e o  mercado ,  Delinear o que se pretende com a sua presença na Web.   ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 Objectivos_ definição A definição pode ser formal ou informal, consoante a dimensão do projecto.  Formal  - é necessário convocar reuniões com todas as pessoas envolvidas – formando assim uma  equipa de concepção   Informal  -  falar com elas individualmente, tendo o cuidado, contudo de anotar as suas ideias.  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 # Exemplos Site da Levi´s   Site da Amazon ISMT - Sandra Oliveira intenção disseminar o nome do seu produto.  define um tom, um ambiente, um ponto de vista, da mesma forma que um anúncio publicitário (spot) faz na televisão.  objectivo principal é vender livros.  Não apresentam nenhuma estética ou tentam impressionar
As fases do desenvolvimento  #1 # Exemplo empresa Fruta Exótica Objectivo : Atrair novos clientes e a possibilidade de compra online ISMT - Sandra Oliveira O Objectivo pode ser modificado aquando do estudo do número de utilizadores, no entanto, a definição inicial de um objectivo define de imediato o público-alvo, a estratégia e os conteúdos do site .
As fases do desenvolvimento  #1 Objectivos_ # Qual o seu propósito? Para que servirá esta presença na Internet? Para divulgar a empresa? Para vender produtos ou serviços? Qual o propósito da empresa? # Quais os objectivos principais? Fidelizar o cliente? Assisti-lo nos seus problemas? Expandir o mercada da empresa? Centralizar os seus recursos? Angariar novos clientes? ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 # Qual o público-alvo? Quais os clientes da empresa? Que idade têm? São pessoas instruídas? Quais são as condições económicas? São pessoas que dominam as novas tecnologias? Que futuros clientes se pretendem alcançar? # Que informação disponibilizar? Produtos e serviços comercializados? Informação técnica sobre os produtos? Recursos de assistência ao cliente? Divulgação empresarial? ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 4  Quais os sites favoritos do cliente? - Apresentação de uma lista dos sites favoritos.  - Saber quais as razões da escolha ISMT - Sandra Oliveira informações a respeito de como estruturar o trabalho de modo que ele atenda às expectativas e o gosto do cliente.
As fases do desenvolvimento  #1 5  Qual o esboço do site? Queremos instruir, criar interacção, distribuir informação, adquirir informação ou suportar o comércio online? Esta etapa é similar a definir os objectivos  do site,  mas tem a ver com os serviços oferecidos do que com o próprio design visual.  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 6  Presença de impressão se há uma presença impressa, é importante utilizar as ideias para o design do site.  Se já existe um logótipo, uma brochura, etc com a qual trabalhar, isto pode ajudar a escolher  tipografias  e  estratégia de cores .  ISMT - Sandra Oliveira
As fases do desenvolvimento  #1 7  Outros Sites  é importante fazer uma pesquisa a outros sites antes de começar.  Exemplo : criar um catálogo daquilo que gosta e daquilo que não gosta.  A maioria dos designers mantém um arquivo de “inspiração” ao qual recorrem quando estão com algum bloqueio ou à procura de ideias  ISMT - Sandra Oliveira
ISMT - Sandra Oliveira
ISMT - Sandra Oliveira
As fases do desenvolvimento  #3 ISMT - Sandra Oliveira
As fases do desenvolvimento  #3 Especificar qual a forma de produzir: A escrita manual de código HTML, por intermédio de editores de texto ou editores especializados de código HTML. Ou através de ferramentas de autoria para a Web que fornecem interfaces gráficas de fácil utilização que exigem muito menos conhecimentos sobre a linguagem HTML, tais como o Dreamweaver da Macromedia (Adobe) ou FrontPage (Microsoft). ISMT - Sandra Oliveira
As fases do desenvolvimento  #4 ISMT - Sandra Oliveira
As fases do desenvolvimento  #4 Multiplicidade de browsers existentes actualmente (Internet Explorer, Netscape, FireFox, etc).  Necessário testar o acesso ao site a partir de várias configurações do cliente.  ISMT - Sandra Oliveira
As fases do desenvolvimento  #4 Verificar se os requisitos em termos de desempenho são cumpridos.  envolve verificar se o sistema suporta o número de utilizadores planeado e se o tempo de resposta é aceitável ISMT - Sandra Oliveira
As fases do desenvolvimento  #5 ISMT - Sandra Oliveira
As fases do desenvolvimento  #5 Os  servidores  permitem registar o número de vezes que a página foi acedida e quais as hiperligações que foram seguidas a partir do site.  Esta informação pode igualmente ser utilizada para redefinir os conteúdos e adequá-los ao público-alvo.  ISMT - Sandra Oliveira
As fases do desenvolvimento  #5 Questionários Grupo de discussão;  Quais as actividades ou informações que gostariam de encontrar no site Classificações de determinadas funções (0 a 5) Como encontrou o site ISMT - Sandra Oliveira Como?
As fases do desenvolvimento  #5 Entrevistas Descrição detalhada por parte dos participantes da razão pela qual visitam o site. Quais as vantagens e desvantagens dos sites concorrentes ISMT - Sandra Oliveira

Mais conteúdo relacionado

Mais procurados (20)

PPTX
Internet das Coisas
Guilherme Martins
 
PDF
Principios do design
Iuri Lammel
 
PDF
Sql básico - Teoria e prática: Um grande resumo
Helder Lopes
 
PDF
Paradigmas de programação
Sérgio Souza Costa
 
PPTX
Internet
soniacruztic
 
PPT
Bases De Dados
arturafonsosousa
 
PPTX
Seguranca de rede
Universidade Federal do Pampa
 
PPTX
Conceitos Básicos Sobre Analise de Sistemas
Clayton de Almeida Souza
 
PPT
Introdução a Bancos de Dados
Ricardo Flores Zago, PMP, MSc
 
PDF
Aula 1 - Introdução a POO
Daniel Brandão
 
PDF
1.Introdução Banco de Dados
vini_campos
 
ODP
Excel Avançado - Aulas
Gustavo Sousa
 
PPT
Aula1 e aula2 - Analise e Projeto de Sistemas
Gustavo Gonzalez
 
PPTX
Informática Básica - Aula 05 - Sistema Operacional Windows
Joeldson Costa Damasceno
 
PDF
Algoritmos
Sérgio Souza Costa
 
PPTX
Lógica de programação { para iniciantes }
Mariana Camargo
 
PDF
Aula1 - Apresentação de Banco de Dados
Rafael Albani
 
PDF
Sistema operacional windows_10
Oseas_Lima
 
PPSX
Palestra Marketing Digital - Slides
Willian Vieira
 
PPT
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 
Internet das Coisas
Guilherme Martins
 
Principios do design
Iuri Lammel
 
Sql básico - Teoria e prática: Um grande resumo
Helder Lopes
 
Paradigmas de programação
Sérgio Souza Costa
 
Internet
soniacruztic
 
Bases De Dados
arturafonsosousa
 
Conceitos Básicos Sobre Analise de Sistemas
Clayton de Almeida Souza
 
Introdução a Bancos de Dados
Ricardo Flores Zago, PMP, MSc
 
Aula 1 - Introdução a POO
Daniel Brandão
 
1.Introdução Banco de Dados
vini_campos
 
Excel Avançado - Aulas
Gustavo Sousa
 
Aula1 e aula2 - Analise e Projeto de Sistemas
Gustavo Gonzalez
 
Informática Básica - Aula 05 - Sistema Operacional Windows
Joeldson Costa Damasceno
 
Lógica de programação { para iniciantes }
Mariana Camargo
 
Aula1 - Apresentação de Banco de Dados
Rafael Albani
 
Sistema operacional windows_10
Oseas_Lima
 
Palestra Marketing Digital - Slides
Willian Vieira
 
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 

Destaque (20)

PPT
Introdução ao web design
Carla Suelen
 
PDF
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
PPTX
Web Design - teoria básica das cores
Lucas Gheller
 
PPTX
TEORIA DA APRENDIZAGEM MULTIMÉDIA E ANÁLISE DO EFEITO DE MODALIDADE
Sérgio Lagoa
 
PPTX
Trabalhar Com O Power Point
@rte Digital
 
PPTX
A importância da informática
Sabrina Pretinha
 
PDF
Slides minicurso Web Design
Ana Mendes
 
PPTX
Aula 01 aplicativos informatizados para modelagem (tarde e noite)
Elisângela X. P. dos Santos
 
PDF
Web Design > História e a evolução do www
Felipe Fernandes
 
PPTX
Web Design Responsivo
Tiago Bezerra Dos Santos
 
PDF
Sistema computacional (arquitecturas y memorias)
Universidad Militar Nueva Granada-Universidad de Cundinamarca
 
PDF
Introdução a sistemas operacionais 001
ewerton333
 
PPT
So2 aula00-cic4 ma446-quarta
Anderson Favaro
 
PPTX
So2 aula00-noite-1sem2011
Anderson Favaro
 
PDF
Aula 1 Webdesign
Danilo Rosisca Pereira
 
PDF
SO-01 Introdução aos Sistemas Operacionais
Eduardo Nicola F. Zagari
 
PDF
Workshop de textos - Palavras ao vento - photoshop, illustrator, coreldraw, i...
haroldo Brito
 
DOCX
Sistema computacional 3
marleneca97
 
PDF
Marketing para as Artes
Turmadomarcondes
 
PDF
Introducao aos Sistemas Operacionais
Ricardo de Moraes
 
Introdução ao web design
Carla Suelen
 
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
Web Design - teoria básica das cores
Lucas Gheller
 
TEORIA DA APRENDIZAGEM MULTIMÉDIA E ANÁLISE DO EFEITO DE MODALIDADE
Sérgio Lagoa
 
Trabalhar Com O Power Point
@rte Digital
 
A importância da informática
Sabrina Pretinha
 
Slides minicurso Web Design
Ana Mendes
 
Aula 01 aplicativos informatizados para modelagem (tarde e noite)
Elisângela X. P. dos Santos
 
Web Design > História e a evolução do www
Felipe Fernandes
 
Web Design Responsivo
Tiago Bezerra Dos Santos
 
Sistema computacional (arquitecturas y memorias)
Universidad Militar Nueva Granada-Universidad de Cundinamarca
 
Introdução a sistemas operacionais 001
ewerton333
 
So2 aula00-cic4 ma446-quarta
Anderson Favaro
 
So2 aula00-noite-1sem2011
Anderson Favaro
 
Aula 1 Webdesign
Danilo Rosisca Pereira
 
SO-01 Introdução aos Sistemas Operacionais
Eduardo Nicola F. Zagari
 
Workshop de textos - Palavras ao vento - photoshop, illustrator, coreldraw, i...
haroldo Brito
 
Sistema computacional 3
marleneca97
 
Marketing para as Artes
Turmadomarcondes
 
Introducao aos Sistemas Operacionais
Ricardo de Moraes
 
Anúncio

Semelhante a Introdução Ao Web Design (20)

PDF
Plano de mkt digital conceitos e exemplos
Phlávia Fernandes
 
PDF
Como Criar Produtos Digitais
Leonardo de Souza
 
PPT
Briefing - (para web design)
mfiorelli
 
PDF
Multlinks Mídia Digital
Multlinks Mídia Digital
 
PPTX
Criação/Gestao_de_conteudos_digital_ppt.pptx
SilviaCunja
 
PDF
Apresentação publing 2013
Publing
 
PDF
Construa o seu negócio online: como, onde e porquê
Cady Bocum
 
PPTX
Aula 01 layout
Sergio Silva
 
PPTX
Aula 01 layout
Sergio Luiz da Silveira
 
PPTX
Produção de website
Lauren Piana
 
PDF
Aula07 - os 8 Ps do marketing digital
Marcio Nunes
 
PDF
Evolve - Consultoria de Marketing Digital para Startups
Welliton Oliveira
 
PPT
Como montar e facilitar um workshop de Design Sprint - Coletivo Mola
Coletivo Mola
 
PPT
Palestra - Como esta sua presença na internet?
H2Web
 
PDF
Social Media para B2B
Priscilla Saldanha
 
PDF
Construa o seu website com o wordpress
Cady Bocum
 
PDF
Aula PUC - Marketing digital x conteúdo
FilipeCarpes
 
PDF
Workshop_Com_estruturar_ideias_em_projectos.pdf
ssuser219b97
 
PDF
Marketing Digital para o Mercado de EPIs
Zanel EPIs de Raspa e Vaqueta
 
PDF
8 PS do Marketing Digital
Fabiano Morais
 
Plano de mkt digital conceitos e exemplos
Phlávia Fernandes
 
Como Criar Produtos Digitais
Leonardo de Souza
 
Briefing - (para web design)
mfiorelli
 
Multlinks Mídia Digital
Multlinks Mídia Digital
 
Criação/Gestao_de_conteudos_digital_ppt.pptx
SilviaCunja
 
Apresentação publing 2013
Publing
 
Construa o seu negócio online: como, onde e porquê
Cady Bocum
 
Aula 01 layout
Sergio Silva
 
Aula 01 layout
Sergio Luiz da Silveira
 
Produção de website
Lauren Piana
 
Aula07 - os 8 Ps do marketing digital
Marcio Nunes
 
Evolve - Consultoria de Marketing Digital para Startups
Welliton Oliveira
 
Como montar e facilitar um workshop de Design Sprint - Coletivo Mola
Coletivo Mola
 
Palestra - Como esta sua presença na internet?
H2Web
 
Social Media para B2B
Priscilla Saldanha
 
Construa o seu website com o wordpress
Cady Bocum
 
Aula PUC - Marketing digital x conteúdo
FilipeCarpes
 
Workshop_Com_estruturar_ideias_em_projectos.pdf
ssuser219b97
 
Marketing Digital para o Mercado de EPIs
Zanel EPIs de Raspa e Vaqueta
 
8 PS do Marketing Digital
Fabiano Morais
 
Anúncio

Mais de Sandra Oliveira (11)

PDF
O entretenimento é um meio de comunicação publicitária
Sandra Oliveira
 
PPTX
El uso de Advergames para crear participación
Sandra Oliveira
 
PPTX
Entretém-me e lembrar-me-ei! Os advergames como estratégia publicidtária
Sandra Oliveira
 
PPTX
Entretém-me e lembrar-me-ei! - O uso dos jogos digitais na estratégia publici...
Sandra Oliveira
 
PPTX
Perspectivas sobre a Gamificação
Sandra Oliveira
 
PPTX
Plataformas Colaborativas e de Aprendizagem
Sandra Oliveira
 
PPT
Advergames: acção viral WoMo (“Word of Mouse”)
Sandra Oliveira
 
PPTX
PUBLICIDADE INTERACTIVA:OS MUNDOS VIRTUAIS AO SERVIÇO DAS MARCAS
Sandra Oliveira
 
PPT
A interactividade nos mundos virtuais: As marcas publicitárias descobrem o Se...
Sandra Oliveira
 
PPT
Exemplos De Manipulação
Sandra Oliveira
 
PPT
Css e iFrames
Sandra Oliveira
 
O entretenimento é um meio de comunicação publicitária
Sandra Oliveira
 
El uso de Advergames para crear participación
Sandra Oliveira
 
Entretém-me e lembrar-me-ei! Os advergames como estratégia publicidtária
Sandra Oliveira
 
Entretém-me e lembrar-me-ei! - O uso dos jogos digitais na estratégia publici...
Sandra Oliveira
 
Perspectivas sobre a Gamificação
Sandra Oliveira
 
Plataformas Colaborativas e de Aprendizagem
Sandra Oliveira
 
Advergames: acção viral WoMo (“Word of Mouse”)
Sandra Oliveira
 
PUBLICIDADE INTERACTIVA:OS MUNDOS VIRTUAIS AO SERVIÇO DAS MARCAS
Sandra Oliveira
 
A interactividade nos mundos virtuais: As marcas publicitárias descobrem o Se...
Sandra Oliveira
 
Exemplos De Manipulação
Sandra Oliveira
 
Css e iFrames
Sandra Oliveira
 

Último (7)

PPTX
Desenvolvimento-de-Produtos-Inovadores.pptx
ssuser1d7565
 
PDF
Explorando o Futuro do Corpo: Implantes Neurais e o Biohacking dos Sentidos
cooperliora
 
PPTX
Gestão de Mudanças - Fases do processo de mudança organizacional
Gateware Group
 
PPTX
Gestão de Mudanças - O que é e como é implementada
Gateware Group
 
PPTX
Gestão de Mudanças - Os maiores desafios da Gestão de Mudanças e Gestão de Pr...
Gateware Group
 
PPTX
Computacao-e-Tecnologias-Digitais-Por-Que-Aprender.pptx
RobertaOliveiradaFon1
 
PDF
Certificado em Redes Neurais Artificiais em Python
CaioSilva506151
 
Desenvolvimento-de-Produtos-Inovadores.pptx
ssuser1d7565
 
Explorando o Futuro do Corpo: Implantes Neurais e o Biohacking dos Sentidos
cooperliora
 
Gestão de Mudanças - Fases do processo de mudança organizacional
Gateware Group
 
Gestão de Mudanças - O que é e como é implementada
Gateware Group
 
Gestão de Mudanças - Os maiores desafios da Gestão de Mudanças e Gestão de Pr...
Gateware Group
 
Computacao-e-Tecnologias-Digitais-Por-Que-Aprender.pptx
RobertaOliveiradaFon1
 
Certificado em Redes Neurais Artificiais em Python
CaioSilva506151
 

Introdução Ao Web Design

  • 1. Web Design I # 2007-2008 ISMT - Sandra Oliveira
  • 2. Introdução ao Web Design # Definição O Web Design é uma extensão da prática do design, o foco do projecto é criação de Web sites e documentos disponíveis no ambiente Web ISMT - Sandra Oliveira
  • 3. Introdução ao Web Design # Definições O Wd tende à multidisciplinaridade, a construção de páginas web apoia-se em diversas áreas técnicas, além do design propriamente dito. ISMT - Sandra Oliveira Áreas como a programação , inovação nos recursos dos navegadores que em conjunto com o design gráfico , estão em constante evolução.
  • 4. Introdução ao Web Design # Definição / Wikipédia “ A preocupação fundamental em web design é agregar os conceitos de usabilidade com o planeamento da interface, garantindo que o utilizador final atinja os seus objectivos de forma intuitiva. ” http://pt.wikipedia.org/wiki/Web_design ISMT - Sandra Oliveira
  • 5. Introdução ao Web Design O propósito do Web Design é facilitar a comunicação entre utilizador e conteúdo . Desenhar para a Web significa desenhar para as pessoas que usam a Web e não como achamos que usam ISMT - Sandra Oliveira
  • 6. Introdução ao Web Design As pessoas chegam aos sites de variadas formas: Percorrem as páginas à procura de pistas em vez de as lerem Tiram conclusões rápidas, em vez de avaliaram cuidadosamente. Nem sempre olham para o “quadro geral” Movem-se pelos seus objectivos e não os do cliente. ISMT - Sandra Oliveira
  • 7. Introdução ao Web Design Os Web Designers necessitem de capacidades para serem bem sucedidos neste ambiente. Deve conhecer perfeitamente os objectivos do site para os poder alcançar Deve ser claro o objectivo que o design vai ter, e manter esse propósito Deve ser simplista, isto é, se um elemento adiciona complexidade mas não valor, então deve ser mudado ISMT - Sandra Oliveira
  • 8. Web Design I # 2007-2008 ISMT - Sandra Oliveira
  • 9. As fases do desenvolvimento ISMT - Sandra Oliveira
  • 10. As fases do desenvolvimento #1 Variam consoante o tipos de site: educação, experiências, entretenimento, actividades comerciais e informação, combinações híbridas dos mesmos, etc. ISMT - Sandra Oliveira
  • 11. As fases do desenvolvimento #1 [a estratégia ] Relacionar-se com os objectivos do site, as necessidades e gostos da hipotética audiência, as forças e fraquezas da empresa concorrente as capacidades da própria empresa ISMT - Sandra Oliveira
  • 12. As fases do desenvolvimento #1 // Como definir uma estratégia? 1 - Definir a mensagem a passar. Exemplo : para uma empresa de venda de Frutas Exóticas, a mensagem pode residir na ideia: Comer fruta exótica é saudável, excitante e divertido ISMT - Sandra Oliveira
  • 13. As fases do desenvolvimento #1 2 - Decidir como persuadir a audiência em aceitar essa mensagem. Exemplo , decidir em “educar” os utilizadores nas inúmeras possibilidades de cada fruta exótica, e criar, assim, um ambiente (uma forma de estar) que os utilizadores querem participar. No fundo, tornar a compra mais fácil. ISMT - Sandra Oliveira
  • 14. As fases do desenvolvimento #1 3 - Escolher um tom. Sério e formal ou divertido e informal? Visionário ou conservador? Dramático ou prático? 4 - Identificar o nível de informação e detalhe oferecido no site. ISMT - Sandra Oliveira
  • 15. As fases do desenvolvimento #1 [o planeamento] Envolve a resposta a algumas perguntas práticas: Qual o público-alvo do site? O que é preciso comunicar? Qual o objectivo ou necessidade do cliente? ISMT - Sandra Oliveira
  • 16. As fases do desenvolvimento #1 4. Quais os sites favoritos do cliente? 5. Qual o esboço do site? 6. Há algum material impresso no qual se pode basear? 7. Que outros sites são similares à intenção e ideia do cliente? ISMT - Sandra Oliveira
  • 17. As fases do desenvolvimento #1 Qual o público-alvo do site? Utilizadores Para que os objectivos sejam alcançados, é importante compreender para quem estão orientados e subsequente forma de estruturar o conteúdo ISMT - Sandra Oliveira
  • 18. As fases do desenvolvimento #1 Encontrar consenso entre as aptidões dos utilizadores é vital para o sucesso do projecto, é isso importante compreender o que disponibilizar e para quem. ISMT - Sandra Oliveira
  • 19. As fases do desenvolvimento #1 Escolher um segmento populacional permitirá focar esforços e atrair esses utilizadores. A - Determinar quem estará interessado no conteúdo a disponibilizar. Exemplo: Venda de Frutos Exóticos online Público-Alvo : Chefes de Restaurantes, Imigrantes, directores de grandes superfícies, cozinheiros experimentais e vegetarianos. ISMT - Sandra Oliveira Como?
  • 20. As fases do desenvolvimento #1 B - Determinar qual a capacidade para poder “servir” o público-alvo. Exemplo : O fornecedor da empresa de Fruta exótica é uma pequena quinta com produção limitada, Pensar em excluir como público-alvo compradores de grandes superfícies e grandes restaurantes . ISMT - Sandra Oliveira
  • 21. As fases do desenvolvimento #1 C- Determinar, dos restantes grupos definidos como público-alvo, quem tem acesso à Internet. ISMT - Sandra Oliveira
  • 22. As fases do desenvolvimento #1 … ainda no planeamento 2 O que é preciso comunicar? 3 Qual o objectivo ou necessidade do cliente? Objectivos de comunicação Entender a posição do cliente perante a concorrência e o mercado , Delinear o que se pretende com a sua presença na Web. ISMT - Sandra Oliveira
  • 23. As fases do desenvolvimento #1 Objectivos_ definição A definição pode ser formal ou informal, consoante a dimensão do projecto. Formal - é necessário convocar reuniões com todas as pessoas envolvidas – formando assim uma equipa de concepção Informal - falar com elas individualmente, tendo o cuidado, contudo de anotar as suas ideias. ISMT - Sandra Oliveira
  • 24. As fases do desenvolvimento #1 # Exemplos Site da Levi´s Site da Amazon ISMT - Sandra Oliveira intenção disseminar o nome do seu produto. define um tom, um ambiente, um ponto de vista, da mesma forma que um anúncio publicitário (spot) faz na televisão. objectivo principal é vender livros. Não apresentam nenhuma estética ou tentam impressionar
  • 25. As fases do desenvolvimento #1 # Exemplo empresa Fruta Exótica Objectivo : Atrair novos clientes e a possibilidade de compra online ISMT - Sandra Oliveira O Objectivo pode ser modificado aquando do estudo do número de utilizadores, no entanto, a definição inicial de um objectivo define de imediato o público-alvo, a estratégia e os conteúdos do site .
  • 26. As fases do desenvolvimento #1 Objectivos_ # Qual o seu propósito? Para que servirá esta presença na Internet? Para divulgar a empresa? Para vender produtos ou serviços? Qual o propósito da empresa? # Quais os objectivos principais? Fidelizar o cliente? Assisti-lo nos seus problemas? Expandir o mercada da empresa? Centralizar os seus recursos? Angariar novos clientes? ISMT - Sandra Oliveira
  • 27. As fases do desenvolvimento #1 # Qual o público-alvo? Quais os clientes da empresa? Que idade têm? São pessoas instruídas? Quais são as condições económicas? São pessoas que dominam as novas tecnologias? Que futuros clientes se pretendem alcançar? # Que informação disponibilizar? Produtos e serviços comercializados? Informação técnica sobre os produtos? Recursos de assistência ao cliente? Divulgação empresarial? ISMT - Sandra Oliveira
  • 28. As fases do desenvolvimento #1 4 Quais os sites favoritos do cliente? - Apresentação de uma lista dos sites favoritos. - Saber quais as razões da escolha ISMT - Sandra Oliveira informações a respeito de como estruturar o trabalho de modo que ele atenda às expectativas e o gosto do cliente.
  • 29. As fases do desenvolvimento #1 5 Qual o esboço do site? Queremos instruir, criar interacção, distribuir informação, adquirir informação ou suportar o comércio online? Esta etapa é similar a definir os objectivos do site, mas tem a ver com os serviços oferecidos do que com o próprio design visual. ISMT - Sandra Oliveira
  • 30. As fases do desenvolvimento #1 6 Presença de impressão se há uma presença impressa, é importante utilizar as ideias para o design do site. Se já existe um logótipo, uma brochura, etc com a qual trabalhar, isto pode ajudar a escolher tipografias e estratégia de cores . ISMT - Sandra Oliveira
  • 31. As fases do desenvolvimento #1 7 Outros Sites é importante fazer uma pesquisa a outros sites antes de começar. Exemplo : criar um catálogo daquilo que gosta e daquilo que não gosta. A maioria dos designers mantém um arquivo de “inspiração” ao qual recorrem quando estão com algum bloqueio ou à procura de ideias ISMT - Sandra Oliveira
  • 32. ISMT - Sandra Oliveira
  • 33. ISMT - Sandra Oliveira
  • 34. As fases do desenvolvimento #3 ISMT - Sandra Oliveira
  • 35. As fases do desenvolvimento #3 Especificar qual a forma de produzir: A escrita manual de código HTML, por intermédio de editores de texto ou editores especializados de código HTML. Ou através de ferramentas de autoria para a Web que fornecem interfaces gráficas de fácil utilização que exigem muito menos conhecimentos sobre a linguagem HTML, tais como o Dreamweaver da Macromedia (Adobe) ou FrontPage (Microsoft). ISMT - Sandra Oliveira
  • 36. As fases do desenvolvimento #4 ISMT - Sandra Oliveira
  • 37. As fases do desenvolvimento #4 Multiplicidade de browsers existentes actualmente (Internet Explorer, Netscape, FireFox, etc). Necessário testar o acesso ao site a partir de várias configurações do cliente. ISMT - Sandra Oliveira
  • 38. As fases do desenvolvimento #4 Verificar se os requisitos em termos de desempenho são cumpridos. envolve verificar se o sistema suporta o número de utilizadores planeado e se o tempo de resposta é aceitável ISMT - Sandra Oliveira
  • 39. As fases do desenvolvimento #5 ISMT - Sandra Oliveira
  • 40. As fases do desenvolvimento #5 Os servidores permitem registar o número de vezes que a página foi acedida e quais as hiperligações que foram seguidas a partir do site. Esta informação pode igualmente ser utilizada para redefinir os conteúdos e adequá-los ao público-alvo. ISMT - Sandra Oliveira
  • 41. As fases do desenvolvimento #5 Questionários Grupo de discussão; Quais as actividades ou informações que gostariam de encontrar no site Classificações de determinadas funções (0 a 5) Como encontrou o site ISMT - Sandra Oliveira Como?
  • 42. As fases do desenvolvimento #5 Entrevistas Descrição detalhada por parte dos participantes da razão pela qual visitam o site. Quais as vantagens e desvantagens dos sites concorrentes ISMT - Sandra Oliveira