Windows XP als Portfolio nachgebaut
(mitchivin.com)- Der Grafikdesigner Mitch Ivin hat seine Portfolio-Website im Stil von Windows XP nachgebaut
- JavaScript muss aktiviert sein, um alle visuellen Effekte und Funktionen erleben zu können
- Die gesamte Website ahmt das Gefühl und die Interaktionen des Windows-XP-Desktops detailgetreu nach
- Besucher können die Login-Benutzeroberfläche sowie Startmenü, Taskleiste und mehr frei erkunden
- Das Portfolio-Erlebnis selbst unterstreicht seine besondere Kompetenz im Interface-Design
Mitch Ivin — Vorstellung der Portfolio-Website
- Mitch Ivin ist Grafikdesigner und hat seine Portfolio-Website aufwendig so umgesetzt, dass sie wie die Desktop-Umgebung des Betriebssystems Windows XP wirkt
- Besucher sehen auf dem Startbildschirm visuelle Elemente wie das Windows-XP-Hintergrundbild (Bliss) und eine Boot-Animation, die sofort an die echte Nutzungserfahrung erinnern
- Der Login erfolgt per Klick auf „Mitch Ivin“; danach können Nutzer die Website erkunden, als würden sie einen echten Desktop verwenden
- Überall in der UI finden sich Taskleiste, Startmenü, Benutzerprofil-Icon sowie Neustart- und Abmelde-Buttons, die die Atmosphäre und UX des echten OS sehr genau nachbilden
- Die Website ist ein kreatives Portfolio, das seine Design- und Frontend-Entwicklungsfähigkeiten durch das eigentliche „Erlebnis“ zeigt, und zugleich ein unterhaltsames Beispiel für Web-Interaktion ist
Wichtige Funktionen und Eigenschaften
- Für die vollständige Nutzung ist JavaScript zwingend erforderlich
- Mit der Taste F11 im Vollbildmodus kommt das Erlebnis einem echten Desktop besonders nahe
- Es gibt Shortcut-Buttons zu externen Profilen und Arbeiten auf LinkedIn, GitHub und Instagram
- Auf Mobilgeräten wird eine nutzerfreundliche Animation angezeigt, etwa mit dem Hinweis, das Gerät ins Hochformat zu drehen
- Jedes Icon, jeder Button und jede Animation ist zielgerichtet gestaltet, schlicht gehalten und vermittelt das originale „Windows XP“-Gefühl unverändert
Aufbau der Benutzeroberfläche
Desktop-Bildschirm und Login
- Auf dem Startbildschirm werden das Windows-XP-Hintergrundbild und eine Boot-Animation angezeigt
- Ein Klick auf das Benutzer-Icon „Mitch Ivin“ startet den Login-Vorgang
- Nach erfolgreichem Login werden Taskleiste, Start-Button und weitere Interface-Elemente aktiviert
Taskleiste (Taskbar) und Startmenü (Start Menu)
- Eine Taskleiste, die dem echten Windows XP sehr ähnlich ist, wird angezeigt
- Visuelle Buttons wie Restart und Log Off sind integriert
- Beim Klicken auf die einzelnen Buttons werden Interaktionen inszeniert, die dem echten OS ähneln
Zusammenfassung
- Mitch Ivins Windows-XP-Portfolio-Website bietet mit eigenständigem UI/UX eine differenzierte Form der Selbstpräsentation
- Besucher erleben nicht einfach nur eine Projektliste, sondern ein Portfolio zum direkten Erleben
- Es ist ein beachtenswertes Beispiel für Interface-Design und Branding, an dem sich digitale Designer und Frontend-Entwickler orientieren können
3 Kommentare
Hacker-News-Kommentare
Ehrlich gesagt gefällt mir dieses Projekt ziemlich gut, ich finde, es ist wirklich stark umgesetzt.
Aber da die Person sich als „Grafikdesigner“ vorstellt und Windows XP praktisch originalgetreu nachgebaut hat, ist es schade, dass man nicht sofort erkennen kann, wie viel eigene gestalterische Fähigkeit tatsächlich dahintersteckt.
Wenn man sich die anderen Projekte unter dem IE-Symbol anschaut, spürt man etwas mehr von einer eigenen Handschrift, aber da Teile der Visuals wie KI-generiert wirken, sinkt meine Erwartung etwas.
Auch die UX ist etwas seltsam, zum Beispiel funktioniert die Verlaufskontrolle innerhalb des Portfolios wie ein Karussell. Als ich auf Zurück/Vorher geklickt habe, erwartete ich, wieder im Projektmenü zu landen, aber das war nicht so.
Wenn sich jemand mit so einem Portfolio bei mir bewerben würde, würde ich ihm auf jeden Fall die Chance auf ein Interview geben. Es ist eindeutig beeindruckend, wie viel Mühe hineingeflossen ist und wie hoch die Qualität geworden ist.
Aber die oben genannten Punkte, vor allem dass kein nutzerzentrierter Ansatz erkennbar ist, würden mir Sorgen machen, sodass ich das im Gespräch unbedingt ansprechen wollte.
Nur zur Einordnung: So ein Design könnte ich auch bauen. Im Grunde ist das praktisch dieselbe Arbeit wie die Umsetzung eines Entwurfs, den ein UX-Designer geliefert hat, und so etwas habe ich oft gemacht.
Ich hoffe, das klingt nicht enttäuschend, aber unabhängig davon ist es eine ziemlich coole Arbeit, die mir gefallen hat, und als Portfolio für viele erste Auswahlrunden wird es ganz sicher funktionieren. Ich hoffe nur, die Person behält im Kopf, dass der nächste Schritt dann zeigen muss, was sie wirklich kann.
Du sagst, du könntest dieses Design wirklich selbst machen, obwohl du kein gutes Designgefühl hast – ich würde gern wissen, ob du das wirklich mit voller Sicherheit sagen kannst.
Ich habe bisher unzählige XP-Nachbauten gesehen, und da war immer irgendetwas leicht daneben.
MitchIvin XP ist vielleicht keine vollständig identische Kopie, aber das Nutzungserlebnis ist ziemlich angenehm.
Ich habe ähnliche Bedenken.
Als reines Projekt ist es interessant, aber wenn es um eine XP-Kopie geht, gibt es bereits viele Beispiele, die präziser umgesetzt sind.
Als Portfolio dürfte das eher einen negativen Effekt haben. Im heutigen Design ist es viel wichtiger, etwas Originelles auszuprobieren.
Grafikdesign wird oft nur als Beherrschung von Programmen bewertet oder als Fähigkeit, etwas Hübsches zu zeichnen, aber in Wahrheit ist es Kommunikation: Botschaften werden unter Berücksichtigung von Einschränkungen, Zielgruppe und Emotionen visuell gestaltet.
Abkürzungen gibt es nicht, also sollte man bestehendes Design studieren und üben, mit Farbe, Layout, Typografie und Bildern zu zeigen, was man ausdrücken will.
Man sollte auch selbst zeichnen und generative KI besser meiden, bis man selbst wirklich sicher ist.
In diesem Stadium ist es als Portfolio leider nicht einprägsam genug und braucht noch mehr Übung.
Dass es aber überhaupt fertiggestellt und bis weit nach oben auf HN gebracht wurde, verdient großes Lob. Ich hoffe, diese Gelegenheit wird zu einem Wendepunkt und die Person baut weiter Dinge.
Schon der Punkt „Ich hätte Fragen im Interview und könnte auf dieser Grundlage vielleicht einstellen“ zeigt, dass diese Seite ihre Aufgabe als Portfolio erfüllt hat.
Ein Portfolio muss im Grunde nur Neugier auslösen und jemandem das Gefühl geben: „Diese Person würde ich gern einmal treffen.“
Letztlich ist es dafür da, an die erste Tür zu klopfen, nicht dafür, allein dadurch den Job zu bekommen.
Grafikdesign ist eigentlich keine Kunst.
Es ist eine Form von Kommunikation, bei der Text, Bilder und Layout strategisch eingesetzt werden, um Informationen visuell wirksam zu vermitteln.
Originalität ist vor allem bei Branding, Urheberrechtsfragen oder wenn man bestehende Kultur einfach übernimmt, wichtig.
Die wichtigere Frage ist: „Warum willst du dich und dein Portfolio gerade durch Windows XP zeigen?“
Bei mir kommt vor allem technische Kompetenz an.
Vermutlich war die Absicht, Auftraggeber aus der Tech-Branche – vor allem im Freelance-Bereich – über Nostalgie anzusprechen.
Als Art Director würde ich die Person vermutlich nicht zum Interview einladen, aber wahrscheinlich war das auch kein Portfolio für Art Directors.
Und dieses „Das könnte ich auch bauen“ hört man in Designjobs ständig.
Die Umsetzung ist tatsächlich der einfachste Teil von Design. Dieses Portfolio müsste selbstverständlich besser aussehen als XP selbst – darin läge die eigentliche Fähigkeit.
Wenn ich Designer einstelle, interessiert mich nicht, wie exakt jemand die Ungelenkheiten von XP reproduziert hat.
Bei Entwicklern ist es auch nicht überraschend, wenn sie so etwas umsetzen können.
Viel beeindruckender finde ich es, wenn Entwickler auf gute Typografie oder gutes Layout achten. Der schwierigste Teil ist in Wirklichkeit, zu entscheiden, welche Elemente und welche Informationsstruktur auf den Bildschirm kommen.
Was man zeigt und wie man es strukturiert, ist der Schlüssel zum Erfolg.
Ich würde diese Person einstellen wollen.
Sie hat Biss, Ausdauer und Kreativität genug, um sich von der Konkurrenz abzuheben.
Viele Tausend HN-Nutzer, ihre Freunde, Tech-Journalisten und viele andere Menschen haben diese Arbeit gesehen und genossen, und künftig werden noch mehr davon erfahren.
Im Moment ist es nicht leicht, einen Job zu bekommen, aber mit so einem Stil werden die Angebote sicher kommen.
Nebenbei: Auch mein eigenes Portfolio braucht bald ein Upgrade, und das hier hat mich so inspiriert, dass ich selbst Lust bekomme, so etwas zu versuchen.
Als ich die Beschreibung „ein individuelles Portfolio im XP-Stil mit Liebe zum Detail“ gesehen habe, wollte ich auf ein paar Details hinweisen.
Wenn ich selbst so etwas bauen würde, würde ich den Boot- und Login-Screen weglassen. Vor allem würde ich „About Me“ direkt beim Start zeigen, damit Kunden es leicht finden können.
Wenn man das Symbol oben links in der Titelleiste doppelklickt, sollte sich das Fenster schließen. Anders als beim Klick auf den eigentlichen Titelbereich führt das nicht zum Maximieren, sondern zum Schließen – so war das ursprünglich.
Ich finde, gerade Boot- und Login-Screen tragen viel zum Reiz der Gesamtumsetzung bei.
Solche kleinen Details und das Eintauchen der Nutzer sind bei GUI-Projekten ein wirklich wichtiger Punkt.
Es fühlt sich flüssiger an als echtes Windows XP.
Schwer zu erklären, aber es hat eindeutig etwas Anziehendes in UX/UI-Hinsicht.
Interessant ist auch, wie natürlich es sich mit der Hierarchie von Browser-Tabs verträgt.
Durch Startbildschirm, Login und Sound, die jeweils einen eigenen Bereich schaffen, vermittelt es gut das Gefühl, einen besonderen Raum zu betreten.
Egal ob Windows oder irgendetwas anderes: Wenn es schnell ist, wirkt es viel besser.
Es muss innerhalb von 20 ms reagieren, damit man keine Verzögerung spürt und es sich angenehm anfühlt.
Stimme vollkommen zu.
Ich nutze macOS 26 Beta, aber dieser Windows-XP-Klon fühlt sich eher wie ein Upgrade an.
Das liegt daran, dass er simpel und schnell ist und ich schon genau weiß, wie man ihn benutzt.
Alte Windows-Versionen waren wegen Single-Core bei Multitasking schwach, aber gerade das hilft irgendwie beim Fokussieren.
Bei modernen Betriebssystemen verteile ich Dutzende Fenster und Hunderte Tabs über mehrere Workspaces und Monitore, und das fühlt sich oft chaotisch an.
Nostalgie ist ein wichtiger Faktor, aber beim Login-Sound zieht mich noch etwas Zusätzliches an.
Ich frage mich, ob du auch auf Logout geklickt hast.
Die Geschwindigkeit der UI-Interaktionen ist extrem hoch.
Bei modernen UIs sind manchmal nur einzelne Übergänge schnell, während das Gesamtsystem träge reagiert, und das wirkt dann seltsam.
Ehrlich gesagt ist es interessant, aber der Ansatz fühlt sich irgendwie falsch an.
Ich bin über die Beschreibung „Grafikdesigner“ ins Portfolio gegangen und hatte dann den Eindruck, im Grunde einfach eine alte Gestaltung anderer Leute reproduziert zu sehen.
Das KI-Bild auf dem Login-Screen und die Icons, die sich beim Mouseover merkwürdig bewegen, sind mir ebenfalls aufgefallen.
An solche Effekte kann ich mich bei Windows XP nicht erinnern, daher war ich unsicher, ob das ein seltsamer Bug sein soll.
Ab da begann für mich die Glaubwürdigkeit zu sinken.
Weil sich die Person als „Grafikdesigner“ bezeichnet, aber KI-generierte Grafiken verwendet, fragte ich mich auch, ob sie den Code ähnlich hat schreiben lassen.
Auch die Art, den Lebenslauf als falsche PDF-Datei zu zeigen, fand ich eher frustrierend.
Mehrere Projekte sind in kleine Fenster eingesperrt und schwer vernünftig anzusehen, zwei davon zeigen nur Ladeanimationen.
Anfangs hieß es, es habe keine Programmiererfahrung gegeben und ein KI-Agent habe geholfen, während „alle Entscheidungen vom Menschen getroffen wurden“; aber wenn jemand den Code nicht selbst schreiben kann, hatte dann nicht das LLM faktisch mehr Entscheidungsmacht?
Ich frage mich auch, ob die Person wirklich sicher ist, dieses Projekt noch einmal von Grund auf selbst nachbauen zu können.
Es ist ein interessantes und cooles Projekt, aber als Portfolio führt es leider eher dazu, die eigenen Fähigkeiten zu unterschätzen.
Außerdem gibt es schon viele ähnliche Beispiele: win32.run
Ich wollte das früher schon einmal posten, aber es hat nicht geklappt, was schade war.
Es freut mich, dass ihr jetzt Spaß daran habt.
Ich bin neu bei HN, also hätte ich jetzt auch gern ein bisschen Karma.
(Ich bin der Admin.)
Ich habe deinen ursprünglichen Show-HN-Post wiederhergestellt und die Kommentare zusammengeführt.
Ich habe dein Konto auch als normales Konto markiert, damit du dir keine Sorgen wegen des Spam-Filters machen musst.
Das Finish ist wirklich großartig! Ich finde, XP-Feeling und sogar der Geist dieser Zeit kommen hervorragend rüber.
Wenn es in Windows XP wirklich eine professionelle „Portfolio-Generator“-App gegeben hätte und das Ergebnis so hochwertig gewesen wäre, hätten alle es sicher als beeindruckendes und schönes Produkt anerkannt.
Es ist eine großartige Arbeit, die sowohl die eigenen Fähigkeiten zeigt als auch die Schönheit von Windows XP auf moderne und zugleich historische Weise neu zum Leben erweckt.
Sehr gut gemacht! Eine großartige Arbeit.
In meinem Browser (Chrome 138, Windows 10) erscheint das Startmenü erst nach ein paar Sekunden ganz kurz und verschwindet dann sofort wieder.
Die Ausführung ist wirklich auf hohem Niveau, ein sehr starkes Ergebnis.
Als XP-Nutzer gefällt mir diese Arbeit wirklich sehr.
Wenn ich kleinlich sein darf:
Ich sehe das als Hommage, also als stilvolle Aufwertung der klassischen Windows-XP-Ästhetik, vermischt mit einem neuen Ausdruck der Gegenwart.
So entwickeln sich Kunst und Stil oft weiter: indem man sie auf moderne Weise neu interpretiert, weiterführt und dabei die Wurzeln respektiert.
Die Tabs in der Taskleiste – ja, das stimmt, und ich habe enorm viel Zeit investiert, um das anzugleichen.
Am Ende ist es zwar leicht anders, aber ich finde, es kommt dem Original sehr nahe.
Alles andere waren bewusste ästhetische Entscheidungen. Tatsächlich gibt es einen größeren Unterschied, den bisher offenbar niemand erwähnt hat.
Wenn man auf dem Desktop per Drag-Selection auswählt, ist das Highlighting viel näher an Windows 11 als an XP.
Das wollte ich künftig noch verbessern.
Wirklich tolle Arbeit, aber ich finde, in zwei Punkten bleibt es etwas hinter den Möglichkeiten zurück.
Erstens fehlt ein bisschen das Gefühl von „echtem Computer“. Wenn es zum Beispiel beim Eingeben von "dir" in der Kommandozeile irgendeine kleine interessante Interaktion gäbe, wäre es viel spannender.
Zweitens hält die Qualität der Inhalte im Portfolio mit dem Eindruck der Website nicht ganz mit. Die Seite selbst ist sehr hochwertig, aber die anderen Arbeiten wirken im Vergleich dazu zu simpel und leer.
Insgesamt ist es aber trotzdem ein gutes Projekt.
Wirklich tolle Arbeit.
Jedes Mal, wenn ich das sehe, vermisse ich das Styling von Windows XP wieder.
XP war das einzige Windows, das wirklich auf „Spaß“ gesetzt hat – sogar mit einem Hunde-Maskottchen in den Suchergebnissen.
Selbst die Taskleiste unten wirkte wie ein Fisher-Price-Spielzeug, und auch Clippy vermisse ich.
Ich vermisse die Zeit, in der professionelle Software sich so viel Verspieltheit erlauben durfte.
Und nebenbei: Der Stil des Avatars erinnert mich an Simpsons oder Bob’s Burgers, was einen starken Eindruck hinterlässt.
Beeindruckende Arbeit, aber ich finde, sie braucht noch mehr inhaltliche Tiefe.
Zwischen Kopie und Schöpfung besteht eine grundlegende Spannung.
Natürlich starten viele kreative Arbeiten aus bestehenden Formen. Krimis haben zum Beispiel oft standardmäßig Leichen, Alkoholflaschen und schlagfertige Dialoge. Aber wahre Kunst entsteht erst, wenn man solche Formen auf eigene Weise neu interpretiert.
Man kann einer KI die Storyline überlassen, aber Auswahl, Stimme, Reibung – also echte Präsenz und Seele – muss der Mensch hinzufügen.
Hier habe ich das Gefühl, dass genau diese „Präsenz“ fehlt.
Das Projekt ist gut gemacht, aber es ist eben einfach Windows XP – ansehnlich, aber flach.
Ich respektiere die Mühe und den Lernprozess der Person, aber am Ende fühlt es sich doch wie eine „Kopie“ an.
Wenn ich die Hauptperson wäre, würde ich das als ersten Schritt sehen: „Okay, die Kopie ist fertig – was kann ich jetzt verbessern? Was kann ich verändern, welches Risiko kann ich eingehen? Könnte ich ein Vorher-Nachher zeigen?“
Die eigentliche Frage ist, warum man bei einer Nachbildung stehen bleibt, statt darüber hinauszugehen, sie zu verbessern, zu erweitern und sich anzueignen.
Gerade bei der Zusammenarbeit mit KI sollte man ernsthaft darüber nachdenken, wie man inmitten unendlicher Templates und schneller Iteration den eigenen Unterschied – oder die eigene „Seele“ – zeigen kann.
(Nebenbei: Auch diesen Text habe ich mit Grammarly sprachlich prüfen lassen; dabei musste ich an das berühmte Zitat denken: „A man’s got to know his limitations.“)
Ein großes, weitergedachtes Projekt und dazu ein einprägsames, sauberes Replikationsprojekt – diese Kombination kann auf Leute, die viele Portfolios schnell durchsehen, ziemlich attraktiv wirken.
Trotzdem stimme ich zu, dass ein Portfolio am Ende ausgewogen und vielfältig sein sollte.
Das gefällt mir sehr.
Wenn ich ein paar einfache XP-Fehler pedantisch aufzählen darf:
Ich sehe das als schöne Hommage oder moderne Interpretation eines klassischen Stils.
Es ist Teil der Weiterentwicklung einer Tradition, bei der klassische Ästhetik mit modernem Empfinden verbunden und neu präsentiert wird, ohne die Wurzeln zu verlieren.
Die Tabs in der Taskleiste – ja, das ist ein berechtigter Punkt, und ich habe wirklich sehr viel Zeit hineingesteckt, es exakt hinzubekommen, aber irgendwann teilweise aufgegeben.
Alles andere sind ästhetische Entscheidungen. Tatsächlich gibt es einen Punkt, den niemand erwähnt hat: Wenn man Desktop-Icons per Drag-Selection auswählt, ist es viel näher am Stil von Windows 11 als an XP.
Persönlich fand ich auch, dass das noch geändert werden sollte.
Sehr coole Arbeit, aber das Gefühl, dass es wirklich wie ein „Computer“ ist, fehlt ein wenig.
Wenn man zum Beispiel in die Kommandozeile „dir“ eingeben könnte und dann eine kleine Interaktion bekäme, wäre das deutlich unterhaltsamer.
Der zweite Punkt ist, dass die Inhalte des Portfolios qualitativ zu simpel sind und nicht zum Qualitätsniveau der Website passen.
Insgesamt ist es aber ein gutes Projekt.
Wirklich tolle Arbeit.
Immer wenn ich das sehe, sehne ich mich nach dem Stil der Windows-XP-Zeit zurück.
XP war das einzige Windows, das wirklich auf „Spaß“ ausgelegt war, mit dem niedlichen Hunde-Maskottchen, einer Taskleiste wie ein Fisher-Price-Spielzeug und Clippy – es hatte Witz.
Ich vermisse die Zeit, als professionelle Programme so verspielt sein durften.
Und der Avatar im Simpsons-/Bob’s-Burgers-Stil ist ebenfalls einprägsam.
Dieses Projekt ist wirklich großartig.
Es zeigt die eigenen Fähigkeiten, Lernbereitschaft, Beharrlichkeit und Liebe zum Detail sehr gut.
Anders als die Leute, die die Replik oder kleine Detailfehler kritisieren, finde ich nicht, dass genau das der entscheidende Punkt ist.
Tolles Projekt, Glückwunsch.
Guten Tag, ich bin ein Backend-Entwickler und arbeite gerade an einem Portfolio, das diesem Beitrag sehr ähnlich ist. Es ist noch in der abschließenden Überarbeitung,
aber ich wollte einen Kommentar hinterlassen, um zu fragen, ob ich ebenfalls ehrliches und kritisches Feedback bekommen könnte.
Falls ein solcher Kommentar kein Problem ist, poste ich den Link zu meinem Portfolio.
+) Und da ich hier neu bin, würde ich gern wissen, ob es hier zur Regel gehört, in einem knappen, informellen Stil zu schreiben.
Das ist nicht nötig. Bitte, lieber Entwickler, tun Sie das nicht. Ehrlich gesagt finde ich es wirklich unerträglich anzusehen, aber ich schaue es trotzdem, weil es viele nützliche Informationen enthält und dieses "Ähm, mmh" offenbar ein Mittel ist, mit dem diese Leute Informationen effektiv vermitteln wollen. Auch wenn es mich anwidert, sehe ich es mir deshalb an. Ich wäre Ihnen dankbar, wenn Sie Informationen in ordentlichen, vollständigen Sätzen teilen würden.