Embed Size (px)
DESCRIPTION
Conteúdo completo para a P1 de Webdesign.
Citation preview
WEBDESIGNRESUMO - P1
RENATO MELO - 2014
REGISTRANDOUM SITE
Registro.brPortal oficial de domínios do Brasil.Domínios para pessoas físicas e jurídicas.
Para os BuscadoresDomínios do Brasil também contam pontos no ranking dos motores de busca
Quanto custa?R$ 30 no primeiro anoR$ 27 para os restantes
O pagamento é feito via boleto ou cartão de crédito
O domínio só garante seu endereço. Você precisa de uma hospedagem para armazenar seus arquivos.
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 FTPUsuárioSenha
O FIM DO FLASH
IE 10 não roda flash no touch
“O MUNDO ESTÁ MUDANDO PARA O
HTML5”
“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”
“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.”
1
Navegação mais rápida e simplesRedução do tamanho dos arquivos onlineMelhor experiência do usuário.
2O 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.
3Embora 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!
4Um 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).
5O mesmo vale para sons/músicas. O HTML5 possui um suporte a elementos sonoros muito poderoso.
6HTML5 está disponível em várias plataformas diferentes e funciona com a mesma eficiência em PC’s, smartphones e tablets.
UXUser Experience
O USUÁRIO NÃO QUERSABER DE TECNOLOGIA
O USUÁRIO NÃO QUER ESPERAR!
75% DOS USUÁRIOS NÃO COMPRAM QUANDO UM SITE TEM UM PROBLEMA DE:
CONGELAMENTOCRASHMUITO TEMPO DE CARREGAMENTO
USUÁRIO TEM QUE POSSUIR UMA EXPERIÊNCIA POSITIVA EM TODOS OS CANAIS
INTERNET HOJE
Anúncios Sites Institucionais SEO Mobile
RedesSociais
Geo localização ConversãoNo PDV
Logística
CHECKLIST DO UX
TAMANHO DA TELA
CONECTIVIDADE
OBJETIVOS DO USUÁRIO
AMBIENTES DO
USUÁRIO
CAPACIDADE DO
USUÁRIO
LEMBRE-SE: O FOCO É NAS PESSOAS!
NÃO ESTAR NO MOBILE É COMO FECHAR SUA LOJA UMA VEZ POR SEMANA.
DETALHES
USABILIDADEA importância
ConversãoFazer seu usuário agir da forma
desejada e mensurável
Jakob Nielsenuseit.com
10 PRINCÍPIOS
DE HEURÍSTICA
1) FEEDBACK
até 0,1s: ideia de continuidade
até 1s: delay percebido, mas ok
depois de 10s: o usuário muda de tarefa.
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.
Nome:
Endereço:
Telefone 1:
Celular:
Telefone da Mãe:
CPF:
RG:
Nome do Cachorro:
Estado Civil:
3) FORMULÁRIO
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
4) CAIXA DE BUSCA
4) CAIXA DE BUSCA
Vai!
Buscar
5) ETAPAS DO SEU SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. PagamentoVEJA QUE AUSABILIDADE ÉUMA TÉCNICA QUEFACILITA A COMPRA
COMO MONTAR UMHOME OFFICE
1º O que o cliente quer?
Solução para o problema dele
Um site horrível!
Prazo: OntemPreç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
MONTANDOO MEU HOME OFFICE
Custos Fixos
InternetLuzTelefone
Custos Variáveis
DomínioHospedagemBanco de ImagemProfissional 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
ComputadorLivroSoftwareCursos
Quer ganhar quanto?
Salário13ºFériasDias da semana trabalhados
COMOSE ORGANIZAR
Família, família.
Negócios à parte.
Faça um lugar só seu, como quartinho de empregada.
Não trabalhe de pijama.
Não trabalhe no mesmo
cômodo onde dorme.
Instale uma linha telefônica
própria
Faça o seu horário de almoço!
Não fique ocioso: invista em projetos e
na sua carreira.
Crie ou faça parte de um
blog.
Marque reuniões em cafés ou no
local do cliente.
DESIGN PARA REDES SOCIAIS
PRIMEIRA DICA E REGRA DE OURO DO FACEBOOK:
SÓ USE IMAGENS EM PNG!
A CAPA DA FANPAGE
LIÇÃO 1: SEM ANÚNCIO PUBLICITÁRIO!
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.
LIÇÃO 3: ME CURTE!
Nada de falar sobre “Dê um Curtir agora” ou “compartilhe o nosso conteúdo”.
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.
POST: A IMPORTÂNCIA
DA FOTO
Publicações com foto!Chamam atenção e aumentam em 180% as chances de engajamento.
O número de cliques na foto é o maior
índice de engajamento.
#MAIS ALCANCE 1:
Interação com o autor da publicação anteriormente
#MAIS ALCANCE 2:
Reação das pessoas perante ao post
#MAIS ALCANCE 3:
Reação no passado com o mesmo tipo de post: fotos, vídeos, mensagens...
#MAIS ALCANCE 4:
Post ou Fanpage com inúmeras reclamações
Faça posts “humanos”, mostrando as pessoas e equipes que estão por trás da fanpage/empresa.
IMAGEM PARA POST
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).
O tamanho ideal é 650x545 pixels. Para imagens com melhor definição, você pode ampliar o tamanho mantendo a mesma escala.
Na hora de postar um link, a imagem terá medida de 246x470 px
Link de vídeos ou páginas que tenham imagens menores do que 246x470px serão exibidas como miniaturas de 150x150px.
POST PATROCINA
DO
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.
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.
IDENTIDADEDA FANPAGE
Imagem para capa
851x315px210p
x
658px
23p
x
Imagem perfil
160x160px, porém suba com 180x180px210p
x
Borda de 5px
ANÚNCIOS
Anúncios externos: 600x315 px
Anúncios para curtir página: 600x225 px
