Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Producao para web

Como é uma agência digital? Quais os processos e ferramentas utilizadas? Como funciona um cliente?

  • Inicia sesión para ver los comentarios

Producao para web

  1. 1. Produção para! web   22/03/2011!
  2. 2. 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.  
  3. 3. Processo de ! Produção!
  4. 4. Processo de produção! •  Briefing;   •  Pesquisa;   •  Escopo;   •  Sitemap;   •  Wireframe;   •  Criação  do  layout;   •  Desenvolvimento;   •  Métricas.  
  5. 5. 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.  
  6. 6. 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.    
  7. 7. 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).  
  8. 8. 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.  
  9. 9. Ferramentas!
  10. 10. Ferramentas! •  Wordpress;   •  Adobe  Photoshop;   •  Adobe  Dreamweaver;   •  Adobe  Flash;   •  Adobe  Fireworks;   •  HTML  5;   •  FBML.  
  11. 11. Ferramentas! Wordpress!
  12. 12. 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.  
  13. 13. Ferramentas! Wordpress!
  14. 14. Ferramentas! Wordpress!
  15. 15. Ferramentas! Photoshop!
  16. 16. 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).  
  17. 17. Ferramentas! Photoshop!
  18. 18. Ferramentas! Dreamweaver!
  19. 19. 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.  
  20. 20. Ferramentas! Dreamweaver!
  21. 21. Ferramentas!Flash e HTML 5!
  22. 22. 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  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.  
  23. 23. Ferramentas! Fireworks!
  24. 24. 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.  
  25. 25. Ferramentas! FBML!
  26. 26. 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.  
  27. 27. Ferramentas! FBML!
  28. 28. O Dia a dia em uma agência depende:!
  29. 29. 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.!
  30. 30. Como um cliente funciona…!
  31. 31. Criado  por  Majhew  Inman    
  32. 32. Criado  por  Majhew  Inman    
  33. 33. Criado  por  Majhew  Inman    
  34. 34. Criado  por  Majhew  Inman    
  35. 35. Criado  por  Majhew  Inman    
  36. 36. Criado  por  Majhew  Inman    
  37. 37. Criado  por  Majhew  Inman    
  38. 38. Criado  por  Majhew  Inman    
  39. 39. Criado  por  Majhew  Inman    
  40. 40. DÚVIDAS?!
  41. 41. Obrigado!! alex.sanches@smartis.com.br   smartis.com.br     @alexsanches  

×