Convertir une maquette Illustrator ou Photoshop en site WordPress avec Elementor

La création proprement dite d’un site web passe normalement par un processus qui se décline en plusieurs étapes. Après en avoir eu l’idée, il est important de concevoir un prototype qui servira de modèle de base. La plupart des agence web à Paris proposent d’abord des maquettes illustratives à leurs clients avant de commencer à créer les pages associées. Cette procédure permet d’avoir un aperçu préalable de l’aspect final du site. En général, les maquettes de sites Internet sont réalisées avec des logiciels comme Illustrator et Photoshop, Sketch, etc. Mais transformer un prototype en un véritable site incluant les mêmes éléments graphiques n’est pas toujours facile. Dans cet article, nous allons voir comment convertir une maquette Illustrator ou Photoshop en site WordPress avec le constructeur Elementor.

Pourquoi utiliser Photoshop et Illustrator pour créer des maquettes de site web ?

Les maquettes PSD et AI sont des fichiers de conception créés respectivement avec les logiciels Adobe Photoshop et Adobe Illustrator. L’outil Photoshop fait partie des logiciels les plus utilisés dans le monde pour créer différents types de contenus graphiques. C’est une puissante application d’édition et de conception graphique qui permet de concevoir des affiches, des calendriers, des flyers et des prototypes d’applications ou de sites web. Aujourd’hui, Adobe Illustrator est aussi largement adopté par les créatifs pour concevoir des maquettes de plateformes web. Habituellement, un prototype Photoshop ou Illustrator utilise des calques, des positionnements et des effets. Ces deux logiciels d’Adobe proposent des centaines d’outils graphiques qui facilitent la conception.

Pour convertir une maquette en un véritable site web que les internautes peuvent visiter, il faudrait nécessairement avoir des compétences en programmation web. Toutefois, avec le constructeur Elementor, cette tâche peut paraître plus facile, car vous ne serez pas obligé de coder.

Elementor : un constructeur parfait pour convertir une maquette Photoshop ou Illustrator

WordPress est un outil qui bénéficie d’une popularité impressionnante. C’est l’un des CMS les plus usités aussi bien par les débutants que par les professionnels pour réaliser des sites Internet. La réputation de WordPress s’est fortement accrue grâce aux nombreuses extensions et aux constructeurs de pages. Normalement, un site WordPress se compose de plusieurs couches. Il y a les fonctionnalités, le contenu et le style ou le design. Les fonctionnalités sont généralement gérées par le noyau même du CMS et les plugins. Le contenu, c’est l’ensemble des éléments stockés dans la base de données WordPress. Ces données peuvent subir des modifications via l’interface d’administration de l’outil. Quant au design, il est pris en charge par le thème choisi pour le site.

Le thème de votre plateforme web est donc la couche logicielle qui définit son aspect visuel général. Mais il est possible d’apporter certaines modifications à un thème WordPress, notamment avec des constructeurs de pages. Il existe plusieurs constructeurs ou Page Builders sur WordPress :

• Vicual Composer (WP Backery) ;
• Brizy ;
• Oxygen ;
• Divi ;
• Elementor ;
• Thrive Architect ; etc.

Certains constructeurs viennent avec le thème choisi. D’autres en revanche doivent être installés indépendamment du thème. Avec Divi, Elementor est l’un des constructeurs visuels les plus utilisés parce qu’il propose une interface d’utilisation très facile à prendre en main. C’est un builder qui permet de convertir une maquette Illustrator ou Photoshop en toute simplicité. Toutefois, il est recommandé d’avoir quelques connaissances techniques avant de se lancer dans un processus de conversion de maquette Illustrator ou Photoshop avec Elementor.

Comment convertir une maquette Illustrator ou Photoshop en site WordPress avec Elementor ?

L’intégration d’un design réalisé avec l’un des deux outils (Photoshop et Illustrator) dans un site WordPress se fait sur la base d’une méthodologie bien élaborée. Vous devez commencer par analyser la maquette afin d’identifier les éventuelles révisions à faire pour faciliter l’intégration avec Elementor. Après cette phase d’étude de faisabilité, il va falloir installer et configurer WordPress chez un hébergeur si vous partez de zéro. Lorsque le site sera fonctionnel, installez le constructeur Elementor afin de pouvoir utiliser ses fonctionnalités. Ce n’est qu’après ces étapes préliminaires que vous pouvez commencer à convertir une maquette créative en site WordPress avec le builder. Pour ce faire, vous devez procéder page par page. Pour chaque maquette originale, vous devez créer la page correspondante.

Il faut savoir que le prototype Illustrator ou Photoshop comporte plusieurs détails tels que la police, les hauteurs minimales, les couleurs, etc. Ainsi, lorsque vous voulez créer votre maquette, vous devez vous demander si son intégration avec Elementor peut se faire aisément. En général, les développeurs web qui utilisent ce Page Builder prennent en compte certains éléments pour créer les pages :

• le poids des images ;
• la grille encadrée d’Elementor ;
• les widgets de boutons Call to Action ;
• les autres widgets.

C’est ainsi qu’ils adaptent parfaitement leurs sites à ce qu’ils ont conçu dans Photoshop ou dans Illustrator. Voici étape par étape comment vous pouvez convertir une maquette en site WordPress.

Première étape pour convertir une maquette PSD ou AI avec Elementor : la préparation

Nous l’avons brièvement expliqué dans les paragraphes précédents. Mais plus généralement, à cette étape, vous devez préparer le matériel à utiliser. Avec Photoshop, vous avez la possibilité de sauvegarder votre prototype avec l’option « Enregistrer pour le Web et les appareils ». Cette option permet de réduire considérablement la taille du fichier. Cela aide à accélérer le chargement de la page. Nous vous recommandons d’utiliser les formats PNG 24 pour enregistrer vos maquettes. Ils conservent une meilleure qualité d’image quand on réduit les fichiers. En plus de cela, les formats PNG 24 gèrent mieux la transparence. C’est un élément important dont il faut tenir compte lors de la conversion en page de site.

En ce qui concerne le niveau de qualité de vos fichiers, préférez des valeurs moyennes. Si la qualité d’image est trop lourde, lorsque vous intégrerez les fichiers avec Elementor, le temps de chargement du site WordPress sera plus long. Pour les logos et les icônes, optez pour les fichiers SVG. Avec Elementor, il est désormais possible de télécharger facilement ces fichiers.

En réalité, la phase de la préparation permet de rassembler tous les éléments qui doivent intégrer les différentes pages que vous allez créer avec Elementor. Nous vous recommandons donc de créer un ou plusieurs dossiers en fonction du nombre de pages afin d’y enregistrer vos images de façon ordonnée. Après avoir préparé tous les principaux éléments visuels (les images et les icônes) de votre maquette Photoshop, il ne vous reste qu’à passer à la création des pages avec le constructeur. Pour vous faciliter la tâche, nous conseillons de prédéfinir les couleurs et les polices dans Elementor avant de commencer l’intégration de la maquette. Définissez aussi la mise en page sur « Elementor Canvas » pour mieux voir tous les éléments des pages que vous voulez créer.

Deuxième étape : la traduction de la conception vers Elementor

À cette étape, vous aurez à ajouter des sections et des colonnes afin de pouvoir intégrer les contenus et les éléments visuels. Dans Elementor, une section normale possède une seule colonne. Vous pouvez compléter les colonnes si votre prototype l’exige. Après avoir ajouté la section, pensez à modifier, dans les paramètres de styles, la position des éléments, les effets visuels la superposition d’arrière-plan ou encore les effets de défilement. N’oubliez pas non plus d’ajouter les images préalablement redimensionnées. Si vous avez bien enregistré votre maquette dans Photoshop ou Illustrator pour le web et les appareils, alors vous n’avez qu’à intégrer l’image dans la section créée. Mais lors de l’intégration, veillez à réajuster les dimensions si certains éléments stylistiques ont été dénaturés. Il y a par ailleurs quelques ajouts à faire : textes, boutons, icônes, logos, images particulières, etc.

Troisième étape : les corrections pour obtenir des vues réactives

Les vues réactives sont aujourd’hui très importantes pour les sites web. Elles permettent d’optimiser le mode d’affichage des pages. La manière dont une page web s’affiche ne peut pas être la même sur un ordinateur et sur un smartphone. Vous avez deux possibilités pour créer des pages responsives avec Elementor. Vous pouvez concevoir trois prototypes différents pour la même page web et les traduire simultanément sur la même interface. Cette façon de procéder peut paraît chronophage, car cela revient à créer trois pages ayant les mêmes contenus, mais qui se présentent différemment. C’est pourquoi la méthode la plus appropriée consiste à créer une seule page et à effectuer des corrections pour les vues réactives.

La pratique qui nous paraît plus efficace consiste à adapter votre maquette graphique pour des vues réactives après chaque section. Pour ce faire, il vous suffit de jouer avec les marges et le remplissage dans les sections et les colonnes. Elementor propose trois vues différentes pour vous permettre de rendre les pages de votre site WordPress responsives. Ainsi, après avoir intégré la page complète au format desktop, vous pouvez passer à la vue « tablette » et à la vue « smartphone » pour effectuer les modifications nécessaires.

Quatrième étape : répéter tout le processus

Elementor est un outil qui a été conçu pour faciliter l’intégration des maquettes réalisées avec Illustrator et Photoshop. Pour accélérer le processus d’intégration, vous avez la possibilité de dupliquer les sections et d’enregistrer certains widgets en tant que widgets globaux. Vous pouvez aussi sauvegarder des pages entières afin de les utiliser plus tard pour créer de nouvelles pages. Par exemple, si vous avez des maquettes qui se ressemblent fortement, il vous suffira de créer une nouvelle page WordPress et d’y intégrer un modèle prédéfini. Il ne vous restera alors qu’à changer les éléments visuels qui sont différents (images, textes, couleurs, etc.). Cela vous évite d’avoir à recréer tous les éléments à partir de zéro.

Que faire après la conversion d’une maquette Photoshop ou Illustrator en site WordPress avec Elementor ?

Les étapes pour convertir une maquette créative en site web WordPress avec le constructeur Elementor ne sont pas difficiles à maîtriser. Mais après avoir converti votre prototype, vous devez effectuer certaines vérifications avant de livrer le site au client. En plus de cela, vous devez vous assurer que l’ensemble du site est facile à prendre en main.

Vérifier, valider et livrer le site

Que vous soyez un freelance ou que vous travailliez dans une agence digitale Paris, vous devez vérifier si tout fonctionne correctement sur le site. À la fin d’une intégration, comparez toujours les deux designs, c’est-à-dire, celui de la maquette et celui de la page correspondante. Cette phase de vérification vous permettra de voir les éventuelles erreurs que vous avez faites. Il peut en effet arriver que vous ayez oublié d’intégrer certains éléments graphiques et certaines couleurs. Il se peut aussi que vous fassiez quelques ajouts non prévus initialement sur la maquette. Ce n’est qu’à la suite de toutes les vérifications que vous pourrez valider l’intégration et livrer le site au client. Tout le travail de l’intégrateur est ainsi terminé. Il reste à présent à procéder à une optimisation technique pour améliorer le positionnement du site sur les moteurs de recherche.

Travailler le référencement naturel du site

Après avoir créé un nouveau site Internet, il y a généralement un certain nombre d’améliorations à effectuer que le développeur ne fait pas. Beaucoup d’intégrateurs web oublient d’ailleurs ces améliorations techniques quand ils finissent de convertir une maquette Illustrator ou Photoshop en site WordPress avec Elementor. Pour commencer, vous pouvez vérifier le temps de chargement de votre site. Si une page ne se charge pas rapidement, c’est probablement parce qu’elle contient certaines images lourdes. Alors, pensez à convertir les images lourdes et à les remplacer. Par ailleurs, si vous voulez gagner des positions dans les moteurs de recherche, installez une extension SEO accessible via Elementor. Intégrez des liens sortants et des liens internes afin d’attirer l’attention des robots explorateurs des moteurs de recherche.

En outre, évitez d’ajouter des liens morts aux pages que vous intégrez. Les liens morts sont des URLs qui mènent vers des pages inexistantes. Ils sont néfastes à la fois pour le référencement naturel et pour les visiteurs.

La prise en main de la plateforme

Les différents contenus d’un site Internet peuvent évoluer au fil des mois et des années. En livrant un site internet, il est important de veiller à ce qu’il soit facile à prendre en main. Le client peut vouloir créer de nouvelles pages avec les éléments typographiques et visuels existants. C’est pour cela qu’il faut créer quelques modèles de pages inspirés par les maquettes Illustrator et Photoshop. Cela permet au client d’implémenter lui-même une page sans avoir à apprendre le HTML ou les autres langages web.

Convertir une maquette en site WordPress avec Elementor : ce qu’il faut retenir

Le processus de transformation d’un prototype réalisé avec Adobe Illustrator ou Photoshop est assez simple. La réussite d’un tel projet dépend de tout le travail de préparation effectué. Elementor est un constructeur qui utilise un système « drag and drop ». Grâce à ce système, après avoir intégré les principaux visuels de votre maquette PSD ou AI, vous pouvez ajouter et modifier les éléments manquants pour parfaire les pages créées. En outre, l’outil permet de rendre le site responsive sans avoir à écrire le moindre code informatique.