Planejando e Desenvolvimento web sites
Ensino IP
|| 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…?
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
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
De onde partimos, para onde vamos?
1. Planejamento
De onde partimos, para onde vamos?
1. Estruturação
2. Criação
A Internet
A Internet – do ponto de vista tecnológico – é uma imensa rede de computadores interligados
de alcance mundial...
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.
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
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.
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.
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.
Segurança na Internet
Cartilha de Segurança para Internet
http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf
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
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.
Planejando Web SitesBriefing
Quero fazer um site… só isso?!
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
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
Planejando Web SitesBriefing
O briefing corresponde ao
levantamento de requisitos e
objetivos necessários para
realização do web site.
Planejando Web SitesBriefing
O Principal
objetivo é
entender o que o
cliente quer….
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.
Planejando Web SitesBriefing
Dica - Google Forms
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?
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?
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?
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...
Planejando Web SitesBriefing
Planejando Web SitesBriefing
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...
Planejando Web SitesBriefing
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?!
Planejando Web SitesBriefing - Atividade Prática
O que fazer?! Nessa atividade você
irá desempenhar dois papéis,
de cliente e de web designer.
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.
Planejando Web SitesBriefing
Dica - USE Google Forms
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.
Planejando Web SitesDefinição do Mapa do Site – Sitemap
Exemplos de Sitemap
Planejando Web SitesDefinição do Mapa do Site – Sitemap
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.
Planejando Web SitesDesenvolvendo um Mapa do Site
Para esta atividade, utilizaremos a ferramenta online Cacoo
Acesse e crie uma conta - https://cacoo.com/
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!
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
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.
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.
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
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
Planejando Web SitesWireframe - Estrutura
E para celular ou tablet?
Sites para mobile/tablets =
Outro projeto, outro sitemap, outro wireframe …outro tudo!
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
Vamos trabalhar? Vamos
trabalhar!Criando o Wireframe da
página home...
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
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;
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.
Planejando Web SitesWireframe & Usabilidade
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.
Planejando Web SitesWireframe & Acessibilidade
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
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.
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
Planejando Web SitesCriando o Wireframe utilizando o Cacoo
Cardápio Quem somos Fotos Contato Onde
Estamos?
Planejando Web SitesQuer ver mais Wireframes..?
http://wireframes.tumblr.com/
Planejando Web SitesPrecisou de ícones, eis a solução!
https://www.iconfinder.com/ http://www.iconarchive.com/ http://www.flaticon.com/
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!
Planejando Web SitesAtividade Prática - Wireframe
Bom trabalho!