Notions de web design
Ce wiki a été archivé en 2018.
Le nouveau wiki se trouve à: ressources.labomedia.org Les fonctionnalités sont désactivées: vous pouvez faire une recherche sur Google site:https://wiki.labomedia.org et découvrir La Labomedia. |
Sommaire
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.
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 :
http://www.smashingmagazine.com/2009/01/25/35-free-high-quality-e-commerce-templates/ : templates ecommerce
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.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
Utiliser des polices en ligne:
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://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://line25.com/ : articles, tutoriaux