SlideShare uma empresa Scribd logo
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!

  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!
    Photoshop!
Ferramentas!
  Dreamweaver!
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!
  Dreamweaver!
Ferramentas!
Flash e HTML 5!
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.	
  
Ferramentas!
    Fireworks!
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!
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.	
  
Ferramentas!
        FBML!
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	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
Criado	
  por	
  Majhew	
  Inman	
  	
  
DÚVIDAS?!
Obrigado!!
 alex.sanches@smartis.com.br	
  
         smartis.com.br	
  
                	
  

        @alexsanches	
  

Mais conteúdo relacionado

Mais procurados

Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
Mila Ramos
 
Profissão: internet
Profissão: internetProfissão: internet
Profissão: internet
Gustavo Freitas
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
Helder Soares
 
Proposta de criação de site
Proposta de criação de siteProposta de criação de site
Proposta de criação de site
Cincinato Amorim
 
Quanto você cobra? É um site simples.
Quanto você cobra? É um site simples.Quanto você cobra? É um site simples.
Quanto você cobra? É um site simples.
Daniel Dantas
 
10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website
Arthur Leon
 
eCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
eCommerce SEO - Guia Completo para o SEO da Sua Loja VirtualeCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
eCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
Fabio Ricotta
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummitDicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
Fabio Ricotta
 
TechBuilder: Criação do Site Institucional
TechBuilder: Criação do Site InstitucionalTechBuilder: Criação do Site Institucional
TechBuilder: Criação do Site Institucional
Marco Coghi
 
SEO para Alavancar Negócios
SEO para Alavancar NegóciosSEO para Alavancar Negócios
SEO para Alavancar Negócios
Fabio Ricotta
 
Orçamento de website
Orçamento de websiteOrçamento de website
Orçamento de website
Brinomi Web Design
 
Proposta Website
Proposta WebsiteProposta Website
Proposta Website
Chris Robers
 
Posicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJCPosicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJC
Fabio Ricotta
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
Patricia Mallmann
 
25 regras para um website de sucesso
25 regras para um website de sucesso25 regras para um website de sucesso
25 regras para um website de sucesso
Melhor-Empresa
 
Thais_Arnold_Portfolio
Thais_Arnold_PortfolioThais_Arnold_Portfolio
Thais_Arnold_Portfolio
Thais Arnold
 
Agencia de SEO - Criando e gerenciando a sua agência
Agencia de SEO - Criando e gerenciando a sua agência Agencia de SEO - Criando e gerenciando a sua agência
Agencia de SEO - Criando e gerenciando a sua agência
Fabio Ricotta
 
Infograficos e SEO
Infograficos e SEOInfograficos e SEO
Infograficos e SEO
Fabio Ricotta
 
Como gerar negócios com seu website.
Como gerar negócios com seu website.Como gerar negócios com seu website.
Como gerar negócios com seu website.
Brinomi Web Design
 

Mais procurados (20)

Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
 
Profissão: internet
Profissão: internetProfissão: internet
Profissão: internet
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
 
Proposta de criação de site
Proposta de criação de siteProposta de criação de site
Proposta de criação de site
 
Quanto você cobra? É um site simples.
Quanto você cobra? É um site simples.Quanto você cobra? É um site simples.
Quanto você cobra? É um site simples.
 
10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website
 
eCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
eCommerce SEO - Guia Completo para o SEO da Sua Loja VirtualeCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
eCommerce SEO - Guia Completo para o SEO da Sua Loja Virtual
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummitDicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
Dicas Avançadas de Aquisição de Tráfego e Clientes #RDSummit
 
TechBuilder: Criação do Site Institucional
TechBuilder: Criação do Site InstitucionalTechBuilder: Criação do Site Institucional
TechBuilder: Criação do Site Institucional
 
SEO para Alavancar Negócios
SEO para Alavancar NegóciosSEO para Alavancar Negócios
SEO para Alavancar Negócios
 
Orçamento de website
Orçamento de websiteOrçamento de website
Orçamento de website
 
Proposta Website
Proposta WebsiteProposta Website
Proposta Website
 
Posicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJCPosicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJC
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
25 regras para um website de sucesso
25 regras para um website de sucesso25 regras para um website de sucesso
25 regras para um website de sucesso
 
Thais_Arnold_Portfolio
Thais_Arnold_PortfolioThais_Arnold_Portfolio
Thais_Arnold_Portfolio
 
Agencia de SEO - Criando e gerenciando a sua agência
Agencia de SEO - Criando e gerenciando a sua agência Agencia de SEO - Criando e gerenciando a sua agência
Agencia de SEO - Criando e gerenciando a sua agência
 
Infograficos e SEO
Infograficos e SEOInfograficos e SEO
Infograficos e SEO
 
Como gerar negócios com seu website.
Como gerar negócios com seu website.Como gerar negócios com seu website.
Como gerar negócios com seu website.
 

Destaque

SPE - Society of Plastics Engineers Seção Brasil
SPE - Society of Plastics Engineers   Seção Brasil SPE - Society of Plastics Engineers   Seção Brasil
SPE - Society of Plastics Engineers Seção Brasil
Fernando Jose Novaes
 
Argumentos formais e informais
Argumentos formais e informaisArgumentos formais e informais
Argumentos formais e informais
AnaKlein1
 
Segundo pliegue acerca de economia ambiental
Segundo pliegue acerca de economia ambientalSegundo pliegue acerca de economia ambiental
Segundo pliegue acerca de economia ambiental
Dayana Mercado Clases
 
Resp violência gia
Resp violência giaResp violência gia
Resp violência gia
Msaude
 
O desenvolvimento psicossexual conceitos
O desenvolvimento psicossexual   conceitosO desenvolvimento psicossexual   conceitos
O desenvolvimento psicossexual conceitos
Luis De Sousa Rodrigues
 
Youtube - agora na sua tv
Youtube - agora na sua tvYoutube - agora na sua tv
Youtube - agora na sua tv
Poliana Lopes
 
Apresentação Evoluir Educacional 2013
Apresentação  Evoluir Educacional 2013Apresentação  Evoluir Educacional 2013
Apresentação Evoluir Educacional 2013
Lucy Duró
 
1. assistencia construção solidariedade
1. assistencia construção solidariedade1. assistencia construção solidariedade
1. assistencia construção solidariedade
Eduardo Garcia
 
Dá pra Ganhar Dinheiro com Software Livre? Sim.
Dá pra Ganhar Dinheiro com Software Livre? Sim.Dá pra Ganhar Dinheiro com Software Livre? Sim.
Dá pra Ganhar Dinheiro com Software Livre? Sim.
Luiz Henrique Rauber Rodrigues
 
Grupo de informática 9
Grupo de informática 9Grupo de informática 9
Grupo de informática 9
Kary Cordova
 
Scup Cases: Riot
Scup Cases: RiotScup Cases: Riot
Scup Cases: Riot
Scup
 
Programação Evento I Encontro Integral no Rio
Programação Evento I Encontro Integral no RioProgramação Evento I Encontro Integral no Rio
Programação Evento I Encontro Integral no Rio
Margarida Ranauro
 
Portfólio Planeta Brasil
Portfólio Planeta BrasilPortfólio Planeta Brasil
Dados Abertos e Meio Ambiente
Dados Abertos e Meio AmbienteDados Abertos e Meio Ambiente
Dados Abertos e Meio Ambiente
Álvaro Justen
 
Predecir, observar y explicar (poe)
Predecir, observar y explicar (poe)Predecir, observar y explicar (poe)
Predecir, observar y explicar (poe)
Fernanda Serrano Reyna
 
Elaboracion de mi pagina web
Elaboracion de mi pagina webElaboracion de mi pagina web
Elaboracion de mi pagina web
Flashh10
 
5 pasos para mejorar la comunicación
5 pasos para mejorar la comunicación5 pasos para mejorar la comunicación
5 pasos para mejorar la comunicación
RH Talento y Personas
 
Fulan
FulanFulan
Ley de delitos informaticos 2
Ley de delitos informaticos 2Ley de delitos informaticos 2
Ley de delitos informaticos 2
Kevin Corredor
 
Redes Sociais: Aderir ou fugir?
Redes Sociais: Aderir ou fugir?Redes Sociais: Aderir ou fugir?
Redes Sociais: Aderir ou fugir?
Pedro Costa
 

Destaque (20)

SPE - Society of Plastics Engineers Seção Brasil
SPE - Society of Plastics Engineers   Seção Brasil SPE - Society of Plastics Engineers   Seção Brasil
SPE - Society of Plastics Engineers Seção Brasil
 
Argumentos formais e informais
Argumentos formais e informaisArgumentos formais e informais
Argumentos formais e informais
 
Segundo pliegue acerca de economia ambiental
Segundo pliegue acerca de economia ambientalSegundo pliegue acerca de economia ambiental
Segundo pliegue acerca de economia ambiental
 
Resp violência gia
Resp violência giaResp violência gia
Resp violência gia
 
O desenvolvimento psicossexual conceitos
O desenvolvimento psicossexual   conceitosO desenvolvimento psicossexual   conceitos
O desenvolvimento psicossexual conceitos
 
Youtube - agora na sua tv
Youtube - agora na sua tvYoutube - agora na sua tv
Youtube - agora na sua tv
 
Apresentação Evoluir Educacional 2013
Apresentação  Evoluir Educacional 2013Apresentação  Evoluir Educacional 2013
Apresentação Evoluir Educacional 2013
 
1. assistencia construção solidariedade
1. assistencia construção solidariedade1. assistencia construção solidariedade
1. assistencia construção solidariedade
 
Dá pra Ganhar Dinheiro com Software Livre? Sim.
Dá pra Ganhar Dinheiro com Software Livre? Sim.Dá pra Ganhar Dinheiro com Software Livre? Sim.
Dá pra Ganhar Dinheiro com Software Livre? Sim.
 
Grupo de informática 9
Grupo de informática 9Grupo de informática 9
Grupo de informática 9
 
Scup Cases: Riot
Scup Cases: RiotScup Cases: Riot
Scup Cases: Riot
 
Programação Evento I Encontro Integral no Rio
Programação Evento I Encontro Integral no RioProgramação Evento I Encontro Integral no Rio
Programação Evento I Encontro Integral no Rio
 
Portfólio Planeta Brasil
Portfólio Planeta BrasilPortfólio Planeta Brasil
Portfólio Planeta Brasil
 
Dados Abertos e Meio Ambiente
Dados Abertos e Meio AmbienteDados Abertos e Meio Ambiente
Dados Abertos e Meio Ambiente
 
Predecir, observar y explicar (poe)
Predecir, observar y explicar (poe)Predecir, observar y explicar (poe)
Predecir, observar y explicar (poe)
 
Elaboracion de mi pagina web
Elaboracion de mi pagina webElaboracion de mi pagina web
Elaboracion de mi pagina web
 
5 pasos para mejorar la comunicación
5 pasos para mejorar la comunicación5 pasos para mejorar la comunicación
5 pasos para mejorar la comunicación
 
Fulan
FulanFulan
Fulan
 
Ley de delitos informaticos 2
Ley de delitos informaticos 2Ley de delitos informaticos 2
Ley de delitos informaticos 2
 
Redes Sociais: Aderir ou fugir?
Redes Sociais: Aderir ou fugir?Redes Sociais: Aderir ou fugir?
Redes Sociais: Aderir ou fugir?
 

Semelhante a Producao para web

A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
Ponto Final Design
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
Web Pixel - Agência Criativa
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
Alexandre R. de Castro
 
Apresentação Click Designer - Soluções Digitais, Resultados Reais
Apresentação Click Designer - Soluções Digitais, Resultados ReaisApresentação Click Designer - Soluções Digitais, Resultados Reais
Apresentação Click Designer - Soluções Digitais, Resultados Reais
Agência KI - O Jeito Ninja de Planejar e Executar o Marketing Digital
 
apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3
Ben-Hur Oliveira Morais
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
Glaucia Cavalheiro
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
Anderson Garcia
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
Tiago Tavares
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
MillaSteinbach
 
O que é ser web design
O que é ser web designO que é ser web design
O que é ser web design
Ester Caetano
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
William Ramires
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
Karolyn E. Corrêa
 
O que é ser Web Designer
O que é ser Web DesignerO que é ser Web Designer
O que é ser Web Designer
Larissa de Souza
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
Gustavo Wagner
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
Rosielesilveira
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
Jesse Js
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
MillaSteinbach
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
Jesse Js
 
Oqueserwebdesigner
Oqueserwebdesigner Oqueserwebdesigner
Oqueserwebdesigner
Jonathan Moraes
 

Semelhante a Producao para web (20)

A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Apresentação Click Designer - Soluções Digitais, Resultados Reais
Apresentação Click Designer - Soluções Digitais, Resultados ReaisApresentação Click Designer - Soluções Digitais, Resultados Reais
Apresentação Click Designer - Soluções Digitais, Resultados Reais
 
apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
O que é ser web design
O que é ser web designO que é ser web design
O que é ser web design
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
 
O que é ser Web Designer
O que é ser Web DesignerO que é ser Web Designer
O que é ser Web Designer
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 
Oqueserwebdesigner
OqueserwebdesignerOqueserwebdesigner
Oqueserwebdesigner
 
Oqueserwebdesigner
Oqueserwebdesigner Oqueserwebdesigner
Oqueserwebdesigner
 

Producao para web

  • 1. Produção para! web   22/03/2011!
  • 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. Processo de ! Produção!
  • 4. Processo de produção! •  Briefing;   •  Pesquisa;   •  Escopo;   •  Sitemap;   •  Wireframe;   •  Criação  do  layout;   •  Desenvolvimento;   •  Métricas.  
  • 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. 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. 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. 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.  
  • 10. Ferramentas! •  Wordpress;   •  Adobe  Photoshop;   •  Adobe  Dreamweaver;   •  Adobe  Flash;   •  Adobe  Fireworks;   •  HTML  5;   •  FBML.  
  • 11. Ferramentas! Wordpress!
  • 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. Ferramentas! Wordpress!
  • 14. Ferramentas! Wordpress!
  • 15. Ferramentas! Photoshop!
  • 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. Ferramentas! Photoshop!
  • 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.  
  • 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. Ferramentas! Fireworks!
  • 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. Ferramentas! FBML!
  • 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. Ferramentas! FBML!
  • 28. O Dia a dia em uma agência depende:!
  • 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. Como um cliente funciona…!
  • 31. Criado  por  Majhew  Inman    
  • 32. Criado  por  Majhew  Inman    
  • 33. Criado  por  Majhew  Inman    
  • 34. Criado  por  Majhew  Inman    
  • 35. Criado  por  Majhew  Inman    
  • 36. Criado  por  Majhew  Inman    
  • 37. Criado  por  Majhew  Inman    
  • 38. Criado  por  Majhew  Inman    
  • 39. Criado  por  Majhew  Inman    
  • 41. Obrigado!! alex.sanches@smartis.com.br   smartis.com.br     @alexsanches