Planejamento e Desenvolvimento de Web Sites

1,531
-1

Published on

Treinamento de Planejamento e Desenvolvimento de Web Sites para professores da escola ENSINO IP.

Objetivo: Inserção do conteúdo Web para ensino médio.

Published in: Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,531
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
166
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Planejamento e Desenvolvimento de Web Sites

  1. 1. Planejando e Desenvolvimento web sites Ensino IP
  2. 2. Quem sou eu…? || Renato Bongiorno Bonfanti » Web, Consultor SEO e Analista de Social Media || Bongiornoweb - Web | SEO | Social Media » (11) 97088-3781 | (11) 97688-8824 » http://www.bongiornoweb.com.br/ » https://www.facebook.com/bongiornoweb » https://twitter.com/bongiornoweb » http://instagram.com/bongiornoweb » http://www.pinterest.com/bongiornoweb/ » http://www.linkedin.com/in/bongiornoweb » https://plus.google.com/u/0/+RenatoBongiorno-bongiornoweb » contato@bongiornoweb.com.br
  3. 3. Agenda - Parte I • • • • • • • • • A Internet Internet vs Web Segurança na Internet Planejando Web Sites Como conquistar clientes na era digital Briefing Atividade Prática - Criando Briefings Definição do Mapa do Site – Sitemap Desenvolvendo um Mapa do Site • • • • • Wireframe Desenvolvimento do Wireframe - Home Produtividade em Wireframes Lorem Ipsum Atividade Prática - Finalizando Wireframes
  4. 4. Agenda - Parte II • • • • • • • O Protótipo Desenvolvendo o Protótipo Selecionando as cores para o design do site Imagens Flat Design – Design Plano Criando o protótipo Atividade Prática - Finalizando Arte Restaurante
  5. 5. De onde partimos, para onde vamos? 1. Planejamento
  6. 6. De onde partimos, para onde vamos? 1. Estruturação 2. Criação
  7. 7. A Internet A Internet – do ponto de vista tecnológico – é uma imensa rede de computadores interligados de alcance mundial...
  8. 8. A Internet Desde seu surgimento facilitou a comunicação mundial entre empresas e pessoas, gerando oportunidades de negócios, facilitando o relacionamento com clientes através de uma nova forma de comunicação.
  9. 9. A Internet A internet é um passaporte de cidadania do mundo. Não tem nacionalidade. Não tem fronteira. Não tem dono, nem governo. Nela cabem todas as ideologias. Nela o homem é livre. E a mensagem, verdadeira. Internet para Pequenos Negócios – Sebrae
  10. 10. O que é Internet e o que é a Web? A Internet corresponde ao meio físico (cabos, servidores, roteadores, modens) pelas quais os computadores ao redor do mundo são interligados.
  11. 11. O que é Internet e o que é a Web? A Web corresponde aos sites que navegamos, aos e-mails que enviamos, as ferramentas de chat que utilizamos em nosso dia a dia, resumindo, corresponde a forma de comunicação que utilizamos através da Internet.
  12. 12. Segurança na Internet Navegar na Internet requer muito cuidado e atenção, pois sabemos que dentro desse fascinante universo, existem também, muitos perigos.
  13. 13. Segurança na Internet Cartilha de Segurança para Internet http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf
  14. 14. Segurança na Internet Navegar é preciso - http://www.youtube.com/watch?v=QyOhW-cOpT0 Os Invasores - http://www.youtube.com/watch?v=0Zxt7kS5miQ Spam - http://www.youtube.com/watch?v=DFL5TbyfhrU A Defesa - http://www.youtube.com/watch?v=xwJkQKJGlnA
  15. 15. Planejando Web Sites Como conquistar clientes na era digital Atualmente, empresas não mais devem oferecer web sites a seus clientes, e sim uma proposta de comunicação digital para empresas no mundo virtual.
  16. 16. Planejando Web Sites Briefing Quero fazer um site… só isso?!
  17. 17. Planejando Web Sites Briefing - Mais que um site… VIDEO Cada etapa é um projeto que contempla um site... LANDING PAGE SOCIAL MEDIA SITE LOJA VIRTUA L GOOGLE SEO/SEM BLOG
  18. 18. Planejando Web Sites Briefing - Mais que um site… Um pouco do que vem por aí... Social Media Revolution http://www.youtube.com/watch?v=9SBKtdYLRUM Mobile Mkt http://www.youtube.com/watch?v=xzmQm-hRgTg
  19. 19. Planejando Web Sites Briefing O briefing corresponde ao levantamento de requisitos e objetivos necessários para realização do web site.
  20. 20. Planejando Web Sites Briefing O Principal objetivo é entender o que o cliente quer….
  21. 21. Planejando Web Sites Briefing O briefing pode ser feito através de reuniões presenciais, conversas online via ferramentas de chats (ex.: Skype) ou até mesmo através de formulários enviados por e-mail com perguntas básicas sobre as necessidades do cliente.
  22. 22. Planejando Web Sites Briefing Dica - Google Forms
  23. 23. Planejando Web Sites Briefing 1) Qual o ramo de atuação da empresa? 2) Quais os produtos e serviços oferecidos? 3) O site já possui em endereço atual? 4) Existe alguma objeção de conteúdo e layout para o site? (Ex.: não utilizar as cores x,y,z) 5) Quais são os principais objetivos do site? 6) Quais são as mensagens mais importantes que o site deve passar aos visitantes?
  24. 24. Planejando Web Sites Briefing 7) Quais são os planos para promover o site? Google, Midias Sociais, E-mail Marketing? 8) Há uma data aproximada para o site tenha que estar pronto? 9) É necessário obter dados dos visitantes em formulários? O que é preciso saber? Por quê? 10) Quais as páginas que deverá ter no site? Como: Sobre Nós / Contato / etc. Favor especificar. 11) Qual o conhecimento que os visitantes do site tem de internet/web?
  25. 25. Planejando Web Sites Briefing 12) O site terá atualização constante? 13) Tem em mente alguma aparência para o web site? 14) Existem padrões existentes, como logotipos e cores, que devem estar presentes? 15) Quais são alguns outros sites da web que você gosta? O que você gosta a respeito deles? Se possível, envie links de referência. 16) Quem será o responsável pelo contato com para eventuais esclarecimentos sobre o projeto e envio de materiais? 1) O que não pode haver no web site, em função dos concorrentes?
  26. 26. Planejando Web Sites Briefing IMPORTANTE Não existe um briefing padrão para todos os projetos. A reunião presencial ainda é o melhor método para alinhar as métricas e expectativas de um web site. Cuidado com os rabiscos em reunião...
  27. 27. Planejando Web Sites Briefing
  28. 28. Planejando Web Sites Briefing
  29. 29. Planejando Web Sites Briefing Rabisque e crie em seguida, a chance de você esquecer o que pensou com os rabiscos de um briefing são grandes...
  30. 30. Planejando Web Sites Briefing
  31. 31. Planejando Web Sites Briefing - Atividade Prática O que fazer?! Imagine que você é dono de uma floricultura e deseja realizar um site, para isso você irá contratar um colega para desenvolver o site para você.
  32. 32. Planejando Web Sites Briefing - Atividade Prática O que fazer?! Nessa atividade você irá desempenhar dois papéis, de cliente e de web designer.
  33. 33. Planejando Web Sites Briefing Em dupla, vocês irão definir Cada integrante da dupla deverá um questionário (briefing) para inicialmente fazer o seu questionário e, ao o desenvolvimento de um site finalizar todas as questões que achar de uma floricultura. relevante, cada um deverá responder ao questionamento do outro, obtendo assim o briefing e a resposta para suas perguntas.
  34. 34. Planejando Web Sites Briefing Dica - USE Google Forms
  35. 35. Planejando Web Sites Definição do Mapa do Site – Sitemap O Mapa do Site corresponde a estrutura e todas as ligações entre si que o site deverá conter.
  36. 36. Planejando Web Sites Definição do Mapa do Site – Sitemap Exemplos de Sitemap
  37. 37. Planejando Web Sites Definição do Mapa do Site – Sitemap
  38. 38. Planejando Web Sites Desenvolvendo um Mapa do Site O mapa do site é muito semelhante a um fluxograma ou organograma empresarial, diferenciando apenas por se tratar da hierarquia entre as páginas da web.
  39. 39. Planejando Web Sites Desenvolvendo um Mapa do Site Para esta atividade, utilizaremos a ferramenta online Cacoo Acesse e crie uma conta - https://cacoo.com/
  40. 40. Planejando Web Sites Atividade Prática - Criando o Mapa do Site Criando o Mapa do Site de um Restaurante Mexicano com as seguintes seções: Vamos trabalhar!
  41. 41. Planejando Web Sites Atividade Prática - Criando o SEU Mapa do Site Agora que você já sabe como estruturar um mapa do site, estruture o mapa do site da floricultura do seu colega baseado nas respostas obtidas pelo briefing. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  42. 42. Planejando Web Sites Wireframe O Wireframe é a representação das áreas úteis de cada elemento do seu site, servirá para definir em qual lugar da página irá ficar o menu, as imagens, os textos, vídeos e todos os outros elementos gráficos a serem exibidos em sua página.
  43. 43. Planejando Web Sites Wireframe O Wireframe deverá ser composto por formas geométricas que irão representar os elementos do seu site e deverá ser produzido em tons de cinza para que o cliente no momento que visualizar o wireframe visualize a disposição e orientação dos objetos como um todo, e não foque sua atenção em um único objeto ou texto que lhe chamar mais atenção.
  44. 44. Planejando Web Sites Wireframe - Estrutura A maioria das páginas que compõem um web site contam com uma definição de áreas úteis reutilizáveis em todas as páginas, no nosso caso, da seguinte forma: - Topo: com a representação da identidade visual (logotipo), contatos, menu; - Banner: Informações sobre a empresa de forma dinâmica - Área de conteúdo: Informações que irão contemplar a página - Rodapé: Contatos e redes sociais
  45. 45. Planejando Web Sites Wireframe - Estrutura Qual o tamanho que devo criar o wireframe do meu site? Qual resolução mais utilizada atualmente? http://gs.statcounter.com
  46. 46. Planejando Web Sites Wireframe - Estrutura E para celular ou tablet? Sites para mobile/tablets = Outro projeto, outro sitemap, outro wireframe …outro tudo!
  47. 47. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Vamos trabalhar? Criando o Wireframe da página home... Vamos trabalhar!
  48. 48. Planejando Web Sites Criando o Wireframe utilizando o Cacoo
  49. 49. Planejando Web Sites Wireframe & Usabilidade Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241: • • Facilidade de aprendizado: a utilização do sistema requer pouco treinamento; Fácil de memorizar: o usuário deve lembrar como utilizar a interface depois de algum tempo;
  50. 50. Planejando Web Sites Wireframe & Usabilidade Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241: • • • Maximizar a produtividade: a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente; Minimizar a taxa de erros: caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil; Maximizar a satisfação do usuário: a interface deve dar-lhe confiança e segurança.
  51. 51. Planejando Web Sites Wireframe & Usabilidade
  52. 52. Planejando Web Sites Wireframe & Acessibilidade Acessibilidade Web refere-se a prática inclusiva de fazer websites que possam ser utilizados por todas as pessoas que tenham deficiência ou não. Segundo a pesquisa "Dimensões e características da Web brasileira: um estudo do .gov.br" realizada pelo W3C.br/NIC.br, somente 2% das páginas web governamentais são acessíveis.
  53. 53. Planejando Web Sites Wireframe & Acessibilidade
  54. 54. Planejando Web Sites Lorem Ipsum Lorem Ipsum é um texto em latim que na área de web design e design gráfico é utilizada para preencher áreas de textos que o cliente precisará informar o texto correto
  55. 55. Planejando Web Sites Lorem Ipsum Sua utilização se dá para que a diagramação do texto fique correta (posicionamento das letras, alinhamento das palavras, etc.) porém sua leitura não distraia o cliente, fazendo com que o mesmo foque sua atenção ao design e não ao texto.
  56. 56. Planejando Web Sites Lorem Ipsum http://br.lipsum.com/
  57. 57. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Agora que você já sabe quais as ferramentas necessárias para estruturar um Wireframe, finalize o Wireframe da página Home estruture o exemplo do restaurante conforme as telas a seguir. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  58. 58. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Cardápio Quem somos Fotos Contato Onde Estamos?
  59. 59. Planejando Web Sites Quer ver mais Wireframes..? http://wireframes.tumblr.com/
  60. 60. Planejando Web Sites Precisou de ícones, eis a solução! https://www.iconfinder.com/ http://www.iconarchive.com/ http://www.flaticon.com/
  61. 61. Planejando Web Sites Atividade Prática - Wireframe Agora que você já sabe estruturar um Wireframe, estruture o da floricultura de seu colega a partir das informações obtidas no mapa do site. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  62. 62. Planejando Web Sites Atividade Prática - Wireframe Bom trabalho!

×