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 ?