O que você achou da interface? Usuário: Eu achei confusa. Para:

1. WEBDESIGN:
PROGRAMAÇÃO, WEBSITES
E REDES SOCIAIS
RENATO MELO - 2016

2. REGISTRANDO UM SITE
E INTRODUÇÃO AO HTML

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

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

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

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

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

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

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

12. Quanto custa?
R$ 30 no primeiro ano
R$ 27 para os restantes

13. O pagamento é
feito via boleto ou
cartão de crédito

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

15. 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.

16. 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

17. Outros domínios
Empresas utilizam também o registro .com
para preservar a marca.

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

19. Celular
Mantém o mesmo domínio. A diferença é que
um código redirecionador identifica que o
acesso é via celular e lhe encaminha para a
versão mobile.

20. Celular
Mas, quando uma versão específica é
necessária, é comum criar um subdomínio
para armazenar o site via celular. O mais
comum é registar um subdomínio chamado
“m”, ficando, por exemplo, m.facebook.com

21. Subdomínio
Você pode criar um subdomínio também para
outros sites independentes, como o google,
que criou um subdomínio chamado
“translate” para abrigar o google tradutor.

22. Oportunidade
Fique atento a um domínio estratégico para o
seu negócio ou para um negócio novo. Um
exemplo é o brejas, uma rede social só para
cervejas.

23. Oportunidade
Outro bom exemplo é o site
Pizzaria em Santos.

24. Muito longos
Evite domínios muito longos. O site
deste festival ficou como
festludi.com.br para ficar curto e
de fácil interpretação.

25. Ao criar uma empresa
Se você está criando uma empresa, faça uma
busca no registro.br e veja se o nome está
disponível. As pessoas sempre vão digitar
nomedasuaempresa.com.br quando não
procuram no google.

26. E....
Mesmo se você optar por outro domínio,
registre sempre o domínio com o nome da sua
empresa para proteção de marca. O provedor
de hospedagem pode redirecionar o site e você
ter mais de um domínio para o mesmo site.

27. anatel.gov.br
Um exemplo é a Anatel, que não
comprou o domínio .com.br. Ao
acessar este endereço, você é
redirecionado para a página da
empresa Terra Preta.

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

29. Você transfere os
arquivos via FTP

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

31. Filezilla: o mais usado

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

33. AGORA, O HTML...

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

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

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

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

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

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

40. INTRODUÇÃO AO
E-MAIL MKT E HTML

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

42. Se você não gosta
de receber, por que
enviar?

43. 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.

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

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

46. INTRODUÇÃO DO
CSS NO WEBDESIGN

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

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

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

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

52. 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

53. 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

54. Prazer CSS

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

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

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

58. 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;
}

59. PADRÃO
DE CORES

60. COR HEX
É a cor do #

61. As Fontes também
merecem atenção

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

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

64. UX e UI
Injeção de personalidade no seu branding
RENATO MELO - 2016

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

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

67. INTERNET ONTEM
Anúncios Sites Institucionais

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

69. O CONCEITO
E-
BRANDING
UIUX

70. UX
Experiência do Usuário

71. 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.

72. UX Design
Conteúdo

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

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

75. UX
Os 7 mitos e erros mais comuns

76. User Experience é
diferente de User
Interface

77. Você = Seu usuário

78. Usuário sempre
sabe o que quer

79. UX termina quando o usuário sai do site

80. Sua solução sempre vai funcionar

81. Eu li uma solução de um guru
aqui na internet e...

82. Isso é impossível de fazer!

83. UX
Na prática

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

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

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

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

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

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

90. #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.

91. UI
Interface do Usuário

92. 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

93. UX
Os 4 mitos e erros mais comuns

94. User Interface é
diferente de design

95. Tudo tem que estar na área de
destaque, acima dos 600 pixels de
altura.

96. Apostar sempre em técnicas
aleatórias como: 3 cliques da
homepage até o final resolve tudo

97. Homepage é a parte mais importante,
todos os usuários acessam seu site
através dela.

98. UI
Ideias para utilizar

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

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

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

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

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

104. USABILIDADE
Como aplicar no seus projetos
RENATO MELO - 2016

105. USABILIDADE
E sua importância

106. O QUE É USABILIDADE?

107. USABILIDADE
Testes

108. 1) FEEDBACK

109. 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!

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

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

112. 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.

113. 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

114. 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.

115. 4) CAIXA DE BUSCA

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

117. Testes de
Usabilidade

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

119. 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

120. 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

121. 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

122. SÉRIES AMERICANAS
NOVELAS BRASILEIRAS

123. USABILIDADE
Pesquisas com Usuários

124. 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

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

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

127. USABILIDADE
Soluções Nielsen

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

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

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

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

132. USABILIDADE
Roteiro

133. • 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

134. WEBDESIGN
NAS REDES
SOCIAIS

135. FACEBOOK

136. POST:
A IMPORTÂNCIA DA
FOTO

137. Publicações com foto!
Chamam atenção e
aumentam em 180% as
chances de engajamento.

138. O número de cliques na
foto é o maior índice de
engajamento.

139. PRIMEIRA DICA E
REGRA DE OURO
NO FACEBOOK:
SÓ USE
IMAGENS EM
PNG!

140. IMAGEM
PARA POST

141. As imagens são encaixadas numa espécie de “box
invisível”, com altura máxima de 394px e largura
máxima de 470px. Se a imagem estiver no tamanho
errado, ela ficará com espaço branco (foto).

142. As imagens são encaixadas numa espécie de “box
invisível”, com altura máxima de 394px e largura
máxima de 470px. Se a imagem estiver no tamanho
errado, ela ficará com espaço branco (foto).

143. O tamanho ideal é 700x522 pixels. Para imagens com
melhor definição, você pode ampliar o tamanho
mantendo a mesma escala.

144. Na hora de postar um link, crie uma imagem com
1200x628, porém será exibido com a medida de
246x470 px

145. Link de vídeos externos ou páginas que tenham
imagens menores do que 246x470px serão exibidas
como miniaturas de 150x150px.

146. FACE ADS

147. FOTOS PROIBIDAS:
LOGOS E MENÇÕES AO FACEBOOK (LIKE, ETC)
NUDEZ E FOTOS VIOLENTAS
BELEZA PERFEITA (EMAGRECER)
RACISMO/PRECONCEITOS/ÓDIO

148. POST
PATROCINADO

149. O Facebook permite apenas 20% de texto, por isso
construa uma grade com linha guia, criando 25
quadrados. Assim, apenas 5 poderão conter texto.

150. O Facebook permite apenas 20% de texto, por isso
construa uma grade com linha guia, criando 25
quadrados. Assim, apenas 5 poderão conter texto.

151. ANÚNCIOS

152. A mesma coisa serve para anúncios de curtidas ou
cliques no site.
Curtidas: 1200x444px
Cliques no site: 1200x628px

153. WEBDESIGN
HOME OFFICE
FREELAS

154. Meu primeiro JOB
vai nascer!
Quanto cobro?

155. 1º O que o cliente
quer?

156. 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

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

158. 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.

159. 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.

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

161. MONTANDO
O MEU HOME OFFICE

162. Custos Fixos
Internet
Luz
Telefone

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

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

165. Patrimônio
Computador
Livro
Software
Cursos

166. Quer ganhar
quanto?
Salário
13º
Férias
Dias da semana
trabalhados

167. VALOR HORA – Iniciando:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79

168. LUCRO HORA:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83

169. Ajustes Tempo:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83
20% para e-mails,
estudos, etc
R$ 26,19

170. Ajustes Cliente:
Valor Hora
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83
20% para e-mails,
estudos, etc
R$ 26,19
10% margem de erro R$ 28,81
10% margem de choro R$ 31,68

171. 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

172. FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br