One of the useful controls to use when creating a Windows Store app for Windows 8 is the GridView which can use a VariableSizeWrapGrid to support item templates of varying size.  Using this in conjunction with an DataTemplateSelector makes it possible to vary both the size and data template of the items in a GridView.  Here is how you do it:

Setting the VariableSizeWrapGrid Item Height and Width

The VariableSizeWrapGrid works with a unit size and you can define whatever unit size you want – each template should be a multiple of that.  In your GridView.GroupStyle, you should define the ItemHeight and ItemWidth.  Add the spacing between the columns & rows; based on the Microsoft guidelines, the height and width should be layed out on a 20-pixel grid and the spacing should be 10 pixels between each item.  So in this case each item would be 200x100 with 10-pixel spacing, so ItemWidth=210 and ItemHeight=110.

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" 
            Margin="0,0,80,0" 
            ItemHeight="110" 
            ItemWidth="210"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

Create Data Templates for each item type

Create Data Templates in a resource file that would be used for each item type.  In this case, I have a ProjectItemTemplate and  FavoriteProjectItemTemplate in a Xaml resource file included in my App.xaml.  The FavoriteProjectItemTemplate shows a Gold Star (xE082 in the Segoe UI Symbol) and additional project information that I only want to load for favorite projects:

    <DataTemplate x:Key="ProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="100">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="FavoriteProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="210">
            <TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" x:Name="Star" TextWrapping="Wrap" Text="&#xE082;" FontFamily="Segoe UI Symbol" Foreground="Gold" FontSize="24" Margin="0,5,10,0"/>
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Margin="0,0,32,0"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[0].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" discussions" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[1].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" todos" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[2].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" files" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[3].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" text documents" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[4].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" dates" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[5].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" people" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>

Create an Item Template Selector

The Item Template Selector is called each time a new item template is needed.  In this, you should pick the item template and set the number of columns & rows the item should span.  In this case if the project.IsStarred is true, then the template would use the FavoriteProjectItemTemplate and set VariableSizedWrapGrid to span 2 rows instead of 1.

    public class ProjectDataTemplateSelector : DataTemplateSelector
    {
        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var project = item as Project;

            var uiElement = container as UIElement;

            if (project.IsStarred)
            {
                VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
                VariableSizedWrapGrid.SetRowSpan(uiElement, 2);

                return App.Current.Resources["FavoriteProjectItemTemplate"] as DataTemplate;
            }

            VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
            VariableSizedWrapGrid.SetRowSpan(uiElement, 1);

            return App.Current.Resources["ProjectItemTemplate"] as DataTemplate;
        }
    }

Adding the ItemTemplateSelector to the GridView

On the page resources, add an instance of the ItemTemplateSelector and then reference it in the GridView.ItemTemplateSelector=”{StaticResources ProjectTemplateSelector}”

<support:ProjectDataTemplateSelector x:Key="ProjectTemplateSelector"/>

Responding to Changes in the Data Model

If the selection criteria changes and you need the selector logic to run again, just reset the selector.  Thanks to this StackOverflow answer for the assistance here.

var projects = this.selector.SelectedItems.Cast<Project>();

foreach (var project in projects)
{
    project.IsStarred = !project.IsStarred;
}

var itemTemplateSelector = this.selector.ItemTemplateSelector;
this.selector.ItemTemplateSelector = null;
this.selector.ItemTemplateSelector = itemTemplateSelector;

Summary

Varying the item template and size of items increase the visual interest of your app and can help highlight important differences when standard DataTemplate binding won’t work.

Related Posts:
- Tip 262: Go template shopping
- Tip 305: Silverlight with style
- Tip 320: Make it easy with a template
- Designing for Windows Phone 7
- WP7 UI Guide and Design Templates

I’m going to date myself right out of the gate and get it over with. The first couple years of college I learned mostly print layout and mechanical drafting (I checked my Pine account twice a week in the basement of the math building…tease away). The mid-90’s was a chaotic time to step into technology. But, there were some nice benefits. Fast forward a few years and I would have missed perspective drawing, light and color study, and lessons on exploded assembly, eye flow, alignment and positioning.

Should it really matter that I used a t-square and cut print layouts from acetate sheets?

 
Yes, these are better days. Broadband internet and high resolution screen space has allowed us to return to the foundations of design. The eye candy of a style magazine, the full page hero image with beautiful text flowing atop, is now in an app designers’ bag of tricks. What’s old is new again. More accurately, rich, pleasing design practices are possible digitally. Here are some simple print lessons I love.

Full page photo-editorials

In web design terms, a hero shot, describes high impact imagery either illustration or photography. This doesn’t have to be at the exclusion of your content, however. Fast Company Design does an amazing job with images. Watch as the page loads a full page hero shot and then loads the content around it. As you scroll down through the articles, you are offered an almost entirely visual browsing experience.

Eye flow

Visual movement helps you move a user’s eye through the content. Eye flow is important in any experience (you notice when it’s absent), but it becomes critical when you need to visually explain what your product does or what users need to step through to either get started or discover functionality.

The eye tends to like what the eye likes. We see this time and again with eye tracking studies. Even when the page is poorly constructed, the eyes trace back and forth searching those familiar places. The patterns I learned to follow are ‘C’, ‘L’ and ‘S’ flows. Placing content and/or hinting along those lines can guide users though an experience quickly and without confusion.

There’s many more great print practices I could have included. If I missed your fav, let me know!

Related Posts:
- Design Police | Bring bad design to justice.
- iPad Sketch Prototype Template
- Converting SVG to XAML with IE9 and the Microsoft XPS Document Writer
- Silverlight in the News
- Dear Kerning Game, A Love Letter

In preparation for a busy fall conference season, I’ve been furiously testing, retesting then codifying the methods I used to help brands prototype their Windows 8 app experiences. Afterwards each process trick gets a photo shoot (I’m not the best photographer, but the tripod helps).  Once I’ve paid the ideas due process, I can start putting them to words. What follows is a quick trick I discovered while tinkering with content proportioning.

Proportion is almost always referenced as; the rule of thirds, golden ratio, golden mean, golden number…apparently anything beginning with ‘golden’ will do. Windows 8 has already baked the rule of thirds right into the pie filling with OS functionality like Snap view. So I look at proportion in app design by its basic definition: relative size. Relationship of each piece to one another, like folding a sheet of paper in half and half the half, etc…

Early Days

Prototyping content sizing and placement is an action that comes early in the process but after you’ve decided the goals of the app and the coordinating user scenarios. Relative sizing choices come from that clarity. And once you understand users’ priorities you can then give those back to them visually with the experience. I call that empathy, but it’s simply facilitating great UX.

I found that the easiest way to play with content layout and variety is with Post-it notes. Here I’ve printed out the gridded tablet sheet (steal it here) and cut the standard 3 by 3 inch Post-it in descending sizes. This configuration could be used for a piece of featured or new content with its related companions clustered around it. Of course, this is just one way to express a content group. Experiment liberally as a reminder that visual variety and playful content flows are a key piece of a great app.

Related Posts:
- Dynamic Prototyping
- Metro Style – Beyond the Grid
- Dynamic Prototyping With SketchFlow in Expression Blend
- New Prototyping Sketch Sheets for WP7
- Did I mention I am writing a book?!

Order, alignment and proportion, to designers of all stripes, are like pen and paper. Critical tools we use again and again to create beautifully designed systems.

Foundational texts like, Grid Systems in Graphic Design by Josef Muller-Brockmann, is a print reference first published in 1961.  But the grid method is so sound and elemental that it has a home in modern application and software design. And Metro style is a pure manifestation of Josef’s lasting principles.

My copy of Grid Systems, sun bleached spine and all, is displayed prominently in my office as a visual reminder to honor the grid. Honor. Not obey. Why not, you ask? Because slavish devotion is narrowing and dogmatic and good design can’t be so single-minded.

Now, let me knock this down a peg. As this high-minded, postulation gets designers (and design as a discipline) in trouble. So I’ll be concrete.

I’ve been working on Windows 8 apps for nearly 9 months. Live, sleep, eat Metro style. To help folks get started with such a large shift in application design the Windows team made some amazing Photoshop templates. They’re an essential tool and perfectly lay out the grid system that the entire OS depends on. A great example is the Metro silhouette (I know, Metro, Metro, Metro). Without it, switching between apps would feel unorganized and disconnected. Designing with the grid creates unity, structure and user trust in a way that only great visual systems can.

But. Within every design system there’s spacious room to creatively push boundaries. And you should.
Each application, with its unique features, brand focus and user scenarios means a fresh, objective analysis generates the best results. Take the Loku design created by the ass-kicking design studio, thirteen23, for example. They’ve respected the grid but pushed hard to ensure that the social/local heart of the product was front and center. As you explore categories, the map is ‘always on’ and interactive so users can toggle interests via location simultaneously. Loku for Windows 8 is a stunningly innovative lesson in moving beyond the grid while honoring the system.

Related Posts:
- New Prototyping Sketch Sheets for WP7
- Intro to Metro, the design language of Windows Phone 7
- Making a Great Snapped View for your Web Site on IE10 on Windows 8
- Designing for Windows Phone 7
- Windows Store App Xaml GridView with Variable Templates

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app.  When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view.  The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience.  If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers.  This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width snapped view goes here */
} 

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet.  If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them. 

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at TimeLapseApp.com.

More details

• IE10 Device Adaptation on MSDN
• Guidelines for Snapped and Filled Views on MSDN

Related Posts:
- Windows Phone Design
- Tip 286: Don’t forget fallback fonts
- Tip 300: Am I up-to-date?
- Microsoft Silverlight Analytics Framework 1.4.6 Released
- Tip 333: Is your site making an impression?

ustwo, an agency in the UK, recently released a great little guide for working with pixel-aligned imagery when using photoshop. It also has some other good tips that are worth reading before pushing pixels around.

Related Posts:
- Cinnafilm: GPU-Powered Image Processing for Video
- WP7 UI Guide and Design Templates
- Tip 287: Position perfect
- Phone 7 Photoshop templates
- Homage to Shirky’s Cognitive Surplus

Over at Ethan Schoonover's site, he has a very useful color palette set up for code hinting. This particular palette uses 16 colors designed to look pleasing, reduce eye fatigue, and remain appropriately legible, whether used with a light or dark background.

http://ethanschoonover.com/solarized

Related Posts:
- No related posts

I’ve been doing a bunch of tablet prototyping lately so I thought I’d share with you! Feel free to print, share and use as you wish. Happy creating and look for more prototyping downloads coming soon.

Grab the pdf prototype template here.

Related Posts:
- Tip 222: Do it sketch style
- New Prototyping Sketch Sheets for WP7
- Updated Free Sketch Sheets!
- Idea Sketch Sheets
- Tip 233: Make a big deal out of the Silverlight template preview image.

My one treat I give myself when I travel is a trip the magazine rack. I stock up on Fast Company (my personal fav), Inc., The Harvard Business Review and when I’m really spoiling myself a Dwell. The October Inc. looked promising, ‘The Lean Start-up’, with Mr. Lean himself, Eric Ries on the cover. And his start-up story has the painfully familiar melody that most of us can relate to. I didn’t have the misfortune of tanking my own venture, but I woefully bared witness to two Titanics destined for the ocean floor. And my work in design and user experience  during those times only strengthened my belief in generating value by delivering a great product experience to the customer, the same work I’d spent years reading about. Anyone sharing that message is a friend of mine.

Yet, it didn’t take long for my enthusiasm to wane. As the article slowly starts to define this genius new way to innovate product development, a method that seems an awful lot like what I do, what I’ve been doing for years; user experience. And I’m not the only one, nor am I the first, far far from it. Those radicals at IDEO, the outlier Bill Buxton, the godfather of all things process and experience Alan Cooper, I could do this all day… Was Ries cryogenically frozen for 20 years and missed all this UX talk? I didn’t care, I was ticked.

But, I kept myself, until I read Andy Budd’s take on Lean UX. Ok, good, it’s not just me (thanks Andy).

Andy’s perspective nailed it, so at first, I thought, Sweet, I’ll just retweet that…but there was one rather looming issue. Something I think erodes the fabric of the craft of experience design. Now, you can brand something, write a book,  make some dough on it, shout it from the mountain-tops, but I CANNOT swallow is re-naming something that already has a name, a history, practitioners and craftsmen who make a living at it and teach it to others. What’s worse is design has always had a problem defining itself, explaining the value; the 2003 Clement Mok article, ‘Time for Change’ is likely the most powerful depiction of the problem and a solution. When I read it, I made a promise to better the design conversation.

From the Inc. article:

“By building what I call a minimum viable product—or MVP. It helps entrepreneurs start the process of learning as quickly as possible. Unlike a prototype or concept test, an MVP is designed not just to answer product design or technical questions. Its goal is to test fundamental business hypotheses.”

I’m fine with someone calling their, WIP prototype a MVP, but it’s still a prototype. And prototyping IS and always has been the business plan, the journey AND the path. So unlike the MVP Eric described, the prototype solves for the technical and design (the ‘what’s possible’) as well as the customer/user and business value. That’s right, the prototype when used effectively is the whole enchilada.

Another quote:

“Lean thinking defines value as “providing benefit to the customer”; anything else is waste.”

User experience is and has always been described and utilized to address and focus on customer/user meaning and benefit. It seems by renaming UX to ‘lean thinking’ for no other reason than personal gain, is categorically wrong.  We really, desperately need to use the same language, consistently to communicate the value of what we do. If we dilute it, complicate it and re-mystify our work, everyone loses. Clement illustrates this with a comparison, “If every physician made up his own set of definitions and beliefs about anatomy and disease on an improvised basis, the medical profession would still be in the Dark Ages.”

Related Posts:
- UX design for startups
- Tip 271: Make Expression Web start faster
- Phone 7 Photoshop templates
- I’m About to Start Teaching Ten 9-Year Olds Computer Programming
- Experimentation – Embracing Novice

Related Posts:
- The last blog post at Design Thinking Digest
- Design Thinking Digest Updates
- Pardon my dust
- Dear Kerning Game, A Love Letter
- Resetting Design Thinking Digest