Pitch : Une Confiance Géométrique Audacieuse sur une Scène Violette

8 min de lecture • 1525 mots
Pitch : Une Confiance Géométrique Audacieuse sur une Scène Violette screenshot

« L’outil que vous utilisez pour créer des présentations devrait lui-même être la meilleure présentation de la salle. » — Christian Reber, Fondateur

Pitch existe parce que les logiciels de présentation ont cessé d’évoluer esthétiquement dans les années 1990. Fondé à Berlin par Christian Reber et l’équipe derrière Wunderlist, Pitch a réimaginé ce qui se passe lorsque des designers construisent un outil de présentation pour des designers. Là où Google Slides semble utilitaire et PowerPoint semble corporate, Pitch s’ouvre avec un hero en dégradé violet pleine largeur peuplé de formes 3D en verre flottantes — établissant immédiatement que c’est un produit qui a des opinions sur ce que les présentations devraient être.

Points Clés

  1. Le violet comme scène, pas comme accent - La plupart des marques utilisent leur couleur comme teinte de bouton. Pitch utilise le violet comme environnement entier pour sa section hero, créant une ouverture théâtrale qui sert également de démonstration produit.
  2. L’extra-bold signale l’autorité avec conviction - Les titres en graisse 800 (plus lourds que pratiquement tous les concurrents SaaS) communiquent zéro hésitation sur le positionnement du produit.
  3. La typographie à deux vitesses crée du rythme - Des titres denses et lourds à 1.0 de line-height suivis d’un corps de texte aéré à 2.0 de line-height produisent un contraste dramatique entre « capter l’attention » et « les laisser lire ».
  4. Les polices personnalisées sont des avantages concurrentiels - La douceur géométrique de Eina01 est impossible à reproduire avec des polices système, faisant paraître générique tout concurrent utilisant Inter.
  5. L’onboarding axé sur les templates résout le syndrome de la page blanche - La galerie de templates est la porte d’entrée, enseignant aux utilisateurs à quoi ressemble le « bien » avant qu’ils ne créent quoi que ce soit.

Pourquoi Pitch Compte

Pitch a prouvé que les logiciels de productivité peuvent avoir le même niveau de soin visuel que les artefacts qu’ils produisent. Dans une catégorie dominée par des outils qui ne ressemblent en rien à leur production, Pitch met en pratique ce qu’il prêche : son site marketing est lui-même une présentation, et la galerie de templates du produit établit un niveau de qualité qui élève la production de chaque utilisateur.

Réalisations clés : - Construit par l’équipe de Wunderlist (acquise par Microsoft), apportant une sensibilité design de niveau grand public aux logiciels B2B - Pionnier de la collaboration multijoueur en temps réel avec des curseurs visibles comme élément de design, pas seulement comme fonctionnalité - Introduction d’actions IA pour du texte et des visuels conformes à l’identité de marque qui poussent les utilisateurs vers une production de meilleure qualité plutôt que d’ajouter de la complexité

Principes de Design Fondamentaux

1. La Scène Violette

Le dégradé hero n’est pas une section colorée — c’est une scène de présentation. Un dégradé violet vif remplit l’intégralité du viewport, peuplé d’objets 3D en verre translucide qui captent la lumière et démontrent la compréhension de Pitch en matière de matériau, de profondeur et de composition. Le produit se vend en étant lui-même une présentation.

Sous le hero, les sections transitionnent vers des arrière-plans blancs épurés avec du texte anthracite chaud (rgb(43,42,53)) — une couleur avec un subtil sous-ton violet qui s’harmonise avec l’identité de marque plutôt que de créer un contraste brutal.

┌─────────────────────────────────────────┐
│  ░░░░ DÉGRADÉ VIOLET VIF ░░░░░░░░░░░░  │
│  ░░░░ Formes en Verre 3D Flottantes ░  │
│  ░░░░░ TITRE BOLD BLANC ░░░░░░░░░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  Section Blanche Épurée                 │
│  Texte anthracite chaud (43,42,53)      │
│  Corps de texte spacieux, line-height   │
│  généreuse de 2.0                       │
│                                         │
└─────────────────────────────────────────┘

2. Typographie Monumentale avec Eina01

Pitch a commandé Eina01, une sans-serif géométrique avec des terminaisons douces et arrondies qui donnent à chaque titre une chaleur distinctive. En graisse 800 (extra-bold), les titres portent l’assurance d’un conférencier keynote qui maîtrise son sujet.

L’échelle typographique opère selon deux modes distincts. Les titres sont denses et percutants : du texte d’affichage à 80px avec un line-height de 1.0 et un letter-spacing de -1.6px, où les ascendantes et descendantes se touchent presque entre les lignes, créant des éléments graphiques plutôt que du simple texte. Le corps de texte est l’opposé — 18px avec un line-height de 2.0, un espacement exceptionnellement généreux qui donne à la prose une qualité détendue et éditoriale, comme lire un magazine bien composé.

Le letter-spacing négatif s’adapte proportionnellement à la taille : -2% à la fois à 80px (-1.6px) et 42px (-0.84px), maintenant la densité optique à chaque taille de titre.

3. Design Interactif Maîtrisé

Chaque élément interactif occupe l’espace entre les bords corporate tranchants et la rondeur ludique grand public. Le rayon de bouton de 6px signale « outil créatif professionnel » — suffisamment délibéré pour être remarqué, suffisamment maîtrisé pour être pris au sérieux. Le padding de bouton à 24px horizontal offre des zones de clic confortables sans étalement.

La barre de navigation à 60px est délibérément compacte. Pour un outil de présentation, le contenu doit toujours sembler plus grand que le chrome. Une barre d’annonce ajoute 72px d’espace promotionnel au-dessus de la navigation sans surcharger la mise en page.

Patterns Transférables

Le système de design de Pitch offre plusieurs patterns qui se transposent directement à d’autres projets. La couleur de texte anthracite chaud est la plus immédiatement applicable : rgb(43,42,53) évite la dureté du noir pur tout en maintenant la lisibilité, et son subtil sous-ton violet crée une cohésion avec toute palette de marque adjacente au violet.

Le système typographique à deux vitesses fonctionne dans tout contexte où vous devez équilibrer impact et lisibilité :

:root {
  /* Pitch-inspired confident purple palette */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

  /* Typography */
  --font-display: "Eina01", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --nav-height: 3.75rem;
  --button-radius: 6px;
  --button-padding: 0 24px;
}

/* Display headline — dense, heavy, tight */
.display {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.6px;
  color: var(--color-text-primary);
}

/* Section headline */
.section-heading {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.84px;
  color: var(--color-text-primary);
}

/* Body — generous breathing room */
.body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* Hero gradient stage */
.hero {
  background: linear-gradient(135deg, #7B2FF2 0%, #4A0E8F 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA button — 6px radius, professional creative */
.button-primary {
  border-radius: 6px;
  padding: 0 24px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background: var(--color-brand-purple);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

Pour les applications iOS, les mêmes principes se transposent à travers les correspondances de graisses système et les modificateurs leading de SwiftUI :

extension Color {
    static let pitchBackground = Color.white
    static let pitchText = Color(red: 43/255, green: 42/255, blue: 53/255)
    static let pitchPurple = Color(red: 123/255, green: 47/255, blue: 242/255)
}

extension Font {
    static let pitchDisplay = Font.system(size: 80, weight: .heavy)
        .leading(.tight)
    static let pitchHeading = Font.system(size: 42, weight: .heavy)
    static let pitchBody = Font.system(size: 18, weight: .regular)
        .leading(.loose)
}

struct PitchButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.pitchPurple)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 6))
            .opacity(configuration.isPressed ? 0.85 : 1.0)
    }
}

Leçons de Design

Choisir le violet dans un océan de bleu est payant. Dans un paysage où Slack, Notion, Linear et Figma s’ancrent tous sur le bleu, le violet de Pitch le sépare immédiatement du lot. Le violet évoque la créativité et le positionnement premium — exactement les associations dont un outil de présentation a besoin.

La graisse 800 est une décision de voix de marque. La plupart des sites SaaS utilisent 600-700 pour les titres. Le choix extra-bold de Pitch n’est pas une question de lisibilité — c’est une question de personnalité. La marque ne suggère pas que vous l’essayiez ; elle vous dit que c’est l’outil. N’utilisez des graisses lourdes que lorsque le positionnement de votre produit supporte ce niveau d’affirmation.

Un line-height de 1.0 sur le texte d’affichage crée des éléments graphiques. Lorsque les ascendantes et descendantes se touchent presque, les titres cessent d’être lus comme du texte et commencent à fonctionner comme de l’architecture visuelle. Cela ne fonctionne qu’aux grandes tailles (60px+) où les formes individuelles des lettres sont clairement distinguables.

Évitez le noir pur avec une marque colorée. L’anthracite chaud de Pitch (rgb(43,42,53)) maintient la cohésion de la page car son sous-ton correspond à la palette violette. Le noir pur crée une déconnexion qui compromet le système visuel.

Évitez les graisses fines dans une marque axée sur la confiance. La graisse de titre la plus légère utilisée par Pitch est 800. Le corps de texte à 400 est la seule exception. Mélanger des titres en graisse 300 ou 400 compromettrait le positionnement assertif que la marque s’efforce d’établir.

Questions Fréquemment Posées

Qu’est-ce qui rend le design de Pitch distinctif par rapport aux autres outils de présentation ?

Pitch utilise son site marketing comme démonstration de sa propre philosophie produit. Le hero en dégradé violet pleine largeur avec des formes en verre 3D, les titres Eina01 en graisse 800 et la typographie à deux vitesses (titres denses, corps aéré) créent une esthétique indéniablement différente du sentiment utilitaire de Google Slides ou du poids corporate de PowerPoint.

Comment Pitch utilise-t-il la couleur différemment des produits SaaS typiques ?

La plupart des marques SaaS utilisent leur couleur primaire comme accent — des boutons colorés sur des arrière-plans blancs. Pitch inverse cela en utilisant le violet vif comme environnement entier pour sa section hero, créant une scène immersive plutôt que des touches décoratives. Le violet est résolument saturé, jamais dilué avec du gris ou du blanc.

Pourquoi Pitch utilise-t-il des graisses de police aussi lourdes ?

Les titres en graisse 800 (extra-bold) sont une décision délibérée de voix de marque. À cette graisse, la typographie communique conviction et expertise plutôt que de simplement étiqueter du contenu. Cela correspond au positionnement de Pitch comme outil ayant des opinions fortes sur ce que les présentations devraient être, créé par des designers confiants dans ces opinions.

Que peuvent apprendre les designers de l’approche de Pitch en matière de collaboration multijoueur ?

Pitch traite les curseurs de collaboration en temps réel et la co-édition comme faisant partie de son identité visuelle, pas seulement comme une case à cocher fonctionnelle. Voir les curseurs des autres personnes donne au outil une sensation de vie et renforce la philosophie d’artefact d’équipe. La leçon est que les fonctionnalités collaboratives sont des éléments de design qui façonnent le ressenti d’un produit, pas seulement ce qu’il fait.

Références