Les polices standards du web, c’est à dire que tous les internautes possèdent et pourront afficher, sont finalement assez peu nombreuses. Mais avec la taille, le graisse, l’italique, les majuscules ou petites majuscules, l’espacement des caractères et des lignes, on peut sensiblement modifier l’apparence d’un site et lui donner une identité propre.

Tester différentes typographies en un clic

Comment faites-vous pour tester différentes polices sur votre site ? Avant, j’utilisais Firebug. Déjà pas mal pour trafiquer son CSS et avoir un aperçu avant de se décider. Mais j’ai trouvé mieux : FontFriend.

Développé par un couple canadien de web designers, FontFriend est un bookmarlet (installation en 2 secondes par un glissé déposé dans les favoris) qui permet de changer instantanément les polices de caractères de n’importe quelle page web.

Voici le menu qui vient se superposer en transparence aux pages web :

Ce bookmarklet facilite vraiment la vie et le choix des typographies devient un plaisir !

Choix des polices secondaires

N’oubliez pas de tester également des polices secondaires et de les mentionner dans votre CSS, pour que les internautes ne possédant pas votre police principale puissent également voir votre site correctement. Par exemple, la police de mes titres est « Myriad Pro » mais je pense que c’est la police secondaire « Arial » qui s’affiche pour une bonne partie d’entre vous…

Source : webresourcesdepot

Voici à quoi ressemble l’espace de travail :

HotGloo met à disposition de nombreux éléments de design pour la réalisation des maquettes, et chaque élément possède des propriétés avancées.

Hotgloo permet de réaliser des storyboards dynamiques. On peut choisir d’envoyer sur une autre page du storyboard, sur une URL ou de faire apparaitre une alerte lors d’un clic sur un élément.

Tous les raccourcis claviers que vous avez l’habitude d’utiliser fonctionnent : Ctrl+C / Ctrl+V, sélection multiple avec la touche Maj, Ctrl + et Ctrl – pour zoomer, Ctrl+Z / Ctrl+Y pour l’historique des actions…

Enfin, passez en mode Rewiew pour voir votre storyboard fonctionner. Invitez vos collaborateurs à voir, modifier ou commenter votre storyboard.

HotGloo propose également de l’exporter en PNG ou PDF.

Il existe une application en ligne réservée à la création de wireframes pour applications iPhone : iPhone Mockup.

Toutes les formes prédéfinies se trouvent dans la colonne de gauche, et vous pouvez uploader toutes les autres formes ou images dont vous pouvez avoir besoin.

L’application est simplifiée au maximum. Attention, pas de création de compte sur iPhone Mockup, pensez à enregistrer l’URL de chacune de vos maquettes pour les retrouver et les partager !

Avec en plus deux choix de style, il plaira à tous.

Petite précision : l’application ne s’affiche pas correctement sur IE.

La connaissance de ces éléments s’acquièrent au fil de la réalisation de maquettes de sites internet, mais les librairies de patterns, c’est à dire de modèles de conception, peuvent grandement vous aider.

Elles se présentent à peu près toutes de la même façon : une liste de modèles de conception, et pour chaque modèle les informations suivantes : le besoin qu’il satisfait, une description, les avantages et les inconvénient de cette solution, comment et pourquoi l’utiliser, et une galerie d’exemples graphiques (captures d’écran) que l’on peut en général commenter.

Il existe de nombreuses librairies de modèles de conception. Vous pourrez par exemple en trouver une dizaine dans cet article et une 20aine dans celui-là. Je vais vous présenter les trois que je préfère.

1. UI Patterns

UI Patterns présente une cinquantaine de modèles de conception et pour chacun d’eux, de très nombreux exemples. Sa richesse en captures d’écrans la rend également utile pour la partie design du site, qui vient après la réalisation des wireframes.

Ce que j’aime également dans cette librairie c’est la variété et l’originalité des exemples. Par exemple, disons que vous souhaitez aider les internautes à se repérer dans les ramifications du menu de votre site. Vous cliquez sur le pattern « breadcrumbs ». UI Patterns ne vous présente pas trois captures d’écran semblables d’un fil d’ariane classique  tel qu’on peut le voir partout, mais des breadcrumbs un peu différents qui joignent menu et fil d’ariane par exemple, ou avec des visuels. Voici un extrait de la galerie de captures d’écran de la librairie UI Patterns pour ce modèle :

Le site vous propose aussi de mettre de côté les patterns qui vous ont plu pour pouvoir les retrouver facilement.

UI Patterns Survey

Intéressant à savoir : UI Patterns fait des statistiques sur la forme, la dénomination et l’emplacement des éléments génériques des interfaces utilisateurs tels que le logo, la création de compte, l’accès au compte, la recherche, le menu ou l’aide. Le résultat de leur enquête permet de connaitre les standards du web, qui sont souvent un bon moyen de construire un site simple et efficace !

2. Quince

Quince est une autre librairie de patterns, également bien documentée.  Ce qu’elle a de spécial ? Le site réalisé avec la technologie Silverlight est vraiment beau et la navigation très agréable. De plus, les moyens d’explorer le catalogue de patterns y sont multiples. Alors que dans la plupart des librairie les patterns sont simplement présentées sous forme de liste arrangée par catégories, Quince propose quatre manières d’explorer le catalogue : par ordre alphabétique, par catégories et sous-catégories, par relation entre les patterns, et par wireframe.

Navigation par wireframe :

3. Ecommr

Ecommr est la librairie à utiliser si vous faites la maquette d’un site e-commerce. Elle présente des modèles d’éléments de sites e-commerce mais aussi des bannières de publicité et des newsletters commerciales. Je trouve que l’idée de regrouper les modèles de conception e-commerce est très bonne, cependant le site n’est pas documenté. On trouve seulement des galeries de captures d’écran. Sympa tout de même.

Un exemple avec les fiches produits :

Et vous, si vous utilisiez déjà des librairies de patterns, quelles sont celles que vous préférez ?

Commençons par le nouveau logo. J’aime toujours autant le petit papillon coloré qui joue avec la transparence et je trouve que la finesse des lettres va très bien avec le design épuré.

Concernant la navigation, MSN abandonne son bandeau de liens en bloc pour un vrai menu, déroulant, avec un code couleur. Il y a des chances pour qu’il soit plus utilisé !
avant :

après :

Dans le contenu de la page, MSN gagne énormément de place avec des blocs dont on peut faire défiler le contenu, et un système d’onglets. Très efficace pour proposer un contenu conséquent sans surcharger la page, les internautes pourront ne consulter que le contenu qui les intéresse.

Autre élément sympa, la colonne de gauche (après la pub…) propose un accès à Hotmail et un récapitulatif de l’actualité sur son compte Windows live, Facebook et Twitter.

Bon, maintenant je passe aux défauts.

Concernant le design, ça « flotte » un peu vous ne trouvez pas ? Il n’y a plus de lignes verticales qui aident à la structuration du contenu et à l’inverse je me demande si certaines lignes horizontales sont vraiment nécessaires dans la partie basse. Mettre des points devant chaque ligne et suffisamment d’espace blanc, comme sur l’ancienne version et comme dans le premier bloc de contenu, me parait mieux.

L’agencement des onglets ne me parait pas toujours pertinent. La première série d’onglet reprend les news par catégories, pas de problème. La deuxième série d’onglet mélange les infos locales (météo, infos, événements), les films au ciné, la recherche d’emploi et Bing Maps. C’est à dire tout ce qui nécessite que vous indiquiez là où vous êtes. Je sais pas si la recherche d’emplois a vraiment sa place ici, mais passons. Dans le dernier groupe d’onglets, je ne vois pas le rapport entre « Popular Searches » et « Shopping ». Ça a effectivement un rapport pour MSN car les deux onglets renvoient vers des résultats de Bing, mais cela ne me semble pas pertinent pour l’utilisateur. Enfin bon, on peut se dire qu’une fois que les internautes se seront habitués à l’emplacement des informations ce ne sera plus un problème !

Enfin, ce que je trouve dommage, c’est que cette page ne soit pas personnalisable. Il est vrai qu’il y a une partie « local » et que la colonne de gauche est réservée à des infos personnelles (encore faut-il avoir un compte Hotmail, Facebook et Twitter). Mais on est loin de iGoogle et de la nouvelle page d’accueil Yahoo. La personnalisation est un élément qui me parait très important. En ce qui me concerne, je vais rester fidèle à iGoogle pour la page par défaut de mon navigateur.

Les designers publient régulièrement de beaux sets d’icônes, mais au moment où nous en avons besoin il est difficile de remettre la main dessus. Aysoon a eu la bonne idée de les regrouper sur un moteur de recherche. Des moteurs de recherche d’icônes j’en connaissais déjà plusieurs mais celui-là est différent parce que :

• il est en français,
• le site est très bien présenté, facile et agréable à utiliser,
• les icônes sont belles,
• le moteur de recherche marche bien et propose de l’auto-complétion,
• on peut à partir d’une icône parcourir toute la série pour trouver des icônes qui vont bien ensemble.

Ce moteur de recherche d’icônes a été lancé aujourd’hui et son auteur indique qu’il ajoutera de nouvelles icônes régulièrement et qu’il travaille sur l’optimisation du moteur de recherche, unique mode de navigation sur le site dans lequel on ne retrouve pas de catégories.

Personnellement, je suis conquise. Je supprime tous les autres sites d’icônes que j’avais dans mes favoris, sauf un quand même : iconfinder.net est vraiment pas mal non plus, il propose les mêmes fonctions, mais en anglais.

(Source : Fredzone)

• Le Color Palette Generator de degraeve.com
  Pour utiliser cet outil, il est nécessaire de mettre sa photo ou son image en ligne au préalable. Communiquez ensuite son URL et obtenez immédiatement deux palettes de 5 teintes chacune, une plus terne et l’autre plus vive.

  

• Votre Custom Color Palette sur colorhunter.com
  Vous pouvez utiliser une image qui se trouve en ligne ou sur votre PC, et comme pour Le Color Palette Generator de degraeve.com, vous obtiendrez deux palettes de 5 teintes, plus ou moins vives. Le résultat est proche de celui de l’outil précédent.

  

• Le Palette Generator de Big Huge Labs
  Big Huge Labs propose 5 façons de choisir une image : en communiquant une URL, en communiquant l’URL de votre image sur Photobucket, en téléchargeant une image de son PC, ou enfin en parcourant ses photos sur Flickr et Facebook.
  Big Huge Labs génère une seule palette mais plus garnie : 15 teintes. Vous pouvez récupérer les teintes en copiant les codes hexadecimaux comme pour les autres, mais Big Huge Labs propose deux autres solutions utiles : télécharger le nuancier au format ASE pour Photoshop, et copier la liste des teintes au format CSS (une couleur = une class).

  
  Le Palette Generator de Big Huge Labs est donc plus complet que les deux autres, mais à vous de voir si la taille de la palette est un avantage ou un inconvénient ! Et oui, il va encore falloir choisir…

 
Une fois que le choix des couleurs est fait, vous pouvez tester le contraste de vos pages web grâce à www.checkmycolours.com. Cet outil repère toutes les combinaisons couleur de texte/couleur d’arrière plan et vous indique pour chacune d’elles si le contraste, la différence de luminosité et la différence de couleurs sont suffisants.

Seul défaut, cet outil repère toutes les combinaisons possibles en exploitant votre feuille de style CSS et pas seulement les combinaisons réellement utilisées, il faudra donc faire le tri.