La création d’un site web est une affaire qui nécessite davantage de compétences, notamment en matière de codage HTML, CSS, JavaScript et autres langages. Alors si vous n’avez pas une expérience, voire aucune, dans ces domaines, vous serez épatés de savoir qu’il existe d’autres outils assez intuitifs pour vous aider. Adobe XD, logiciel utilisé majoritairement par les designers pour créer des prototypes graphiques et interactifs sur les supports web et mobile, permet de créer des sites web sans avoir à maîtriser le codage.
Adobe XD est un outil qui utilise des éléments vectoriels pour créer diverses plateformes complètes, en vous accompagnant même si vous n’avez aucune expérience en matière de développement web ou de conception web. Lorsque vous serez en état plus avancé de votre projet, vous pourrez profiter de l’ensemble de la suite Adobe pour ajouter d’autres fonctions à votre site.
Que vous soyez un concepteur web expérimenté ou un débutant, voici les 7 étapes à suivre pour créer un site web fonctionnel, attrayant et susceptible de créer de la valeur ajoutée
Créez votre premier tableau de bord
La simplicité, la clarté et la réactivité d’Adobe XD font de lui l’un des outils de référence en matière de création d’interface utilisateur, et par conséquent des sites web. D’ailleurs, vous pouvez maitriser son utilisation en seulement quelques jours pour devenir autonome et à l’aise avec le logiciel.
Ainsi, le développement de votre site doit commencer par la définition des bases à savoir un tableau de bord qui définit les éléments clés du projet. Sur Adobe XD, on parle plutôt d’Artboards pour désigner les ébauches qui vous aident à positionner les différents éléments du site (menus, contenus, galerie d’images, etc.).
Vous pouvez sélectionner le modèle d’artboard de site web et choisir la résolution souhaitée. Une taille de 1400 X 800 pixels (L x H) est ce qu’on recommande le mieux pour avoir une page web aux bonnes dimensions sur un écran de bureau moyen.
Entre autres, Adobe XD vous permet de manipuler n’importe quel élément grâce à la commande « glisser-déposer » pour vous aider à avoir un premier aperçu sur votre site en quelques minutes seulement.
Comprendre les outils d’Adobe XD
Pour que votre travail de conception sur Adobe XD soit efficace, vous devez vous familiariser avec ses outils de base. Si vous avez déjà utilisé d’autres logiciels Adobe, comme Photoshop ou Illustrator, la plupart de ces outils vous seront familiers :
- Le panneau de gauche comporte un outil de sélection et des outils carré, cercle, triangle et ligne. Comme sur Photoshop, vous disposez de l’outil crayon pour créer des lignes et des formes libres. La commande « T » indique, quant à elle, l’outil texte.
- Le panneau de droite permet de contrôler les éléments spécifiques de votre conception, une fois que vous les utilisez.
- L’outil Zoom diffère selon le modèle de votre ordinateur. Si vous utilisez un Mac, c’est la touche de commande + Scroll. Si vous bossez sur un Windows, le zoom avant se fait en appuyant sur la touche Ctrl + Scroll. Vous pouvez également utiliser la loupe du panneau de gauche pour zoomer sur un point précis de la toile. Cela vous aidera à travailler sur les détails de la page, à faire un zoom arrière pour avoir une vue d’ensemble et à vous assurer que tout est lisible et de la bonne taille.
Ajustez les alignements à l’aide de la grille
Une fois que tout est à peu près en place, vous devez procéder à des ajustements d’alignement plus précis pour que tout soit parfait. C’est ici que vous spécifiez la taille des images, l’espace que doit occuper le texte, l’emplacement du menu de navigation, la taille de la barre de recherche, etc.
Vous disposez des outils de grille pour obtenir une mise en page fixe et conserver l’organisation de vos éléments. Pour ce faire, cochez la case Grille, puis Disposition et sélectionnez l’option Disposition (colonne) ou Carré (papier millimétré). Ceci vous permet de superposer des colonnes sur vos artboards et de fluidifier votre travail.
Le nombre de colonnes, la largeur et la couleur sont personnalisables en fonction de vos besoins. Lorsque l’artboard est redimensionné, les colonnes s’adaptent également en conséquence. Pour avoir le meilleur rendu possible, configurez votre grille de manière à ce que le contenu du site se trouve au centre.
Ajoutez vos différents éléments de contenu
L’étape suivante consiste à compléter la mise en page générale de votre site web. C’est ici que vous ajoutez les éléments de menu, les en-têtes, les pieds de page, les images, le texte et d’autres éléments clés.
Commencez par créer un dossier contenant toutes vos images pour faciliter leur import et leur disposition sur le tableau de bord. Adobe XD met à votre disposition des guides automatiques (lignes bleues) pour vous aider à situer l’image de manière parfaitement centrée. Une fois ajoutée, n’oubliez pas de verrouiller l’image sur l’artboard pour éviter de la déplacer accidentellement.
Pour ajouter du texte, sélectionnez l’outil de saisie (T) et insérez votre contenu. Vous pouvez, ensuite, redimensionner le bloc de texte et modifier ses paramètres (taille, type de la police, couleurs, espacement, etc.).
Créez des interactions à l’aide de l’outil Prototypage
La création d’interactions consiste à ajouter des éléments tels que des liens pour vos menus, des animations et d’autres fonctionnalités qui créent une expérience utilisateur plus interactive. Ceci est possible via la fonction Prototype qui vous permet d’ajouter différents types de transitions en temps réel.
Vous pouvez sélectionner une option (Tap, Click, Hover, etc.) pour déclencher l’animation. Adobe XD dispose de la fonction « Auto-Animate » qui vous permet de définir des animations automatiques sur votre site web : par exemple, défiler jusqu’à une section plus basse dans la page.
Vous pouvez également utiliser la fonction « Ease » pour ajouter des effets d’assouplissement (comme Ease In ou Ease Out) afin de créer des animations de transition dans votre prototype.
Ajoutez une page web pour chaque page de destination de votre site web pour compléter votre projet, puis utilisez l’outil Prototype pour planifier l’interaction entre toutes les pages et la connexion de tous leurs éléments. Vous pouvez utiliser une grille de répétition pour concevoir plus rapidement et dupliquer des éléments tels que des listes déroulantes pour les FAQ.
Sollicitez un feedback
Une fois que votre conception est prête, présentez-la à vos collègues et à d’autres personnes tierces, notamment une sélection de votre cible d’utilisateurs. Cette étape vous permet de collecter le maximum de retours sur votre travail afin de détecter les zones d’amélioration avant de publier le site.
Mettez votre site en ligne
Après avoir effectué les modifications et les vérifications nécessaires, votre site est prêt à être publié. Pour cela, il vous suffit d’avoir un bon hébergeur qui prend en charge les sites développés sur Adobe XD.
Une fois le nom de domaine et l’espace d’hébergement réservés, vous n’avez qu’à télécharger tous les fichiers d’Adobe XD dans le répertoire principal de votre compte d’hébergement. N’hésitez pas à solliciter l’aide de l’assistance technique de votre hébergeur en cas de problème.
Lire aussi :
