Uploaded byRicardo Castelhano
Prototyping with Expression SketchFlow (2 Fev 2010)
The document outlines a presentation by Ricardo Castelhano on prototyping in app development using SketchFlow, emphasizing the importance of flow, composition, and client collaboration. It highlights the capabilities of creating interactive prototypes without code, aiming to enhance user experience and facilitate feedback. The agenda includes discussions on prototype fidelity, UI exploration, and keeping stakeholders updated throughout the process.
More Related Content
Similar to Prototyping with Expression SketchFlow (2 Fev 2010)
Prototyping with Expression SketchFlow (2 Fev 2010)
- 1. SketchFlow:do Protótipo àProduçãoRicardo CastelhanoTrainer & Consultant @ ITech4All
- 2. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 3. About MeRicardo CastelhanoTrainer& Consultant @ ITech4AllMail: [email protected]@ricardocastelhano.comBlogs: http://www.ricardocastelhano.com http://xamlpt.com/blogs/ricardocastelhanohttp://pontonetpt.com/blogs/ricardocastelhanoTwitter: @RicCastelhano
- 4. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 5. IntroductionFeature within ExpressionBlend 3Quick Way to Explore and Iterate UI ScenariosNon-Linear PrototypesConvert Prototypes in Working ApplicationsHelps Save Money !!
- 6. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 7. Flow & CompositionOf An Apphttp://www.branded3.com
- 8.
- 9. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 10. Just The RightFidelity“I like the concept, but what about the user experience?”The Back Of The Napkin
- 11. Just The RightFidelity“Errr, I don’t like that colour much !”http://www.freewebtemplates.com
- 12. Just The RightFidelityhttp://www.boxesandarrows.com
- 13.
- 14. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 15. Work With YourClient
- 16.
- 17. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 18. A Prototype CANBe InteractiveNo Code Needed !BehaviorsStatesSketchFlow Animations
- 19. A Prototype CANBe InteractiveYES, Homer Simpson’s can!
- 20.
- 21. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 22. Do I HaveTo Write All That Lipsum Crap?http://www.mindqueue.com
- 23.
- 24. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 25.
- 26.
- 27. AgendaIntroductionFlow & CompositionOf An AppJust The Right FidelityWork With Your ClientA Prototype CAN Be InteractiveDo I Have To Write All That Lipsum Crap?Keep Everyone UpdatedQ&A
- 28. Thank YouRicardo CastelhanoTrainer& Consultant @ ITech4AllMail: [email protected] [email protected]
Editor's Notes
- #6 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
- #8 Flow nao linearElementos reutilizaveisSketchFlow é Silverlight/WPF Nao é Powerpoint ... Nao é Visio ... Nao sao Mockups “fechados”
- #9 Fazer duas paginas: w:766 h:766
- #11 Explica-se o conceito mas o cliente nao consegue “sentir” qual a experiencia da aplicaçao
- #12 - O cliente só se vai focar no aspecto visual, nos pormenores graficos
- #13 - 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
- #14 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
- #16 - Feedback constante do cliente, sem falhas de comunicação
- #17 Criar um Feedback a pedir para se mostrar como irá funcionar a navegaçao e a selecçao das fotografias
- #19 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”
- #20 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”
- #21 Adicionar “NavigateTo” no MenuCriar as SketchFlow Animations a exemplificar como se pode seleccionar as thumbs
- #23 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 ?
- #24 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
- #26 Documentaçao !!!Especificações !!!Feedback do Cliente !!!
- #27 - Exportar para WORD