Prototyping with Expression SketchFlow (2 Fev 2010)
•
0 likes•556 views
2010's first Microsoft Conference about the Web. Talking about how to prototype with Expression SketchFlow for Silverlight projects.
Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (20)
Similar to Prototyping with Expression SketchFlow (2 Fev 2010)
Similar to Prototyping with Expression SketchFlow (2 Fev 2010) (20)
More from Ricardo Castelhano
More from Ricardo Castelhano (12)
Recently uploaded
Recently uploaded (20)
Prototyping with Expression SketchFlow (2 Fev 2010)
- 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
- 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
- 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!
- 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
- 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
Editor's Notes
- 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