Le webdesign désigne la création du support visuel à destination d’un site Web. Il s’agit d’une phase prépondérante dans la conception d’un tel site. L’identité d’un site Web, après avoir été conceptualisée, sera transformée en lignes de code et images pour s’afficher dans un navigateur Web. Comme pour l’infographie et le graphisme, le webdesign n’a pas encore acquis son indépendance à part entière comme activité artistique. Les raisons sont nombreuses, autant que les affinités qu’elle exige ; le webdesign concerne la création de la charte graphique, l’interface et la navigation du site, l’arborescence. Ce qui demande de nombreuses compétences en graphisme, programmation, animation ainsi qu’une bonne connaissances des contraintes techniques liées à ce domaine (respect des standards W3C, accessibilité, portabilité …).L’objet du webdesign est de valoriser l’image du propriétaire du site par le biais d’éléments graphiques afin d’en renforcer son identité visuelle, néanmoins plusieurs contraintes liée à l’ergonomie et à l’accessibilité réduisent les possibilités et les libertés du designer. Un site doit avant tout répondre aux attentes des utilisateurs. Généralement un compromis doit être trouvé entre le graphisme et la sobriété nécessaires à la lecture et la navigation.
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].
L’apparition de Flash, développé par Macromedia, qui permet de réaliser des animations ainsi que de diffuser du son et de la vidéo, a également changé l’apparence d’Internet, en offrant de nouvelles cartes aux concepteurs de sites. Toutefois, Flash est beaucoup plus restrictif que le HTML car c’est un format protégé par Macromedia, et il nécessite un plug-in pour être affiché.
Une technique assez récente appelée le codage à distance a permis une utilisation d’Internet de façon plus dynamique, sans nécessiter de plug-in ou d’applications spécialisées. Le chef de file de ces technologies est AJAX, mais ce n’est pas la seule technologie existante. Par ailleurs, AJAX n’a pas encore accédé au statut de norme.
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.
- Réflexion sur l’objectif du site, sa rentabilité, les moyens financiers à engager …
- Réflexion sur le contenu: définition d’une arborescence
- Réflexion sur l’autonomie souhaitée et le type de moyens humains pour faire la mise à jour.
- Choix éventuel d’une agence Web (dans ce cas certaines des étapes suivantes sont alors gérées par l’agence).
- Dépôt d’un nom de domaine.
- Choix d’un hébergeur.
- Établissement d’une structure de pages HTML ou XHTML.
- Mise au point d’une charte graphique.
- Choix et installation d’un Système de gestion de contenu (SPIP, wiki …) ou choix d’un éditeur de site Web de type WYSIWYG (exemples : NVU, Macromedia Dreamweaver, Microsoft FrontPage) ou texte (exemple : Bluefish, Emacs, …).
- 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.
- Intégration de la charte graphique via les feuilles de styles CSS.
- Optimisation : préparation du site pour les moteurs de recherche.
- Le référencement est l’étape finale.
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 partiellement de même du référencement.
Les constituants des pages
- La structure de la page, en HTML ou en XHTML
- Le design via les feuilles de style CSS.
- Le graphisme avec des images GIF, JPG, PNG.
- Des animations en Flash ou en SVG.
- Des objets multimédias.
- Des formulaires, éventuellement traités en AJAX.