Produção de sites e estratégias digitais

Produção para!
web

22/03/2011!

Alex Sanches - @alexsanches !

Formado
em
Design
Gráﬁco.
Pós-‐graduando
em
Marketing

Digital.
Tem
experiência
de
4
anos
na
criação
e
desenvolvimento

de
websites
e
identidade
visual.

Há
2
anos
trabalhando
com
estratégias
de
comunicação
digital

se
empenha
na
construção
de
sites
otimizados
para
mecanismos

de
busca
(SEO)
e
na
usabilidade
do
design
aplicado
a
identidade

visual.

Gerente
de
Projetos
na
SmartIS
Agência
Digital
onde
trabalha

na
execução
do
Planejamento
Estratégico
Digital
do
cliente,
na

gestão
de
tarefas
e
atividades
da
equipe
e
no
controle
de

qualidade
de
cada
projeto.

Processo de produção!
•  Brieﬁng;

•  Pesquisa;

•  Escopo;

•  Sitemap;

•  Wireframe;

•  Criação
do
layout;

•  Desenvolvimento;

•  Métricas.

Brieﬁng

Colher
o
máximo
de
informações
do
cliente
a
respeito
da
marca,
da

estratégia,
da
iden9dade
visual,
do
obje9vo
do
projeto.

Pesquisa

Procurar
concorrentes
ou
sites
de
referência
para
servir
de
inspiração

e
desenvolver
algo
que
concorra
ou
que
seja
cria9vo
o
suﬁciente
para

ter
destaque.

Escopo

De
acordo
com
o
obje9vo,
escolher
as
ferramentas,
as
tecnologias,
a

metodologia,
os
recursos
que
serão
u9lizados.

Sitemap

Deﬁnir
a
estruturação
do
site.
Como
ele
será
apresentado
ao
visitante

pensando
em
usabilidade
e
navegabilidade.

Wireframe

Esboço
do
projeto.
Fase
1
do
layout
e
Arquitetura
de
Informação.
É

desenhado
em
papel,
as
páginas
do
site
e
disposição
dos
elementos

visuais.

Criação
do
Layout

Criação
do
layout
ﬁnal,
com
detalhes,
seguindo
todas
as
etapas

anteriores.
Cria-‐se
uma
imagem
está9ca
do
site
(.JPG).

Desenvolvimento

Recorte
do
layout
de
maneira
estratégica
e
programação
(HTML,
CSS)

obedecendo
a
melhor
estrutura
esqueleto
do
site
considerando

resolução
de
tela,
SEO,
versão
do
navegador,
9po
de
navegador.

Métricas

Pós
lançamento.
medir
os
KPIs
(Indicadores
chave
de
performance)

deﬁnidos
na
estratégia
de
marke9ng
digital
para
entender
o

comportamento
do
usuário,
a
quan9dade
de
visualizações,
origem
de

tráfego.

Ferramentas!
•  Wordpress;

•  Adobe
Photoshop;

•  Adobe
Dreamweaver;

•  Adobe
Flash;

•  Adobe
Fireworks;

•  HTML
5;

•  FBML.

Ferramentas!
Wordpress!

O
wordpress
é
um
CMS
(Plataforma
de
gerenciamento
de
conteúdo).

É
open
source
(código
aberto)
e
freqüentemente
recebe
atualizações.

As
vantagens
de
se
trabalhar
com
wordpress
é
a
vasta
opção
de

customização
e
desenvolvimento
de
qualquer
9po
de
website.

Ele
possui
códigos
próprios
chamados
de
"codex"
que
permitem
a

criação
de
um
sistema
que
suporte
o
formato
de
um
blog,
formato
de

site,
e-‐commerce,
compra
cole9va,
vídeos,
galerias
etc.

Justamente
por
ser
open
source,
apresenta
mais
de
10.000
plugins

que
adicionam
funcionalidade
a
qualquer
projeto.

Ferramentas!
Photoshop!

Photoshop
é
o
sobware
de
tratamento
de
imagens
líder
do
mercado.

Ele
é
u9lizado
para
edições
e
produção
de
imagens
para
web
e

impressão.

Atualmente
está
em
sua
versão
12
ou
CS5
(Crea9ve
Suite
5).

Ferramentas!
Dreamweaver!

Dreamweaver
é
um
sobware
WYSIWYG.
Acrônimo
da
expressão
em

inglês
"What
You
See
Is
What
You
Get".

Utilizado
por
programadores
e
web
designers
para
desenvolver

códigos
e
estruturas.

Permite
a
visualização
instantânea
do
resultado
do
código.

Utilizado
para
criação
de
páginas
de
site,
newsletters,
e-‐mail

marketings,
sistemas.

Ferramentas!
Flash e HTML 5!

Aplica9vo
para
animação
voltado
para
a
web.
Ul9mamente
há
a

polêmica
no
mundo
digital
a
respeito
da
morte
do
Flash
pelo
HTML
5.

Após
a
criação
do
iPhone
e
a
não
reprodução
de
aplica9vos
Flash
no

disposi9vo
o
desenvolvimento
da
linguagem
HTML
5
se
intensiﬁcou

mesmo
antes
de
passar
pela
deﬁnição
de
padrões
da
W3C
(World

Wide
Web
Consor9um).

Utilizados
para
criar
sites
animados,
banners
animados,
aplicativos

de
interação.

Ferramentas!
Fireworks!

Aplica9vo
da
Adobe
voltado
para
edição
de
imagens
para
a
web.
Com

um
nível
de
compactação
alto
e
facilidade
para
corte
de
imagens,
é

uma
solução
ágil
u9lizada
pelas
agências
digitais.

Ferramentas!
FBML!

Linguagem
de
programação
do
Facebook
(Facebook
Markup

Language).
Permite
a
criação
de
páginas
personalizadas
com

u9lização
de
recursos
do
Facebook
como
cur9r,
recomendar.

O Dia a dia em
uma agência
depende:!

O Dia a Dia depende:!
•  Das
a9vidades
alocadas;

•  Do
atraso
nas
a9vidades;

•  Do
índice
de
retrabalho;

•  Da
performance
da
equipe;

•  Da
boa
vontade
do
cliente.

Naturalmente, a maioria
das coisas é para ontem.!

Como um cliente
funciona…!

Criado
por
Majhew
Inman

Obrigado!!
alex.sanches@smartis.com.br

smartis.com.br

@alexsanches

Produção de sites e estratégias digitais

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Produção de sites e estratégias digitais

Semelhante a Produção de sites e estratégias digitais (20)

Produção de sites e estratégias digitais