Revisão Webdesign

WEBDESIGN:
PROGRAMAÇÃO, WEBSITES
E REDES SOCIAIS
RENATO MELO - 2019

Registro.br
Portal oficial de domínios do Brasil.
Domínios para pessoas físicas e jurídicas.

Para os Buscadores
Domínios do Brasil também contam pontos
no ranking dos motores de busca

Evite Dor de Cabeça
Evite registrar domínios diretamente
no Provedor de Hospedagem.

Domínios reservados
O Comitê Gestor pode reservar nomes de
acordo com o critério constante na
regulamentação vigente

Categorias
Uma pessoa ou empresa pode registrar o
mesmo domínio em categorias diferentes:
Ex: seusite.com.br e seusite.net.br

Pesquise
Antes de registrar, você pode pesquisar se o
domínio já existe. Senão, busque alternativas
que estejam disponíveis.

Faça seu cadastro
como usuário e
registro do domínio

O domínio só garante seu
endereço. Você precisa de
uma hospedagem para
armazenar seus arquivos.

E O REGISTRO.BR PEDIRÁ O
DNS
É o equipamento responsável por permitir
que seu domínio esteja ativo na internet. É
um endereço fornecido pelo seu provedor.

CONTRATE HOSPEDAGEM EM LINUX
Hospedagens em Linux são ideais para trabalhar
com banco de dados (php). Uma hospedagem em
Windows é boa somente para a linguagem da
microsoft: ASP.net

Outros domínios
Eleito o melhor site de registros do mundo

E como meu site vai pro ar? Como
eu mando meus arquivos?

Você transfere os
arquivos via FTP

Pode ser feito no site da sua
hospedagem, via windows
explorer ou de um programa

Você precisa de:
Endereço do FTP
Usuário
Senha

Internet, como é
composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica

INTERFACE
GRÁFICA
A parte legal da história...

HTML
Html é um arquivo que pode ser
interpretado por navegadores.

HTML
E pode ser editado desde o bloco de notas até
programas WYSIWYG, como o Dreamweaver

Bloco de notas
Somente a linha de código
contendo sua programação

Dreamweaver
Edição do html na linha de
código ou no design.

Antigamente: Site
com emaranhado
de tags, estilos e
formatações

Se o cliente pedisse
alteração você tinha
que alterar página
por página.

Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e
Comportamento “aninhados”
✗ Código Incompreensível

COM PADRÕES
✔ Acessível de qualquer
dispositivo
✔ Layout baseado em CSS
✔ Separação entre
Conteúdo, Apresentação e
Comportamento
✔ Código Acessível

VANTAGENS
Carregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos
Mecanismos de Buscas
Maior acessibilidade

nome
Define um estilo único para
um elemento: body, h1...
TÉCNICO
Parte mais
importante

#nome
Define um estilo único
para um identificador
#TIME
Seguem as
ordens do técnico

.nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.
.jogador
Joga para o
#time

Exemplo
body{
background: #ccc;
font: 12pt Arial, Sans-Serif;
color: #000;
}
#topo{
width: 780px;
background: #ccc url(bgtopo.jpg) repeat-x;
font-size: 20pt;
color: #ff0000;
}
.produto{
float: right;
text-align: center;
font-size: 16pt;
color: #ff0000;
}

As Fontes também
merecem atenção

Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New
Roman...

Pode-se colocar mais de
uma fonte + opção de
“Sans-serif” ou “Serif”

E-mail MKT
Não deixe que sua
empresa seja igual ao
seu “Tio chato”

Legislação
Compra de dados é ilegal!
Tanto para e-mail, quanto
para SMS, você precisa ter
autorização da pessoa para
enviar e-mail marketing.

Legislação
Mesmo com autorização,
você tem que disponibilizar
um link de opt-out, caso o
cliente não queira mais
suas mensagens.

SPAM
Quanto mais marcação
como SPAM no seu
domínio, pior para
você

O E-MAIL MARKETING BEM
REDIGIDO EM HTML
RESOLVE O SPAM E
AUMENTA A TAXA DE
ABERTURA

OS ERROS MAIS COMUNS
Criação da base
Frequência de envio
Venda x Relacionamento

“Você deve
começar com a
experiência do
usuário e depois
ir para a
tecnologia”

Usuário
60+ - Máquina de escrever e TV
40+ - Computador, internet e DVD
18+ - Tablet e smartphones – Heavy users

INTERNET
ONTEM
Anúncios Sites Institucionais

INTERNET HOJE: INTEGRAÇÃO
E CONVERSÃO
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística

UX Design é o processo
de aumentar a
satisfação e lealdade do
cliente.
Como?
Melhorando a
usabilidade, facilidade
do uso e o prazer
proporcionado com a
interação entre
consumidor e produto.

5 passos do UX
Estratégia – Escopo – Estrutura –
Wireframe – Visual Design

Briefing
Pergunte, pergunte e pergunte até
esgotar suas dúvidas. O site deve
converter em vendas!

#1 – Refaça todos os passos
Simule e trace com sua equipe todos os
passos que um usuário pode percorrer no
seu site.

#2 – Trace metas concretas
O problema nunca será número de visitas!
Trace metas como aumentar número de
leads, contatos, orçamentos...

Design
Responsivo e
Disposição:
Passou de 500
inscrições para
1200 por mês

35% da operação
do Call Center
existia apenas
para responder
uma demanda:
Onde encontrar a
2ª via do boleto.

#3 – Faça um protótipo
Antes de ir ao ar, faça um protótipo para ver
se todo seu projeto caminhou bem

#4 – Métricas
Avalie pouco a pouco seus resultados via
Google Analytics

#5 – Tráfego
SEO, Google Adwords e Redes Sociais vão
aumentar o seu tráfego. Mas eles irão sair se
o site não tiver um layout que prenda sua
atenção e converta.

UI é o processo de
guiar visualmente o
usuário através da
interface de um
produto, utilizando
elementos interativos e
em todos os tamanhos /
plataformas.
O UI é o
responsável
pela UX

#1 – Agrupar
Agrupe funções similares ao invés de
fragmentá-las.

#2 – Destaque a conversão
Coloque cores e destaque somente a
conversão. Tome cuidado para não
confundir e distrair seu usuário.

#3 – Menos é mais
Coloque nos campos de formulário somente
o necessário.

#4 – Excesso de links
Só use em caso de todos levarem ao mesmo
local. Tome cuidado em distrair demais seu
usuário.

#5 – Call to Action?
Troque “Cadastre-se agora” por “Quero
receber as melhores ofertas”, por exemplo

até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.
O USUÁRIO NÃO
QUER ESPERAR!

A CADA 100 MILISSEGUNDOS DE TEMPO
DE CARREGAMENTO DE PÁGINA REDUZ
1% DE VENDAS NA AMAZON.
AMAZON

AO AUMENTAR O CARREGAMENTO DO
SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU
20% DA RECEITA EM PUBLICIDADE,
GOOGLE

2) PÁGINAS DE ERRO
O usuário deve saber o que está acontecendo
em uma linguagem fácil.
O usuário deve saber que a culpa não foi dele.
O usuário deve conseguir voltar para o site.

3) ERROS DE FORMULÁRIO
Nome:
Endereço:
CEP:
CPF:
Telefone:
Renato Melo
Rua dos Bobos, número zero
01234-000
12345678900
48 6666-6666
Houve um erro no preenchimento do formulário.
Onde?
Não use espaços ou hifens no
telefone. Utilize somente números.
13 6666-6666

3) DADOS DO FORMULÁRIO
Remover um único campo do formulário (telefone) foi capaz
de aumentar as conversões em 167%. A taxa média de
conversão da página foi de 20,18% para 53,90%.
Pense que para cada R$ 100 investidos em mídia
anteriormente, agora conseguiríamos o mesmo resultado
investindo apenas R$37,45, ou então teríamos quase três
vezes esse resultado se investíssemos o mesmo valor.

5) ETAPAS DO SEU
SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento

TESTE COM USUÁRIOS!
Nunca mencione a palavra teste, ela assusta as pessoas.

Maior controle de dados e
variáveis;
Mais fácil de envolver o
cliente;
Maior custo
Usuário pode se sentir
desconfortável
Comportamento distante do
seu universo real
LABORATÓRIO

Mais barato;
Usuário se sente mais a
vontade;
Mais próximo de seu uso real;
Menor controle dos dados e
variáveis
Dificuldade de envolver o
cliente (quem contrata)
AMBIENTE DO USUÁRIO

Laboratório
Medir performance (tempo,
número de erros)
Produção acadêmica
(maior “aceitação” científica
para teses, artigos e
dissertações)
Estudos permanentes com
equipe dedicada (Globo,
Nokia)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases iniciais
de design

USABILIDADE
Pesquisas com Usuários

Perguntas abertas são aquelas que permitem
ao participante responder da forma que quiser,
no formato que quiser, e com a profundidade e
duração que quiser.
Perguntas abertas vs.
Perguntas fechadas

Perguntas fechadas são aquelas que podem ser
respondidas com um “Sim? ou “Não”, ou outra
opção sugerida.
Perguntas fechadas

Perguntas fechadas funcionam melhor para
questionários quantitativos (porcentagem de
sim ou não). Já para usabilidade, o melhor é
utilizar questões abertas.
Perguntas fechadas

USABILIDADE
Soluções Nielsen

MUDANÇAS:
De: A interface agiu como esperado?
Para: O que você esperava que
acontecesse quando você ____?

MUDANÇAS:
De: Você encontrou o que procurava?
Para: Onde você encontrou o item?

MUDANÇAS:
De: Você acha que usaria esse produto?
Para: Como você acha que esse produto se
encaixaria no seu trabalho?

MUDANÇAS:
De: Você achou fácil de usar?
Para: Qual a parte mais confusa da
experiência?

• Planejar o teste: com quantas pessoas?
• Criar um roteiro: como devem ser as
perguntas?
• Moderação do teste: o que fazer e o que não
fazer, exercício prático
• Como analisar: o que observar, o que fazer
com as informações obtidas
• Como adaptar: teste mobile, teste caseiro,
teste em contexto de uso

Meu primeiro JOB
vai nascer!
Quanto cobro?

Solução para o problema dele
Um site horrível!
Prazo: Ontem
Preço
Barato, pois o sobrinho
sabe fazer um igual
Atendimento
Tratar o cliente como a
mãe dele o trataria

Não fale grego e
facilite a
comunicação

Como cobrar?
Por insumo (fotos, páginas)
1) Prefira estipular um valor para a
identidade visual.
2) Só depois, estipule um valor por
página.

Como cobrar?
Preço Fechado
1) Entendeu o que o cliente quer.
2) Notou que o cliente não trará
grandes problemas ou já conhece o
cliente.

Como cobrar?
Preço por Hora
1) Fazer o Mapa do Site
2) Calcular seus custos
3) Calcular quanto tempo irá levar

Custos Fixos
Internet
Luz
Telefone

Custos Variáveis
Domínio
Hospedagem
Banco de Imagem
Profissional Extra

Custos Variáveis
Não esqueça dos extras:
-Pizza para comer rápido pois o
prazo está curto
-Café para manter acordado, etc

Patrimônio
Computador
Livro
Software
Cursos

Ajustes para
Tipo de
Cliente:
Cliente Valor Hora
Pequeno
comércio
R$ 633,60
PME 50% R$ 950,40
Grandes
Empresas
250%
R$ 3326,40

ANÚNCIOS
FACEBOOK & INSTAGRAM

Fim dos 20%?
Facebook divide agora em 4
categorias o seu anúncio

facebook.com/ads/tools/text_overlay

Texto na
imagem: OK
Post com pouco
ou nenhum
texto.
Estilo preferido
pelo Facebook

Texto na
imagem:
Baixo
Alcance
limitado. Você
atinge menos
pessoas.

Texto na
imagem:
Médio
Alcance
limitado. Você
atinge poucas
pessoas.

Texto na
imagem: Alto
Você atingirá
poucas ou
nenhuma
pessoa.

Exceções:
• Pôsteres de filme.
• Capa de livros.
• Capa de cds.
• Imagem de produtos.
• Pôsteres de eventos
(shows, concertos,
esportes…)
• Texto baseado em
caligrafia, quadrinhos,
etc.
• Screenshot de aplicativos
e jogos.
• Texto legal.
• Infográficos.

Isso conta?
SIM
• Logos – Qualquer logo com
texto, independentemente de
tamanho e alinhamento.
• Marca d’água – Marcas d’água
são consideradas texto,
mesmo se forem obrigatórias
e constarem no branding da
marca.
• Números – Todos os números
contam como texto.

NÃO PODE:
USAR IMAGENS COM MUITA PELE OU
NUDEZ
CITAR POLÍTICA, RAÇA, RELIGIÃO,
ORIENTAÇÃO SEXUAL, SINDICATO, ETC
MARKETING MULTINÍVEL
DISCURSO DE ÓDIO
OUTROS: FALSAS PROMESSAS (ANTES E
DEPOIS), URLS DIFERENTES, OBRIGAR
CURTIR A PÁGINA, VÍRUS, SPYWARE,
MALWARE

Enviar pessoas para o seu site. Este anúncio
não irá aparecer na sua fanpage.
CLIQUE NO SITE

Você pode colocar apenas uma imagem, fazer
um anúncio com múltiplas imagens, usar um
vídeo, criar um vídeo usando imagens e até
enviar um inbox automático para quem
interagir com o anúncio.

Se você optar por uma única imagem, você pode
enviar até 6 opções para que o Facebook avalie a
que terá melhor resultado
1200 x 628 pixels

Clique no site
(Carrossel – até 5
imagens):
600px x 600px
FACEBOOK

Você pode incluir de 3 a 10
imagens.

Para post:
escala de 394x470px,
porém tamanho
mínimo de 700x522
pixels.
ENGAJAMENTO

Escolha um
post para
melhorar sua
performance de
engajamento.

Você deve trabalhar
com qualquer
tamanho que atenda
a escala de
394x470px, isto vai
depender da
qualidade da imagem
que você tem.
FACEBOOK

FACEBOOK
CAPA: 1200X444 PIXELS

INSTAGRAM
Mas o ideal é
fazer na medida
1080x1080px

FACEBOOK
A imagem de
destaque para um
artigo pode ser
configurada no html
ou no próprio post.

FACEBOOK
A medida da imagem
é
1200px x 628px
1200px
628px

Revisão Webdesign

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Revisão Webdesign (20)

Mais de Renato Melo (20)

Último (12)

Revisão Webdesign