Skip to main content
Picture of xkcd design (desktop version)

xkcd

🔗

Dieses Projekt ist etwas besonderes, da ich keine einzige Zeile Code geschrieben habe! Ich wollte mit dem Design Tool Figma besser werden, aber nicht einfach nur einem Tutorial folgen, sondern ein echtes Projekt bauen. Was mich dazu inspiriert hat, war dieses Video von AJ&Smart: Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2021). In diesem erklärt er nicht nur Figma selbst, sondern sagt auch, dass man am besten dadurch lernt, indem man andere Websites / Applikationen nachbaut. Aus diesem Grund habe ich beschlossen, einen Neuentwurf der xkcd Website vom Buchautor Randall Munroe anzufertigen, da ich ein großer Fan seiner Bücher What If und How To bin.

Zweck & Zielsetzung

🔗

Mir fiel immer öfter auf, dass ich beim Ausprobieren von Struktur und Styling einer Website / Applikation sehr lange brauchte, da ich zuerst den entsprechenden Code und CSS dafür schreiben musste. Ein schneller Entwurf war selten möglich, wenn es um weniger triviale Dinge wie das umarrangieren mehrerer Komponenten ging. Nach ein wenig Recherche bin ich auf Figma gestoßen, welches ein sehr populäres und flexibles Design Tool ist, auch in der kostenlosen Variante.

Damit konnte ich in kurzer Zeit Wireframes erstellen, in denen ich zum Beispiel per Drag & Drop die Platzierung von Komponenten oder Schriftarten getestet habe. Der nächste Schritt war, aus dem Wireframe ein Prototyp zu erstellen, sodass man zum Beispiel durch klicken ein Menü öffnen kann.

Da ich aber meine Fähigkeiten mit einem "echten" Projekt verbessern wollte, hatte ich mich entschieden, einen Neuentwurf der xkcd Website zu machen. Diese ist (meiner Meinung nach) vom technischen und ästhetischen Aspekt etwas in der Zeit stecken geblieben. Mein Ziel war es, das Design radikal zu vereinfachen, die Benutzerführung zu verbessern, aber auch dem Stil von Randall Munroe treu zu bleiben.

Verwendete Technologien

🔗

Da ich für dieses Projekt nur Figma benutzt habe, werde ich auf ein paar Techniken eingehen, welche ich in diesem Design Tool verwendet habe. Unter anderem habe ich gelernt, das Projekt aufzuteilen in sogenannte "Pages":

  • Inhalte
  • Anlagen
  • Mobile Variante
  • Tablet Variante

In der ersten hielt ich den groben Aufbau fest, sowie alle Texte, welche ich einfügen möchte. In der zweiten befanden sich alle Bilder und Icons, die ich verwenden möchte. Dann fing ich mit der mobilen Version an, da ich so leichter feststellen konnte, welche Elemente essenziell für die Website waren und wie ich sie benutzerfreundlich anordnen konnte.

Darauf aufbauend ging das Erstellen der Tablet Version recht schnell. Je nach Komplexität eines Projekts kann es notwendig sein, auch einen Prototyp für die Desktop Version zu erstellen. In diesem Fall aber nicht, da es keine großen Änderungen von Tablet zu Desktop gab.

Picture of xkcd design (mobile version)

Herausforderungen & Probleme

🔗

Figma ist ein sehr benutzerfreundliches Programm, weshalb ich damit kaum auf Probleme oder Herausforderungen stieß. Am schwierigsten war es, ein Design zu entwerfen, welches einerseits Konventionen aktueller Web Applikationen berücksichtigt, aber auch dem Charakter der ursrpünglichen Website treu bleibt. Aus diesem Grund habe ich mich für ein simples Schwarz / Weiß Design entschieden, da es das beste Kontrastverhältnis bot und dem Stil der Strichmännchen-Zeichnungen einen passenden Rahmen gab.

Zudem war es mir wichtig, den Fokus auf die horizontale Bildergallerie zu legen, da diese das Herzstück seiner Arbeit bilden sollte. Außerdem sind die Buttons im Stil des Original Designs gehalten, um dieses in gewisserweise zu ehren.

Fazit

🔗

Ich hatte nicht nur sehr viel Spaß bei diesem Projekt, sondern auch mein persönliches Ziel erreicht, Figma besser kennenzulernen. Zumindest so weit, dass ich mich sicher genug darin fühlte Entwürfe anzufertigen. Es gibt noch sehr viel Raum für Verbesserung in meinem Workflow, aber je öfter ich es benutzen werde, desto besser werde ich mit diesem Werkzeug umgehen können. Außerdem war es sehr erfrischend mal keinen Code zu schreiben! 😅