Conteúdo completo para a P1 de Webdesign.

1. WEBDESIGN
RESUMO - P1
RENATO MELO - 2014

2. REGISTRANDO
UM SITE

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. Quanto custa?
R$ 30 no primeiro ano
R$ 27 para os restantes

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

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

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

9. Você transfere os
arquivos via FTP

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

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

12. O FIM DO
FLASH

14. IE 10 não roda flash
no touch

15. “O MUNDO ESTÁ
MUDANDO PARA O
HTML5”

16. “NOS ÚLTIMOS 10 ANOS, A WEB
NUNCA TEVE ESTE NÍVEL DE
TRANSFORMAÇÃO, ESTE NÍVEL DE
ACELERAÇÃO. ESTAMOS FICANDO
MAIORES COM O HTML5”

17. “SE VOCÊ QUER FAZER ALGO UNIVERSAL,
NÃO HÁ NENHUMA DÚVIDA: O MUNDO ESTÁ
MUDANDO PARA O HTML5. ISTO É FATO! O
MUNDO ESTÁ EMPURRANDO O HTML5 E NÓS
TAMBÉM.”

19. 1
Navegação mais rápida e simples
Redução do tamanho dos arquivos online
Melhor experiência do usuário.

20. 2
O HTML5 possui uma ferramenta gráfica
ponderosa, chamada de Canvas (tela, em
Inglês).
Com o Canvas, é muito mais fácil de criar
animações, desenhos e outros visuais
complexos sem a necessidade de usar
um aplicativo externo.

21. 3
Embora o seu uso aumente diariamente,
nem todos os navegadores são
compatíveis com o HTML5. Se quiser
saber se o seu navegador é compatível,
visite esse site aqui e descubra se você
precisa atualizar o seu browser!

22. 4
Um dos recursos que recebem mais atenção é
a capacidade do HTML5 em gerenciar arquivos
de vídeo.
É possível inserir videos em uma página sem
usar componentes externos (como plugins).
Isso faz uma diferença tão grande que todos os
grandes sites estão começando a usar esse
recurso (inclusive o YouTube).

23. 5
O mesmo vale para sons/músicas. O HTML5
possui um suporte a elementos sonoros muito
poderoso.

24. 6
HTML5 está disponível em várias plataformas
diferentes e funciona com a mesma eficiência
em PC’s, smartphones e tablets.

25. UX
User Experience

26. O USUÁRIO NÃO QUER
SABER DE TECNOLOGIA

27. O USUÁRIO NÃO
QUER ESPERAR!

28. 75% DOS USUÁRIOS NÃO COMPRAM
QUANDO UM SITE TEM UM PROBLEMA DE:
CONGELAMENTO
CRASH
MUITO TEMPO DE CARREGAMENTO

29. USUÁRIO TEM QUE POSSUIR
UMA EXPERIÊNCIA POSITIVA
EM TODOS OS CANAIS

30. INTERNET HOJE
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística

31. CHECKLIST DO UX
 TAMANHO DA TELA
 CONECTIVIDADE
 OBJETIVOS DO USUÁRIO
 AMBIENTES DO USUÁRIO
 CAPACIDADE DO USUÁRIO

32. LEMBRE-SE: O
FOCO É NAS
PESSOAS!

33. NÃO ESTAR NO
MOBILE É COMO
FECHAR SUA LOJA
UMA VEZ POR
SEMANA.
DETALHES

34. USABILIDADE
A importância

35. Conversão
Fazer seu usuário agir da forma
desejada e mensurável

36. Jakob Nielsen
useit.com
10 PRINCÍPIOS
DE HEURÍSTICA

37. 1) FEEDBACK
até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.

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

39. Nome:
Endereço:
Telefone 1:
Celular:
Telefone da Mãe:
CPF:
RG:
Nome do Cachorro:
Estado Civil:
3) FORMULÁRIO

40. 3) 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

41. 4) CAIXA DE BUSCA

42. 4) CAIXA DE BUSCA
Vai!
Buscar

43. 5) ETAPAS DO SEU SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento
VEJA QUE A
USABILIDADE É
UMA TÉCNICA QUE
FACILITA A COMPRA

44. COMO MONTAR UM
HOME OFFICE

45. 1º O que o cliente
quer?

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

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

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

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

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

51. MONTANDO
O MEU HOME OFFICE

52. Custos Fixos
Internet
Luz
Telefone

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

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

55. Patrimônio
Computador
Livro
Software
Cursos

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

57. COMO
SE ORGANIZAR

58. Família, família.
Negócios à parte.

59. Faça um lugar só
seu, como
quartinho de
empregada.

60. Não trabalhe de
pijama.

61. Não trabalhe no
mesmo cômodo
onde dorme.

62. Instale uma linha
telefônica própria

63. Faça o seu horário
de almoço!

64. Não fique ocioso:
invista em projetos
e na sua carreira.

65. Crie ou faça parte
de um blog.

66. Marque reuniões
em cafés ou no
local do cliente.

67. DESIGN PARA
REDES SOCIAIS

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

69. A CAPA DA
FANPAGE

70. LIÇÃO 1: SEM
ANÚNCIO
PUBLICITÁRIO!

71. LIÇÃO 2: SEM
CONTATO!
O seu endereço físico, o
endereço do seu
website ou o seu
telefone, nada disso
pode aparecer.
O About (Sobre) da
página serve pra isso.

72. LIÇÃO 3: ME
CURTE!
Nada de falar sobre
“Dê um Curtir agora” ou
“compartilhe o nosso
conteúdo”.

73. LIÇÃO 4: CALL
TO ACTION
Você não poderá
colocar textos como
“Fale para os seus
amigos”, “compre
agora”, “participe” ou
coisas do tipo. Em
suma, nada de verbos
no imperativo.

74. POST:
A IMPORTÂNCIA DA
FOTO

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

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

77. #MAIS ALCANCE 1:
Interação com o autor da
publicação anteriormente

78. #MAIS ALCANCE 2:
Reação das pessoas
perante ao post

79. #MAIS ALCANCE 3:
Reação no passado com o
mesmo tipo de post: fotos,
vídeos, mensagens...

80. #MAIS ALCANCE 4:
Post ou Fanpage com
inúmeras reclamações

81. Faça posts “humanos”, mostrando as
pessoas e equipes que estão por trás
da fanpage/empresa.

82. IMAGEM
PARA POST

83. 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).

84. O tamanho ideal é 650x545 pixels. Para imagens com
melhor definição, você pode ampliar o tamanho
mantendo a mesma escala.

85. Na hora de postar um link, a imagem terá medida de
246x470 px

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

87. POST
PATROCINADO

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

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

90. IDENTIDADE
DA FANPAGE

91. Imagem para capa
851x315px
210px
658px
23px

92. Imagem perfil
160x160px, porém suba com 180x180px210px
Borda de 5px

93. ANÚNCIOS

94. Anúncios externos: 600x315 px

95. Anúncios para curtir página: 600x225 px

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