Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introdução Ao Web Design

8,378 views

Published on

Introdução ao Web Design e as fases do desenvolvimento de projectos para a web

Published in: Technology

Introdução Ao Web Design

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

×