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

Introdução Ao Web Design

  • 1.
    Web Design I# 2007-2008 ISMT - Sandra Oliveira
  • 2.
    Introdução ao WebDesign # 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 WebDesign # 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 WebDesign # 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 WebDesign 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 WebDesign 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 WebDesign 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 dodesenvolvimento ISMT - Sandra Oliveira
  • 10.
    As fases dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #1 C- Determinar, dos restantes grupos definidos como público-alvo, quem tem acesso à Internet. ISMT - Sandra Oliveira
  • 22.
    As fases dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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 - SandraOliveira
  • 33.
    ISMT - SandraOliveira
  • 34.
    As fases dodesenvolvimento #3 ISMT - Sandra Oliveira
  • 35.
    As fases dodesenvolvimento #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 dodesenvolvimento #4 ISMT - Sandra Oliveira
  • 37.
    As fases dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #5 ISMT - Sandra Oliveira
  • 40.
    As fases dodesenvolvimento #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 dodesenvolvimento #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 dodesenvolvimento #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