Produção para!

web  22/03/2011!

Alex Sanches - @alexsanches !

Formado  em  Design  Gráfico.  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!

Processo de produção!

•  Briefing;  •  Pesquisa;  •  Escopo;  •  Sitemap;  •  Wireframe;  •  Criação  do  layout;  •  Desenvolvimento;  •  Métricas.  

Processo de produção!

Briefing    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  suficiente  para  ter  destaque.  

Processo de produção!

Escopo  De  acordo  com  o  obje9vo,  escolher  as  ferramentas,  as  tecnologias,  a  metodologia,  os  recursos  que  serão  u9lizados.    Sitemap  Definir  a  estruturação  do  site.  Como  ele  será  apresentado  ao  visitante  pensando  em  usabilidade  e  navegabilidade.    

Processo de produção!

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  final,  com  detalhes,  seguindo  todas  as  etapas  anteriores.  Cria-­‐se  uma  imagem  está9ca  do  site  (.JPG).  

Processo de produção!

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)  definidos  na  estratégia  de  marke9ng  digital  para  entender  o  comportamento  do  usuário,  a  quan9dade  de  visualizações,  origem  de  tráfego.  

Ferramentas!

Ferramentas!

•  Wordpress;  •  Adobe  Photoshop;  •  Adobe  Dreamweaver;  •  Adobe  Flash;  •  Adobe  Fireworks;  •  HTML  5;  •  FBML.  

Ferramentas!

Wordpress!

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!

Wordpress!

Ferramentas!

Wordpress!

Ferramentas!

Photoshop!

Ferramentas!

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

Photoshop!

Ferramentas!

Photoshop!

Ferramentas!

Dreamweaver!

Ferramentas!

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.  

Dreamweaver!

Ferramentas!

Dreamweaver!

Ferramentas!

Flash e HTML 5!

Ferramentas!

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  intensificou  mesmo  antes  de  passar  pela  definição  de  padrões  da  W3C  (World  Wide  Web  Consor9um).    Utilizados  para  criar  sites  animados,  banners  animados,  aplicativos  de  interação.  

Flash e HTML 5!

Ferramentas!

Fireworks!

Ferramentas!

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.  

Fireworks!

Ferramentas!

FBML!

Ferramentas!

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.  

FBML!

Ferramentas!

FBML!

O Dia a dia em uma agência

depende:!

•  Das  a9vidades  alocadas;  •  Do  atraso  nas  a9vidades;  •  Do  índice  de  retrabalho;  •  Da  performance  da  equipe;  •  Da  boa  vontade  do  cliente.  

O Dia a Dia depende:!

Naturalmente, a maioria das coisas é para ontem.!

Como um cliente funciona…!

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

Criado

 por  M

ajhe

w  Inman    

DÚVIDAS?!

Obrigado!!

alex.sanches@smartis.com.br  smartis.com.br  

 

@alexsanches