WEBDESIGN - P1

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

FACEBOOK.COM/RENATOMELOMKT

renato@iskadigital.com.br