Veja as vantagens da prototipação de telas. Aula ministrada no dia 01/12/14 no curso Técnico em Informática da http://eteit.univale.br

1. Introdução ao Desenvolvimento de Sistemas
JanynneL. S. Gomes

2. AULA 6 PROTOTIPAÇÃO DE TELAS
2
Introdução ao Desenvolvimento de Software
Janynne L. S. Gomes

3. 3
Agenda
•O que é Protótipo de Telas?
•Vantagens da prototipação
•Classificação
–Baixa Fidelidade
–Média Fidelidade
–Alta Fidelidade
•Metodologia
–Prototipação Evolucionária
–Prototipação Descartável
•Ferramentas de prototipação
3
Introdução ao Desenvolvimento de Software
JanynneL. S. Gomes

4. 4
O que é Prototipação de Telas?

5. 5
O que é um Prototipação de Telas?
Aproduçãodeversõesiniciais(análogoamaquetesparaaarquitetura)deumsistemafuturocomoqualépossívelrealizarverificaçõeseexperimentos,comointuitodeavaliaralgumasdesuascaracterísticasantesqueosistemavenharealmenteaserconstruído,deformadefinitiva.

6. 6
Vantagens da Prototipação
•Baixademandadetempoparadesenvolvimentoeconsequentemente,baixocusto
•Nãorequerconhecimentosavançadosemsoftwaresdeediçãográfica
•Facilitaavisualizaçãodoprodutoparaoclientedesdeafaseinicial
•Possibilitareceberofeedbackdoclienteemtempoágil

7. 7
Vantagens da Prototipação
•Facilitaolevantamentoderequisitosefuncionalidades
•Possibilitaestimardeformamaisprecisaacomplexidadeetempodedesenvolvimento
•Possibilitaarealizaçãotestesdeinterações
•Reduzosesforçosdedesenvolvimento

8. 8
Classificação
–Baixa Fidelidade
–Média Fidelidade
–Alta Fidelidade

9. 9
Classificação: Baixa fidelidade
•Osprotótiposdebaixafidelidade,tambémchamadosderascunhosousketches,sãoconcebidosaindanafaseinicial,duranteaconcepçãodosistema.
•Desenhadosgeralmenteàmãoutilizandolápis,borrachaepapel,essasrepresentaçõessãofeitasdemaneirarápidaesuperficial,apenasmargeandoaideiadoprojetoedefinindosuperficialmentesuainteraçãocomousuário,nãosepreocupandoaindacomelementosdelayout,cores,disposições,etc.

10. 10
Classificação: Baixa fidelidade

11. 11
Classificação: Média fidelidade
•Conhecidostambémporwireframes,esseprotótipossãodesenvolvidosnafasedaarquiteturadainformação.
•Utilizandolápisepapelousoftwaresdeprototipação,comooBalsamiqouAxure,essesdocumentosapresentamaestruturaeoconteúdodainterface,definindopeso,relevânciaerelaçãodoselementos,formandoolayoutbásicodoprojeto.

12. 12
Classificação: Média fidelidade

13. 13
Classificação: Alta fidelidade
•Os mockups ou protótipos funcionais constituem a representação mais próxima do sistema a ser desenvolvido. Em alguns casos, é possível simular o fluxo completo das funcionalidades, permitindo a interação do usuário como se fosse o produto final.
•A aparência visual, as formas de navegação e interatividade já são concebidas e aplicadas aos protótipos de alta fidelidade.

14. 14
Classificação: Alta fidelidade

15. 15
Classificação: Alta fidelidade

16. 16
Classificação: Alta fidelidade
•Seu desenvolvimento é realizado na fase final de definição da interface, utilizando programas de design gráfico, como o Photoshop ou Fireworks; ferramentas de codificação front-end, como o Sublime Text ou Dreamweaver; e linguagens de programação front-end, como o HTML + CSS + jQuery.

17. 17
Metodologias
•Prototipação Evolucionária:consiste em produzir um modelo inicial e refiná-lo ao longo das várias fases de desenvolvimento até atingir a forma final.
•Prototipação Descartável:implementados em cada etapa do projeto, esses modelos abordam os detalhes do ciclo e depois são descartados. Para esse tipo de uso, descartável, é fundamental saber o momento certo de considerar o protótipo como finalizado.

18. 18
Metodologias
•Prototipação Evolucionária:consiste em produzir um modelo inicial e refiná-lo ao longo das várias fases de desenvolvimento até atingir a forma final.
•Prototipação Descartável:implementados em cada etapa do projeto, esses modelos abordam os detalhes do ciclo e depois são descartados. Para esse tipo de uso, descartável, é fundamental saber o momento certo de considerar o protótipo como finalizado.

19. 19
Conclusão
Há diversas metodologias e formas de se iniciar o desenvolvimento de um sistema, independentemente da escolha, a etapa de prototipação se faz fundamental para o sucesso do projeto, otimizando o tempo e reduzindo o esforço de desenvolvimento.

20. 20
Conclusão
“É mais barato alterar um produto na sua fase inicial do que fazer alterações em um produto acabado. Estima-se que seja 100x (cem vezes) mais barato efetuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efetuado.” Jakob Nielsen, 2013

21. 21
Referências
•http://thiagonasc.com/desenvolvimento-web/a-importancia-dos- prototipos-no-desenvolvimento-de-sistemas
•http://www.dextra.com.br/prototipacao-e-sua-importancia-no- desenvolvimento-de-software/
•http://pt.wikipedia.org/wiki/Prototipa%C3%A7%C3%A3o

22. 22
Disciplina: Introdução ao Desenvolvimento de Sistemas
Professora: Janynne L. S. Gomes
Contato: janynne.gomes@outlook.com
www.eteit.univale.br