Slides from the UK Silverlight 3 launch event at Microsoft. Demonstrating our experiences with Expression Blend 3 and Sketchflow, and how it has changed our workflow for the better
1. Expression Blend 3& SketchFlowEvolving design process Jason Rousell Nick Harewood
2. 1m+ users Silverlight, MOSS, Exchange Managed Service Provider Attollo Silverlight teaching and learning tool for 150,000 users OpenSchool Silverlight application for 500,000 parents
3. Introduction i2Q Pizza Day = Brown Bag session Talk about new technology, processes, functionality, philosophy or software Improving our design process with Blend 3 + SketchFlow
4. History - The way we were Sketches Wireframes Designs
5. History : Static layout and content Answer? Need to engage customer HTML prototype Difficult to communicate concepts Evolutionary dead-end Not true to the experience Soon Stagnates
6. History : Visio Architecture Cannot communicate detail More static than HTML Makes great wallpaper Not very Green
7. Today : Some things never change... Sketches Wireframes SketchFlow
8. Today – Benefits of SketchFlow Fits well with Agile development Demonstrates real behaviour Helps identify key / consistent controls XAML Elements transferrable
9. The Future i2Q Continue to use SketchFlow throughout project lifecycle 2010 Attollo moves to Silverlight 3 2019 Pre-crime interface developed in Blend 12?
Hinweis der Redaktion
Normally in the i2Q offices, Wednesday is pizza day... This is usually a good time for us to hold our brown bag sessions, when anyone in the company can demo and evangelise a new technology, process, bit of functionality, piece of software or philosophy.Seemed to make sense (at the time) to treat this like an extended brown bagAnd talk to you about how working with Expression Blend and SketchFlow has changed our workflow
History - Process BeforeWireframes and sketching, defining the frame work from which everything will hangDecided on a windows based system for the attollo app.
Was going to be a long time before we could involve the client and deliver something interactive. As part of our Agile development process, it is important to involve the customer and be able to ‘show and tell’ on a regular basis.They were finding it hard to understand how it would all hang together from just the wireframes, and Visio diagrams. In order to help them understand we produced an HTML prototype to get around this:Unfortunately.... Evolutionary dead-end Not a true reflection of the experience... states, transitions and effects Difficult to modify and update – soon became stagnant Same applies to Visios...
VisiosWhile they can give an idea of the app structure – their main effect is to remind you just how much work needs doing. Without lines criss crossing everywhere like some sort of etch a sketch drawing...it’s not easy to inform what links go where, and just what different elements of navigation do.Work ok for linear websites, but not so well for web applications where you’re less likely to have such a hierarchical structure
Present – the changeSome things remain the same – sketches & wireframes are still the first stages in the process of translating a list of requirements into something visual and physical.But it’s beyond this where Sketchflow transforms the process.From the point of the wireframe on, we can begin to develop the functionality and flow of the application, including transitions and effects – while producing the visual design for the interface. Both can be done in parallel.
BenefitsAllows us to mock out that which can’t be demonstrated in static pages, or even an HTML prototypeFits with our development methodology – Provides a standardised platform for customer and internal feedbackComponent Screens and Navigation screens help us to identify those key / consistent elements XAML Elements can be carried into the main application... meanwhile the dev team are continuing with the techy bits – business logic in the service layer and model... this is the other side of the rapid development and prototyping process SketchFlow facilitates
FutureProduct futureComplete phase 1 development of Online Reporting later this yearUpdate attollo to Silverlight 3, no doubt use Sketchflow to prove any new methods and functionality we want to introduce in the UI.Where next with SketchFlowHaving laid the ground work for much of the application in SketchFlow and through wireframes, we will continue to use it throughout the project lifecycle -to prove new concepts and ideas quickly and efficiently – without requiring a development resource. In 10 years time I expect to be using Blend version 12 to develop Minority Report – like interfaces