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.

1. Planejando e Desenvolvimento web sites
Ensino IP

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. 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. 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. De onde partimos, para onde vamos?
1. Planejamento

6. De onde partimos, para onde vamos?
1. Estruturação
2. Criação

7. A Internet
A Internet – do ponto de vista tecnológico – é uma
imensa rede de computadores interligados de alcance
mundial...

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. 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. 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. 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. 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. Segurança na Internet
Cartilha de Segurança para Internet
http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf

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. 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. Planejando Web Sites
Briefing
Quero fazer um site… só isso?!

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. 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. Planejando Web Sites
Briefing
O briefing corresponde ao
levantamento de requisitos e
objetivos necessários para
realização do web site.

20. Planejando Web Sites
Briefing
O Principal objetivo
é entender o que o
cliente quer….

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. Planejando Web Sites
Briefing
Dica - Google Forms

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. 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. 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. 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. Planejando Web Sites
Briefing

28. Planejando Web Sites
Briefing

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. Planejando Web Sites
Briefing

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. 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. 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. Planejando Web Sites
Briefing
Dica - USE Google Forms

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. Planejando Web Sites
Definição do Mapa do Site – Sitemap
Exemplos de Sitemap

37. Planejando Web Sites
Definição do Mapa do Site – Sitemap

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. 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. 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. 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. 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. 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. 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. 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. Planejando Web Sites
Wireframe - Estrutura
E para celular ou tablet?
Sites para mobile/tablets =
Outro projeto, outro sitemap, outro
wireframe …outro tudo!

47. Planejando Web Sites
Criando o Wireframe utilizando o Cacoo
Vamos trabalhar?
Criando o
Wireframe da
página home...
Vamos
trabalhar!

48. Planejando Web Sites
Criando o Wireframe utilizando o Cacoo

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. 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. Planejando Web Sites
Wireframe & Usabilidade

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. Planejando Web Sites
Wireframe & Acessibilidade

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. 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. Planejando Web Sites
Lorem Ipsum
http://br.lipsum.com/

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. Planejando Web Sites
Criando o Wireframe utilizando o Cacoo
Cardápio
Quem somos
Fotos
Contato
Onde Estamos?

59. Planejando Web Sites
Quer ver mais Wireframes..?
http://wireframes.tumblr.com/

60. Planejando Web Sites
Precisou de ícones, eis a solução!
https://www.iconfinder.com/
http://www.iconarchive.com/
http://www.flaticon.com/

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. Planejando Web Sites
Atividade Prática - Wireframe
Bom trabalho!