Pitch: Odważna geometryczna pewność siebie na fioletowej scenie

5 min czytania • 1183 słów
Pitch: Odważna geometryczna pewność siebie na fioletowej scenie screenshot

„Narzędzie, którego używasz do tworzenia prezentacji, samo powinno być najlepszą prezentacją w pokoju.” — Christian Reber, założyciel

Pitch istnieje, ponieważ oprogramowanie do prezentacji przestało ewoluować estetycznie w latach 90. Założony w Berlinie przez Christiana Rebera i zespół stojący za Wunderlist, Pitch na nowo wyobraził sobie, co się dzieje, gdy projektanci budują narzędzie do prezentacji dla projektantów. Tam, gdzie Google Slides sprawia wrażenie utylitarnego, a PowerPoint — korporacyjnego, Pitch otwiera się pełnoekranowym fioletowym gradientem z unoszącymi się trójwymiarowymi szklanymi kształtami — natychmiast ustanawiając, że jest to produkt z wyrazistą wizją tego, jak powinny wyglądać prezentacje.

Kluczowe wnioski

  1. Fiolet jako scena, nie akcent — Większość marek używa swojego koloru jako odcienia przycisków. Pitch używa fioletu jako całego środowiska dla sekcji hero, tworząc teatralne otwarcie, które jednocześnie stanowi demonstrację produktu.
  2. Ekstra-gruby krój sygnalizuje autorytet — Nagłówki o wadze 800 (cięższe niż niemal u każdego konkurenta SaaS) komunikują zerowe wahanie w pozycjonowaniu produktu.
  3. Dwutempowa typografia tworzy rytm — Gęste, ciężkie nagłówki przy line-height 1.0, po których następuje przestronny tekst główny przy line-height 2.0, tworzą dramatyczne przejście między „przyciągnij uwagę” a „pozwól im czytać”.
  4. Niestandardowe kroje pisma są przewagą konkurencyjną — Geometryczna miękkość Eina01 jest niemożliwa do odtworzenia za pomocą czcionek systemowych, przez co każdy konkurent używający Inter wygląda przy nim generycznie.
  5. Onboarding oparty na szablonach rozwiązuje problem pustego płótna — Galeria szablonów jest głównym wejściem, ucząc użytkowników, jak wygląda „dobrze”, zanim cokolwiek stworzą.

Dlaczego Pitch ma znaczenie

Pitch udowodnił, że oprogramowanie produktywne może mieć ten sam poziom wizualnego rzemiosła, co artefakty, które wytwarza. W kategorii zdominowanej przez narzędzia, które nie wyglądają jak ich wynik końcowy, Pitch praktykuje to, co głosi: jego strona marketingowa sama jest prezentacją, a galeria szablonów produktu wyznacza poprzeczkę jakości, która podnosi poziom pracy każdego użytkownika.

Kluczowe osiągnięcia: - Stworzony przez zespół Wunderlist (przejęty przez Microsoft), wnosząc wrażliwość projektową klasy konsumenckiej do oprogramowania B2B - Jako pierwszy wprowadził współpracę multiplayer w czasie rzeczywistym z widocznymi kursorami jako elementem designu, nie tylko funkcją - Wprowadził akcje AI do tworzenia tekstu i wizualizacji zgodnych z identyfikacją marki, które popychają użytkowników ku wyższej jakości zamiast dodawać złożoność

Podstawowe zasady projektowe

1. Fioletowa scena

Gradient hero to nie pokolorowana sekcja — to scena prezentacyjna. Żywy fioletowy gradient wypełnia cały viewport, wypełniony półprzezroczystymi trójwymiarowymi szklanymi obiektami, które łapią światło i demonstrują rozumienie materiału, głębi i kompozycji przez Pitch. Produkt sprzedaje się sam, będąc prezentacją.

Poniżej sekcji hero, sekcje przechodzą w czyste białe tła z ciepłym grafitowym tekstem (rgb(43,42,53)) — kolorem z subtelnym fioletowym podtonem, który harmonizuje z identyfikacją marki, zamiast tworzyć ostry kontrast wobec niej.

┌─────────────────────────────────────────┐
│  ░░░░ ŻYWY FIOLETOWY GRADIENT ░░░░░░░  │
│  ░░░░ Unoszące się szklane kształty 3D  │
│  ░░░░░ BIAŁY POGRUBIONY NAGŁÓWEK ░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  Czysta biała sekcja                    │
│  Ciepły grafitowy tekst (43,42,53)      │
│  Przestronny tekst z line-height 2.0    │
│                                         │
└─────────────────────────────────────────┘

2. Monumentalna typografia z Eina01

Pitch zamówił Eina01, geometryczny sans-serif z miękkimi, zaokrąglonymi zakończeniami, które nadają każdemu nagłówkowi charakterystyczne ciepło. Przy wadze 800 (extra-bold) nagłówki niosą asertywność mówcy, który doskonale zna swój materiał.

Skala typograficzna działa w dwóch odrębnych trybach. Nagłówki są gęste i uderzające: tekst displayowy 80px przy line-height 1.0 z letter-spacing -1,6px, gdzie wydłużenia górne i dolne niemal stykają się między wierszami, tworząc elementy graficzne, a nie zwykły tekst. Tekst główny jest odwrotnością — 18px przy line-height 2.0, wyjątkowo hojne odstępy, które nadają prozie swobodną, redakcyjną jakość jak lektura dobrze złożonego magazynu.

Ujemny letter-spacing skaluje się proporcjonalnie z rozmiarem: -2% zarówno przy 80px (-1,6px), jak i przy 42px (-0,84px), utrzymując optyczną gęstość przy każdym rozmiarze nagłówka.

3. Powściągliwy design Interaktywny

Każdy interaktywny element zajmuje przestrzeń między ostrymi korporacyjnymi krawędziami a zabawnymi konsumenckimi zaokrągleniami. Promień przycisków 6px sygnalizuje „profesjonalne narzędzie kreatywne” — na tyle wyrazisty, by go zauważyć, na tyle powściągliwy, by traktować poważnie. Padding przycisków 24px w poziomie zapewnia wygodne cele kliknięcia bez rozlewania się.

Pasek nawigacyjny o wysokości 60px jest celowo kompaktowy. W narzędziu do prezentacji treść powinna zawsze wydawać się większa od interfejsu. Pasek ogłoszeń dodaje 72px przestrzeni promocyjnej nad nawigacją, nie zagęszczając układu.

Przenośne wzorce

System projektowy Pitch oferuje kilka wzorców, które bezpośrednio przekładają się na inne projekty. Ciepły grafitowy kolor tekstu jest najłatwiej aplikowalny: rgb(43,42,53) unika ostrości czystej czerni, zachowując czytelność, a jego subtelny fioletowy podton tworzy spójność z każdą paletą marki w odcieniach fioletu.

Dwutempowy system typograficzny sprawdza się w każdym kontekście, gdzie trzeba zrównoważyć siłę przekazu z czytelnością:

: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;
}

W aplikacjach iOS te same zasady przekładają się przez mapowania wag systemowych i modyfikatory leading w 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)
    }
}

Lekcje projektowe

Wybór fioletu w morzu niebieskiego się opłaca. W krajobrazie, gdzie Slack, Notion, Linear i Figma bazują na niebieskim, fiolet Pitch natychmiast wyróżnia go z tłumu. Fiolet sygnalizuje kreatywność i premiumowe pozycjonowanie — dokładnie te skojarzenia, których potrzebuje narzędzie do prezentacji.

Waga 800 to decyzja o głosie marki. Większość stron SaaS używa wagi 600–700 dla nagłówków. Wybór extra-bold przez Pitch nie dotyczy czytelności — chodzi o osobowość. Marka nie sugeruje, żebyś spróbował; mówi ci, że to jest to narzędzie. Używaj ciężkich wag tylko wtedy, gdy pozycjonowanie twojego produktu wspiera taki poziom asertywności.

Line-height 1.0 w tekście displayowym tworzy elementy graficzne. Gdy wydłużenia górne i dolne niemal się stykają, nagłówki przestają być odczytywane jako tekst i zaczynają funkcjonować jako architektura wizualna. To działa tylko przy dużych rozmiarach (60px+), gdzie poszczególne litery są wyraźnie rozróżnialne.

Unikaj czystej czerni z kolorową marką. Ciepły grafit Pitch (rgb(43,42,53)) utrzymuje spójność strony, ponieważ jego podton pasuje do fioletowej palety. Czysta czerń tworzy dysonans, który podważa system wizualny.

Unikaj cienkich wag fontu w marce opartej na pewności siebie. Najlżejsza waga nagłówków, jakiej używa Pitch, to 800. Tekst główny o wadze 400 jest jedynym wyjątkiem. Mieszanie wag 300 lub 400 w nagłówkach podważyłoby asertywne pozycjonowanie, które marka buduje.

Najczęściej zadawane pytania

Co wyróżnia design Pitch na tle innych narzędzi do prezentacji?

Pitch wykorzystuje swoją stronę marketingową jako demonstrację własnej filozofii produktowej. Pełnoekranowy fioletowy gradient hero z trójwymiarowymi szklanymi kształtami, nagłówkami Eina01 o wadze 800 i dwutempową typografią (gęste nagłówki, przestronny tekst główny) tworzą estetykę, która jest bezbłędnie odmienna od utylitarnego charakteru Google Slides czy korporacyjnego ciężaru PowerPoint.

Jak Pitch używa koloru inaczej niż typowe produkty SaaS?

Większość marek SaaS używa swojego głównego koloru jako akcentu — kolorowe przyciski na białym tle. Pitch odwraca to, używając żywego fioletu jako całego środowiska sekcji hero, tworząc immersyjną scenę zamiast dekoracyjnych akcentów. Fiolet jest bezwstydnie nasycony, nigdy rozcieńczony szarością ani bielą.

Dlaczego Pitch używa tak ciężkich wag fontu?

Nagłówki o wadze 800 (extra-bold) to przemyślana decyzja o głosie marki. Przy tej wadze typografia komunikuje przekonanie i ekspertyzę, a nie tylko etykietuje treść. Pasuje to do pozycjonowania Pitch jako narzędzia z silnymi opiniami o tym, jak powinny wyglądać prezentacje, stworzonego przez projektantów pewnych tych opinii.

Czego projektanci mogą się nauczyć z podejścia Pitch do współpracy multiplayer?

Pitch traktuje kursory współpracy w czasie rzeczywistym i wspólną edycję jako część swojej tożsamości wizualnej, nie tylko jako funkcję do odhaczenia. Widzenie kursorów innych osób sprawia, że narzędzie wydaje się żywe i wzmacnia filozofię artefaktu zespołowego. Lekcja jest taka, że funkcje współpracy to elementy designu kształtujące to, jak produkt jest odczuwany, nie tylko to, co robi.

Źródła