Prototyping with Expression SketchFlow (2 Fev 2010)

739 visualizações

Publicada em

2010's first Microsoft Conference about the Web. Talking about how to prototype with Expression SketchFlow for Silverlight projects.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
739
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • SketchFlow faz parte integranda do Expression Blend3Maneira rapida de explorar e projectar o UIOs prototipos sao não-lineares, ao contrario do VISIO ou Powerpoint...podemos ter um modelo grafico complexo em vez de uma sequencia de slidesFacil passar do Prototipo a Producao
  • Flow nao linearElementos reutilizaveisSketchFlow é Silverlight/WPF  Nao é Powerpoint ... Nao é Visio ... Nao sao Mockups “fechados”
  • Fazer duas paginas: w:766 h:766
  • Explica-se o conceito mas o cliente nao consegue “sentir” qual a experiencia da aplicaçao
  • - O cliente só se vai focar no aspecto visual, nos pormenores graficos
  • - Com o SketchFlow é possivel começar com um “rough sketch”, evoluir para wireframe, passar a prototipo funcional ... Tudo para que o prototipo “ofereça” tanto quanto possivel a experiencia de um utilizador final ... Tudo isto antes de haver um conceito gráfico
  • Criar uma GRID: 4 colunas x 2 linhasAdicionar: 5 rectangulos (logo, menu, submenu, area display)Adicionar StackPanel no menu e submenu e adicionar buttonsAdicionar StackPanel para imagens ThumbAdicionar rectangulo para a imagem grandeLogo, Menu e Submenu sao ComponentScreensAdicionar ListBox para os Links
  • - Feedback constante do cliente, sem falhas de comunicação
  • Criar um Feedback a pedir para se mostrar como irá funcionar a navegaçao e a selecçao das fotografias
  • Seja através de Behaviors, seja através de Controls (que já têm toda a parte interactiva adjacente STATES) ...Possibilidade de se criar animações que “exemplifiquem” o modo de utilizar determinada feature da aplicaçãoReferir a simplicidade de se criar interactividade e animação ... “Tao simples que até o Homer Simpson consegue”
  • Seja através de Behaviors, seja através de Controls (que já têm toda a parte interactiva adjacente STATES) ...Possibilidade de se criar animações que “exemplifiquem” o modo de utilizar determinada feature da aplicaçãoReferir a simplicidade de se criar interactividade e animação ... “Tao simples que até o Homer Simpson consegue”
  • Adicionar “NavigateTo” no MenuCriar as SketchFlow Animations a exemplificar como se pode seleccionar as thumbs
  • Ja se passou a fase “estática”, os protótipos podem e devem ser interactivos de modo a que o cliente e/ou os utilizadores que possam estar a realizar testes de UX, simulem o produto final .... Quem vai inserir todo o conteúdo ? (textos, imagens, numeros ...)Referir o caso de uma loja de eCommerce ... Como simular a existencia dessa informaçao dinamica ?
  • Criar um Sample Data Source nos LinksCriar uma Simple Property com imagemCriar uma Simple Property com textoEditar o Template dos linksCriar uma Sample Collection com imagensApagar o StackPanel das thumbs ... E criar uma ListBox ... Mostrar que o SketchStyle é mesmo so um estilo sobre o mm controlo
  • Documentaçao !!!Especificações !!!Feedback do Cliente !!!
  • - Exportar para WORD
  • Prototyping with Expression SketchFlow (2 Fev 2010)

    1. 1. SketchFlow:do Protótipo à Produção<br />Ricardo CastelhanoTrainer & Consultant @ ITech4All<br />
    2. 2. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    3. 3. About Me<br />Ricardo Castelhano<br />Trainer & Consultant @ ITech4All<br />Mail: ricardo.castelhano@itech4all.com<br />rc@ricardocastelhano.com<br />Blogs: http://www.ricardocastelhano.com<br /> http://xamlpt.com/blogs/ricardocastelhano<br />http://pontonetpt.com/blogs/ricardocastelhano<br />Twitter: @RicCastelhano<br />
    4. 4. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    5. 5. Introduction<br />Feature within Expression Blend 3<br />Quick Way to Explore and Iterate UI Scenarios<br />Non-Linear Prototypes<br />Convert Prototypes in Working Applications<br />Helps Save Money !!<br />
    6. 6. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    7. 7. Flow & Composition Of An App<br />http://www.branded3.com<br />
    8. 8. DEMO<br />SketchFlow Map<br />
    9. 9. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    10. 10. Just The Right Fidelity<br />“I like the concept, but what about the user experience?”<br />The Back Of The Napkin<br />
    11. 11. Just The Right Fidelity<br />“Errr, I don’t like that colour much !”<br />http://www.freewebtemplates.com<br />
    12. 12. Just The Right Fidelity<br />http://www.boxesandarrows.com<br />
    13. 13. DEMO<br />Sketch Styles<br />
    14. 14. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    15. 15. Work With Your Client<br />
    16. 16. DEMO<br />Feedback<br />
    17. 17. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    18. 18. A Prototype CAN Be Interactive<br />No Code Needed !<br />Behaviors<br />States<br />SketchFlow Animations<br />
    19. 19. A Prototype CAN Be Interactive<br />YES, Homer Simpson’s can!<br />
    20. 20. DEMO<br />Interactivity<br />
    21. 21. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    22. 22. Do I Have To Write All That Lipsum Crap?<br />http://www.mindqueue.com<br />
    23. 23. DEMO<br />Sample Data<br />
    24. 24. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    25. 25. Keep Everyone Updated<br />
    26. 26. DEMO<br />Documentation<br />
    27. 27. Agenda<br />Introduction<br />Flow & Composition Of An App<br />Just The Right Fidelity<br />Work With Your Client<br />A Prototype CAN Be Interactive<br />Do I Have To Write All That Lipsum Crap?<br />Keep Everyone Updated<br />Q&A<br />
    28. 28. Thank You<br />Ricardo CastelhanoTrainer & Consultant @ ITech4All<br />Mail: ricardo.castelhano@itech4all.com<br /> rc@ricardocastelhano.com<br />

    ×