SlideShare uma empresa Scribd logo
Desenvolvimento de
Protótipos em Wireframe
Otávio Souza
Rio, 16 de Agosto de 2010
Agenda
Objetivo
Desenvolvimento
Resultado
Próximos Passos
Desenvolvimento de Protótipos > Agenda
Cenário Atual e Novo Cenário
Objetivo
3
Facilitar o processo de aprovação de novas funcionalidades, elaboração de
casos de uso e testes de usabilidade, através do desenvolvimento de
protótipos em Wireframe com a ferramenta Axure.
A construção de Wireframes permite uma visualização fiel de como o cliente utilizará o
software a ser desenvolvido, padronizando o desenvolvimento de protótipos do WBS.
Ciclo de Vida do Produto
Desenvolvimento de Protótipos > Objetivo
Protótipo
Cenário Atual
4Desenvolvimento de Protótipos ... > Cenário Atual
Protótipos com Diversos Formatos e Padrões
Características:
1- Não existe padronização definida;
2- Baixa fidelidade com o sistema;
3- Diversos programas são utilizados.
4 – Não cumprimento dos processos devido a dificuldade e
demanda de tempo para elaboração do protótipo.
Paint + PPT
Axure
PPT
Novo Cenário
5Desenvolvimento de Protótipos > Novo Cenário
Protótipo em Alta FidelidadeProtótipo em Wireframe
Uso para Testes Conceituais
Características:
1- Criação através de biblioteca de elementos pré-definidos;
2- Imagens em estruturas de fios e arames, sem acabamentos;
3- Teste conceitual de comportamento;
4- Representação básica e rápida da interface.
3
3
Uso para Fins Comerciais
Características:
1- Alto grau de impacto e associação com o produto final;
2- Reflete a especificação do Wireframe;
3- Acabamento com riqueza de detalhes (aplicação de sombras
e imagens).
Arquitetura da Informação
6
O WBS é estruturado através da seguinte hierarquia, utilizada na construção do Wireframe:
Desenvolvimento de Protótipos ... > Arquitetura da Informação
6 – Funcionalidade
Disparada pelos controles,
resulta nos casos de uso.
1
1 – Sistema
Conjunto de módulos.
ex: eProcurement (WBS).
2 – Módulos
Conjunto de telas.
ex: RC’s, PC’s, SDC’s.
3 – Tela
Conjunto de componentes.
ex: Pesquisas e Documentos
4 – Componentes
Conjunto de controles.
ex: Portlet de Dados.
5 – Controles
Dispara a ação de
determinada funcionalidade.
6
Ações > Enviar = Envia o Documento
Desenvolvimento em Wireframe
7
- O desenvolvimento acontece a partir da inclusão (drag-and-drop)
de componentes pré-definidos separados em três bibliotecas;
- As bibliotecas contemplam todos os componentes existentes;
- Quando houver necessidade de inclusão de um novo componente,
a demanda deve ser feita à Área de Produtos.
Exemplo drag-and-drop
Desenvolvimento de Protótipos > Desenvolvimento
Biblioteca Protótipo em Wireframe
8
Após o desenvolvimento do Wireframe, deve-se seguir dois passos:
Desenvolvimento de Protótipos ... > Desenvolvimento
Desenvolvimento em Wireframe
1 – Descrever o comportamento e status da funcionalidade.
2 – Incluir o link com a especificação funcional (EF) correspondente.
Resultado
9
Protótipo final com as devidas especificações:
Desenvolvimento de Protótipos ... > Resultado
Resultado
10
O Protótipo gerado possibilita a navegação entre páginas através de duas formas:
Desenvolvimento de Protótipos ... > Resultado
1 - Menu de Navegação
2 - Controles

Mais conteúdo relacionado

Semelhante a Processo para a Construção de Protótipos

Primeiros passos com o framework Sencha Ext JS
Primeiros passos com o framework Sencha Ext JSPrimeiros passos com o framework Sencha Ext JS
Primeiros passos com o framework Sencha Ext JS
Wemerson Januario
 
Dalton Sergio Leonardo Pt Currículo 20160803
Dalton Sergio Leonardo Pt  Currículo 20160803Dalton Sergio Leonardo Pt  Currículo 20160803
Dalton Sergio Leonardo Pt Currículo 20160803
Dalton Sergio Leonardo
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
Daniel Brandão
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
Eric Gallardo
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Thiago Sinésio
 
plano_de_projeto_controlart_rascunho
plano_de_projeto_controlart_rascunhoplano_de_projeto_controlart_rascunho
plano_de_projeto_controlart_rascunho
userrx
 
Framework struts2v2.5
Framework struts2v2.5Framework struts2v2.5
Framework struts2v2.5
Eduardo Gabina
 
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
Cloves da Rocha
 
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEBDescobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
elliando dias
 
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile App
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile AppAula - Modelos de Processos de Desenvolvimento de Software / Mobile App
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile App
Cloves da Rocha
 
SATADS 2019 - Desenvolvimento com recursos da AWS
SATADS 2019 - Desenvolvimento com recursos da AWSSATADS 2019 - Desenvolvimento com recursos da AWS
SATADS 2019 - Desenvolvimento com recursos da AWS
Anderson Contreira
 
Apresentação do Kohana Framework
Apresentação do Kohana FrameworkApresentação do Kohana Framework
Apresentação do Kohana Framework
André Luis
 
Trabalho individual 5 semestre Analise de Sistemas
Trabalho individual 5 semestre Analise de SistemasTrabalho individual 5 semestre Analise de Sistemas
Trabalho individual 5 semestre Analise de Sistemas
WANDERSON JONER
 
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
Adilson Nascimento
 
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
Silvio Clecio
 
plano_de_projeto_controlart_final
plano_de_projeto_controlart_finalplano_de_projeto_controlart_final
plano_de_projeto_controlart_final
userrx
 
Apresentação da Spin no SIMPASE 2013
Apresentação da Spin no SIMPASE 2013Apresentação da Spin no SIMPASE 2013
Apresentação da Spin no SIMPASE 2013
SpinEngenharia
 
Asp net mvc
Asp net mvcAsp net mvc
Mini curso JBC
Mini curso JBCMini curso JBC
Mini curso JBC
Rodrigo Marconato
 
Metodologia de desenvolvimento de sistemas
Metodologia  de desenvolvimento de sistemasMetodologia  de desenvolvimento de sistemas
Metodologia de desenvolvimento de sistemas
Priscila Stuani
 

Semelhante a Processo para a Construção de Protótipos (20)

Primeiros passos com o framework Sencha Ext JS
Primeiros passos com o framework Sencha Ext JSPrimeiros passos com o framework Sencha Ext JS
Primeiros passos com o framework Sencha Ext JS
 
Dalton Sergio Leonardo Pt Currículo 20160803
Dalton Sergio Leonardo Pt  Currículo 20160803Dalton Sergio Leonardo Pt  Currículo 20160803
Dalton Sergio Leonardo Pt Currículo 20160803
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
 
plano_de_projeto_controlart_rascunho
plano_de_projeto_controlart_rascunhoplano_de_projeto_controlart_rascunho
plano_de_projeto_controlart_rascunho
 
Framework struts2v2.5
Framework struts2v2.5Framework struts2v2.5
Framework struts2v2.5
 
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
Aula Modelos de Processos Tradicionais para Desenvolvimento de Software
 
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEBDescobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
Descobrindo o Potencial do Flex para a Criação de Aplicações Ricas para a WEB
 
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile App
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile AppAula - Modelos de Processos de Desenvolvimento de Software / Mobile App
Aula - Modelos de Processos de Desenvolvimento de Software / Mobile App
 
SATADS 2019 - Desenvolvimento com recursos da AWS
SATADS 2019 - Desenvolvimento com recursos da AWSSATADS 2019 - Desenvolvimento com recursos da AWS
SATADS 2019 - Desenvolvimento com recursos da AWS
 
Apresentação do Kohana Framework
Apresentação do Kohana FrameworkApresentação do Kohana Framework
Apresentação do Kohana Framework
 
Trabalho individual 5 semestre Analise de Sistemas
Trabalho individual 5 semestre Analise de SistemasTrabalho individual 5 semestre Analise de Sistemas
Trabalho individual 5 semestre Analise de Sistemas
 
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
Portfolio Grupo 4 ADS Unopar Desafios1-2-3-4
 
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
Desenvolvimento web com Brook framework 3.0 - 01 - APRESENTAÇÃO; INSTALAÇÃO; ...
 
plano_de_projeto_controlart_final
plano_de_projeto_controlart_finalplano_de_projeto_controlart_final
plano_de_projeto_controlart_final
 
Apresentação da Spin no SIMPASE 2013
Apresentação da Spin no SIMPASE 2013Apresentação da Spin no SIMPASE 2013
Apresentação da Spin no SIMPASE 2013
 
Asp net mvc
Asp net mvcAsp net mvc
Asp net mvc
 
Mini curso JBC
Mini curso JBCMini curso JBC
Mini curso JBC
 
Metodologia de desenvolvimento de sistemas
Metodologia  de desenvolvimento de sistemasMetodologia  de desenvolvimento de sistemas
Metodologia de desenvolvimento de sistemas
 

Mais de Otávio Souza

Quando o ágil se torna waterfall?
Quando o ágil se torna waterfall? Quando o ágil se torna waterfall?
Quando o ágil se torna waterfall?
Otávio Souza
 
Fundamentos do Product Management
Fundamentos do Product ManagementFundamentos do Product Management
Fundamentos do Product Management
Otávio Souza
 
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
Otávio Souza
 
Growth – o que é e qual o seu valor?
Growth – o que é e qual o seu valor?Growth – o que é e qual o seu valor?
Growth – o que é e qual o seu valor?
Otávio Souza
 
Gestão de Stakeholders e seu impacto na cultura organizacional
Gestão de Stakeholders e seu impacto na cultura organizacionalGestão de Stakeholders e seu impacto na cultura organizacional
Gestão de Stakeholders e seu impacto na cultura organizacional
Otávio Souza
 
Concepção de Marca: Europa Importadora
Concepção de Marca: Europa ImportadoraConcepção de Marca: Europa Importadora
Concepção de Marca: Europa Importadora
Otávio Souza
 
Concepção de Marca: Schatzi
Concepção de Marca: SchatziConcepção de Marca: Schatzi
Concepção de Marca: Schatzi
Otávio Souza
 
Concepção de Produto: Troféu para a Ética Imobiliária
Concepção de Produto: Troféu para a Ética ImobiliáriaConcepção de Produto: Troféu para a Ética Imobiliária
Concepção de Produto: Troféu para a Ética Imobiliária
Otávio Souza
 
Concepção de Marca: Startup "Arrematou Levou"
Concepção de Marca: Startup "Arrematou Levou"Concepção de Marca: Startup "Arrematou Levou"
Concepção de Marca: Startup "Arrematou Levou"
Otávio Souza
 
eNNovart - Apresentação Institucional
eNNovart - Apresentação InstitucionaleNNovart - Apresentação Institucional
eNNovart - Apresentação Institucional
Otávio Souza
 
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
Otávio Souza
 
Palestra - Princípios de Usabilidade
Palestra - Princípios de UsabilidadePalestra - Princípios de Usabilidade
Palestra - Princípios de Usabilidade
Otávio Souza
 
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
Otávio Souza
 
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Otávio Souza
 

Mais de Otávio Souza (14)

Quando o ágil se torna waterfall?
Quando o ágil se torna waterfall? Quando o ágil se torna waterfall?
Quando o ágil se torna waterfall?
 
Fundamentos do Product Management
Fundamentos do Product ManagementFundamentos do Product Management
Fundamentos do Product Management
 
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
Hyper Growth – Como escalar ágil e manter a qualidade em seu produto?
 
Growth – o que é e qual o seu valor?
Growth – o que é e qual o seu valor?Growth – o que é e qual o seu valor?
Growth – o que é e qual o seu valor?
 
Gestão de Stakeholders e seu impacto na cultura organizacional
Gestão de Stakeholders e seu impacto na cultura organizacionalGestão de Stakeholders e seu impacto na cultura organizacional
Gestão de Stakeholders e seu impacto na cultura organizacional
 
Concepção de Marca: Europa Importadora
Concepção de Marca: Europa ImportadoraConcepção de Marca: Europa Importadora
Concepção de Marca: Europa Importadora
 
Concepção de Marca: Schatzi
Concepção de Marca: SchatziConcepção de Marca: Schatzi
Concepção de Marca: Schatzi
 
Concepção de Produto: Troféu para a Ética Imobiliária
Concepção de Produto: Troféu para a Ética ImobiliáriaConcepção de Produto: Troféu para a Ética Imobiliária
Concepção de Produto: Troféu para a Ética Imobiliária
 
Concepção de Marca: Startup "Arrematou Levou"
Concepção de Marca: Startup "Arrematou Levou"Concepção de Marca: Startup "Arrematou Levou"
Concepção de Marca: Startup "Arrematou Levou"
 
eNNovart - Apresentação Institucional
eNNovart - Apresentação InstitucionaleNNovart - Apresentação Institucional
eNNovart - Apresentação Institucional
 
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
Engenharia de Requisitos - Recomendações para desenvolvimento de solução BIS.
 
Palestra - Princípios de Usabilidade
Palestra - Princípios de UsabilidadePalestra - Princípios de Usabilidade
Palestra - Princípios de Usabilidade
 
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
 
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
Recomendações de usabilidade e prototipagem de nova interface baseada na cons...
 

Processo para a Construção de Protótipos

  • 1. Desenvolvimento de Protótipos em Wireframe Otávio Souza Rio, 16 de Agosto de 2010
  • 2. Agenda Objetivo Desenvolvimento Resultado Próximos Passos Desenvolvimento de Protótipos > Agenda Cenário Atual e Novo Cenário
  • 3. Objetivo 3 Facilitar o processo de aprovação de novas funcionalidades, elaboração de casos de uso e testes de usabilidade, através do desenvolvimento de protótipos em Wireframe com a ferramenta Axure. A construção de Wireframes permite uma visualização fiel de como o cliente utilizará o software a ser desenvolvido, padronizando o desenvolvimento de protótipos do WBS. Ciclo de Vida do Produto Desenvolvimento de Protótipos > Objetivo Protótipo
  • 4. Cenário Atual 4Desenvolvimento de Protótipos ... > Cenário Atual Protótipos com Diversos Formatos e Padrões Características: 1- Não existe padronização definida; 2- Baixa fidelidade com o sistema; 3- Diversos programas são utilizados. 4 – Não cumprimento dos processos devido a dificuldade e demanda de tempo para elaboração do protótipo. Paint + PPT Axure PPT
  • 5. Novo Cenário 5Desenvolvimento de Protótipos > Novo Cenário Protótipo em Alta FidelidadeProtótipo em Wireframe Uso para Testes Conceituais Características: 1- Criação através de biblioteca de elementos pré-definidos; 2- Imagens em estruturas de fios e arames, sem acabamentos; 3- Teste conceitual de comportamento; 4- Representação básica e rápida da interface. 3 3 Uso para Fins Comerciais Características: 1- Alto grau de impacto e associação com o produto final; 2- Reflete a especificação do Wireframe; 3- Acabamento com riqueza de detalhes (aplicação de sombras e imagens).
  • 6. Arquitetura da Informação 6 O WBS é estruturado através da seguinte hierarquia, utilizada na construção do Wireframe: Desenvolvimento de Protótipos ... > Arquitetura da Informação 6 – Funcionalidade Disparada pelos controles, resulta nos casos de uso. 1 1 – Sistema Conjunto de módulos. ex: eProcurement (WBS). 2 – Módulos Conjunto de telas. ex: RC’s, PC’s, SDC’s. 3 – Tela Conjunto de componentes. ex: Pesquisas e Documentos 4 – Componentes Conjunto de controles. ex: Portlet de Dados. 5 – Controles Dispara a ação de determinada funcionalidade. 6 Ações > Enviar = Envia o Documento
  • 7. Desenvolvimento em Wireframe 7 - O desenvolvimento acontece a partir da inclusão (drag-and-drop) de componentes pré-definidos separados em três bibliotecas; - As bibliotecas contemplam todos os componentes existentes; - Quando houver necessidade de inclusão de um novo componente, a demanda deve ser feita à Área de Produtos. Exemplo drag-and-drop Desenvolvimento de Protótipos > Desenvolvimento Biblioteca Protótipo em Wireframe
  • 8. 8 Após o desenvolvimento do Wireframe, deve-se seguir dois passos: Desenvolvimento de Protótipos ... > Desenvolvimento Desenvolvimento em Wireframe 1 – Descrever o comportamento e status da funcionalidade. 2 – Incluir o link com a especificação funcional (EF) correspondente.
  • 9. Resultado 9 Protótipo final com as devidas especificações: Desenvolvimento de Protótipos ... > Resultado
  • 10. Resultado 10 O Protótipo gerado possibilita a navegação entre páginas através de duas formas: Desenvolvimento de Protótipos ... > Resultado 1 - Menu de Navegação 2 - Controles

Notas do Editor

  1. Pode ser