Fashion-Magazin am MIT

Eine MIT-Studentin, die über eines unserer viralen Webdesigns gestolpert ist, nahm proaktiv mit uns Kontakt auf. Sie und ihre Kollegen arbeiteten an einem von Studenten geführten und vom MIT finanzierten Fashion Magazin. Sie brauchten eine Landingpage, die zwei Themen miteinander vereint: Tech + Fashion.

Wir hatten einen einzigen Call und danach ging es direkt rein in Figma. Wir arbeiteten asynchron an einem Moodboard und nach ein paar Tagen stand das erste Design-Konzept. Unsere Kunden akzeptierten es direkt, das bedeutete wir konnten sofort in die Entwicklung übergehen.

Unsere Kunden hatten eine spezifische Anforderung: ASCII-Illustrationen. Sie zeigten uns einige 2D Beispiele, wir fanden aber, dass diese zu generisch aussehen. Nach kurzer interner Diskussion entschieden wir uns dafür, kurzerhand eines der Haupt-MIT-Gebäude in Blender 3D zu modellieren und einen ASCII-Shader zu verwenden, um die gewünschte Ästhetik zu erreichen.

Der ganze Prozess war langwieriger als erwartet (die meiste Zeit ging für Beleuchtung und die Dreh-Animation drauf: beide waren essentiell dafür, dass der ASCII-Shader gut aussieht). Wir zeigten unserer Kontaktperson das Endergebnis; sie war hin und weg.

Es war von Anfang an klar, dass wir auch irgendeine Art von Terminal-Ästhetik implementieren wollen. Anstatt einene generischen Mono-Font-Dark-Mode Terminal im Flat-Design zu bauen, entschieden wir uns dafür all-in zu gehen und einen Retro-Terminal in Oldschool-CTR-Optik zu designen und implementieren. Dieser Terminal ist das Haupt-Navigationselement der Landingpage, mithilfe dessen man die verschiedenen jährlich erscheinenenden Ausgaben auswählen kann.

Als unsere Kunden uns die Coverarts der letzten Magazine zeigten, waren wir überzeugt davon, dass wir die nicht einfach verstecken können, sie sehen zu gut aus. Um die Covers darzustellen, verwendeten wir einen Microcontroller-Screen. Wir nahmen ein Bild eines generisches Modells von Google, passten es an, entfernen den Hintergrund und fügten einen (unrealistischen) Anschluss zwischen Terminal und Microcontroller hinzu.

Ein weiterer Kundenwunsch war es, den Hintergrund farbenfroh zu gestalten. Um zusätzlich zur Tech + Dev Optik beizutragen, entschieden wir uns dafür, Conways Game of Life als interaktiven Hintergrund zu implementieren. Conway's Game of Life ist ein Zellulärer Automat, der die Evolution einer Population von Zellen über einen bestimmten Zeitraum simuliert. Der Algorithmus ist etwas, das viele Entwickler im Laufe ihres Studiums implementieren, um ihre Fähigkeiten in Algorithmen und Datenstrukturen zu testen. User können an eine beliebige Stelle klicken, um eine Zelle zu setzen und die Simulation zu beeinflussen.

Eine Sache, die auf der Landingpage noch fehlte war eine Teammitglieder-Sektion. Anfangs war die Idee, "einfach" Polaroids auf der Seite zu verteilen. Das sah aber nicht wirklich gut aus und wirkte ziemlich unpassend. Nach einiger Überlegung erzählten wir unseren Kunden von der Idee, eine Schneidmatte als Untergrund zu verwenden. Zuerst wollten wir einfach ein bestehendes Design aus dem Internet übernehmen aber das stellte sich als schwierig heraus als gedacht, also entschieden wir uns dafür einfach selbst eine Custom-Schneidmatte für's MIT zu designen.

Die Schneidmatte kommt mit ein paar Easter-Eggs. Eines von ihnen ist diese 'Hacker-Karte', die das MIT-Skyline und einen Biber (das MIT-Mascott) zeigt, diese Karte ist auch auf dem MIT-Graduiertenring abgebildet.

Die Schneidmatte diente als perfekter Hintergrund für die Polaroids. Um die Polaroids neben Fashion und Lifestyle auch einen gewissen Tech-Touch zu geben, konvertierten wir alle Team-Mitglieder-Bilder zu ASCII und implementierten einen "Aufdeck-Effekt" durch den User mittels Drag-and-Drop die Person unter der ASCII-Illustration aufdecken können.