Notions de web design

Définition

Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web. Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

source: http://fr.wikipedia.org/wiki/Web_design

Site références:

http://www.w3.org/standards/webdesign/ : le W3C est chargé de promouvoir la compatibilité des technologies du web. LE site de référence.

http://www.alistapart.com/ : Les meilleurs articles du web

http://www.pompage.net/ : de très bonnes ressources en français.

http://24ways.org/

http://net.tutsplus.com/

Quelques sites proposant des galeries de pages d'accueil pour l'inspiration:

http://www.minimalsites.com/ : sites web au design épuré.

http://www.thebestdesigns.com/

http://designsnips.com/ : propose une collection de design web classés par catégories.

http://patterntap.com/ : collection d'élements composant une interface utilsateur ( navigation, formulaires, listes, icônes ...)

Des templates :

openwebdesign

http://www.smashingmagazine.com/2009/01/25/35-free-high-quality-e-commerce-templates/ : templates ecommerce

templateword

La question des polices

La gestion des polices est une question d'esthetique mais est également une contrainte technique: Une police ne s'affichera qui si l'utilisateur la possède sur son ordinateur.

Un article d'introduction : http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html

collection de polices standards : http://covertprestige.info/css/collections-polices/

http://www.typetester.org/

http://www.fontsquirrel.com/

http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

Utiliser des polices en ligne:

http://kernest.com/

http://code.google.com/intl/fr/apis/webfonts/

http://www.guillaumevoisin.fr/blog/css/astuce-utiliser-une-police-particuliere-avec-google-font-api : un exemple simple d'utilisation des polices hebergées par Google

Choix d'icônes:

http://www.famfamfam.com/

http://min.frexy.com/articles/category/icon_design/

Quelques sites dédiés à la visualisaton de données:

http://www.visual-literacy.org/periodic_table/periodic_table.html: table périodique des différents types de visualisation.

http://jess3.com/ : très beaux exemples

http://infosthetics.com/: très beaux exemples

http://blogof.francescomugnai.com/2009/04/50-great-examples-of-infographics/ :

http://flowingdata.com/ : de beaux exemples d'interactions entre designers, developpeurs et statisticiens.

Webzines :

http://webdesign.2803.com/page/2/

http://www.webdesignmag.fr/index.php

http://www.smashingmagazine.com/ : design et web design

http://www.digital-web.com/

http://line25.com/ : articles, tutoriaux

Blogs :

http://www.zeldman.com/