Dans cette nouvelle formation en vidéo Webdesign, nous allons voir ensemble comment designer un site web OnePage qui aura pour but de présenter votre activité professionnelle et les services que vous proposez.

Nous utiliserons pour cela le logiciel de dessin vectoriel, Affinity Designer. Si vous en avez besoin, une version d'évaluation est disponible.

Au programme de ce tuto WebDesign sous Affinity Designer :

• Aborder un design avec une grille Bootstrap.
• Réfléchir au système de navigation & aux animations au scroll.
• Création d’un design complet, en partant du header jusqu’au footer.
• Imaginer une version responsive du site pour savoir ce qu’il faut designer réellement et ce qui se fera lors de l’intégration.
• Ranger le fichier dans des groupes bien nommés et dans l’ordre d’affichage.
• Faire apparaître les effets de hover sur la maquette pour faciliter le travail de l’intégrateur.
• Découverte du site une fois intégré pour introduire la seconde partie.

Les notions essentielles qui seront abordées dans ce tuto :

• Utiliser et améliorer une grille Bootstrap.
• Créer une palette de couleurs personnalisée.
• Ajouter des guides facilement.
• Intégrer les icônes de Font Awesome au logiciel.
• Créer des dégradés, et modifier leur direction, leur étalement.
• Utiliser plusieurs polices de caractères différentes en fonction des usages.
• Modifier des textes grâce à la rotation et le skew.
• Créer des masques sur des images.
• Appliquer des effets sur des images (noir & blanc, lumière tamisée…).
• Utiliser des ombres portées, les décaler visuellement, changer leur couleur.
• Créer un plan de travail et changer la couleur de l’arrière plan.
• Modifier les dimensions d’un document.
• Désactiver le correcteur d’orthographe.
• Jouer avec l’espacement des lettres, les hauteurs de ligne (...) pour améliorer la lisibilité des titres ou des paragraphes.
• Et bien d’autres choses encore !

A la fin de tuto, vous serez capable de designer un site OnePage structuré, et de l’améliorer en fonction de vos besoins et de votre activité professionnelle.

Vous trouverez dans les sources tout ce dont avez besoin pour refaire le design du site en même temps que la vidéo. C’est à dire : le fichier Affinity Designer avec la grille Bootstrap, les images, les polices, ainsi que la maquette finale. Le tuto a été enregistré sur la version 1.5 du logiciel.

Je reste bien évidemment disponible dans le salon d’entraide pour toutes les questions que vous pourriez avoir, pendant ou après la formation.