loading
...

Space Mono

Präsentation der Google Font Space Mono mithilfe eines Onepagers.

Space Mono Website

Über das Projekt

In diesem Projekt ging es darum, eine Google-Schriftart mithilfe eines One-Pagers vorzustellen. Dabei war es entscheidend, sich intensiv mit der Typografie auseinanderzusetzen, um den Charakter der Schrift optimal und zielgerichtet auf der Website zu vermitteln. Der One-Pager wurde im Rahmen des 2. Semesters mithilfe von Figma konzipiert und gestaltet.

Wireframes & Styleguide

Im ersten Schritt haben wir eine umfangreiche Analyse verschiedener Websites durchgeführt, um den gestalterischen und funktionalen Ansatz für unser eigenes Projekt zu entwickeln. Dabei haben wir uns besonders mit Layout, Typografie, Navigation und Interaktionsmustern beschäftigt, um die wichtigsten Elemente für unseren One-Pager zu definieren.

Basierend auf diesen Erkenntnissen entstanden erste Wireframes, die Struktur, Informationsfluss und visuelle Gewichtung festlegten und einen klaren Aufbau vorgaben.

Im nächsten Schritt wurde der Styleguide erstellt. Mein Fokus lag hierbei auf einer modernen und minimalistischen Designsprache: eine klare, reduzierte Ästhetik, die viel Weißraum nutzt und die Schriftart selbst in den Mittelpunkt stellt.

Umsetzung

Für die Visualisierung der Inhalte habe ich mich für einen Spotlight-Look entschieden, der die Informationen hervorhebt, sobald man zur jeweiligen Sektion scrollt.

Die Inhalte der Seite umfassen unter anderem Informationen zur Herkunft der Schrift, den Typedesignern, den verfügbaren Schriftschnitten sowie weiteren typografischen Eigenschaften.

Jede Sektion wurde bewusst minimalistisch gestaltet, um die Schriftart selbst in den Mittelpunkt zu stellen und ihre charakteristischen Merkmale klar hervorzuheben.

Umsetzung

Die fertige Website wurde für drei unterschiedliche Bildschirmgrößen optimiert – darunter auch eine vollständig angepasste mobile Version. Alle Layout-Elemente wurden responsiv umgesetzt und so gestaltet, dass die Schrift in jeder Auflösung ideal präsentiert wird.

Projektvideo

Tools: Figma Rolle: Konzeption, Wireframing, Styleguide, Umsetzung Jahr: 2022