PRIDE IN CRAFTMANSHIP…

…littéralement “ fierté de l’artisanat”. Ok. Moins facile déjà. Normal, c’est le Tier 2. Pourtant les idées derrière cette accroche sont  brillantes et les concepts relativement simples.

Globalement, cela veut dire que vous devez polir et affiner chaque détail de votre design. Si  vous avez suivi les conseils du Tier 1, vous n’avez plus que le strict minimum graphique sur votre layout. Alors chaque erreur, tout comme le nez au milieu de ma figure,  va se payer cash et sera visible/dérangeant/frustrant au plus haut point. D’ou la nécessité de bien contrôler les alignements, les espaces entre les blocs, la pertinence de la grille, la dynamique des polices, etc… Voyons avec un peu plus de détails ce que cela veut dire :

La typo: A moins que vous ne teniez en haute estime la police que vous utilisez pour représenter votre image, vous devriez utiliser la police SegoeUI car elle a été désignée spécifiquement pour l’affichage sur écran et reste lisible jusqu’à 9 points. Evitez d’avoir plus de 4 styles de police différents à l’écran et globalement, utilisez un “ramping” permettant une lecture rapide de la hiérarchie de votre page.

Juste pour info, la taille des polices diffère entre Visual Studio et Photoshop: 42,  28, 11 et 9 points Blend valent respectivement 56, 27, 15 et 12 points Photoshop.

 

La grille : Permet de cloisonner et d’ordonner votre contenu. Bien sûr, la grille ne devra pas apparaitre sur le visuel, mais devra être fortement suggérée. Identifiez les différents blocs en laissant des espaces négatifs importants (au moins 80 pixels entre chaque section) et  valorisez les éléments importants en utilisant un principe de proportionnalité (l’élément principal utilise n x n pixels de coté, l’élément secondaire utilise n/2 x n/2 pixels,…).Et respecter vos alignements ! Par contre, proposer des alignements  décalés est un plus important en terme de dynamique de la page. Et permet de vous différencier du layout de base de Visual Studio ou de Blend.

 

Image2

 

 

 

PRIDE IN CRAFTMANSHIP…

Seems tricky? Not that much, in fact. Ideas behind the sentence are simple and smart.

Globally, it means that you have to take care of the little details in your design layout. If you followed the Tier1 course, you should now have a minimalistic graphical  content. From now on, every single artifact will be over-seen as you will only notice that. Frustrating. To correct that, focus on the details, alignments, grid purpose, white spaces between blocs, font hierarchy…. Let see what it means with more accuracy…

The typography : Unless you have an specific statement about your font, you should use the “by default” SegoeUI. This font had been specially designed for being displayed on screen until 9pt definition. Avoid to use more than 4 different sizes simultaneously, and use a hierarchical ramping, allowing a fluid-and-easy reading.

One more thing : Font sizes do not match perfectly between Blend/Visual Studio and Photoshop. 42, 28, 11 and 9 points Blend worth respectively 56, 27, 15 and 12 points in Photoshop.

The grid allows you to partition and order your content. Of course, the underneath grid will be removed in the finalized screen, but shall be strongly suggested. Stagger carefully the different parts by leaving negative spaces (not less than 80 px among every partition) and make the important items valuable using proportionality (main item uses n x n pixels, secondary items uses n/2 x n/2 px,…). Respect the alignment, but don’t be too shy. You can use offset tiles to create  a much more dynamic layout. That will distinguish your app from those which uses the “by default” Visual Studio templates…