• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

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

J'ai tout compris !

Mis à jour le 03/09/2019

Profitez de l’espace

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

Vous avez pu étudier dans la partie précédente les maquettes de la version "aperçu mobile" de mon site photo sur les temples d'Angkor au Cambodge. Dans cette partie, nous allons voir comment j'ai ensuite profité de l'espace apporté par un écran d'ordinateur sur la version "aperçu desktop".

Maintenant que vous avez bien compris le principe de création d'une maquette sous Photoshop (et que les grilles et les outils vectoriels n'ont plus de secret pour vous, n'est-ce pas ?), partons à l'assaut des grands espaces ! Vous allez tout de suite vous rendre compte qu’avec un espace d’écran plus grand, nous allons vraiment pouvoir nous amuser à enrichir votre site. :)

Un nouvel espace de jeu

Pour ces maquettes, je suis parti d'un nouveau document Photoshop de 1200 x 1400 pixels, qui est une taille optimale pour la création d'un site desktop. Je lui ai également attribué une grille de 12 colonnes.

La version desktop de mon site
La version desktop de mon site

Des éléments qui se ré-organisent dans l'espace

Dans le chapitre "Pensez responsive design !" de la première partie, nous avons vu qu’il était important de comprendre comment votre site devait s'adapter suivant l’écran sur lequel il était affiché. Sur une largeur d’écran plus grande que celle du mobile, vous allez pouvoir créer des espace de respiration entre les blocs !

Vos éléments, après avoir investi la verticalité d’un écran mobile, vont pouvoir profiter du large horizon d’un écran d’ordinateur. C’est d’autant plus agréable si vous avez la chance d’avoir un bel écran 27 pouces (ou d'un bel écran Retina de 15 pouces ;)).

Un nouveau terrain de jeu s’offre à vous

Il va falloir gérer ces nouveaux aménagements. Souvenez-vous de cette image :

ca en fait des possibilité d'aménagements !
ça en fait des possibilité d'aménagements !

Vous venez de passer d’un appartement de 14 m2 bien aménagé par vos soins, à un appartement de 50m2 avec des possibilités nouvelles. Prêts à déballer les cartons ? :)

Dans le processus de conception de notre site responsive partant du mobile first, nous sommes dans l'étape que l'on appelle l'enrichissement progressif. Nous allons décupler l'expérience utilisateur.

Pour cela il est possible de rajouter des éléments et fonctionnalités plus sophistiqués que dans la "version mobile" (autrement dit, passer à Ikea faire le plein de fournitures...). C'est ce que nous verrons dans le chapitre "Enrichissez votre version aperçu desktop".

Mais entre la version mobile et desktop, vous pouvez déjà voir que je n'ai pas hésité dès à présent à réorganiser le contenu dont je disposais déjà :

n'hésitez pas à profiter de l'espace !
N'hésitez pas à profiter de l'espace !

De biens belles images

Nous allons profiter de l'espace avec les images !

Prenons l'exemple de mon image de couverture. Déjà en terme de ressenti émotionnel : sur la version "aperçu mobile", j'avais une belle image qui me donnait l'impression d'être sur une belle page de magazine de voyage. Sur la version "aperçu desktop", je vais complètement profiter de la vision panoramique de mon paysage du temple d'Angkor pour avoir la sensation d'y être vraiment !

De la même façon, j'aurai souvent à redimensionner des images pour la version "desktop", d'où l'intérêt de les avoir travaillées à part, dans une bonne qualité, lors de la création de la maquette mobile.

Et si je créais un motif ?

J'aimerais vous montrer comment ajouter simplement un motif au fond pour habiller mon site dans sa version desktop, et lui donner ainsi un peu plus de fun. Un fond blanc, comme sur la version mobile, peut lui donner un aspect un peu austère, surtout si mon site est vu sur un grand écran et que j'ai laissé beaucoup d'espaces de respiration. Je pourrais donc lui donner un peu plus de peps à certains endroits, en ajoutant un motif de fond.

Cela tombe bien, car c'est du coup l'occasion pour moi de vous montrer une autre astuce sous Photoshop, avant de passer au chapitre suivant :

Créer et utiliser un motif de fond

 

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