Linear : La nouvelle référence du design logiciel

« Un logiciel doit être opiniâtre et rapide. » — Karri Saarinen, PDG de Linear

Linear est un outil de gestion de projet qui a redéfini ce que peut être l'expérience d'un logiciel moderne. Lancé en 2019 par d'anciens designers d'Uber et Airbnb, il prouve que les logiciels B2B ne sont pas condamnés à être laids ou lents.

Pourquoi Linear est important

Linear est une déclaration de design contre les logiciels d'entreprise pléthoriques, conçus par des comités. Il montre ce qui se passe quand des designers créent pour des designers.

Réalisations clés : - A donné aux logiciels d'entreprise la fluidité des applications grand public - A prouvé que les interfaces privilégiant le clavier peuvent être élégantes - A démontré que la performance est une fonctionnalité à part entière - A établi un nouveau standard de qualité pour les produits SaaS

Points clés à retenir

1. La vitesse est une fonctionnalité, pas une métrique - L'obsession de Linear pour des interactions sous les 100ms prouve que la performance perçue génère une réponse émotionnelle
2. Privilégier le clavier, c'est privilégier les utilisateurs avancés - La palette de commandes (Cmd+K) et les raccourcis mnémotechniques (S pour Status, P pour Priority) accélèrent les experts sans bloquer les débutants
3. La densité d'information l'emporte sur l'espace blanc - Afficher plus de données avec moins de chrome ; révéler les détails au survol plutôt que les cacher derrière des clics
4. Le mode sombre comme expérience principale - Concevoir d'abord pour le sombre crée une esthétique premium et réduit la fatigue oculaire des utilisateurs intensifs
5. L'UI optimiste élimine l'attente - Mettre à jour localement d'abord, synchroniser en arrière-plan, et n'afficher les erreurs que lorsqu'elles se produisent réellement

Principes fondamentaux de design

1. La vitesse comme fonctionnalité

Linear est obsessionnellement rapide. Chaque interaction semble instantanée.

Comment ils y parviennent : - Mises à jour UI optimistes (présumer le succès, annuler en cas d'échec) - Architecture local-first - Mise en cache agressive - Requêtes réseau minimales

Aperçu de l'implémentation :

// Optimistic update pattern
function updateIssue(id: string, changes: Partial<Issue>) {
  // 1. Update local state immediately
  localStore.update(id, changes)

  // 2. Show success state
  ui.showSaved()

  // 3. Sync with server in background
  api.updateIssue(id, changes).catch(() => {
    // 4. Rollback only on failure
    localStore.rollback(id)
    ui.showError()
  })
}

Application au design : - Les états de chargement doivent être invisibles quand c'est possible - Les skeleton screens uniquement quand c'est nécessaire - Ne jamais bloquer l'utilisateur dans sa prochaine action

2. Clavier d'abord, souris bienvenue

Linear est conçu pour les utilisateurs avancés tout en restant accessible aux débutants.

La palette de commandes (Cmd+K) : - Point d'entrée universel pour toutes les actions - Recherche floue sur l'ensemble du contenu - Raccourcis clavier découvrables - Ne nécessite jamais de quitter le clavier

┌────────────────────────────────────────────────────────────┐
│ Cmd+K                                                      │
├────────────────────────────────────────────────────────────┤
│ > Search issues, projects, or commands...                  │
│                                                            │
│   Recent                                                   │
│   ├─ FE-123 Fix navigation animation              Cmd+O   │
│   ├─ BE-456 API rate limiting                     Cmd+O   │
│   └─ Create new issue                             C       │
│                                                            │
│   Commands                                                 │
│   ├─ Change status                                S       │
│   ├─ Assign issue                                 A       │
│   └─ Set priority                                 P       │
│                                                            │
└────────────────────────────────────────────────────────────┘

Principes d'implémentation : - Chaque action dispose d'un raccourci clavier - Les raccourcis sont mnémotechniques (S pour Status, P pour Priority) - La souris fonctionne parfaitement. Le clavier est plus rapide - L'aide est toujours à une touche de distance

3. Une densité d'information maîtrisée

Linear affiche beaucoup d'informations sans paraître encombré.

Comment ils équilibrent la densité :

ENCOMBRÉ (entreprise classique) :
┌────────────────────────────────────────────────────────────┐
│ [ ] * FE-123 | Fix bug | John | High | In Progress | 2d   │
│     Tags: frontend, urgent, sprint-12, reviewed           │
│     Created: Jan 1 | Updated: Jan 5 | Due: Jan 10         │
│     Comments: 5 | Attachments: 2 | Subtasks: 3/5          │
├────────────────────────────────────────────────────────────┤
│ [ ] * FE-124 | Another bug | Jane | Medium | Todo | 1d    │
│     ... (répétition de toutes les métadonnées)            │
└────────────────────────────────────────────────────────────┘

APPROCHE LINEAR :
┌────────────────────────────────────────────────────────────┐
│ [x] FE-123  Fix navigation animation bug      ^  John  ** │
│ [ ] FE-124  Update user profile endpoint         Jane  *  │
│ [x] FE-125  Add dark mode toggle              ^  Alex  ***│
└────────────────────────────────────────────────────────────┘
                                                     ^    ^
                                          Priorité  Assigné  Estimation
                                          (caret)   (nom)    (points)

Principes : - N'afficher que ce qui est nécessaire à chaque niveau - Utiliser des icônes et symboles plutôt que des libellés textuels - Révéler les détails au survol ou à la sélection - Divulgation progressive à la demande

4. Un langage visuel cohérent

Le design system de Linear est rigoureux et cohérent.

Système de couleurs :

/* Linear-inspired semantic colors */
:root {
  /* Status colors - highly saturated, distinct */
  --status-backlog: #6B7280;    /* Gray - not started */
  --status-todo: #3B82F6;       /* Blue - ready */
  --status-progress: #F59E0B;   /* Amber - in work */
  --status-done: #10B981;       /* Green - complete */
  --status-cancelled: #EF4444;  /* Red - cancelled */

  /* Priority - consistent hue shift */
  --priority-urgent: #EF4444;   /* Red */
  --priority-high: #F97316;     /* Orange */
  --priority-medium: #EAB308;   /* Yellow */
  --priority-low: #6B7280;      /* Gray */
  --priority-none: #374151;     /* Dark gray */

  /* Surface hierarchy */
  --bg-primary: #0D0D0D;        /* Main background */
  --bg-elevated: #141414;       /* Cards, panels */
  --bg-hover: #1F1F1F;          /* Hover states */
  --bg-active: #292929;         /* Active/selected */
}

Typographie :

/* Linear uses Inter for everything */
:root {
  --font-family: 'Inter', -apple-system, sans-serif;

  /* Tight scale, high readability */
  --text-xs: 11px;    /* Metadata */
  --text-sm: 12px;    /* Secondary */
  --text-base: 13px;  /* Body (smaller than typical) */
  --text-lg: 14px;    /* Emphasis */
  --text-xl: 16px;    /* Headings */
  --text-2xl: 20px;   /* Page titles */
}

5. Le mode sombre par défaut

Linear a choisi le mode sombre comme expérience principale.

Pourquoi cela fonctionne : - Réduit la fatigue oculaire des utilisateurs intensifs (longues heures) - Crée une esthétique premium et concentrée - Fait ressortir les couleurs de statut - S'aligne avec l'esthétique des outils de développement

Implémentation :

/* Dark-first design */
:root {
  color-scheme: dark;

  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-tertiary: rgba(255, 255, 255, 0.45);

  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
}

/* Light mode as override */
[data-theme="light"] {
  --text-primary: rgba(0, 0, 0, 0.90);
  --text-secondary: rgba(0, 0, 0, 0.60);
  /* ... */
}

6. Des micro-interactions qui font plaisir

Chaque interaction dans Linear a été réfléchie.

Exemples : - Les cartes d'issues se soulèvent légèrement au survol - Les changements de statut ont des transitions de couleur subtiles - Le glisser-déposer a un mouvement fluide basé sur la physique - Les cases à cocher ont un retour de clic satisfaisant

Principes d'animation :

/* Linear's motion */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 100ms;     /* Micro feedback */
  --duration-normal: 150ms;   /* Standard transitions */
  --duration-slow: 250ms;     /* Page transitions */
}

.issue-card {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.issue-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Patterns de design à retenir

La palette de commandes

Le Cmd+K de Linear est désormais un pattern attendu dans les logiciels modernes.

Guide d'implémentation :

<!-- Command palette structure -->
<dialog class="command-palette" aria-label="Command menu">
  <header>
    <input
      type="text"
      placeholder="Search issues or commands..."
      aria-describedby="command-hint"
    />
  </header>

  <nav aria-label="Command results">
    <section aria-label="Recent">
      <h3>Recent</h3>
      <ul role="listbox">
        <li role="option" tabindex="0">
          <span class="issue-id">FE-123</span>
          <span class="issue-title">Fix bug</span>
          <kbd>Cmd+O</kbd>
        </li>
      </ul>
    </section>

    <section aria-label="Commands">
      <h3>Commands</h3>
      <!-- ... -->
    </section>
  </nav>
</dialog>

Menus contextuels

Des menus au clic droit qui affichent exactement ce dont vous avez besoin.

Right-click on issue:
┌────────────────────────────────┐
│  Open issue            Cmd+O  │
│  Open in new tab   Cmd+Shft+O │
├────────────────────────────────┤
│  Set status                S  │
│  Set priority              P  │
│  Assign                    A  │
├────────────────────────────────┤
│  Copy link             Cmd+C  │
│  Copy ID                      │
├────────────────────────────────┤
│  Delete              Backspace│
└────────────────────────────────┘

Édition en ligne

Modifier sans fenêtres modales.

BEFORE (click to edit):
┌────────────────────────────────────────┐
│  Fix navigation bug          [Edit]   │
└────────────────────────────────────────┘

AFTER (inline edit on click):
┌────────────────────────────────────────┐
│  Fix navigation bug|                   │  ← Cursor appears
│  ──────────────────                    │    in place
└────────────────────────────────────────┘

Ce qu'il faut emprunter à Linear

Pour tout projet logiciel

1. La vitesse est non négociable - Optimisez la performance perçue et réelle
2. Des raccourcis clavier partout - Mais sans les rendre obligatoires
3. Palette de commandes - Point d'accès universel
4. Mode sombre bien fait - Pas une réflexion après coup
5. Densité d'information - Montrer plus avec moins
6. Langage de design cohérent - Chaque élément semble lié aux autres

Techniques spécifiques

Citations clés de l'équipe Linear

« Nous considérons la vitesse comme une fonctionnalité. Si quelque chose prend 300ms, ça semble cassé. »

« Chaque pixel doit être intentionnel. Si vous ne pouvez pas expliquer pourquoi quelque chose est là, supprimez-le. »

« Clavier d'abord ne signifie pas clavier uniquement. Cela signifie respecter les utilisateurs avancés. »

Questions fréquemment posées

Qu'est-ce qui rend Linear plus rapide que les autres outils de gestion de projet ?

Linear utilise des mises à jour UI optimistes, une architecture local-first et une mise en cache agressive. Quand vous changez le statut d'une issue, l'interface se met à jour immédiatement pendant que la synchronisation se fait en arrière-plan. La plupart des interactions semblent instantanées car Linear suppose le succès et n'affiche les erreurs que lorsqu'elles surviennent, plutôt que de bloquer sur les requêtes réseau.

Comment fonctionne la palette de commandes (Cmd+K) de Linear ?

La palette de commandes est un point d'entrée universel qui utilise la recherche floue sur les issues, projets et commandes. Elle prend en charge les raccourcis clavier mnémotechniques (S pour Status, P pour Priority, A pour Assign) que les utilisateurs peuvent découvrir via la palette, puis utiliser directement sans l'ouvrir. Cela crée un parcours d'apprentissage progressif du débutant à l'utilisateur avancé.

Pourquoi Linear a-t-il choisi le mode sombre par défaut ?

Linear a été conçu pour les utilisateurs avancés qui passent de longues heures dans l'application. Le mode sombre réduit la fatigue oculaire, crée une esthétique premium qui se différencie des logiciels d'entreprise typiques, et rend les couleurs de statut plus vibrantes. Le mode clair existe comme option alternative, mais le mode sombre est la cible de design principale.

Comment Linear atteint-il une haute densité d'information sans paraître encombré ?

Linear utilise des symboles et icônes au lieu d'étiquettes textuelles, n'affiche que les métadonnées essentielles au niveau de la liste, et révèle les détails au survol ou à la sélection. L'échelle typographique est plus serrée que la normale (corps de texte en 13px), et un espacement cohérent crée un rythme visuel sans gaspiller d'espace blanc.

Quelle est l'approche de Linear concernant les raccourcis clavier ?

Chaque action dans Linear a un raccourci clavier, et les raccourcis sont mnémotechniques (faciles à retenir). La palette de commandes enseigne les raccourcis en les affichant à côté de chaque action. Cela signifie que les utilisateurs à la souris peuvent travailler parfaitement bien, mais les utilisateurs au clavier peuvent travailler beaucoup plus vite. La philosophie de design est « clavier d'abord, souris bienvenue ».

Ressources

• Site web : linear.app
• Changelog : Le changelog de Linear est lui-même magnifiquement conçu
• Blog : Articles d'ingénierie et de design de l'équipe
• Twitter : @linear pour les actualités design