Sep 152012
 
 September 15, 2012  Posted by at 10:56 pm Telerik, WinRT Tagged with: ,  Add comments

To read the other steps in the step by step guide for creating a Metr0/ WInRT application go here

Time to have a talk about design. As I’ve understood it, most devs aren’t too keen on this part- but for WinRT / Windows Store Apps this an important requirement. To make it easier for us I’ll spread the design info over several posts, a spoonful at the time. For the whole rundown download the guidelines ‘book’ here
On the menu today: Typography and colors

The guidelines state that:

  • Colors have to strengthen the brand of the app
  • Colors must comply with the AA contrast (accessibility) when used for text
  • Fonts should comply to the four level font hierarchy, with Segoe UI as a base
  • Font and color use should be consistent
Problem 1:

I have no idea how to pick colors
Solution suggestion:
Color sample an image, or if there is- an existing web site for the app
Start with a base color and let a tool such as Kuler.Adobe match colors for you
Have a look at predefined palettes from other users at Kuler.Adobe
Designer are pro’s when it comes to picking colors that work together, so using a fashion palette site to find colors is a good tip. Make sure you balance of the colors with base tones if they are tone-in-tone, and that you check the contrast for colors used on text.
Two fashion blogs sporting great palettes:
Wearpalettes
 Color-collective¨

Fashion color palettes

Fashion color palettes

My favorite color matcher/ sampler

Color sampling a screenshot of my blog using Kuler

Color sampling a screenshot of my blog using Kuler

Problem 2:
How do I know if the foreground color of the text and the background color are contrast compliant? (I don’t want to run the WACK tool to check each time)
Solution:
Use sites such as this one to check contrast compliance, AA is the recommended minimum.

Testing color contrast compliance online

Testing color contrast compliance online

To read more about : Meeting requirements for accessible text (Windows Store apps using C#/VB/C++ and XAML)

Problem 3:

How can I quickly implement the typography guidelines?
Solution:
Stick to the predefined styles that come with the templates, even if it seems like the font sizes are ‘of’
Define the foreground color in the themedictionary

For more of a read:
Font guidelines for Metro style apps /Windows Store apps/ WinRT Apps / Modern UI (this is sooo tedious!- make up your mind !)
11 pt. Segoe UI Semilight snapped view, links, body text, (semibold for item title/header)
9 pt. Segoe UI for short text elements,tertiary info
20 pt. Segoe UI Light for text elements that need to be clearly visible and draw user attention, but are short and fit on a single line, page subheader
42 pt. Segoe UI Light for prominent UI elements that consist of one or two words on a single line, page header
Read and write text: Calibri 13pt (same size as Segoe UI 11pt)

So I took the liberty to find us some new colors for the app, a base set, and a details set. This is how they look like:

Palettes, base

Palettes, base

Palettes, details

Palettes, details

And after setting the fonts to the ones predefined in the resourcedictionary and the colors using the palettes, this is how the app looks like:

The new look for the app

The new look for the app

And to set the color of the bar series (the Telerik RadControl) you simply add this to the code:

Setting the color for the bar series on the Telerik RadControl for Windows 8 UI style

Setting the color for the bar series on the Telerik RadControl for Windows 8 UI style

[sourcecode language=”XML”]
<Page
x:Class="Mihsp.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Mihsp"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="using:Telerik.UI.Xaml.Controls" mc:Ignorable="d">

<Page.Resources>
<CollectionViewSource x:Name="activitiesCollection" IsSourceGrouped="True"></CollectionViewSource>
</Page.Resources>

<Grid Style="{StaticResource LayoutRootStyle}" x:Name="LayoutRoot">
<Grid.Resources>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{StaticResource HeaderTextStyle}" Foreground="#39ACE3" Text="MIH!SP"/>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="column" Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<ListView x:Name="itemListView" Padding="0,10,0,0" ItemsSource="{Binding Source={StaticResource activitiesCollection}}" >
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="#A66C11" Width="{Binding ElementName=column, Path=ActualWidth}" HorizontalAlignment="Stretch">
<TextBlock Text='{Binding Key}’ Style="{StaticResource SubheaderTextStyle}" Margin="5"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="#004FC6" Padding="20" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}"/>
<TextBlock Text="{Binding CategoryName}" Style="{StaticResource ItemTextStyle}"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Comment}" Style="{StaticResource BodyTextStyle}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0,5"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button x:Name="Add" Grid.Column="1" Height="75" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#95A810" Margin="20,0,20,0" BorderBrush="{x:Null}">Add</Button>
<FlipView Grid.Column="2">
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<telerik:RadCartesianChart HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Minimum="1" LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries ItemsSource="{Binding AllEntries}">
<telerik:BarSeries.PointTemplate>
<DataTemplate>
<Rectangle Fill="#B0127F" />
</DataTemplate>
</telerik:BarSeries.PointTemplate>
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="NrOfEntries"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
<Border VerticalAlignment="Center" Grid.Row="1">
<TextBlock Text="Something about the statistics shown" Style="{StaticResource SubheaderTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Border Background="Orange" VerticalAlignment="Bottom" Grid.Row="1">
<TextBlock Text="Second flipitem" Style="{StaticResource BodyTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
</FlipView>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0"/>
</Page.BottomAppBar>
</Page>
[/sourcecode]

  6 Responses to “WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl chart”

  1. […] designers of this app have put them in little Polaroids with shadows and everything…”WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl char… (Iris Classon)“Time to have a talk about design. As I’ve understood it, most devs […]

  2. […] WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl char… (Iris Classon) […]

  3. […] WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl char… (Iris Classon) […]

  4. […] WinRT app guide: Step 8: Typography and color compliance, styling up the app and the RadControl char… (Iris Classon) […]

  5. Great post, thanks for the advices!

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 15 + 8 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)