Design d'application agenda : refonte d'un écran Jour, avant et après

Un écran Jour d'agenda a un seul boulot : vous dire ce qui vient ensuite et combien de temps il reste dans la journée. Le premier brouillon ci-dessous connaît toute la journée, mais il peint cinq événements dans cinq couleurs criardes, ajoute une grille du mois et plante une alerte rouge en haut, si bien que rien ne paraît plus important que le reste. Une réunion dans 19 minutes a le même poids que le déjeuner.

La correction garde toutes les fonctions et change le poids. Les longues réunions paraissent longues, le temps libre est simplement vide, et la seule réunion qui compte maintenant a sa propre ligne calme.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, l'œil ne sait pas où se poser. L'en-tête, quatre boutons, une bannière rouge, une grille du mois et une pile de cartes saturées se disputent le premier regard. Les cartes d'événement sont l'élément le plus bruyant de l'écran, et elles le sont toutes autant. Le rouge est utilisé deux fois : pour une alerte et pour un événement, donc le rouge ne veut plus rien dire.

À droite, l'écran suit un ordre clair de haut en bas : où suis-je dans la semaine, quelle est la suite, et à quoi ressemble le reste de la journée. La couleur est discrète et sert à une seule chose : distinguer les événements.

Ce qui a changé, en chiffres

Correction 1 : transformer les cartes en timeline

Avant

Après

Cinq cartes pleine couleur empilées, bleue, rouge, orange, verte et violette, toutes de la même hauteur, chacune avec une cloche, des avatars et des étiquettes, face à une timeline avec des heures, une réunion passée grise, une ligne rouge à 9:41 et quatre blocs pâles avec une fine barre de couleur, où le déjeuner et l'appel client sont plus hauts que le tête-à-tête.

Une liste de cartes dit « voici cinq choses » et rien d'autre. Un point d'une heure et un atelier de trois heures prennent la même place, et les trous entre eux, qui sont justement ce que les gens veulent voir dans un agenda, sont invisibles.

Une timeline donne une forme à la journée. Une réunion de 45 minutes est un bloc court, une longue est un bloc haut, et le temps libre est un espace blanc visible. La couleur est passée de la carte entière à une fine barre à gauche et une teinte pâle derrière, donc le texte se lit d'un coup et la couleur distingue encore un appel de travail du déjeuner.

Deux petites touches ont du sens. Team Standup est gris parce qu'il est terminé. Une ligne rouge marque 9:41, pour voir exactement où vous en êtes dans la journée.

Règle à réutiliser : montrez le temps comme de l'espace, et gardez la couleur criarde pour la seule chose qui se passe maintenant.

Correction 2 : une ligne calme pour la suite

Avant

Après

Une bannière rouge avec une cloche et la phrase Vous avez 5 événements aujourd'hui. Prochain événement dans 19 minutes, face à une ligne blanche indiquant Roadmap Review, puis Dans 19 min en rouge avec Zoom à côté, trois petits avatars et un bouton jaune Rejoindre.

L'alerte du brouillon essaie de vous dire trois choses en une phrase : combien d'événements, que l'un est le prochain, et quand. On dirait un message d'erreur. Personne n'a besoin du nombre d'événements du jour, puisque l'écran les montre.

La correction répond à l'unique question qu'on se pose en ouvrant un agenda : quelle est la suite, et puis-je la rejoindre ? Le nom vient en premier, « Dans 19 min » en rouge est le seul rouge de l'écran, et un bouton Rejoindre de 36 px se trouve à portée de pouce. Les heures concordent : la barre d'état indique 9:41 et Roadmap Review commence à 10:00.

Le schéma est le même que celui du bouton pour rejoindre de Notion Calendar : la réunion, le compte à rebours et une action.

Règle à réutiliser : remplacez une bannière qui décrit la journée par une ligne qui aide pour le prochain geste.

Correction 3 : échanger le mois contre une semaine

Avant

Après

Une grille du mois complète, cinq rangées de chiffres avec de petits points colorés sous beaucoup d'entre eux et aujourd'hui dans un petit cercle jaune, face à une seule rangée de semaine avec une lettre au-dessus de chaque chiffre, un grand cercle jaune plein sur le mardi 3 et la ligne Mardi 3 novembre en dessous.

Une grille du mois répond à une question que l'écran Jour ne pose pas. Elle dépense 158 px de téléphone pour montrer 30 jours de points colorés, et ces points ressemblent aux cartes en dessous, donc l'écran a deux résumés concurrents de la même chose.

Une bande de semaine garde ce dont une vue Jour a besoin : aujourd'hui et les jours voisins. Un cercle plein marque aujourd'hui et la date complète est juste dessous en toutes lettres. Le mois est toujours là : Novembre dans l'en-tête ramène à la vue Mois, et un balayage sur la bande avance d'une semaine.

Règle à réutiliser : montrez le niveau de zoom dont parle l'écran. Un écran Jour a besoin d'une semaine, pas d'un mois.

Correction 4 : ranger quatre boutons dans un menu

Avant

Après

Un en-tête avec Novembre 2026, deux chevrons, un logotype, une pastille Aujourd'hui, des icônes recherche et réglages, et dessous quatre boutons identiques à contour : Jour, Semaine, Mois et Année, face à un en-tête avec une flèche retour et Novembre, un petit menu Jour avec un chevron, une icône recherche et une icône plus.

Quatre boutons identiques disent que les quatre vues sont aussi probables. Ce n'est pas le cas : on reste dans une vue et on en change rarement. Les boutons prennent une rangée entière et ressemblent aux cartes qui sont en dessous.

La correction les range dans un petit menu qui affiche la vue actuelle. Semaine, Mois et Année sont à un tap. Recherche et ajout deviennent de simples icônes de 24 px, les Réglages restent dans la barre d'onglets, et le logotype disparaît, car l'écran est le produit et Apple Calendar n'en a pas non plus.

Règle à réutiliser : quand les options sont utilisées inégalement, montrez la courante et cachez les autres derrière.

Les petites corrections

• Toutes les fonctions restent. Les flèches deviennent un balayage sur la bande de semaine. La cloche, les étiquettes et le lieu de chaque événement s'ouvrent avec l'événement.
• Les mêmes événements. Les cinq événements sont sur les deux écrans, chacun gardant son ancienne couleur en teinte. Team Standup est gris parce qu'il est terminé, et Roadmap Review est le jaune de la marque parce qu'il est le prochain.
• Une barre d'onglets flottante. À 62 px, avec la journée qui défile dessous, l'écran utilise toute la hauteur et la barre d'onglets ne ressemble plus à une boîte à part.
• Pas de bouton flottant. Le plus de 52 px était posé sur la dernière carte et ses participants. C'est maintenant une icône d'en-tête.
• Des marges régulières. Le brouillon a 14 px à gauche et 12 px à droite. Les lignes corrigées vont bord à bord sur une seule grille.
• Zoom sur les deux. Roadmap Review est sur Zoom sur les deux écrans, donc Rejoindre a un sens.

Auditez votre propre écran d'agenda

Récupérer le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque partie en composant.

Fichier Figma gratuit

Refonte de l'écran Jour d'un agenda, avant et après

Les deux écrans et chaque partie en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir la vue Jour d'une application agenda ?

Commez une timeline où la hauteur du bloc égale la durée de la réunion, avec des teintes discrètes et une fine barre de couleur, le temps libre laissé vide et une ligne pour l'heure actuelle. Placez la prochaine réunion dans une ligne au-dessus.

Comment afficher la prochaine réunion dans une application agenda ?

Dans une ligne avec le nom de la réunion, un compte à rebours comme « Dans 19 min », les participants et un bouton Rejoindre quand il y a un appel. Évitez une bannière qui compte les événements du jour.

Une application agenda doit-elle afficher une grille du mois sur l'écran Jour ?

En général non. Une bande de semaine avec un cercle plein sur aujourd'hui donne le contexte dont une vue Jour a besoin, et le mois reste à un tap depuis l'en-tête.

Combien de boutons de vue faut-il à une application agenda ?

Un seul. Affichez la vue actuelle dans un petit menu, ici Jour, et mettez Semaine, Mois et Année dedans.

Pourquoi les cartes d'événement pleine couleur sont-elles mauvaises dans un agenda ?

Quand chaque événement est saturé, chaque événement paraît urgent et la couleur ne les sépare plus. Une teinte pâle avec une fine barre de couleur garde la catégorie et laisse le texte se lire.

De quelle couleur doit être le bouton Rejoindre d'un agenda ?

La couleur de la marque, comme seul bouton plein de l'écran, et gardez le rouge pour le compte à rebours uniquement.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'application, Sundial, les personnes et les événements sont inventés. Les heures sont cohérentes : la barre d'état indique 9:41, Roadmap Review commence à 10:00, et le 3 novembre 2026 est un mardi.
• Vérifications du texte et du contraste : l'encre #1B1A17 sur le jaune souci #FFC233 donne 10,8 pour 1. Le texte d'événement sur sa teinte donne 8,1 (jaune), 6,5 (orange), 6,8 (vert) et 8,4 (violet) pour 1. Le « Dans 19 min » rouge, #D70015, sur blanc donne 5,4 pour 1.
• Modèles étudiés : la vue Jour d'Apple Calendar (retour au mois en haut à gauche, recherche et ajout en simples icônes, une bande de semaine avec un seul aujourd'hui plein, des blocs teintés avec une barre de couleur, l'espace vide comme temps libre) et le bouton pour rejoindre de Notion Calendar.
• Logotype de l'écran avant : Playfair Display Bold. Photos d'avatars de Pexels : Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya et Carlos Gutierrez.
• Publié d'abord en carrousel sur App Brainy.