Posts Tagged ‘WPF’

Awesome SketchFlow Book Available

April 6, 2010 Leave a comment

Post image for Dynamic Prototyping is Shipping!

Over this past last year I’ve had so many great discussions on SketchFlow, and what an amazing tool it can be for rapidly prototyping and developing ideas. Very recently a co-worker and friend of mine, Sara Summers, completed her book Dynamic Prototyping with SketchFlow in Expression Blend. Sara is a User Experience Evangelists and she is incredibly well versed in the tool. If you’re interested, you can grab the book here on Amazon.

Go Sara!!! ( Now get some sleep. 🙂 )


Application Skinning in WPF and Silverlight

June 22, 2009 Leave a comment

Over the past two years we’ve seen some incredible applications built on WPF and Silverlight. But application style doesn’t happen on its own, and many of the questions I’m asked these days are centered around application styling and custom controls.

As our fiscal year comes to an end, and with Silverlight 3 and WPF 4 are rapidly approaching, I thought it’d be a great time to put together a few short videos on skinning and custom controls. I hope these two ~20 minute videos help demystify a topic that’s really not as elusive as it seems.

Skins for WPF and Silverlight (20:15)

Creating ‘Lookless’ Controls for WPF and Silverlight (14:26)

Categories: Uncategorized Tags: , ,

Clean Prototyping with Compositions

June 10, 2009 Leave a comment

By now you’ve hopefully seen SketchFlow and how it can help you conceptualize your projects before turning them into reality. If not, I highly recommend you check out the Mix ‘09 session Sketch Flow: From Concept to Production.

One of the tasks common to prototyping and actual development is planning navigation between pages (or screens). Luckily, Blend make this as easy as right-clicking on any button and choosing Navigate To – <Screen Name>. When you do this, Blend builds links into the application flow so that the SketchFlow player and the live application understand how the user can get around. These links show up in blue and look something like this:


You’ll notice in the image above that both the Start page and Winary page can get to any other page in the application. That’s because both the Start page and the Winery page have a set of buttons that look like this:


In fact it’s very common to want some piece of navigation shared across all the pages in an application. For example a navigation bar on the left side of a page or across the top is very common on websites and in SharePoint. In Blend 3 we can support the same concept by converting a group of controls into a ‘Composition Screen’. That composition can then be shared across all pages, and the navigation it provides comes along as well. In the application flow, it ends up looking something like this:


But you might notice that things have become a bit messy and we have blue lines and green lines that seem to go to the same places. That’s because Blend is showing the new composition lines in green and the old manually defined navigation links still remain in blue. Luckily, with the composition in place the manual links are extraneous and can be removed. This is done by right-clicking the line and choosing Remove Connection. The Sketchflow player and navigation system are smart enough to realize the composition still provides navigation routes, even if the manual links are gone. So the player still works just like it did before:


With the extra links removed, here’s one possible cleaned up flow for this application:


Of course it doesn’t hurt to leave the original links defined, and it may even be desirable to have them there to clarify intent. For example, just because the user can navigate directly from login to an empty shopping cart doesn’t necessarily mean we expect them to do it often.

Finally, I’ll close with a cool new feature I noticed in one of the latest builds: It’s now possible to dim out navigation lines and / or composition lines for the screens you’re not currently viewing. Pretty cool.


The Role of Sketching in Software Development


It only been since 2006 that we seriously started to drive WPF adoption, and Silverlight 2 hit the web just a scant 11 months ago. Still, in such short time ISVs have created some amazing things with these platforms.

Unfortunately, though the platforms themselves have seen some serious adoption, inclusion of design in the software development lifecycle still has a long way to go.

The good news is that methodologies and best practices are starting to emerge and I look forward to some great articles on the subject over the coming months. I’ve personally had the opportunity to present on this topic with one of our User Experience Evangelists, Sara Summers, and we cover something every ISV can add to their methodology: Sketching.

Sketching isn’t hard and anyone can do it (though I’ll freely admit I was uneasy at first drawing my little stick figures next to what felt like Sara’s “creative art”). But the point of a sketch isn’t how well it’s drawn; it’s how well the sketch captures a moment or an experience for a user in an application.

Sketches are informal. They’re lightweight, and they can be thrown away. Sketches can be used throughout the development process and, when used correctly, can significantly reduce the need to revisit code that’s already complete. People need to see and ‘feel’ an application before they can accept its design, but unfortunately it’s costly and time consuming to build interactive user interfaces that will just be thrown away. That’s why we so often end up with ‘bugs’ or feature requests involving design after an iteration goes to QA.

Sketches help people see the vision of an application and interactive sketches help the user ‘feel’ how it will work. These alone solve many of the problems that exist in application design today, but there’s still the costly issue of building interactive UI that can’t be reused. Luckily, with Expression Blend 3, tools are on the way to help with reuse.

On her blog Sara talks about Why Static Wireframing is Dead or, to put it another way, why static sketches shouldn’t be “good enough”. She also does a great job introducing SketchFlow with Non-Destructive Iterative Design and Fast and Easy Interactivity. Finally, if you haven’t yet seen SketchFlow in action, the Mix ’09 session SketchFlow: From Concept to Production is definitely worth a watch.

Silverlight and WPF Controls

WPF and Silverlight have been out for a while now, and the number of controls available for these platforms is surprising. Consider this rather comprehensive list of Silverlight controls by Tim Heuer with at least 17 vendors and over 160 controls. Or this list of around 30 tools and libraries for WPF.

If you need to quickly check out and try out many of the available controls, Mike Taulty’s Control Browser is here to help. It shows all the built-in controls for both platforms as well as the controls included in the toolkit and many of the 3rd-party libraries available. It’s a great little click-once app, so head over to Mike’s Blog to read about it or click here to install.

WPF Control Browser

Categories: Development, UX Tags: ,

Blend Tips and Tricks

April 6, 2009 Leave a comment

I’ll be presenting Blend Tips and Tricks for application designers in a few venues over the next two months. The first session is tomorrow night at the D2Sig user group here in Houston.

As usual, I’m ‘borrowing’ from other excellent resources created by excellent people within Microsoft to do this presentation. I’d like to give those authors credit and give folks an option to view the wealth of other resources I couldn’t fit into my talk. So here they are!

Arturo’s Design Assets & Recordings

The Future of Expression Blend (Mix 2009)

Sara Summer’s Blog

Categories: UX Tags: , , , ,