Transformer la maquette PSD graphique en web
Dans la création du site web, la partie front-end est d’abord présenter en maquette ou en prototype, au client et aux utilisateurs, avant de passer de la maquette graphique PSD au site web.
Cela permet de valider le besoin, et s’assurer que le site web qui sera réalisé, est bien celui attendu par les utilisateur.
On réalise souvent une maquette graphique PSD, avant de la transformer en site web.
UX et UI sont la face visible et la partie la plus importantes pour l’utilisateur final. il faut y accorder du temps et de la rigueur , et s’assurer que le passage de la maquette graphique PSD au site web, se fait sans perte d’information.
Dans cet article l’expert de la l’agence web Wedigitalpro , présente le processus de transformation de
Qu’est ce que le UX et UI?
UX : L’expérience utilisateur
UX est l’acronyme de user experience en anglais. En Français c’est l’expérience utilisateur. Ce sont les éléments : outils et procédures qui permettent de rendre la parcours utilisateur intuitif est agréable.
Elle est valable encore pour tous les parcours utilisateurs et elle ne concerne pas que le digital. On peut la rencontrer dans la grande distribution, pour imaginer un parcours client agréable dans les magasin et les galeries marchandes.
L’expérience utilisateur est rencontrée, aussi dans les parcours pour réaliser les démarches administrative, ou également pour l’organisation des événements sportifs…
L’expérience client étudie les sensations et le ressenti des utilisateurs, pour présenter un parcours physique ou web, le plus agréable.
UI : L’interface utilisateur
L’UI est l’acronyme de “User Interface” en anglais. en Français c’est l’interface utilisateur. Ce sont les éléments : conception, et construction de l’interface utilisateur.
L’interface utilisateur est composée de tous les éléments graphiques : le contenu des écrans, la logique de navigation, les animations, les champs de saisie, les boutons, les icônes, les messages, les couleurs, les polices de caractères …
Les composants structurants de l’interface utilisateur, sont organisés d’abord en template, modèle et thème. Ils s’adaptent aussi de manière dynamique en fonction du profil de l’utilisateur web, ou du device.
L’UI peut être encore présenter par une maquette statique et dynamique.
Comment faire une maquette web statique?
Des éléments structurants de l’identité de la marque ou de l’entreprise sont graphiques. Et ils doivent se retrouver sur le graphisme du site web.
On peut citer les éléments web ci-dessous, et les outils pour les créer :
- La police de caractère existante ou créer une nouvelle avec l’un de ces outils :
- Les images peuvent être transformées avec les outils ci-dessous:
Comment faire une maquette web dynamique?
Avec une base de composants web graphiques, qui porte l’identité de la marque ou de l’entreprise, il faut ajouter une logique de navigation en cohérence avec UX/UI.
Une maquette dynamique du site web illustre d’bord les différents parcours web du client. Elle permet ensuite de définir le maillage interne et externe.
Elle est un prérequis pour valider le besoin client, et également pour permettre au développeurs de réaliser un site web conforme.
Comment transformer la maquette PSD en code web?
La maquette présente l’ossature graphique du site web. Et finalement avec la maquette on a bien le modèle graphique. Ce modèle sera le contenant du contenu qu’il faut publier et que sera mis à jour régulièrement.
Le modèle graphique est la partie stable , alors que le contenu va changer en fonction de l’actualité.
La partie graphique à coder est bien ce modèle. Mais il faut comprendre que le contenu sera géré par un utilisateur non informaticien. L’éditeur du contenu du site web sera une collaborateur du service marketing ou de la communication.
Transformation de la maquette en web par codage
Maintenant que la maquette est validée par le client, il faut la transformer en code pour créer le front-end du site web.
Les outils propose d’extraire facilement du code CSS, des images, des couleurs et du texte à partir de fichiers PSD. C’est une extraction brute qui doit être affiné par les développeurs Web front-end spécialistes. HTML, CSS et javascript.
Transformation de la maquette en web automatiquement
Transformer une maquette graphique en web en code, est un travail fastidieux, et certaines parties sont consommatrices de temps et de ressources humaines.
La transformation d’une maquette PSD vers un composant web : page , theme … nécessite plusieurs expertises : HTML, CSS , javascript …
Elle nécessite dans certains cas la participation de plusieurs experts. cela ajoute , au travail de production, un effort de coordination non négligeable.
On peut éviter, en moins en partie, ce travail de transformation manuelle, par des outils d’automatisation de la transformation du PSD en HTML/CSS.
Ci- dessous quelques exemples de site web qui proposent une transformation automatique gratuitement. Il s’agit duPSD To Web et CSS3Ps
Il faut noter également qu’il existe des Framework pour faciliter le développement. Bootstrap est un environnement de développement CSS, JavaScript et des librairies JavaScript externes comme jQuery ou Popper pour définir des composants : barres de navigation, des fenêtres modales…
Comment intégrer la maquette codée dans le CMS?
Le CMS est l’acronyme de Content Management System. En Français un système de gestion de contenu. Ils donnent un cadre qui permet d’éditer un contenu et de le publier sur internet.
Les CMS les plus populaires sont :
WordPress est de loin le plus utilisé des CMS. Le modèle ou le gabarit des pages s’appelle le Theme dans WordPress.
L’intégration de la maquette PSD , consiste à la transformer en
Comment transformer PSD en un Theme WordPress?
La maquette transformer en Html : index.html et en CSS style.css. Il suffit de transformer le fichier index.html en fichier .php qui forme la structure du Theme WordPress.
En plusieurs fichiers .php :
- Archive.php
- Header.php
- Footer.php
- Index.php
- Single.php
- Page.php
- Sidebar.php
- Category.php
- Search.php
- 404.php
- Comments.php
- Comments-popup.php
Assurez vous que la maquette codée est responsive?
Un site web Responsive, est un site dont l’affichage s’adapte au device et au navigateur.
L’affichage des images, des polices, et des menus peut être altéré d’un device (mobile, ordinateur , tablette, console…), ou d’un navigateur ( Chrome, internet explorer, Firefox…) à l’autre.
Dans ce cas l’expérience client sera altérée, elle sera certainement médiocre.
Pour cela il faut d’abord prévoir dans le code, les éléments qui permettent de modifier la tailles des composants graphiques en fonction des devices et des navigateurs. Dans certains cas aussi cacher une partie du contenu.
Comment optimiser la performance de maquette codée?
Sans altérer l’esthétisme de votre site web , garantissez une grande vitesse de chargement. Pour cela il faut effectuer les optimisations ci-dessous :
- Mutualiser et réduire le javascript / css.
- Réduire le chargement des images
- Utiliser des polices d’icônes ou CSS sprites pour avoir moins de requêtes.
- Réduire le nombre de polices (et charset)
- Travailler avec des animations CSS, pour que le navigateur les optimise .
- Charger le javascript de manière ASYNC
L’agence web Wedigitalpro dispose des experts et des outils pour concevoir, créer, mettre en production et superviser les sites internet des clients très exigeants.
Wedigitalpro propose de vous accompagner. Contactez nous pour étudier vos besoins.