Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Viva con Agua Website Redesign

Für die Abschlussarbeit zum Kurs Digitale Typografie von und mit Frank Rausch entstand dieses Redesign der Website von Viva con Agua mit speziellem Fokus auf Typografie.

Viva con was?

banner.pngbanner.png

WASSER FÜR ALLE

ALLE FÜR WASSER

Das hat sich die 2006 gegründete entwicklungspolitische Non-Profit-Organisation mit Zentralsitz in Hamburg-St. Pauli auf die Fahne geschrieben und unterstütz durch verschiedenste Spendenaktionen Wasser Projekte in über 20 Ländern.

Überraschenderweise hat Viva con Agua eine recht nüchterne und altbackene Website, obwohl die Marke auf anderen Kanälen sonst sehr hip und modern daherkommt. So fiel mir die Wahl für mein Abschlussprojekt sehr leicht.


Status Quo

Ich entschied mich bei den in der Aufgabe drei gewünschten Screens für die Startseite, die Projektübersicht und das Spendenformular. Sie schienen mir unterschiedlich genug um verschiedene Layouts und Interface Elemente gestalten zu können und einen modernen, frischen Look für die Website zu finden.

org-start.pngorg-start.png
org-projekte.pngorg-projekte.png
old.pngold.png
org-spenden.pngorg-spenden.png

Die gesamte Website hat ein eher angestaubtes Design was wohl vor einigen Jahren entstanden ist. Das Layout ist sehr starr und blockig und die Texte laufen viel zu weit.

Dazu ist die Balance zwischen der Größe und Wichtigkeit vieler Elemente nicht wirklich gegeben. Riesige Kästen die nur Links enthalten dominieren die Mitte der Seite während es an anderen Stellen willkürlichen Weißraum gibt.

Und wenn ich eins in diesem Kurs gelernt habe, dann ist es natürlich dass die Flagge im oberen Linken Eck keines Falls eine adäquate Repräsentation für eine Sprachauswahl ist ;)


El Rediseño De Viva Con Agua

new.pngnew.png
new-start.pngnew-start.png
new-projekte.pngnew-projekte.png
new-spenden.pngnew-spenden.png

Bei meinem Redesign wollte ich das coole Image der Marke durch ein moderneres Design, flexibleres Layout und frischere Farben zur Geltung bringen.

Für Überschriften und Label verwendete ich die im Viva con Agua Logo verwendete English Grotesque, Fließtexte sind in verschiedenen Schnitten der Asap gesetzt.

Die Startseite wirkt nun viel lockerer und gibt Nutzern einen Überblick über die Projekte, Produkte und Ziele von Viva con Agua. 

Die Projektübersicht ist nun, wie der Name es eigentlich verlangt, deutlich übersichtlicher dank einer neu gestalteten Karte. Mit Bildern von den verschiedenen Projekten wirken die Info Texte in der unteren Hälfte weniger nüchtern.

Das Spendenformular habe ich zunächst in zwei Spalten geteilt, getrennt nach persönlichen Informationen und den Spendendetails. Die abstrakte Wassertropfen-Form die sich in vielen anderen Elementen und Buttons wiederfindet ist auch in den Inputfeldern aufgegriffen worden.


Conclusión

Vor diesem Kurs hielt sich meine Begeisterung für Typografie schon eher in Grenzen. Für mich als Interfacedesigner war sie in der Regel nur Mittel zum Zweck und das Interesse an Typografische Feinheiten hat mir einfach gefehlt.

Ich bin sehr froh dass ich mein Desinteresse dank der Vorträge und Aufgaben in diesem Kurs ablegen konnte und nun mit anderen Augen und deutlich fundierterem Wissen mit der Thematik umgehe.

Besonders die Spezialisierung auf digitale Typografie hat mir den Einstieg leichter und zugänglicher gemacht als es bspw. das gestalten einer eigenen Schrift gemacht hätte.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Digitale Typografie

Entstehungszeitraum

Wintersemester 2019 / 2020

Keywords