Créer un site OnePage pour présenter votre activité professionnelle - Partie 1 : LE WEBDESIGN
ERROR
00:00
00:00

TUTO Créer un site OnePage pour présenter votre activité professionnelle - Partie 1 : LE WEBDESIGN

Adrien Gazaix
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Intro, grille bootstrap et palette de couleurs
Leçon 2
Partie ACCUEIL : logo, image de fond et menu
Leçon 3
Partie A PROPOS : icones, paragraphes, bouton
Leçon 4
Partie EQUIPE : images, masques, et opacité
Leçon 5
Partie DEVISE : parallax, masque, ombre portée
Leçon 6
Partie FOLIO : icones, masques, formes, et effets
Leçon 7
Partie CONTACT : icones, dégradé, formes

Plan détaillé du cours

Leçon 1Intro, grille bootstrap et palette de couleurs
14m48s
Leçon 2Partie ACCUEIL : logo, image de fond et menu
28m32s
Leçon 3Partie A PROPOS : icones, paragraphes, bouton
11m56s
Leçon 4Partie EQUIPE : images, masques, et opacité
12m02s
Leçon 5Partie DEVISE : parallax, masque, ombre portée
05m41s
Leçon 6Partie FOLIO : icones, masques, formes, et effets
15m41s
Leçon 7Partie CONTACT : icones, dégradé, formes
12m42s
Leçon 8Design de la version MOBILE : plans de travail, icone burger, dégradé
18m01s
Leçon 9Conclusion et découverte du design une fois intégré
12m03s

Aperçus

Avis des apprenants

Détail des avis
141
Apprenants
11
Commentaires
4,8/5
Note moyenne
5/5
8
4/5
3
3/5
0
2/5
0
1/5
0
Membre-4536-2036
Membre-4536-2036
Publié le 29/01/2022
belle maquette bon tuto bien expliqué merçi
Adrien Gazaix
Adrien Gazaix
Merci pour le retour 😉
Lukeluadiallo Lambisho
Lukeluadiallo Lambisho
Publié le 12/02/2020
Tre bien dispense le son image de tre bonne qualite
Jean Pierre Lebel
Jean Pierre Lebel
Publié le 13/04/2018
5 étoiles sans aucune hésitation. Super tuto! Je commence la seconde partie avec impatience. Merci ++

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Affinity Designer

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données