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

» contato@bongiornoweb.com.br

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-

mail

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 SitesLorem Ipsum

http://br.lipsum.com/

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!