Comment convertir un design graphique Photoshop ou Illustrator en site WordPress avec Divi

Dans cet article, nous allons voir en détails comment se passe l’implémentation d’un design à plat, une maquette graphique, en site Web WordPress opérationnel.

Je vais prendre comme exemple un fichier .psd = une maquette réalisée avec Photoshop, mais le procédé est similaire pour une maquette réalisée avec Photoshop (PSD), Illustrator, Adobe XD, Affinity, et autres logiciels de création graphique.

Ce travail qui consiste à convertir un design graphique en site Web est une implémentation qui s’appelle « l’intégration Web ».
Intégrateur Web est un des métiers du Web : un graphiste réalise une maquette graphique, et l’intégrateur transforme ce design en pages Web.

Avant d’aborder ce travail de conversion de fichier PSD en site WordPress, voyons déjà ce qu’est un fichier PSD et un thème WordPress.

Ce sujet vous intéresse ?
Découvrez la formation Intégration Web

Qu’est-ce qu’un fichier PSD ?

Une maquette PSD (.psd) est un fichier de conception créé à l’aide du logiciel Adobe Photoshop. Photoshop est l’un des logiciels d’édition et de conception graphique les plus utilisés sur le marché.

Photoshop est un logiciel complexe, qui peut être utilisé pour retoucher des photos professionnelles, ou créer des designs avancés.

Une maquette Photoshop utilise des calques, des effets, des positionnements ; il y a des centaines d’outils différents disponibles dans Photoshop.

En plus de savoir utiliser ce logiciel, la conception d’une maquette Web nécessite des études en design, couleurs, conception d’interfaces utilisateurs, expérience utilisateur.

Les professionnels du design, graphistes, utilisent Photoshop ou un autre logiciel de conception graphique : c’est un outil.

Comme un chirurgien utilise des outils pour exercer son métier, un professionnel du design va utiliser des outils pour exercer le sien.

Alternatives à Photoshop

Une maquette graphique de site Web peut aussi être créée avec d’autres logiciels comme :

• Illustrator
• Adobe XD
• Affinity
• Figma

Cet article s’applique aussi aux maquettes de sites Web réalisées avec ces logiciels.
Il s’agit de convertir une maquette de site Web en site WordPress opérationnel, c’est-à-dire créer un site WordPress interactif à partir d’un fichier graphique « à plat », non interactif.

Qu’est-ce qu’un thème WordPress ?

Un site Web WordPress est constitué de plusieurs couches :

• Les fonctionnalités
• Le contenu
• Le design

Les fonctionnalités sont gérées par le coeur de WordPress, et des plugins WordPress.
Le contenu est stoqué dans la base de données de WordPress, modifiable par l’interface d’administration de WordPress.
Le design est fait par le thème WordPress.

Le thème WordPress est donc la couche logicielle qui va définir l’aspect visuel d’un site. On peut modifier un thème existant, pour modifier le design d’un site, et même changer de thème en cours de route.
En effet, sur un site WordPress, on peut changer de thème, tout en gardant le même contenu.

Techniquement, un thème WordPress est constitué de fichiers de code (HTML, CSS, PHP et Javascript), ainsi que de médias (principalement des images).

Ces fichiers vont définir comment doit s’afficher le contenu du site : son organisation, sa mise en page, le design visuel.

La création de thèmes WordPress est une gigantesque industrie.

Vous souhaitez aller plus loin dans la compréhension de WordPress ? Découvrez la formation WordPress

Sur chaque site WordPress, un seul thème peut être activé à la fois : il faut donc le choisir avec soin.

Il y a des dizaines de milliers de thèmes WordPress existants disponibles, et vous pouvez également créer le vôtre, sur mesure, à partir de zéro.

Un des meilleurs thèmes WordPress du moment en 2020 est Divi. Divi est un constructeur visuel : pour résumer, c’est un thème qui vous permet de créer votre propre thème, votre propre design en son sein.

Voir aussi qu’est-ce que Divi ?

Lorsqu’on construit un site WordPress, on commence généralement par un design, une maquette visuelle, avant de travailler effectivement dans WordPress.

Comment créer une maquette de site Web avec Photoshop ou Illustrator ?

Les étapes pour la création d’un site Web sont :

• Etude (dont SEO)
• Préparation des contenus de départ
• Conception d’une maquette graphique
• Intégration Web
• Prise en main du site
• Mise en ligne
• Suivi et évolutions (dont SEO)

Conception graphique d’un design de site Web

Les étapes qui nous intéressent ici sont le design, et son intégration.

Une fois l’étude du projet et les contenus principaux prêts, il est temps d’organiser ces éléments visuellement.

C’est ici que le/la graphiste intervient. Le graphiste est souvent spécialiste en ce qu’on appelle « UI/UX design » : l’art et la science de créer des interfaces et des expériences utilisateur visuellement bien organisées.

Le graphiste va créer une maquette graphique, « à plat », qu’il va livrer à l’intégrateur.
« A plat » signifique que le design est non intéractif : en général, rien n’est cliquable dans un design, c’est comme un dessin, une image, une copie d’écran.

Dans son travail, le graphiste a des échanges avec le destinataire de la maquette qu’il crée, qui peut être un chef de projet Web ou client par exemple.
Dans un sens, le graphiste explique à la personne concernée les choix qu’il a fait, justifiés par ses études et son expérience de spécialiste.
Dans l’autre sens, le destinataire du design explique au graphiste ce qui est important pour lui à mettre en avant pour son business.

Le graphiste a également des échanges avec l’intégrateur.
L’intégrateur est la ou les personne(s) qui va s’occuper de prendre le design à plat du graphiste, pour le transformer en pages Web.
Le graphiste et l’intégrateur vont échanger ensemble sur la faisabilité technique de l’intégration. En effet, des créations graphiques alambiquées peuvent multiplier par 2 ou par 10 le budget d’intégration.

Ces échanges vont donner lieu à ce qu’on appelle des « révisions ». Une révision est une modification de la maquette proposée.

Un graphiste peut par exemple inclure 3 révisions dans son devis.

Une fois ces révisions faîtes, on arrive à l’étape de validation et livraison du design.

Le destinataire du design, comme le chef de projet Web ou le client, valide le design, et le fichier du design lui est livré.

Le travail du graphiste est terminé.

Nous avons maintenant un design, une maquette de site Web, qu’on va vouloir transformer en pages Web : c’est le métier d’intégration Web.

Intégration Web : guide par étapes pour convertir un fichier de design graphique en site WordPress

Vous avez donc un joli design que vous souhaitez implémenter en site Web.

Il s’agit de transformer un fichier Photoshop, ou Illustrator, ou Adobe XD, en site Web responsive opérationnel.

On parle d’intégration Web. Le métier d’intégrateur Web consiste à recréer le design fourni, à partir de zéro, dans le navigateur Web.

L’intégrateur va extraire du design les informations dont il a besoin, comme :

• Mesures de chaque élément du design au pixel près, dont chaque marge invisible
• Polices de caractères de chaque texte de chaque page, leur couleur, taille, graisse et position
• Savamment découper la maquette pour créer des images indépendantes

Il y a plusieurs manières d’intégrer un design. La découpe des images demande des choix délicats et des connaissances approfondies en intégration Web.

En effet, certaines images seront des images de fond (background), et leur taille va changer selon la taille de la fenêtre de navigateur de l’utilisateur.

Egalement, l’intégrateur doit connaître et choisir les bons formats d’images pour chacune des images découpée, comme png ou jpg.

J’explique tout ça en détails pendant des heures dans la formation Intégration Web avec Divi

L’intégration est réalisée en code HTML et CSS, ou avec un constructeur visuel comme Divi, auquel on ajoutera du CSS.

Lorsqu’il faut aller chercher du contenu dynamique depuis une base de données et l’afficher dans le design, comme les textes des pages ou leurs images, on va ajouter du code PHP, ou des modules dynamiques. Par exemple pour afficher en page d’accueil les 3 derniers articles publiés sur le site.

Intégration d’un design en WordPress et Divi

Pour une intégration depuis un design vers WordPress, il faut naturellement connaître WordPress, en plus de déjà maîtriser l’intégration Web (en HTML et CSS).

Nous avons vu que c’est le thème d’un site WordPress qui définit son design.

Les solutions pour créer un design sur mesure dans WordPress sont alors :

1. Programmer un thème sur mesure, à partir de zéro, avec PHP, HTML, CSS et Javascript, pour reproduire le design de la maquette graphique
2. Utiliser un thème qui propose un constructeur de design, pour reproduire le design de la maquette graphique

Les thèmes qui correspondent à cette dernière solution sont appelés des « Page builder » (constructeurs de pages). Certains ont un « Theme builder » intégré (constructeur de thème).
Les exemples de thèmes de type « Page builder » WordPress les plus connus en 2020 sont : Divi, Elementor, Beaver Builder, et Visual Composer (WP bakery).
Il y en a d’autres comme Page Builder by SiteOrigin, Thrive Architect, Brizy, Oxygen, etc.

Ces Page builder sont des outils avancés, qui permettent de créer des mises en page et des designs complexes dans un site WordPress.

L’intégration d’un design peut donc être faîte avec l’un de ces Page Builder.

Pour ma part, actuellement, j’utilise Divi.

L’intégration d’un design dans WordPress et Divi va donc consister à :

• Analyse du design, faisabilité, échanges, révisions, devis
• Installation et configuration de WordPress chez un hébergeur compatible s’il n’y a pas de site vide existant pour accueillir le design
• Installation et configuration de Divi
• Mesures et découpes du design, export des images
• Création des pages correspondantes
• Création de la navigation prévue
• Implémentation du design avec les outils de WordPress et de Divi dans chacune des pages
• Du code CSS pour réaliser des détails graphiques qu’on ne peut pas faire avec Divi
• Choix de plugins WordPress pour implémenter certaines parties du design, comme des sliders
• Réalisation du responsive (affichage mobile)
• Revue et révisions
• Livraison

Et requiert donc les compétences suivantes :

• HTML
• CSS
• Javascript
• PHP
• WordPress
• Divi
• Connaissances en design
• Spécialité en intégration Web

Responsive

Un site Web a un affichage différent sur grand écran et sur mobile. Puisqu’il y a moins de place sur un écran mobile, la mise en page doit être adaptée.
On parle de design « responsive », c’est-à-dire que la mise en page va s’adapter en fonction de la taille de l’écran. Il existe de nombreuses tailles d’écran. Elles sont normalement définies par leur résolution en pixels, mais pour vous donner une idée rapide sans les chiffres :

• grand écran de bureau
• petit écran de bureau
• grande tablette
• moyenne tablette
• grand téléphone
• etc.

Nous avons donc en réalité 2 designs différents pour un site Web : un sur écran, un sur mobile.
Le design tablette est aussi à prendre en compte, ce qui fait 3 designs distincts.
Ensuite, chacun de ces 3 designs doit pouvoir s’adapter à peu près aux différentes tailles d’écran possibles du support concerné, comme grand mobile, moyen mobile, petit mobile, etc.
Ce qui fait presque une infinité de designs, d’apparition possible de la mise en page du site Web.

Pour les gros projets, on va demander au graphiste de réaliser 3 designs : un pour écran, un pour tablette, un pour mobile. Si la maquette a 8 pages, ce seront donc 8×3 = 24 maquettes qui seront livrées. Dans ce cas, l’intégration est plus longue, plus difficile, et plus chère.
Pour les projets plus courants, le graphiste va réaliser un seul design, pour écran, puis l’intégrateur et ses outils créeront le design mobile, par déduction, avec quelques révisions du responsive, vues avec le graphiste ou le chef de projet Web/client.

Où trouver des intégrateurs Web ?

Les agences Web ont souvent une compétence d’intégration Web interne.

Vous cherchez un prestataire pour transformer vos designs en sites WordPress opérationnels ?
Je propose mes services ici : Intégration design en WordPress

Que faire une fois la maquette Photoshop convertie en site WordPress ?

Vérification, validation, livraison

En général, le chef de projet Web ou le client va vérifier le fonctionnement et l’apparence des pages du site, les comparer au design, puis :

• Demander des révisions (suite à erreur ou oubli de l’intégrateur par exemple)
• Eventuellement demander des ajoûts supplémentaires non prévus initialement (qui seront devisés par l’intégrateur)
• Puis valider l’intégration

Une fois l’intégration du design validée, elle est livrée, et l’intégrateur a terminé son travail sur ce projet.

Le propriétaire du site ou son équipe peut alors prendre en main le site.

Prise en main du site

Rappelons-nous que l’intégration a été réalisée à partir d’un design, qui contenait des contenus, textes et images. On peut appeler ces contenus « les contenus de départ ».
Les contenus d’un site Web sont amenés à évoluer constamment. Le ou la propriétaire du site est amené(e) à prendre en main son nouveau site, pour modifier ses contenus par exemple.

Il peut choisir de confier ce travail à un de ses collaborateurs ou à un prestataire.

A cette étape, il va s’agir pour lui/eux/elle·s de :

• Comprendre comment fonctionne le site
• Modifier les contenus de départ
• Dupliquer les pages existantes modèles pour créer de nouvelles pages
• Essayer de ne pas casser le design créé par le graphiste et implémenté par l’intégrateur
• Créer une première version décente du site pour le mettre en ligne
• Puis gérer son site régulièrement, l’optimiser et le faire évoluer

Ce travail nécessite de la formation et de l’entraînement – avoir des notions en Web fait maintenant partie de la culture générale des entrepreneurs.

Certains prestataires Web proposent des formules d’accompagnement après avoir livré un site Web, comme formation, maintenance WordPress, support technique, consulting.

Evolutions

A cette étape, nous avons un projet qui a été étudié, un design créé puis intégré dans WordPress, un site pris en main par ses responsables : c’est maintenant que le plus gros du travail commence.

Une fois un site mis en ligne, le but est d’observer comment il fonctionne, le nombre et comportement de ses visiteurs, et de faire évoluer le site pour qu’il atteigne ses objectifs.

Parmi les choses à faire sur un site Web en ligne, on trouve par exemple :

• Formation Web continue : le propriétaire du site augmente régulièrement ses connaissances du Web, sa compréhension de son site, pour prendre les bonnes décisions et avancer dans les objectifs de son business ou de son activité
• Suivi Analytics : nombre de visiteurs, quelles pages ils visitent, et de nombreuses autres données
• Heatmaps : outils de mesure du comportement des visiteurs, pour voir ce qui marche et ce qui marche moins bien avec le site
• SEO : référencement naturel, travail constant pour garder ou gagner du positionnement dans les moteurs de recherche
• Rédaction de contenu : utile pour asseoir la crédibilité d’une activité, quelle qu’elle soit (exemple : cet article que vous êtes en train de lire), et acquérir du traffic via les moteurs de recherche et partages
• SEA : publicité en ligne, pour acquérir de nouveaux visiteurs/prospects et se faire connaître
• Maintenance WordPress : dont mises à jour du coeur, thème et plugins, pour que la bête reste en vie
• Sécurité : tout site Web WordPress est malheureusement attaqué quotidiennement, même si on ne le voit pas forcément au premier abord
• Sauvegardes : ça serait dommage de perdre tout ce travail suite à un problème technique
• Optimisation : de la vitesse de chargement, du poids des images, du design, des textes
• Actualisation : des informations présentées
• Gestion des incidents : bug avec un plugin WordPress, site piraté, contenu qui disparaît, site indisponible …
• Surveillance de disponibilité (monitoring) : mesurer que le site est bien disponible 99% du temps, et si non, prendre les actions nécessaires pour que ça soit le cas
• Scans de liens morts : des liens qui mènent vers des pages qui n’existent plus – néfaste pour les visiteurs et pour le référencement
• Veille Google Search Console : des outils de Google pour surveiller et améliorer un site
• CRO : optimisation des conversions

Pour continuer

Prestation d’intégration Web : votre maquette graphique transformées en site WordPress opérationnel

Formation « Intégration Web avec WordPress et Divi » : apprenez à le faire vous-même !