Diapositives
Design de présentation produit
Un outil pour agents en 3 slides.
Idées de design pour
- Présentations de vision produitIntroduire une idée produit avant d'expliquer ses interfaces.
- Présentations de conceptsRelier une thèse générale à un écran précis.
- Pitchs de flux de travail d'équipeMontrer comment le travail individuel s'étend à des opérations partagées.
Points forts de la présentation
- Trois changements d'échellePasser d'une thèse d'espace de travail à un téléphone puis à une salle de contrôle.
- Un téléphone accompagné de son explicationAssocier le concept d'interface à trois points d'appui courts.
- Commandes de présentation visiblesLe deck original inclut les commandes flèches, Auto et Full.
Aperçu de la conception de présentation produit
1 / 3Une histoire produit en trois diapositives
Le deck ne présente pas trois fonctionnalités accompagnées de trois captures d'écran quasi identiques. Il fait varier l'échelle de l'argumentation : une thèse d'espace de travail générale, une interface mobile, puis une vue opérationnelle plus large. La diapositive centrale est le pivot. Sans elle, le saut d'une affirmation abstraite à une salle de contrôle dense demanderait au public d'accepter le produit avant d'avoir vu un exemple accessible.
| Diapositive | Contenu visible | Rôle narratif |
|---|---|---|
| Thèse d'ouverture | Un titre, un aperçu de l'espace de travail et la séquence Prompt → Compose → Preview → Ship. | Nommer le changement proposé et donner au public un processus court à retenir. |
| Application mobile compagnon | Une interface téléphone accompagnée de trois explications du concept. | Réduire la portée à un seul écran afin que l'idée produit soit plus facile à discuter. |
| Salle de contrôle d'entreprise | Pistes de lancement, transferts d'agents, validations et chronologie d'activité. | Montrer comment la même idée pourrait soutenir un travail coordonné au sein d'une équipe. |
Trois métriques et deux couches de navigation
Le téléphone contient à la fois des onglets Today / Agents / Exports en haut et une navigation Home / Files / Agents / Export en bas. Il s'agit de deux niveaux d'interface distincts, mais Agents apparaît dans les deux. C'est un détail utile à aborder dans une présentation produit : la rangée supérieure filtre-t-elle la vue actuelle, ou amène-t-elle l'utilisateur vers une autre destination ?
Ne pas laisser les libellés répétés masquer le modèle d'interaction
La rangée du bas ressemble à une navigation à l'échelle de l'application ; la rangée supérieure s'apparente davantage à des onglets de niveau vue. Le deck ne résout pas entièrement leur relation. Un affinement devrait nommer la portée de chaque couche — par exemple, une zone Agents globale par opposition à un filtre pour l'activité sur la page en cours — avant d'ajouter d'autres écrans.
Trois métriques décrivent trois choses différentes
12 Active Artifacts est un comptage, 4× Review Velocity est une comparaison, et 86% Ready to Export est une proportion. Elles peuvent partager une ligne visuelle, mais elles ne peuvent pas partager une définition implicite commune. Le comptage nécessite une portée, le multiplicateur une référence de base, et le pourcentage un dénominateur. Aucune de ces définitions manquantes ne peut être fournie par le traitement visuel seul.
Quatre types d'informations dans la salle de contrôle
La diapositive finale place quatre cartes de contexte sur la gauche, un diagramme de routage d'agents au centre, des comptages opérationnels à droite et l'activité récente en bas. Ce ne sont pas des widgets de tableau de bord interchangeables. Chacun représente une relation différente, et la présentation devient plus utile lorsque l'orateur explique ces différences.
| Structure visible | Ce qu'elle représente | Ce qu'il faut expliquer dans le pitch |
|---|---|---|
| Brand, Legal, Localization et Assets | Quatre ensembles de contraintes ou de matériaux de référence. | L'endroit où le flux de travail obtient les règles, et non quatre tâches consécutives. |
| Briefs and Product Data vers Agent Router | Entrées connectées à un diagramme d'orchestration. | Ce qui circule entre les nœuds et quelle partie est uniquement conceptuelle. |
| 42 Queued, 11 Pending, 3 Risks, 7 Ready | Un instantané de l'état opérationnel. | Ce que chaque comptage inclut ; des libellés différents n'en font pas des totaux comparables. |
| Layout, Brand QA, Locale et Export Activity | Agents nommés associés à des actions récentes. | Ce qui s'est produit le plus récemment, séparément de ce qui nécessite encore de l'attention. |
Une référence de présentation pour les démos de hackathon
Il s'agit d'un exemple officiel du hackathon OpenDesign, et non d'une soumission de participant. Sa structure en trois diapositives est une contrainte utile pour une démo : un argument, une interface à examiner et une explication du flux de travail global. La densité de la présentation ne devrait augmenter qu'une fois que le public dispose d'un exemple concret auquel se raccrocher.
Ce que démontre la présentation
L'artefact fourni est un deck HTML animé comportant trois diapositives et des commandes de présentation. L'application mobile compagnon et la salle de contrôle d'entreprise sont des concepts au sein de ce deck, et non la preuve d'applications livrées en production. L'ouverture de l'aperçu complet permet d'inspecter la présentation elle-même ; elle ne connecte pas les interfaces à un flux de travail de production.
Comment créer une conception de présentation produit dans OpenDesign
Définir trois diapositives avec des rôles différents
Commencez par la question centrale du public, puis assignez un objectif distinct à chaque diapositive. Gardez l'argument d'ouverture suffisamment court pour pouvoir l'expliquer avant de montrer l'interface.
Invite suggéréeCrée une conception de présentation produit en trois diapositives pour un espace de travail de conception assisté par agent. La première diapositive introduit l'idée et un flux de travail en quatre étapes. La deuxième associe un concept de consultation mobile à trois courtes explications. La troisième montre une salle de contrôle d'équipe avec des validations et l'activité récente. Utilise des données d'exemple clairement libellées, des compositions statiques lisibles et des commandes de diapositives manuelles. N'implique pas que les interfaces conceptuelles sont des produits livrés en production et n'invente pas de résultats de performance.
Affiner l'écran et son explication ensemble
Demandez à OpenDesign de rendre les libellés du téléphone lisibles tout en maintenant l'argument d'appui à l'extérieur de l'appareil. Supprimez toute phrase qui ne fait que répéter un libellé. Vérifiez le deck à la taille à laquelle vous le présenterez réellement, et pas uniquement dans une capture d'écran en pleine résolution.
Vérifier le deck sans lecture automatique
Examinez les trois diapositives avec le mouvement arrêté. Chacune devrait conserver son titre, son visuel clé et son explication d'appui. Testez ensuite la navigation manuelle afin que le présentateur puisse marquer une pause pour répondre à une question sans perdre le fil du récit.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Design de site carrières
Huit scènes lunaires pour le site carrières Kimi : transitions au défilement et candidature illustrée.
Site web
Design de site portfolio créatif
Le portfolio fictif de Maya Rowan articule cartes de projets, pratique et notes.
Site web
Conception de tableau de bord personnel
Life System réunit un score hebdomadaire, une carte du corps avec ses indicateurs, les rythmes quotidiens et cinq expériences dans un tableau de bord.
Application de bureau
Conception de site web de CV
Le CV fictif de Tom Goodman associe expérience, graphiques de compétences et réalisations : deux colonnes, fiches compactes et mise en page d’impression distincte.
Site web