Planejamento e Desenvolvimento de Web Sites
-
Upload
renato-bongiorno -
Category
Education
-
view
1.065 -
download
1
description
Transcript of Planejamento e Desenvolvimento de Web Sites
![Page 1: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/1.jpg)
Planejando e Desenvolvimento web sites
Ensino IP
![Page 2: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/2.jpg)
|| 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
Quem sou eu…?
![Page 3: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/3.jpg)
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
• Ferramenta Cacoo
• Atividade Prática - Criando o Mapa do Site
• Wireframe
• Desenvolvimento do Wireframe - Home
• Produtividade em Wireframes
• Lorem Ipsum
• Atividade Prática - Finalizando Wireframes
![Page 4: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/4.jpg)
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
• Atividade Prática - Finalizando Arte Floricultura
![Page 5: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/5.jpg)
De onde partimos, para onde vamos?
1. Planejamento
![Page 6: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/6.jpg)
De onde partimos, para onde vamos?
1. Estruturação
2. Criação
![Page 7: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/7.jpg)
A Internet
A Internet – do ponto de vista tecnológico – é uma imensa rede de computadores interligados
de alcance mundial...
![Page 8: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/8.jpg)
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.
![Page 9: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/9.jpg)
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
![Page 10: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/10.jpg)
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.
![Page 11: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/11.jpg)
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.
![Page 12: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/12.jpg)
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.
![Page 13: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/13.jpg)
Segurança na Internet
Cartilha de Segurança para Internet
http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf
![Page 14: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/14.jpg)
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
![Page 15: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/15.jpg)
Planejando Web SitesComo 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.
![Page 16: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/16.jpg)
Planejando Web SitesBriefing
Quero fazer um site… só isso?!
![Page 17: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/17.jpg)
Planejando Web SitesBriefing - Mais que um site…
SOCIAL MEDIA
GOOGLE SEO/SEM
BLOG
LOJA VIRTUA
L
Cada etapa é um
projeto que
contempla um
site...
LANDING PAGE
VIDEO
SITE
![Page 18: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/18.jpg)
Planejando Web SitesBriefing - Mais que um site…
Um pouco do que vem por aí...
Social Media Revolutionhttp://www.youtube.com/watch?v=9SBKtdYLRUM
Mobile Mkthttp://www.youtube.com/watch?v=xzmQm-hRgTg
![Page 19: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/19.jpg)
Planejando Web SitesBriefing
O briefing corresponde ao
levantamento de requisitos e
objetivos necessários para
realização do web site.
![Page 20: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/20.jpg)
Planejando Web SitesBriefing
O Principal
objetivo é
entender o que o
cliente quer….
![Page 21: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/21.jpg)
Planejando Web SitesBriefing
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-
com perguntas básicas sobre as
necessidades do
cliente.
![Page 22: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/22.jpg)
Planejando Web SitesBriefing
Dica - Google Forms
![Page 23: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/23.jpg)
Planejando Web SitesBriefing
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?
![Page 24: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/24.jpg)
Planejando Web SitesBriefing
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?
![Page 25: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/25.jpg)
Planejando Web SitesBriefing
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?
![Page 26: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/26.jpg)
Planejando Web SitesBriefing
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...
![Page 27: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/27.jpg)
Planejando Web SitesBriefing
![Page 28: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/28.jpg)
Planejando Web SitesBriefing
![Page 29: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/29.jpg)
Planejando Web SitesBriefing
Rabisque e crie em seguida, a chance de você esquecer o que
pensou com os rabiscos de um
briefing são grandes...
![Page 30: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/30.jpg)
Planejando Web SitesBriefing
![Page 31: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/31.jpg)
Planejando Web SitesBriefing - Atividade Prática
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ê.
O que fazer?!
![Page 32: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/32.jpg)
Planejando Web SitesBriefing - Atividade Prática
O que fazer?! Nessa atividade você
irá desempenhar dois papéis,
de cliente e de web designer.
![Page 33: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/33.jpg)
Planejando Web SitesBriefing
Em dupla, vocês irão
definir um questionário
(briefing) para o
desenvolvimento de um
site de uma floricultura.
Cada integrante da dupla deverá
inicialmente fazer o seu questionário e,
ao finalizar todas as questões que
achar relevante, cada um deverá
responder ao questionamento do
outro, obtendo assim o briefing e a
resposta para suas perguntas.
![Page 34: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/34.jpg)
Planejando Web SitesBriefing
Dica - USE Google Forms
![Page 35: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/35.jpg)
Planejando Web SitesDefiniçã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.
![Page 36: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/36.jpg)
Planejando Web SitesDefinição do Mapa do Site – Sitemap
Exemplos de Sitemap
![Page 37: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/37.jpg)
Planejando Web SitesDefinição do Mapa do Site – Sitemap
![Page 38: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/38.jpg)
Planejando Web SitesDesenvolvendo 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.
![Page 39: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/39.jpg)
Planejando Web SitesDesenvolvendo um Mapa do Site
Para esta atividade, utilizaremos a ferramenta online Cacoo
Acesse e crie uma conta - https://cacoo.com/
![Page 40: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/40.jpg)
Planejando Web SitesAtividade Prática - Criando o Mapa do Site
Criando o Mapa do Site de um Restaurante Mexicano com as seguintes
seções:Vamos
trabalhar!
![Page 41: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/41.jpg)
Planejando Web SitesAtividade 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.
Vamos trabalhar!
Atividade a ser entregue - compartilhar no grupo do Facebook
![Page 42: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/42.jpg)
Planejando Web SitesWireframe
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.
![Page 43: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/43.jpg)
Planejando Web SitesWireframe
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.
![Page 44: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/44.jpg)
Planejando Web SitesWireframe - 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
![Page 45: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/45.jpg)
Planejando Web SitesWireframe - Estrutura
Qual o tamanho que devo criar o wireframe do meu
site?
Qual resolução mais utilizada atualmente?
http://gs.statcounter.com
![Page 46: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/46.jpg)
Planejando Web SitesWireframe - Estrutura
E para celular ou tablet?
Sites para mobile/tablets =
Outro projeto, outro sitemap, outro wireframe …outro tudo!
![Page 47: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/47.jpg)
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
Vamos trabalhar? Vamos
trabalhar!Criando o Wireframe da
página home...
![Page 48: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/48.jpg)
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
![Page 49: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/49.jpg)
Planejando Web SitesWireframe & 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;
![Page 50: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/50.jpg)
Planejando Web SitesWireframe & 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.
![Page 51: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/51.jpg)
Planejando Web SitesWireframe & Usabilidade
![Page 52: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/52.jpg)
Planejando Web SitesWireframe & Acessibilidade
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.
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.
![Page 53: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/53.jpg)
Planejando Web SitesWireframe & Acessibilidade
![Page 54: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/54.jpg)
Planejando Web SitesLorem 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
![Page 55: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/55.jpg)
Planejando Web SitesLorem 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.
![Page 57: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/57.jpg)
Planejando Web SitesCriando 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.
Vamos trabalhar!
Atividade a ser entregue - compartilhar no grupo do Facebook
![Page 58: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/58.jpg)
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
Cardápio Quem somos Fotos Contato Onde
Estamos?
![Page 59: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/59.jpg)
Planejando Web SitesQuer ver mais Wireframes..?
http://wireframes.tumblr.com/
![Page 60: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/60.jpg)
Planejando Web SitesPrecisou de ícones, eis a solução!
https://www.iconfinder.com/ http://www.iconarchive.com/ http://www.flaticon.com/
![Page 61: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/61.jpg)
Planejando Web SitesAtividade 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!
![Page 62: Planejamento e Desenvolvimento de Web Sites](https://reader035.fdocumentos.tips/reader035/viewer/2022062513/55652f9bd8b42a313f8b4641/html5/thumbnails/62.jpg)
Planejando Web SitesAtividade Prática - Wireframe
Bom trabalho!