Où trouver de l'inspiration pour vos animations ? Avez-vous déjà remarqué à quel point les animations sont devenues un composant essentiel au cœur des interfaces utilisateur ? Pour en tenir compte dans vos projets futurs et vous inspirer, découvrez quelques sites et outils de référence à connaître. Annonce Aujourd’hui, l’animation n’est plus réservée à des sites de jeux, pour des expériences interactives poussées ou simplement des applications mobiles. Grâce au support étendu de CSS3, du WebGL, de SVG, de la vidéo et grâce au développement des librairies Javascript, les animations font parties intégrante de nos sites web. Elles permettent à l’utilisateur d’avoir une expérience agréable, d’avoir des repères dans l’espace et souvent de comprendre l’organisation des éléments.
Les traditionnels blocs plats, sans vie et en 2D prennent vie avec des mouvements « réalistes » qui suivent les lois de la physique du monde réel. . « Une animation bien réussie est celle que l’utilisateur ne va pas remarquer » Des galeries pour trouver l’inspiration : Design patterns. Patterns : Designing Interfaces. Selected patterns from the book are featured here on the website, in their entirety. Here are all of the patterns in the second edition of the book, sorted by chapter. Most of these patterns are not online yet, but many of them will become available over time as featured patterns. Patience! What users do Patterns of user behavior Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred Choices Incremental Construction Habituation Microbreaks NEW Spatial Memory Prospective Memory Streamlined Repetition Keyboard Only Other People’s Advice Personal Recommendations NEW Getting around Navigation, signposts, and wayfinding Clear Entry Points Menu Page NEW Pyramid Modal Panel Deep-linked State NEW Escape Hatch Fat Menus NEW Sitemap Footer NEW Sign-in Tools NEW Sequence Map Breadcrumbs Annotated Scrollbar Animated Transition Organizing the page Lists of things Images, messages, search results, etc.
Doing things Going mobile. Design patterns, de nouvelles librairies pour la conception d’interface. Les 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 Des patterns actuels, avec une explication sur leur usage en contexte. Les librairies incontournables. UI-Patterns.com.