SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
Metodologia para
 criação de sites
   Celina Uemura
Importância / Relevância
•   organização da informação (informação
    redundante, ausência de informação)
•   atualização de dados
•   definição do projeto (usos, aplicações,
    usuários, necessidades como acesso a
    banco de dados, animações)
•   transparência para o cliente
Metodologia, suas etapas:
1.   Briefing
2.   Estrutura de Navegação
3.   Cronograma
4.   Criação da Interface
5.   Programação
6.   Manutenção
Briefing
• Público-alvo (incluindo a resolução de
  monitor, tipo de usuário)
• Perfil da empresa ou produto (estratégia de
  marketing)
• Objetivos do site
• Conteúdo e material disponível
• Sites concorrentes, relacionados e/ou
  indicações
• Atualização
Estrutura de Navegação
• Mapa do site - detalhamento das páginas
• Elementos da página - animações (plug-ins),
  imagens (ilustrações, fotos), botões (menus),
  formulários, texto, tabelas, links
• Elementos de navegação - sistemas de
  buscas, indexação, sistema de rótulos e títulos.
Estrutura de Navegação
Formas de organizar a informação:
• em ordem alfabética
• ordem cronológica
• ordem geográfica, por tópicos
• orientado a tarefas (menu de sistemas
  operacionais)
• direcionada a audiência (imprensa,
  estudantes)
• através de metáforas
Estrutura de navegação
Definição de Conteúdo
Cronograma
• Prazos de entrega de material por parte do
  cliente
• Reuniões de aprovação de documentação e
  design
• Testes
Interface
• Criação de uma identidade para o site
  (logomarca, padrão de cores e tipografia)
• Usabilidade fácil e amigável
Usabilidade
• Botões clicáveis - tornar óbvio o que é
  clicável.
• Links óbvios
• Menus “fixos”
• Hierarquia Visual
• Convenções (Metáforas conhecidas)
• Títulos óbvios e curtos
• Rótulos e ícones
Usabilidade
• Indicador “você está aqui”
• Buscas
Programação e Manutenção
• A partir da criação e aprovação da estrutura
  de navegação é possível dar início ao
  processo de programação.

• A manutenção se dá de acordo com a
  necessidade do projeto com um
  acompanhamento e análise de áreas
  acessadas e não acessadas.

Más contenido relacionado

La actualidad más candente

Aprender HTML (UFCD0152 e UFCD0153) v2
Aprender HTML (UFCD0152 e UFCD0153) v2Aprender HTML (UFCD0152 e UFCD0153) v2
Aprender HTML (UFCD0152 e UFCD0153) v2
Afonso Gomes
 
Trabalho interdisciplinar Pizaria Ramos
Trabalho interdisciplinar  Pizaria RamosTrabalho interdisciplinar  Pizaria Ramos
Trabalho interdisciplinar Pizaria Ramos
Helio Rebouças
 
Modelo formatação artigo científico
Modelo formatação artigo científicoModelo formatação artigo científico
Modelo formatação artigo científico
Marcos Azevedo
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
Fábio Costa
 

La actualidad más candente (20)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
Aprender HTML (UFCD0152 e UFCD0153) v2
Aprender HTML (UFCD0152 e UFCD0153) v2Aprender HTML (UFCD0152 e UFCD0153) v2
Aprender HTML (UFCD0152 e UFCD0153) v2
 
Banco de dados exercícios resolvidos
Banco de dados exercícios resolvidosBanco de dados exercícios resolvidos
Banco de dados exercícios resolvidos
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Trabalho interdisciplinar Pizaria Ramos
Trabalho interdisciplinar  Pizaria RamosTrabalho interdisciplinar  Pizaria Ramos
Trabalho interdisciplinar Pizaria Ramos
 
Apresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de PalestrasApresentação Projeto Website Caso PMI AM - Ciclo de Palestras
Apresentação Projeto Website Caso PMI AM - Ciclo de Palestras
 
Projeto e Desenvolvimento de Software
Projeto e Desenvolvimento de SoftwareProjeto e Desenvolvimento de Software
Projeto e Desenvolvimento de Software
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Mer - Modelo Entidade Relacionamento
Mer - Modelo Entidade RelacionamentoMer - Modelo Entidade Relacionamento
Mer - Modelo Entidade Relacionamento
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
UX Research
UX ResearchUX Research
UX Research
 
Aula 6 banco de dados
Aula 6   banco de dadosAula 6   banco de dados
Aula 6 banco de dados
 
Modelo formatação artigo científico
Modelo formatação artigo científicoModelo formatação artigo científico
Modelo formatação artigo científico
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
 
PETI - Planejamento Estratégico de TI
PETI - Planejamento Estratégico de TI PETI - Planejamento Estratégico de TI
PETI - Planejamento Estratégico de TI
 
Banco de Dados - Part01
Banco de Dados - Part01Banco de Dados - Part01
Banco de Dados - Part01
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 

Similar a Metodologia para criação de sites

Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãO
Ana Brambilla
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
Alan Vasconcelos
 

Similar a Metodologia para criação de sites (20)

Desenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e ImplementaçãoDesenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e Implementação
 
Interface homem computador - Aula06 - logo design e arquitetura da informação
Interface homem computador - Aula06 - logo design e arquitetura da informaçãoInterface homem computador - Aula06 - logo design e arquitetura da informação
Interface homem computador - Aula06 - logo design e arquitetura da informação
 
La arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSLa arquitectura de información del Portal BVS
La arquitectura de información del Portal BVS
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
 
Aula02 arquitetura informacao
Aula02 arquitetura informacaoAula02 arquitetura informacao
Aula02 arquitetura informacao
 
Aula02 arquitetura informacao
Aula02 arquitetura informacaoAula02 arquitetura informacao
Aula02 arquitetura informacao
 
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de InformaçãoLaboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
 
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administraç...
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova Intrawebb
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
 
Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãO
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
Arquitetura da Informação e Avaliação de Websites, considerando critérios de ...
 
sites-boas-praticas
sites-boas-praticassites-boas-praticas
sites-boas-praticas
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
 
Introdução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card SortingIntrodução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card Sorting
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 

Último

Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturas
rfmbrandao
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
sh5kpmr7w7
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdfRepública Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
LidianeLill2
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
azulassessoria9
 

Último (20)

Caderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdfCaderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdf
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
 
Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)
 
AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022
 
Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturas
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
Apresentação | Símbolos e Valores da União Europeia
Apresentação | Símbolos e Valores da União EuropeiaApresentação | Símbolos e Valores da União Europeia
Apresentação | Símbolos e Valores da União Europeia
 
Missa catequese para o dia da mãe 2025.pdf
Missa catequese para o dia da mãe 2025.pdfMissa catequese para o dia da mãe 2025.pdf
Missa catequese para o dia da mãe 2025.pdf
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdfRepública Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
República Velha (República da Espada e Oligárquica)-Sala de Aula.pdf
 
Falando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introdFalando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introd
 
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
 
Quiz | Dia da Europa 2024 (comemoração)
Quiz | Dia da Europa 2024  (comemoração)Quiz | Dia da Europa 2024  (comemoração)
Quiz | Dia da Europa 2024 (comemoração)
 
Sopa de letras | Dia da Europa 2024 (nível 2)
Sopa de letras | Dia da Europa 2024 (nível 2)Sopa de letras | Dia da Europa 2024 (nível 2)
Sopa de letras | Dia da Europa 2024 (nível 2)
 
Questões de Língua Portuguesa - gincana da LP
Questões de Língua Portuguesa - gincana da LPQuestões de Língua Portuguesa - gincana da LP
Questões de Língua Portuguesa - gincana da LP
 

Metodologia para criação de sites

  • 1. Metodologia para criação de sites Celina Uemura
  • 2. Importância / Relevância • organização da informação (informação redundante, ausência de informação) • atualização de dados • definição do projeto (usos, aplicações, usuários, necessidades como acesso a banco de dados, animações) • transparência para o cliente
  • 3. Metodologia, suas etapas: 1. Briefing 2. Estrutura de Navegação 3. Cronograma 4. Criação da Interface 5. Programação 6. Manutenção
  • 4. Briefing • Público-alvo (incluindo a resolução de monitor, tipo de usuário) • Perfil da empresa ou produto (estratégia de marketing) • Objetivos do site • Conteúdo e material disponível • Sites concorrentes, relacionados e/ou indicações • Atualização
  • 5. Estrutura de Navegação • Mapa do site - detalhamento das páginas • Elementos da página - animações (plug-ins), imagens (ilustrações, fotos), botões (menus), formulários, texto, tabelas, links • Elementos de navegação - sistemas de buscas, indexação, sistema de rótulos e títulos.
  • 6. Estrutura de Navegação Formas de organizar a informação: • em ordem alfabética • ordem cronológica • ordem geográfica, por tópicos • orientado a tarefas (menu de sistemas operacionais) • direcionada a audiência (imprensa, estudantes) • através de metáforas
  • 9. Cronograma • Prazos de entrega de material por parte do cliente • Reuniões de aprovação de documentação e design • Testes
  • 10. Interface • Criação de uma identidade para o site (logomarca, padrão de cores e tipografia) • Usabilidade fácil e amigável
  • 11. Usabilidade • Botões clicáveis - tornar óbvio o que é clicável. • Links óbvios • Menus “fixos” • Hierarquia Visual • Convenções (Metáforas conhecidas) • Títulos óbvios e curtos • Rótulos e ícones
  • 12. Usabilidade • Indicador “você está aqui” • Buscas
  • 13. Programação e Manutenção • A partir da criação e aprovação da estrutura de navegação é possível dar início ao processo de programação. • A manutenção se dá de acordo com a necessidade do projeto com um acompanhamento e análise de áreas acessadas e não acessadas.