Graphiz Let's rock Creativity !

Ergonomie et web design, le mariage en 15 articles !

Pourquoi nous demande-t-on toujours de choisir entre le beau et le pratique ? A croire que les deux adjectifs sont antinomiques !

En fait tout ceci est une histoire de maîtrise de la technologie et de l’intérêt du public. Prenons le web (mais ça marche aussi avec les téléphones, les télévisions,…) : au départ c’était moche et pas pratique, rappelons-nous ces magnifiques sites avec leurs frames, leurs tableaux et leurs fonds noirs étoilés.

Ensuite vint le Flash, le web est devenu beau, mais dans leur quête de beauté à coups de dessins vectoriels et de typos délirantes, les web designers ont oublié qu’il fallait que ce soit simple : lisibilité à revoir, temps de chargement longuets, pas de prise en compte des fonctionnalités du navigateur,…

Puis on déterra l’AJAX, enfin le triumvirat HTML/CSS/Javascript put rebriller. L’avènement du web 2.0 vit apparaître des sites pratiques, mais à l’esthétique légère, qu’on cachait sous des dehors de sobriété et de rapidité de chargement… alors que les Téraoctets de stockage remplaçaient les Gigaoctets  et les GBits/s de bande passante les MBits/s.

Mais, ces derniers temps, des voix s’élèvent. Voici, au travers de 15 articles, les dernières trouvailles de nos amis web designers pour un web plus beau mais surtout plus pratique, plus lisible, plus accessible, plus compréhensible, plus aéré, plus élastique, plus mobile,…

Généralités

How to Spot Quality within Web Design: Examples & Tips

Un article bien illustré qui présente les meilleurs compromis pour allier ergonomie et web design avec plein de conseils bien utiles.

http://wefunction.com/2009/04/quality-within-web-design/

12 Useful Techniques For Good User Interface Design

Des astuces pour améliorer vos interfaces utilisateurs, à réserver aux applications web.

http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/

10 Tips to Create a More Usable Web

Ici on cause d’utilisabilité : 10 conseils à suivre.

http://www.webdesignerdepot.com/2009/06/10-tips-to-create-a-more-usable-web

40+ Helpful Resources On User Interface Design Patterns

Une belle liste de sites qui s’intéresse aux tendances en matière de navigation du web.

http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/

Les écrans de login

Web Form Design Patterns: Sign-Up Forms

Un article en 2 partie qui décortique les pratiques en matière de formulaires de connexion.

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

Mise en page

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Mise en page fixe, fluide ou élastique ? Choisissez à l’aide de cet article !

http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Applying Divine Proportion To Your Web Designs

Le nombre d’or est présent dans de nombreuses disciplines artistiques : la peinture, l’architecture,… et pourquoi pas dans le web design !

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

Les grilles

Grid Style In Modern Web Design: Showcase and Resources

Une présentation du système de grille et plein d’exemples.

http://www.instantshift.com/2009/05/21/grid-style-in-modern-web-design-showcase-and-resources/

960 Grid System

Le site officiel.

http://960.gs/

Fluid 960 Grid System

Un dérivé de 960 GS tout en fluidité !

http://www.designinfluences.com/fluid960gs/

The 960 Grid System Toolbox & Resources

Un article sur le 960 Grid System et ses dérivés.

http://www.webdesignerdepot.com/2009/05/the-960-grid-system-toolbox-and-resources/

Adaptive CSS-Layouts: New Era In Fluid Layouts?

La question du Fixe/Fluide pour le 960 Grid System

http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

50 Alluring Typography and Grid Focused Websites

Des exemples de sites basés sur un système de grille.

http://www.thedesigncubicle.com/2009/06/50-alluring-typography-and-grid-focused-websites/

Grid Systems – Making grids in Illustrator

Si vous utilisez Illustrator pour préparer le design de vos sites, voici un article qui vous présente comment mettre en place le système de grille dans l’outil d’Adobe.

http://font.is/?p=1226

Nuages de tags

Tag Clouds Gallery: Examples And Good Practices

A la mode ces derniers temps, les nuages de tags peuvent être un véritable casse-tête à mettre en place : conseils et exemples.

http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/