• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Le design d’éléments d’interfaces

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous allons maintenant nous attaquer à la partie créative pour la mise en place de notre première maquette ! Je sens bien que vous trépignez d'impatience.

C'est compréhensible mais armez-vous d'une bonne dose de patience car vous verrez que ce tavail en demande beaucoup. Il arrive assez fréquemment dans un projet, de devoir tester plusieurs solutions avant de le mener à bien. Gardez en tête que ce qui importe est de réussir à concrétiser votre projet, et bien sûr ... de vous amuser ! :D

La maquette : une réflexion en constante évolution

Comme je vous l'ai déjà dit, nous utiliserons Bootstrap à la fin de ce cours pour donner vie à notre maquette. Et afin de vous faciliter le processus d'intégration, je me suis moi-même calé sur un gabarit assez simple à intégrer. Dans mon processus de création, j’ai donc finalement dû prendre en compte ce critère et cela m'a conduit à... Réadapter mon projet initial.

Mais vous verrez que cela ne bridera en rien notre créativité. Bien au contraire, sachez qu’être designer, c’est trouver des solutions à partir de contraintes ! 

Revenons sur mon document de 1080x1920 pixels où j'ai déjà posé ma grille. Je vais tout d'abord faire une choses essentielle :

SAUVERGARDER !

Sachez que cet appel à sauvegarder est très important, même au tout début du travail. Et je ne plaisante pas ! Mes étudiants qui débutent oublient souvent de faire ce geste qui est pourtant très simple. Mais il arrive qu'au bout d'une heure de création intense, un malheur arrive : le PC plante.

C'est souvent la catastrophe ! (Et croyez-moi, ça n'arrive pas qu'aux autres... :-°). Alors, vous aussi, adoptez ce réflexe. Je sauvegarde toutes les 2 manips, soit toutes les 10 secondes environ, avec un simple raccourci ctrl+S (ou cmd+S).

Faisons maintenant le point sur le processus suivi pour mon site photo.

  • Hormis les souvenirs de ce voyage que j'ai bien en tête, je vais reprendre mes esquisses de structures et mes wireframes créés sur Balsamiq et les mettre à portée de vue.

  • Comme je le disais plus haut, il est tout à fait normal de faire évoluer votre maquette. Entre le début où votre brillant cerveau a eu l'idée, vos wireframes sur balsamiq, les maquettes sur Photoshop et jusqu'à l'intégration finale, vous ferez des milliers d'aller-retour. C'est comme être continuellement dans le prototypage. Personnellement j'aime beaucoup cette phase de "laboratoire créatif".

J'ai donc repris mes recherches, et maintenant que je sais que je vais partir sur une seule page au lieu de plusieurs pages (pour pouvoir rapidement intégrer mon site photo sur Bootstrap), je vais enfin pouvoir m'attaquer à la maquette !

Présentation de la maquette

Je vais à présent vous montrer mes maquettes faites sur Photoshop. Le but n'est pas de vous décortiquer chaque étape de création, car normalement vous avez déjà quelques bases sous Photoshop, mais vous expliquer comment je procède sur mes maquettes et comment je peux créer certains éléments uniquement avec Photoshop.

Mon site photo tiendra sur une seul page
Mon site photo tiendra sur une seule page : il suffit de faire défiler la page pour avoir accès au site entier, chaque partie étant positionnée l'une sous l'autre.

Et voici les maquettes des différentes parties qui composeront mon site :

Pour commencer la partie Home-page
Pour commencer la partie home-page, très graphique.

 

Le début de la page d'introduction, et du carnet de voyages
Le début de la page d'introduction et du carnet de voyages

La partie galerie et la partie contact
La partie galerie et la partie contact (les coordonnées sont celles de l'ICAN)

Vous pouvez voir que ces maquettes sont une représentation graphique précise de mon site, et cela va beaucoup m'aider lors de l'intégration dans Bootstrap ! Je n'aurais plus qu'à traduire tout mon design en code, exporter les éléments que j'ai créés directement sous Photoshop et les intégrer à mon site.

Plutôt qu'un pas à pas long et fastidieux, je vais vous donner quelques petites astuces que j'utilise souvent pour réaliser mes maquettes... Et ensuite vous donner les fichiers sources de mon projet ! Vous serez ainsi libres de naviguer dans la maquette entière.

J'intègre ces éléments au fur et à mesure dans mon document principal pour mettre en forme la maquette (et vérifier que l'ensemble est harmonieux). Mais travailler comme cela me permet d'avoir à portée de main certains éléments en qualité maximale (comme mes photos de voyage par exemple), pour pouvoir créer rapidement et proprement des versions adaptées à d'autres formats. Cela sera très pratique pour créer la seconde maquette version "desktop" sans repartir de zéro, et faciliter ensuite l'intégration.

La grille et les repères 

Sur la capture d'image suivante, vous pouvez voir qu'en plus de la grille de 12 colonnes,  j'utilise d'autres repères qui m'aident à "enrichir" ma grille sur ma maquette. 

Ces repères supplémentaires ne seront pas pris en compte lors de l'intégration en code. Ils servent uniquement à la composition visuelle sur Photoshop.

Je peux ainsi positionner avec plus de précision chaque élément de ma composition, qu'ils soient créés directement dans mon document, ou qu'ils viennent d'autres fichiers psd. 

Grâce aux règles, vous pouvez tracer des repères supplémentaires
Grâce aux règles, vous pouvez tracer des repères supplémentaires

Pour afficher les règles (que vous voyez à gauche et au dessus du document) et créer de nouveaux repères, il suffit de procéder de la façon suivante :

  • Afficher les règles en faisant un ctrl+R sur PC, ou cmd+R sur Mac.

Ensuite, pour créer des repères horizontaux :

  • Posez le curseur de votre souris sur la règle située en haut.

  • Cliquez sans relâcher sur le bouton gauche de votre souris et glisser vers le bas pour créer votre repère.

  • Relâchez le bouton gauche de votre souris dès que votre repère est positionné là où vous le souhaité.

  • Vous pouvez repositionner ce repère  en le sélectionnant de nouveau. 

Pour créer  des repères verticaux, il suffira de procéder de la même façon mais en partant de la règle situé à gauche. 

Organisez vos calques

Vous allez vite vous rendre compte qu'il est primordial d'organiser vos calques. Si vous avez des modifications importantes, vous trouverez plus facilement vos éléments à modifier s'ils sont bien rangés. Car un psd peut rapidement contenir une bonne cinquantaine de calques ! Les ranger, c'est éviter de jouer à "Où est Charlie ?" un jour de rush. ;)

Pour cette raison, je crée souvent des groupes de calques correspondant aux différentes parties, puis sous-parties, de ma maquette.

Pour créer un groupe de calques :

  • Cliquez sur l'icône en forme de dossier dans la fenêtre des calques. N"hésitez pas à bien nommer vos éléments, de façon explicite !

Le fenêtre des calques
Créer un nouveau groupe de calques

Voici par exemple à quoi ressemble très vite l'arborescence de mon projet de site photo :

voici comment j'ai rangé mes groupes de calques pour mon site photo
L'arborescence de mes groupes de calques

J'adore les formes vectorielles (et les sushis !)

Je reviens une nouvelle fois sur les formes vectorielles que j'affectionne tant. C'est avec elles que j'ai pu réaliser les éléments de mon interface comme :

  • Le bouton du "menu hamburger" avec simplement 3 rectangles à bords arrondis.

je règle la taille de mes arrondis  dans la fenêtre de
Pour mes rectangles aux bords arrondis, je règle la taille des arrondis dans la fenêtre "Propriétés de forme dynamique"
  • Le fond noir où sont posés mon logo et le menu, en changeant juste l'opacité à 50% dans la fenêtre des calques (menu déroulant "Opacité"). De cette façon je laisse apparaître par transparence l'image en fond.

Vous pouvez changer l'opacité d'un calque juste en changeant sa valeur dans ce menu
Vous pouvez changer l'opacité d'un calque juste en changeant sa valeur dans ce menu

En résumé, dès qu'il s'agit de formes géométriques ou d'icônes, j'utilise des formes vectorielles.

C'est donc encore le cas par exemple, pour le petit personnage qui fait partie de mon logo :

il est drôle quand même avec sont petit sourire ce petit appareil photo!
Sympathique ce petit appareil photo souriant !

Pour ce personnage un peu plus complexe, je suis tout d'abord parti d'un simple tracé de rectangle vectoriel, avec lequel j'ai joué sur les propriétés dans le panneau des propriétés de forme dynamique :

vous pouvez voir que j'ai mis 30 px en arrondi 
J'ai ajouté un arrondi de 30 px sur les quatre coins du rectangle

Bien sûr, mon personnage est rangé dans un groupe de calques "logo", car il est formé en plus de ce rectangle :

  • de 2 cercles en formes vectorielles pour former l'oeil,

  • d'un sourire que j'ai réalisé en traçant d'abord un autre cercle plus grand que les précédents. Puis, avec la flèche blanche, j'ai supprimé plusieurs points d'ancrage pour ne garder qu'un quart de cercle.

  • de pieds formés tout simplement de rectangles arrondis. 

Reconnaissez-vous les différentes formes vectorielles composant le logo ?
Reconnaissez-vous les différentes formes vectorielles composant le logo ?

Et voilà le tour est joué !

Travaillez vos photos

Pour ma super photo qui me sert de page de couverture sur la home-page, je suis partie d'une de mes photos de voyage que j'ai retravaillée.

J'ai d'abord appliqué un flou afin de laisser le texte qui viendra par dessus bien lisible. Pour cela j'ai utilisé un "flou profondeur de champs".

Le filtre flou profondeur de champs
Le filtre "Flou de profondeur de champs"

Ensuite j'ai placé de nombreux curseurs pour gérer mes zones de flous. Vous voyez qu'au niveau de la tête, j'ai un curseur avec une valeur de flou de zéro. C'est comme si j'avais pris la photo avec un super objectif !

Il suffit de jouer sur les jauges des curseurs pour jouer sur l'intensité du flou
Il suffit de jouer sur les jauges des curseurs pour jouer sur l'intensité du flou

Cette image, je l'ai sauvergardée dans un fichier Photoshop à part de 1920x1272, qui collera avec les dimensions d'images de "background" que j'intégrerai dans Bootstrap.

Mais bien sûr je l'ai intégrée, redimensionnée et même rognée pour qu'elle s'adapte bien dans ma maquette "mobile" (et plus tard dans ma maquette "desktop"). Pour redimensionner votre calque, n'oubliez pas d'appliquer une transformation manuelle (dans le menu "Édition" ou avec le raccourci Ctrl+T ou cmd+T).

J'importe beaucoup de fichiers psd sur mon document de mise en page et bien sûr je les adapte
J'importe beaucoup de fichiers psd sur mon document principal de mise en page, et bien sûr je les adapte ensuite à la taille souhaitée

Téléchargez la maquette

Comme promis, je vous laisse à présent télécharger ma maquette pour étudier de près chacun des éléments qui vous intéressent !

>> Télécharger la maquette mobile

Dans la prochaine partie, nous allons voir comment profiter de tout l'espace qu'offre la maquette version desktop ! Mais je vous conseille avant cela de passer du temps sur cette première maquette mobile, car si elle est bien réalisée, la suivante sera beaucoup plus facile à faire...

Exemple de certificat de réussite
Exemple de certificat de réussite