Aller directement au contenu

Design patterns, des librairies pour la conception d’interface

06/07/2011
3

rubik-cube-rubitone-Pilotto

Les design patterns sont des schémas de conception, c’est-à-dire des modèles d’interface répondant à des cas typiques d’interaction. Les design patterns permettent d’avancer rapidement lors de la conception en fournissant des gabarits qu’il suffit d’adapter et d’assembler pour construire l’interface.

Notre dernière liste de librairies et sa mise à jour commençaient à dater un peu, voici une nouvelle mise à jour plus complète.

Au menu de cet article : des librairies de patterns pour trouver des solutions ergonomiques (ici), des galeries de patterns pour s’inspirer (ici), et des librairies interactives pour se faire une idée (ici).

Les librairies de patterns

Les librairies ont l’avantage non seulement de proposer de nombreux patterns, mais surtout d’en expliquer l’usage. Car chaque pattern permet de répondre à un besoin en termes d’interaction et de solutions ergonomiques.

Les nouvelles librairies

Patternry

Des patterns actuels, avec une explication sur leur usage en contexte. Patternry, initiative finlandaise, a su s’imposer depuis quelques années en proposant une actualisation régulière de ses ressources et propose son service de librairie privée (anciennement UI Pattern Factory)

Endeca Design Pattern Library

Une librairie qui mérite de s’enrichir, car ses patterns sont tous actuels. La société américaine Endeca propose une description et le contexte d’usage de patterns devenus assez courant aujourd’hui.

Les librairies incontournables

UI patterns

Un catalogue de design patterns avec de nombreux exemples variés issus du web.  Il s’enrichit en continu par la contribution de tout un chacun!

Pattern-Interface-Librairie-PatternBrowerPattern Browser

Un bon gros catalogue de patterns offert par l’Université de Postdam dans la suite de son prédécesseur ci-après.

Info Design Patterns

Un catalogue dont la navigation originale et dynamique a été récemment renouvelée, avec un contenu concis et des démonstrations interactives.

Pattern-Interface-Librairie-Designing-Social-InterfacesDesigning Social Interfaces Patterns Wiki

Une belle librairie de patterns toujours bien documentée. Les auteurs s’appuient sur leur expérience chez Yahoo! et leur ouvrage sur les pratiques de la conception d’interfaces sociaux.

Pattern-Interface-Librairie-BlinkBlink Design Library

Un blog qui a l’œil sur les usages abusifs de certains patterns. Les mauvaises pratiques sont illustrées et évaluées de manière pertinente.

We are colorblind

Un génial catalogue de patterns détaillés et surtout compatibles (a priori) avec le daltonisme

Pattern-Interface-Librairie-QuinceQuince Infragistics

Un très riche et pratique catalogue en Silverlight, à découvrir très vite ! Doté d’une recherche par tags et de nombreux exemples, le dynamisme de l’interface est une expérience en elle-même.

Pattern-Interface-Librairie-WelieWelie

Une bibliothèque détaillée et riche de design patterns. Des recommandations accompagnent chaque modèle ainsi que des exemples d’interfaces (malheureusement inactif depuis 2008).

Designing Interfaces

Le site est très riche. Il traite à la fois des sites web et des interfaces logicielles. Il reprend en partie l’ouvrage de Jenifer Tidwell (Designing interfaces, une sacrée référence en la matière).

Pattern-Interface-Librairie-OpenDesignPatternsOpen Design Patterns

Un petit catalogue orienté logiciel, basé sur une initiative d’échanges (malheureusement inactif depuis 2008).

Les galeries de patterns pour s’inspirer

Les galeries sont plus des collections – parfois en vrac, d’interfaces web et logicielles. Elles permettent de s’inspirer de ce qui été fait ailleurs, sans apporter de véritables solutions ergonomiques.

Des galeries de patterns et d’interfaces originales

Elements of Design

Une galerie de patterns anciens et actuels, plutôt variée et bien fournie.

Pattern-Interface-Librairie-Pattern-TapPattern Tap

Une galerie très riche d’exemples de mise en forme et agencement pour de nombreux patterns. Plutôt orientée design, la galerie a plus vocation à proposer des exemples que des recommandations d’usage.

Designmoo

La collection de Designmoo s’enrichit pratiquement chaque jour de patterns au design contemporain. Des icônes aux listes déroulantes en passant par les boutons de call-to-action, toutes les inspirations du moment et à venir sont là.

Des galeries d’interface pour Smartphones

Mobileawesomeness

Une galerie de référence pour la conception d’interface web mobile. Ici pas de place pour les applications dédiées à un modèle en particulier.

CSS Iphone

Une grosse galerie d’interfaces dédiée à l’Iphone. De quoi s’inspirer et trouver l’agencement idéal de ses contenus.

Mobile patterns

Une autre galerie d’interface dédiée essentiellement aux applications Iphone.

Lovely UI

Et encore une autre galerie d’interfaces mobiles qui fait la part belle à l’Iphone. Peut-être plus orientée vers l’esthétisme que les autres galeries.

Pttrns

Et toujours et encore, une galerie d’interfaces Iphone. Les applications sont très variées et chacune a droit à quelques exemples.

Les librairies de patterns techniques

Yahoo! Design Pattern Library

La librairie de Yahoo! propose des patterns depuis longtemps. Elle s’est toujours attachée à décrire leur utilité autant que leur utilisabilité.

 

Smart GWT Showcase

Cette très riche librairie de patterns en GWT est une des plus utilisées dans le monde. La société Isomorphic propose des solutions d’interaction riche pour les applications légères et sites web injectés d’AJAX. Le showcase permet des démonstrations en ligne de tous ces patterns.

 

Ext GWT samples

Une autre riche librairie de patterns GWT, concurrente de la précente. La société Sencha offre une collection de patterns riches pour les applications légères et sites web injectés d’AJAX. Les exemples en ligne permettent d’évaluer facilement les solutions d’interaction proposées.

Note :

Nous donnons une formation en maquettage ergonomique des interfaces. N’hésitez pas à vous inscrire !

 

3 Commentaires

  • Mathieu BARTHELEMY dit :

    En complément de ce post fort intéressant, j’ajoute un simple lien que je trouve plutôt bien fait sur l’ergo d’applications Android : https://unitid.nl/androidpatterns/

  • Grégory dit :

    Bonjour,
    merci pour ces liens très intéressants.
    Une suggestion plus particulière ? (parce qu’il y en a pas mal quand même ^^)
    Personnellement, je viens de passer presque 1 heure sur Blink :D

    Greg

  • Personnellement, je suggère: “Endeca”, “Welie.com”, “Designing Interfaces” et “Designing Social Interfaces” en termes de variétés et de rigueur (problème, caractéristiques, solutions), bien que Yahoo! soit aussi une assez bonne base.
    Pour des fonctionnalités un peu plus avancées, les bibliothèques GWT Smart et Sencha sont très intéressantes à condition de les utiliser à bon escient : identifier d’abord le besoin avant de choisir la solution fonctionnelle.
    Ensuite, les autres sont plus souvent des solutions d’agencement voire d’esthétisme, que des solutions ergonomiques.

Laisser un commentaire à Chris Annuler la réponse