Jahresprojekt Alphabet Schweinfurt

Im Rahmen des Jahresprojekts der Berufsschule habe ich eine Website zum Thema Buchstaben in der Stadt Schweinfurt entwickelt. Die Idee war, die Stadt mit einem neuen Blick zu erkunden und auffallende, besondere Buchstaben zu fotografieren, die wir auf einem gemeinsamen Ausflug gesammelt haben. Die Bilder sollen anschließend in einer fiktiven Ausstellung ausgestellt werden

zur lauffähigen Website

Gestaltung & Konzept

Für das Design habe ich mich für eine Farbkombination aus Rosa und Grau entschieden, die ich mit Gelb als Kontrastfarbe ergänzt habe. Um die vielen unterschiedlichen Fundstücke visuell zusammenzuführen, habe ich die Fotos auf der Startseite in Schwarz-Weiß gesetzt – so entstand ein einheitliches Erscheinungsbild, das den Fokus ganz klar auf die Typografie legt. Ein besonderes Highlight ist der Header, in dem mithilfe von JavaScript Buchstaben durch den Bildschirm fliegen. Diese Animation bringt Bewegung ins Design und greift das Thema spielerisch auf.

Logo

Als zusätzliches Gestaltungselement sollten wir ein eigenes Logo für das Projekt entwickelt: Der Schriftzug Alphabet Schweinfurt besteht aus Buchstaben in verschiedenen Fonts, sodass das Thema Typografie direkt sichtbar wird. Das „S“ habe ich mit einem kleinen Kringelschwanz versehen – eine subtile Anspielung auf die Stadt Schweinfurt.

Funktionen & Interaktive Elemente

Die Website ist als Onepager gestaltet und wird durch Unterseiten ergänzt, die einzelnen Buchstaben gewidmet sind. Auf der Startseite finden sich verschiedene experimentelle Elemente – etwa ein Slider, der wie ein Stapel alter Kamerafotos wirkt und den man durchswipen kann. Außerdem gibt es einen auffälligen Störer, der auf die fiktive Ausstellung aufmerksam macht. Über einen weiteren Slider gelangt man zu den Unterseiten, auf denen Bilder zu einem bestimmten Buchstaben gesammelt sind, zum Beispiel zum „R“. Für das Projekt habe ich exemplarisch eine dieser Seiten umgesetzt. Auf der jeweiligen Buchstaben-Seite erscheinen am Bildschirmrand viele Varianten des entsprechenden Buchstabens als kleine Animation, die den Charakter der Seite unterstreicht. Zusätzlich gibt es ein Formular, über das Besucherinnen und Besucher eigene Bilder hochladen können, um selbst Teil der Ausstellung zu werden.

Technik & Umsetzung

Die Website entstand auf Basis eines Mobile-First-Ansatzes, sodass die Gestaltung zunächst für kleine Bildschirme konzipiert und anschließend für Tablet- und Desktop-Ansichten erweitert wurde. Durch Progressive Enhancement bietet die Seite auf größeren Displays zusätzliche visuelle und funktionale Details, die das Nutzererlebnis bereichern. Technisch wurde das Projekt mit HTML, CSS und JavaScript umgesetzt. Für den gestalterischen Feinschliff kamen außerdem Adobe InDesign, Illustrator und Photoshop zum Einsatz, um Design und Technik wirkungsvoll miteinander zu verbinden.

Dokumentation

Begleitend zur Umsetzung habe ich eine umfassende Dokumentation entwickelt, in der ich meine gestalterischen Entscheidungen Schritt für Schritt reflektiere. Sie zeigt, wie sich aus ersten Ideen, Farb- und Typografietests ein schlüssiges Gesamtkonzept entwickelt hat. Dabei lag mein Fokus darauf, die Gestaltung nicht nur ästhetisch, sondern auch konzeptionell zu begründen – etwa bei der Auswahl von Formen, Bildstilen und der Struktur des Layouts. Die Dokumentation verdeutlicht damit, wie eng Entwurf, Analyse und technische Umsetzung miteinander verwoben sind.

Mein Fazit

Rückblickend war das Projekt eine intensive, aber sehr bereichernde Erfahrung. Es hat mir gezeigt, wie stark sich Gestaltung und technische Umsetzung gegenseitig beeinflussen und wie wichtig eine klare konzeptionelle Grundlage ist. Besonders spannend fand ich die Herausforderung, eine harmonische Balance zwischen Ästhetik, Benutzerfreundlichkeit und technischer Machbarkeit zu finden. Das Ergebnis ist für mich mehr als nur eine funktionierende Website – es ist ein Ausdruck meines gestalterischen Verständnisses und meiner Freude daran, Ideen sichtbar und erlebbar zu machen.

zur lauffähigen Website
Zurück zur Portfolio-Übersicht