Desktop Mockup
Placez les captures de votre site ou de votre prototype sur l'écran d'un ordinateur portable en 3D. Les visiteurs font défiler la page dans l'écran et passent d'une capture à l'autre avec les flèches du clavier ou la barre de navigation.
Créer un Desktop MockupQu'est-ce qu'un Desktop Mockup ?
Un projet Desktop Mockup affiche vos captures sur un ordinateur portable 3D dont l'écran est déjà ouvert. Une image correspond à un écran. Les images hautes ne sont pas réduites pour tenir : le visiteur les fait défiler dans l'écran, exactement comme il ferait défiler la vraie page. Cinq captures donnent cinq écrans, que le visiteur parcourt un par un.
- Une capture haute par écran, qui défile dans l'écran de l'ordinateur
- Molette, pavé tactile ou glisser sur l'appareil pour faire défiler l'écran courant
- Flèches du clavier et barre de navigation pour passer d'un écran à l'autre
- Faites glisser le fond pour tourner l'ordinateur, et activez les boutons de zoom de la barre pour lire les petits textes
- Les hotspots se placent partout sur la capture, et les deux mockups les dessinent sur l'écran
- Un compteur d'écrans qui affiche aussi le titre de l'écran, en plus de la barre de liens
- Fonctionne sur téléphone et tablette, où le glisser remplace la molette
Meilleurs cas d'usage
Landing pages
Montrez une landing page entière qui défile comme elle défile vraiment, sans envoyer personne sur une URL en ligne
Visites de produit
Une fonctionnalité par écran, dans l'ordre où vous voulez qu'on les découvre
Revues de prototype
Partagez vos exports de design avec un client et laissez-le parcourir tout le parcours
Présentations client
Présentez un site que vous avez réalisé dans une proposition ou une étude de cas
Portfolios de web design
Rassemblez les sites que vous avez conçus, un écran chacun
Captures d'application
Montrez à quoi ressemble une application web sans demander d'inscription
Créer un Desktop Mockup
Étape 1 : Importez vos captures
Dans l'éditeur de projet, ouvrez l'onglet Contenu et ajoutez une image par écran :
- Tout format d'image que votre navigateur ouvre, JPG, PNG et WebP compris. Un PDF fonctionne aussi, et chaque page devient un écran
- Une image correspond à un écran, donc une capture de page entière s'importe telle quelle, sans recadrage
- Importez plusieurs fichiers en une fois, ou importez-en un depuis une URL
- Un PDF est limité à 200 pages et 50 Mo par fichier, et les liens qu'il contient deviennent des hotspots sur l'écran où ils se trouvaient
- Les captures sont optimisées automatiquement pour un chargement rapide
Capturez à une largeur desktop, autour de 1440px, et laissez l'image aussi haute que la page. La largeur est ajustée à l'écran et la hauteur est ce que le visiteur fait défiler.
Étape 2 : Ordonnez et nommez les écrans
L'ordre dans l'onglet Contenu est l'ordre dans lequel les visiteurs les parcourent :
- Faites glisser un écran pour le déplacer
- Donnez un titre à chaque écran : il s'affiche dans le compteur, qui doit donc rester activé pour qu'on le voie
- Supprimez un écran dont vous ne voulez plus, ou effacez-les tous d'un coup depuis le menu Contenu
- Ajoutez d'autres écrans à tout moment
Étape 3 : Réglez l'écran et le défilement
Définissez l'apparence de l'écran et son mouvement dans l'onglet Paramètres :
- Couleur de l'appareil : teinte le corps de l'ordinateur portable, le blanc étant le modèle tel qu'il a été construit
- Fond d'écran : la couleur derrière votre capture
- Luminosité, contraste et saturation de l'écran : les trois démarrent à 1, l'image exactement telle que vous l'avez importée
- Compteur d'écrans : affiche ou masque la position et le titre
- Vitesse et amortissement du défilement : la distance parcourue par un cran de molette et la rapidité avec laquelle il s'arrête
Étape 4 : Ajoutez des hotspots
Placez des hotspots sur une capture pour ouvrir un lien, aller à un autre écran ou afficher une note. Un hotspot est ancré à l'image entière et non à la partie visible, il reste donc sur la section de la page à laquelle il appartient pendant que le visiteur défile. Les deux mockups les dessinent sur l'écran, et ils restent cliquables au doigt sur un téléphone.
Paramètres du Desktop Mockup
L'écran et le défilement ont leurs propres sections dans l'onglet Paramètres. Les fonds, la barre de liens, le zoom et la rotation utilisent les mêmes panneaux que les autres types de projet.
Couleur de l'appareil
Teinte le corps de l'ordinateur portable. Il démarre en blanc pur, le modèle exactement tel qu'il a été construit, et toute autre couleur teinte cette finition au lieu de la repeindre.
Fond d'écran
La couleur peinte derrière votre capture. Elle remplit aussi l'espace au-dessus et en dessous quand l'image est plus courte que l'écran, choisissez donc une teinte proche du fond de votre page.
Luminosité de l'écran
À quel point l'écran paraît allumé, de 0,2 à 1,6. Il démarre à 1, c'est-à-dire exactement les pixels que vous avez importés : en dessous l'écran s'assombrit, au-dessus il sature comme un téléphone à pleine luminosité.
Contraste de l'écran
Appliqué à la capture au moment du rendu, de 0,5 à 2, en démarrant à 1 pour l'image intacte. Montez-le un peu quand un design plat perd ses contours sur un petit écran.
Saturation de l'écran
La même idée pour la couleur, de 0 à 2 et en démarrant à 1. À 0 la capture passe en niveaux de gris, une façon rapide de montrer un wireframe sans en exporter un.
Compteur d'écrans
Un petit badge avec le titre de l'écran devant et la position ensuite, par exemple Tarifs · 2 / 5, ou seulement 2 / 5 quand l'écran n'a pas de titre. C'est là que les titres apparaissent, donc le désactiver les masque aussi, ce qui convient pour une capture unique.
Vitesse de défilement
La distance parcourue par le contenu à chaque cran de molette. Réduisez-la sur une page très longue pour que le visiteur puisse s'arrêter où il veut.
Amortissement du défilement
La rapidité avec laquelle le contenu rattrape la molette. Les valeurs basses freinent en douceur, les valeurs hautes réagissent au quart de tour.
Fond de la scène
Le décor derrière l'ordinateur : une couleur unie, un dégradé, un motif ou votre propre image.
Comment les visiteurs naviguent
Il y a deux mouvements distincts. Le contenu bouge dans l'écran, et les écrans changent un par un. L'un ne déclenche pas l'autre.
Faire défiler dans l'écran
La molette, le pavé tactile ou un glisser qui commence sur l'ordinateur déplacent la capture courante vers le haut et vers le bas. Les flèches Haut et Bas et les touches Page haut et Page bas font la même chose.
Changer d'écran
Gauche et Droite passent d'un écran à l'autre, Début et Fin vont au premier et au dernier, et la barre de navigation propose les mêmes boutons. Arriver en bas d'un écran ne passe pas au suivant, et chaque écran s'ouvre en haut.
Tourner l'ordinateur
Un glisser qui commence sur le fond tourne l'appareil jusqu'à 75 degrés à gauche et à droite et 40 degrés vers le haut et vers le bas, puis il revient de face au relâchement. Un glisser qui commence sur l'ordinateur fait défiler au lieu de tourner.
Zoom
Les boutons de zoom rapprochent la caméra, c'est ainsi qu'un visiteur lit les petits textes d'une capture. Ils sont désactivés tant que vous ne les activez pas dans l'onglet Menu. La molette fait toujours défiler la capture, elle ne zoome jamais.
Ce qu'elle ne fait pas
Une partie est voulue, l'autre n'est pas encore construite. Dans les deux cas, mieux vaut le savoir avant d'enregistrer une démo :
- L'ordinateur portable est le seul appareil de cette page. Pour un téléphone, créez un Mobile Mockup. Il n'y a pas encore de tablette.
- L'écran est déjà ouvert. Il n'y a pas d'animation d'ouverture.
- Arriver en bas d'un écran ne passe pas au suivant. Changer d'écran est toujours une action volontaire.
- Un seul écran est affiché à la fois. Les autres ne sont pas visibles autour.
- La section Écran teinte la coque de l'ordinateur portable, mais la finition elle-même est intégrée au modèle.
Conseils pour de bons Desktop Mockups
- Exportez une capture de page entière par écran plutôt que d'assembler des morceaux
- Gardez la même largeur pour toutes les captures afin que le contenu ne change pas de taille d'un écran à l'autre
- Alignez le fond d'écran sur le fond de votre page pour qu'une capture courte ne repose pas sur une bande blanche
- Nommez les écrans d'après ce qu'ils montrent, pas Écran 1 et Écran 2
- Placez les hotspots là où un visiteur cliquerait sur le vrai site
- Réduisez la vitesse de défilement quand la page est très longue
- Testez sur téléphone : l'ordinateur est plus petit et les petits textes peuvent devenir illisibles