Web design

Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un 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 en termes d’ergonomie, d’utilisabilité et d’accessibilité.

En francophonie, le terme web design est souvent utilisé à contre-sens de son acception anglaise et confondu avec la seule création graphique. Or ce qui le définit n’est pas tant l’expression visuelle et/ou artistique que la formalisation de l’interaction dans la page-écran.

Le web design réclame donc des compétences variées : en développement front-office, en ergonomie et en interactivité, ainsi qu’une bonne connaissances des contraintes techniques liées à ce domaine : respect des recommandations W3C, accessibilité, portabilité.

Le design d’un site se présente sous forme de maquette fonctionnelle et de spécifications techniques. Celles-ci sont ensuite transformées, avec la maquette graphique, en lignes de code et images afin de s’afficher dans un navigateur web.

Source: Web design – Wikipédia

Conception de site Web

La création et la conception d’un site Web est un processus qui implique quelques étapes simples au départ, mais pouvant sur un site abouti mettre en œuvre des moyens et des compétences très importants. Un site Web, cela peut être une simple page au format HTML, ou des milliers de pages proposant des animations, des services programmés en Java, PHP ou autre langage serveur, des formulaires supposant un traitement en JavaScript, ou AJAX. Il peut reposer sur des technologies de bases de données, p.ex. MySQL.

Les étapes de la création

En fonction du type de site, du contexte et des moyens disponibles pour le mettre en œuvre, certaines de ces étapes sont optionnelles voire inutiles. A chacune de ces étapes correspondent des compétences spécialisées (ergonomie, architecture de l’information, référencement, rédaction Web, etc.)

1. Projet :
   • Réflexion sur l’objectif du site, sa cible, sa rentabilité, les moyens financiers à engager…
   • Réflexion sur l’autonomie souhaitée et le type de moyens humains pour faire la mise à jour.
   • Réflexion sur le contenu : pages, services attendus, principes de navigation
2. Mise en œuvre :
   • Dépôt d’un nom de domaine.
   • Choix d’un hébergeur.
   • Choix et installation d’un Système de gestion de contenu (SPIP, wiki …) ou d’un éditeur de site Web de type WYSIWYG (exemples : NVU, Macromedia Dreamweaver, Microsoft FrontPage) ou texte (exemple : Bluefish, Emacs, …).
3. Conception :
   • Établissement d’une structure de pages HTML ou XHTML.
   • Définition d’une arborescence
   • Mise au point d’une charte graphique
   • Mise au point d’une charte éditoriale.
4. Réalisation :
   • Création de pages via le Système de gestion de contenu ou l’éditeur. Les pages peuvent être créées individuellement ou reposer sur un système de gabarits.
   • Mise en place de la charte graphique via les feuilles de styles CSS.
   • Éventuels développements dynamiques (formulaire, services, etc.)
5. Suivi :
   • Recette du site une fois prêt
   • Lancement du site : mise en ligne
   • Annonce. Faire connaître le site peut se faire par plusieurs leviers : annonce, publicité, inscription dans des annuaires…
   • Maintenance (nouveaux contenus, corrections, amélioration continue de la qualité)

L’accessibilité du site est une donnée à prendre en compte à chaque étape à partir de la mise au point de la structure des pages. Il en est de même du référencement dont la stratégie peut-être mise en place dès la conception. Des principes du référencement sont également à prendre en compte lors de la création des gabarits, l’intégration des pages, la rédaction des contenus, le lancement du site, la maintenance. L’ergonomie intervient également à toutes les étapes : conception, recette et audits, amélioration continue

Les constituants des pages

• Le texte de la page et sa structure , en HTML ou en XHTML
• La mise en page via les feuilles de style CSS.
• Le graphisme avec des images GIF, JPG, PNG, MNG.
• Des animations en Flash ou en SVG.
• Des objets multimédias.
• Des formulaires, éventuellement traités en AJAX.