Karrierewebsite-Design

Eine Karriereseite in acht Szenen erzählt

Diese Kimi-Karriere-Rekonstruktion ist keine lange Seite, deren Abschnitte lediglich durch den Viewport scrollen. Sie schichtet acht Szenen auf einer einzigen visuellen Bühne und nutzt den Scroll-Fortschritt, um deren Deckkraft, Position, Skalierung und Unschärfe zu verändern. Der Effekt erinnert eher an den Wechsel zwischen Folien einer Präsentation als an das Lesen einer herkömmlichen Stellenangebotsseite.

Dieser Unterschied erklärt sowohl die visuelle Wirkung als auch die Grenzen als Karrierewebsite-Design. Die Abfolge kann eine starke Atmosphäre aufbauen, aber praktische Informationen müssen auch außerhalb der Übergänge zugänglich bleiben. Eine Person, die den Bewerbungsprozess sucht, hat eine andere Aufgabe als jemand, der die Markengeschichte erkundet.

Wie Scroll-Position zum Szenenwechsel wird

Die Quelle bildet den scrollbaren Verlauf der Seite auf Positionen von 0 bis 7 ab, eine für jede der acht Szenen. Eine Szene wird zur aktuellen, wenn sie dieser Position am nächsten ist. Benachbarte Szenen können während des Übergangs teilweise sichtbar bleiben; deshalb kann ein Screenshot zwischen zwei Stationen weich oder doppelt wirken.

Vier nummerierte Stationen auf einem orbitalen Bewerbungsweg

Die Bewerbungsszene übersetzt eine Abfolge in eine Mondroute. Station 1, mit einem Computer und der Bezeichnung Submit gekennzeichnet, erscheint nahe der unteren Mitte; Station 2 befindet sich links davon, und die Stationen 3 und 4 setzen sich im oberen Teil der Umlaufbahn fort. Die Nummern geben die Lesereihenfolge vor, da die Geometrie keine vertraute Links-nach-rechts-Zeitlinie ist.

01

Der Pfad verbindet, aber die Nummern geben die Reihenfolge vor

Eine Umlaufbahnlinie macht deutlich, dass die vier Stationen zusammengehören. Sie sagt für sich allein nicht, wo man beginnt oder in welche Richtung man folgt. Die übergroßen Nummern-Badges liefern diese fehlende Reihenfolge. Dieselbe Unterscheidung ist bei einem verschlungenen Onboarding-Ablauf oder einem illustrierten Prozessdiagramm relevant.

02

Die Illustration ist nicht die vollständige Anleitung

Die Szene benennt einen Bewerbungsprozess, aber die mitgelieferte Rekonstruktion stellt ihn als Bild dar. Eine funktionierende Seite würde weiterhin die tatsächlichen Schrittnamen, Anforderungen und Ziele als Text benötigen. Diese Details sollten lesbar bleiben, wenn das Diagramm auf einem Smartphone vertikal gestapelt wird.

Wo eine visuelle Rekonstruktion echtes HTML benötigt

OpenDesign hat dies als offizielles Hackathon-Beispiel und visuelle Studie erstellt, nicht als beauftragtes Moonshot-Projekt. Der Unterschied ist in der Umsetzung sichtbar: Szenen 2–8 sind mitgelieferte Referenzbilder, und diese Bilder sind als aria-hidden gekennzeichnet. Das Wechseln der aktuellen Szene macht die Bezeichnungen innerhalb eines Bildes nicht als Text zugänglich.

1. Überschriften außerhalb des Hintergrundbilds halten

   In einer funktionierenden Version sollten Titel und Erklärung einer Szene als auswählbarer Text erhalten bleiben. Ein Hintergrund kann das Cockpit, die Sterne oder den Mond tragen; er sollte nicht der einzige Ort einer Bewerbungsanweisung sein.

2. Bewegung von der Informationszugänglichkeit trennen

   Bei reduzierter Bewegung ein ruhiges, lesbares Layout und einen direkten Weg zum Prozess bereitstellen. Dies ist ein vorgeschlagener Verbesserungsvorschlag, kein in der mitgelieferten Rekonstruktion verifiziertess Merkmal. Ein Besucher sollte die Scroll-Animation nicht beherrschen müssen, um den nächsten Schritt zu finden.

Was dieses Karrierewebsite-Design zeigt

Diese Fallstudie demonstriert Szenenkomposition und scrollgebundene Bewegung, keine aktuellen Stellenangebote oder ein funktionierendes Bewerbungs-Backend. Die bewusst verpixelte Referenzgrafik ist keine Vektorgrafik, und ein Export in nativer Auflösung hebt diese gestalterische Einschränkung nicht auf. Nutzen Sie sie, um Erzählstruktur und Übergangslogik zu studieren; für tatsächliche Stelleninformationen verwenden Sie die offiziellen Kanäle des Arbeitgebers.