Brightloop Eine Seite, die sich selbst hochzählt

01 · Überblick

Schwung, keine Raterei

Für dieses Konzept habe ich mir Brightloop als Karriereschule vorgestellt, deren eigentliches Produkt Struktur ist: Live-Kohorten, Mentorinnen aus der Branche, portfolio-getriebene Projekte, sechs Monate, neben dem Hauptjob. Bootcamp-Marketing läuft meist über zwei Dinge, eine Gehaltszahl und ein Stockfoto von jemandem, der von einem Laptop entzückt ist. Struktur ist das, was zu zeigen sich lohnt, und eine Fotografie kann sie nicht zeigen.

Also trägt die Seite überhaupt keine Fotografie. Dreizehn Inline-SVGs halten das gesamte visuelle System, und die Belege sind Instrumente: Ringe, die sich füllen, Balken, die wachsen, Zahlen, die zählen. Sie laufen alle über denselben Observer und eine Custom Property, die einmal pro Frame geschrieben wird — die Seite misst sich also selbst, ohne dafür das Frame-Budget auszugeben.

02 · Die Idee

Instrumente, keine Illustrationen

Auf der laufenden Seite füllt sich jedes Instrument aus einer Custom Property, die einmal pro Frame geschrieben wird, solange sein Abschnitt sichtbar ist. Drei Ringe, drei Balken, ein Schreibvorgang.

Die Zahlen, die diese Instrumente tragen, sind Konzeptinhalt, für diesen Build erfunden, um das Muster an Zahlen plausibler Form zu erproben. Es sind keine Statistiken aus einer echten Kohorte, und die Karten unten benennen jede einzelne als erfunden, statt sie als Ergebnis aufzumachen.

• Der Vermittlungsring

  Eine erfundene Vermittlungsquote von 91 %, für dieses Konzept geschrieben statt an irgendetwas gemessen, und gewählt, weil ein Prozentsatz genau das ist, wofür ein Fortschrittsring gebaut wurde.

• Die Bewertungsskala

  Eine erfundene Alumni-Bewertung von 4,9 von 5, für dieses Konzept ausgedacht, und gewählt, weil eine Bruchzahl den Hochzähler auf eine Weise fordert, die eine runde Zahl nicht fordert.

• Die Partnerzahl

  Eine erfundene Zahl von 310 Partnerunternehmen, für dieses Konzept ausgedacht, und gewählt, weil drei Stellen die Stelle sind, an der sich ein Hochzähler auf dem Weg nach oben entweder gut liest oder klar nicht.

03 · Ziele

Was die Seite leisten musste

1. Eine Schleife erklären, keinen Hörsaal

   Der Lehrplan ist iterativ, also wird er als getabbte Schleife präsentiert statt als lineare Wochentabelle, die ihn falsch beschreiben würde.

2. Sechs Programme, ein Ergebnis

   Daten-, Design- und Engineering-Tracks, die alle auf dasselbe Versprechen hinauslaufen, ohne sechs fast identische Landingpages, die es sechsmal sagen.

3. Offen bepreisen

   Zahl monatlich, nur solange du lernst — als Überschrift über dem Preisblock gesagt statt hinter einem Anfrageformular versteckt.

4. Die Zahlen zum Benehmen bringen

   Jede Zahl animiert einmal, aus einer gemeinsamen Pipeline, und zeigt unter reduzierter Bewegung sofort ihren Endwert.

04 · Baureihenfolge

Zwölf Module, eine Pipeline

Zwölf nummerierte Module über 654 Zeilen, und eines davon macht den Großteil der Arbeit: Alles, was beim Eintritt animiert, registriert sich beim selben Observer, statt einen eigenen mitzubringen.

1. Tokens und die Schattenskala

   Zweiundzwanzig Custom Properties — Navy, Kobalt, Koralle, Bernstein, eine Tönung und eine Haarlinie, dazu eine dreistufige Schattenskala, die die gesamte Elevationsarbeit der Seite erledigt.

2. Die Pipeline für Animation bei Sichtbarkeit

   Der Schlussstein: Ein Observer speist Ringe, Balken und Hochzähler. Drei Effekte, ein Registrierungspunkt, eine Stelle, an der ein Fehler behoben wird, wenn einer auftaucht.

3. Die SVG-Instrumente

   Die Ringe deklarieren eine pathLength von 100, stroke-dasharray und stroke-dashoffset sind also buchstäblich Prozentwerte. Es gibt im ganzen Build keine Umfangsrechnung, und der Ring kann jede Größe haben.

4. Die Lehrplan-Tabs

   Drei Panels, ein wandernder tabindex, korrekt gehaltenes aria-selected, und der Panel-Inhalt liegt im Markup statt beim Drücken eines Tabs geholt zu werden.

5. Tiefen-Parallax

   Die Hero-Karten driften mit Koeffizienten, die in data-depth-Attributen deklariert sind — die Komposition ist also im Markup verfasst statt im Skript fest verdrahtet.

05 · Architektur

Drei Dateien, keine Abhängigkeiten

Kein Bundler, kein Framework und nichts installiert: drei Dateien, ausgeliefert genau wie geschrieben, 51,2 KB Markup, 42,1 KB CSS und 20,3 KB JavaScript. Der Browser ist die einzige Laufzeitumgebung, die dieser Build je gebraucht hat.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   SVG-Fortschrittsringe brauchen normalerweise den aus dem Radius berechneten Umfang, was eine magische Zahl ins CSS setzt, die in dem Moment bricht, in dem sich die Geometrie ändert.

   Lösung

   Eine deklarierte pathLength von 100 definiert den Pfad als 100 Einheiten lang, stroke-dasharray und stroke-dashoffset sind also Prozentwerte. Der Ring kann jede Größe haben, und die Rechnung ändert sich nie.

2. Problem

   Ringe, Balken und Hochzähler sind drei Effekte, die alle dasselbe meinen: Starte, wenn sichtbar. Drei Observer wären drei Verstecke für denselben Fehler.

   Lösung

   Ein Observer, ein Registrierungsattribut, drei Renderer. Ein viertes Instrument später ist ein Renderer und kein weiterer Observer, und der Pfad für reduzierte Bewegung ist einmal für alle geschrieben.

3. Problem

   Ein dekoratives SVG-Diagramm ist für einen Screenreader unsichtbar, und eine animierende Zahl darin ist schlimmer als unsichtbar.

   Lösung

   Jedes Instrument trägt eine img-Rolle und ein aria-label, das seinen Endwert in Worten nennt, und die animierte Zahl daneben bleibt aus jeder Live-Region heraus. Der Wert wird einmal korrekt angesagt, unabhängig von der Bewegungseinstellung.

4. Problem

   Hero-Parallax mit Koeffizienten pro Element im JavaScript bedeutet, das Skript zu bearbeiten, um eine Karte zu verschieben. Die Gestaltung landet in der falschen Datei.

   Lösung

   Jede Karte deklariert ihr eigenes data-depth. Das Skript liest das Attribut, und die Komposition bleibt im Markup, wo die Gestaltende sie ändern kann.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Drei Schritte von festgefahren zu eingestellt

  Der ganze Vorschlag in einer Reihe, platziert vor jedem Preis und jedem Programmdetail, damit die Form der Sache vor dem Einkaufen ankommt.

• Eine Schleife, kein Hörsaal

  Die Lehrplan-Tabs, die eine iterative Struktur lesbar machen, ohne ein Diagramm zu brauchen, das das Diagramm erklärt.

• Unterrichtet von Leuten, die einstellen

  Mentorinnen, die über die Rollen vorgestellt werden, für die sie rekrutieren, statt über einen Jobtitel — der überzeugendste Block der Seite, und er kostet im Bau nichts.

• Nur solange du lernst

  Monatliche Preise, die aufhören, wenn der Kurs aufhört, klar in der Überschrift über den Preisen gesagt statt in einer Fußnote darunter.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Er lädt auf Abruf — es wird nichts davon geholt, bevor du es verlangst.

brightloop.com

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen