Aller au contenu principal
/Documentation

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 Mockup
Ouvrir la version interactive

Qu'est-ce qu'un Desktop Mockup ?

Un projet Desktop Mockup affiche vos captures sur un ordinateur portable 3D dont l'écran s'ouvre au chargement de la page. 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. Importez cinq captures et vous obtenez 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 pour passer d'un écran à l'autre
  • Faites glisser l'arrière-plan pour tourner l'ordinateur, et activez les boutons de zoom de la barre pour lire les petits textes
  • Des hotspots partout sur une capture, qui défilent avec la page
  • Un écran en direct : collez un lien et la vraie page se charge dans l'écran
  • Un compteur d'écrans qui affiche aussi le titre de l'écran, plus une barre de liens

Idéal pour

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

Fichiers et limites

  • Des images ou des PDF. Une image correspond à un écran, et chaque page d'un PDF devient un écran.
  • Un PDF peut compter jusqu'à 200 pages et peser jusqu'à 50 Mo. Ses liens deviennent des hotspots sur les écrans où ils se trouvaient : un lien web ouvre la page, un lien interne au document mène à l'écran correspondant.
  • Les captures sont ajustées à la largeur de l'écran. Une capture de plus de 2048 px de large, ou très longue, est réduite proportionnellement et jamais recadrée : une capture de page entière garde toute sa longueur.
  • Importez plusieurs fichiers à la fois, ou utilisez Importer depuis une URL pour récupérer une image à partir d'une adresse web.
  • Ajoutez un écran en direct pour charger une vraie page web dans l'écran, au lieu d'une image de cette page. La page doit autoriser son intégration, et l'éditeur le vérifie quand vous l'ajoutez.
  • Les fichiers importés comptent dans le stockage de votre espace de travail : 50 Mo en Free, 10 Go en Pro, 25 Go en Business.

Créer un Desktop Mockup

  1. 1. Importez vos captures

    Ouvrez l'onglet Contenu et ajoutez une capture de page entière par écran, ou un PDF.

    • Capturez à une largeur desktop, autour de 1440 px, et laissez l'image aussi haute que la page
    • Ou ajoutez un écran en direct avec le lien d'une page

  2. 2. Ordonnez et nommez les écrans

    Faites glisser un écran pour le déplacer. Donnez un titre à chacun : les titres s'affichent dans le compteur d'écrans, qui doit donc rester activé si vous voulez qu'on les voie.

  3. 3. Ajoutez des hotspots

    Dans l'onglet Hotspots, placez des zones cliquables sur une capture pour ouvrir un lien, aller à un autre écran, afficher une info-bulle ou ouvrir une pop-up. Un hotspot est ancré à l'image entière : il défile donc avec la partie de la page à laquelle il appartient.

  4. 4. Réglez l'appareil et l'écran

    Dans Paramètres, sous Général, choisissez la couleur de l'ordinateur et l'angle de l'écran, ajustez l'écran et réglez le défilement.

  5. 5. Partagez-le

    Enregistrez, puis copiez le lien ou le code d'intégration depuis l'onglet Partager.

Paramètres

Tout ce qui suit se trouve dans l'onglet Paramètres de l'éditeur, classé sous le sous-onglet où vous le trouverez : Général, Scène ou Caméra.

Général

Les informations de base (le titre et la description du projet) figurent en haut pour tous les types. En dessous viennent les réglages de l'objet lui-même.

Appareil

Couleur de l'appareil : le blanc conserve la finition aluminium d'origine de l'ordinateur, et toute autre couleur teinte le boîtier, jamais l'écran. Angle de l'écran, de 0 à 120 (90 par défaut), règle l'ouverture de l'écran : 0 le ferme, 90 le met droit, et au-delà de 90 il s'incline vers l'arrière comme un ordinateur posé sur un bureau.

Écran

Arrière-plan de l'écran remplit l'écran derrière votre capture, ainsi que les bandes au-dessus et en dessous d'une capture courte. Luminosité (0,2 à 1,6), contraste (0,5 à 2) et saturation (0 à 2) démarrent tous à 1, soit l'image exactement telle qu'importée. Une saturation de 0 l'affiche en niveaux de gris. Afficher le compteur d'écrans, activé par défaut, affiche le titre et la position, par exemple Tarifs · 2 / 5.

Défilement

Vitesse de défilement (0,25 à 3, 1 par défaut) est la distance parcourue par la capture pour un cran de molette. Lissage du défilement (0,02 à 0,5, 0,12 par défaut) est la rapidité avec laquelle elle rattrape la molette : une valeur haute suit la molette de près, une valeur basse glisse jusqu'à l'arrêt.

Scène

Ce qui entoure l'objet, et la finition Réalisme appliquée à toute l'image.

Arrière-plan

Une couleur unie, un dégradé ou votre propre image (avec un flou facultatif), plus un motif facultatif par-dessus.

Réalisme

Un grain argentique sur l'image (de 0 à 100, 15 par défaut) et la part de ce grain qui tombe sur l'écran, un grain fixe ou animé, un vignettage, l'ombre que l'ordinateur projette sur sa surface (avec son intensité et sa douceur), et Reflet de l'écran, la quantité de reflets sur la vitre (0 pour un écran mat, 40 par défaut).

Caméra

Le point de départ de la vue, et la liberté qu'ont les visiteurs pour la déplacer.

Caméra

Zoom initial, de 0,5 à 2, sans que la vue s'ouvre jamais assez près pour que l'appareil sorte du cadre. Zoom minimum (0,3 à 1) et Zoom maximum (1 à 3) limitent les boutons de zoom de la barre : ils n'apparaissent donc que lorsque ces boutons sont activés. Rotation horizontale (jusqu'à 75 degrés de chaque côté) et Inclinaison verticale (jusqu'à 40) orientent la caméra. Faire pivoter par glissement, activé par défaut, permet aux visiteurs de tourner l'ordinateur en faisant glisser l'arrière-plan. Réinitialiser rétablit le zoom, ses limites et les deux angles, et laisse Faire pivoter par glissement tel quel.

Hotspots, menu et sons

À côté de Fichiers, l'onglet Contenu propose trois autres sous-onglets : Hotspots, Menu et Sounds.

Hotspots

Les hotspots se placent partout sur une capture. Ils sont ancrés à l'image entière, donc ils défilent avec la page, et ils restent utilisables au doigt sur un téléphone.

Un hotspot peut mener à une autre page, ouvrir un lien, afficher une info-bulle ou ouvrir une pop-up. Fonctionnement des hotspots

Sounds

Tous les types de projet peuvent avoir une musique de fond. Ajoutez des pistes en MP3, M4A, WAV, OGG ou FLAC, de 20 minutes maximum chacune. Elles sont compressées à environ 1 Mo par minute et comptent dans le stockage de votre espace de travail. Vous pouvez répéter la liste de lecture, régler le volume et afficher un petit lecteur à côté de la barre. La lecture automatique démarre au premier appui ou à la première touche du visiteur, car les navigateurs bloquent le son jusque-là.

Filmez-le dans Studio

Tous les types de projet peuvent être filmés dans Studio. Ouvrez l'onglet Studio du projet, choisissez des mouvements de caméra pensés pour ce type, et transformez le projet en vidéo, en GIF, en image fixe ou en page à part entière à partager. Studio lit les fichiers et les paramètres de ce projet : ce que vous réglez ici s'y retrouve. Lire la documentation Studio · Voir les mouvements de caméra de chaque type

Limites actuelles

  • L'ordinateur portable est le seul appareil de cette page. Pour un téléphone, créez plutôt un Mobile Mockup. Il n'y a pas de tablette.
  • Arriver en bas d'un écran ne fait pas passer au suivant. Changer d'écran est toujours une action volontaire.
  • Un seul écran est affiché à la fois.
  • Sur un écran en direct, les visiteurs font défiler la vraie page dans l'écran, et les hotspots restent là où vous les avez placés au lieu de défiler avec la page.
  • Dans Studio, un écran en direct apparaît comme un simple arrière-plan d'écran, car la vraie page ne peut pas être enregistrée.

Conseils

  • 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.
  • Accordez l'arrière-plan de l'écran au 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.
  • Réduisez la vitesse de défilement quand une page est très longue.
  • Vérifiez sur un téléphone : l'ordinateur y est plus petit, et les petits textes peuvent devenir illisibles.