Your SlideShare is downloading. ×
Prototyping with Expression SketchFlow (2 Fev 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototyping with Expression SketchFlow (2 Fev 2010)

496

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for 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
  • Transcript

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

    ×