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

Ostkompass

Eine Neugestaltung des Reiseblogs Ostkompass mit Fokus auf digitaler Typografie.

Die vierwöchige Hauptaufgabe für den Kurs » Digitale Typografie « bestand darin, ein Redesign einer selbst gewählten Webseite zu gestalten. Die Vorlage sollte nur soweit verändert werden, dass eine Evolution zu erkennen ist. Es ging nicht darum, eine radikale Neuentwicklung vorzunehmen.

Meine Wahl fiel dabei auf den Reiseblog Ostkompass einer guten Freundin. Sie schreibt wunderschöne Texte, allerdings mangelt es etwas an einem überzeugenden visuellen Erscheinungsbild. Um zu zeigen, wie dieses aufpoliert werden kann, gestaltete ich besipielhaft eine Startseite sowie eine Artikelansicht in sowohl Desktop- als auch als mobiler Variante.

Original

Startseite

Der Blog hatte in der ursprünglichen Version keine Startseite. Stattdessen wurden alle Artikel untereinander geladen. Dadurch wurde die Seite extrem lang. Der Footer war nur durch langes Scrollen zu erreichen. Die Übersicht ging dabei leicht verloren.

Leser_innen, die den Blog das erste Mal besuchten, wussten nicht, worum es geht. Deswegen habe ich den Beschreibungstext, der zuvor hinter dem Menüpunkt » Über Ostkompass « verborgen lag, direkt unter den Header auf der Startseite platziert. So wird den Nutzer_innen schnell klar, was sie oder ihn erwartet. Die großen Standbilder im Slider sollen den Leser_innen in eine Stimmung versetzen, die zu den Texten passt.

Die Menüpunkte » Länder «, » Orte « und » Themen « habe ich im Unterpunkt » Reiseroute « zusammen gefasst und die Tags auch in die Suche eingebaut, um das Menü übersichtlicher zu gestalten und die Suche schneller bedienen zu können.

Als weiteres Problem habe ich erkannt, dass neu verfasste Artikel immer an oberster Stelle erschienen. Wenn Leser_innen die Reise von Anfang bis Ende chronologisch erleben wollen, erweist sich dies als problematisch. Aus diesem Grund habe ich bei der Gestaltung eine Sortierfunktion eingebaut. Besucher_innen der Webseite haben die Wahl, die neusten Artikel an oberster Stelle anzeigen zu lassen (Standard), die Blogbeiträge chronologisch ordnen zu lassen oder die beliebtesten Artikel als Erstes anzeigen zu lassen. Um die Ladezeiten zu verkürzen und eine bessere Übersicht zu gewähren, habe ich zusätzlich eine Pagination eingebaut.

Unter der Pagination folgt ein kurzer Abschnitt über die Autorin, der zuvor einen eigenen Menüpunkt eingenommen hat. Diesen bedarf es nun nicht mehr, da Leser_innen direkt auf der Startseite Informationen zur Autorin erhalten. Interessierte haben hier, wie auch im oberen Slider, die Möglichkeit, der Autorin auf den sozialen Netzwerken Facebook und Instagram zu folgen.

Im Anschluss können sich Leser_innen die Bilder zu den neusten Instagram-Posts anschauen, die sich zuvor klein in der rechten Seitenspalte verborgen haben. Dadurch dürfte es der Autorin leichter fallen, ihre Reichweite auf Social Media zu erhöhen.

Am Ende der Seite finden Leser_innen nun den überarbeiteten strukturierten Footer mit allen notwendigen Rechtsangaben, der Sitemap, Social-Media-Links und einen Button, der ermöglicht, sich für den Newsletterfeed anzumelden. Da das Schreiben zu häufig brotlos ist, habe ich auch ein Paypal-Button implementiert. So haben Leser_innen zumindest die Möglichkeit, der Autorin einen Kaffee auszugeben.

Bildschirmfoto 2019-07-09 um 15.04.54.pngBildschirmfoto 2019-07-09 um 15.04.54.png

Bildschirmfoto 2019-07-09 um 15.30.26.pngBildschirmfoto 2019-07-09 um 15.30.26.png

Bildschirmfoto 2019-07-09 um 15.04.56.pngBildschirmfoto 2019-07-09 um 15.04.56.png

Bildschirmfoto 2019-07-09 um 15.04.57.pngBildschirmfoto 2019-07-09 um 15.04.57.png

Bildschirmfoto 2019-07-09 um 15.04.59.pngBildschirmfoto 2019-07-09 um 15.04.59.png

Bildschirmfoto 2019-07-09 um 15.05.00.pngBildschirmfoto 2019-07-09 um 15.05.00.png

Bildschirmfoto 2019-07-09 um 15.05.02.pngBildschirmfoto 2019-07-09 um 15.05.02.png

Bildschirmfoto 2019-07-09 um 15.05.03.pngBildschirmfoto 2019-07-09 um 15.05.03.png

Desktop HD - 12 Columns Copy 44.pngDesktop HD - 12 Columns Copy 44.png

Bildschirmfoto 2019-07-09 um 15.05.09.pngBildschirmfoto 2019-07-09 um 15.05.09.png

Mockup_ostkompass.jpgMockup_ostkompass.jpg

Desktop HD - 12 Columns Copy 61.pngDesktop HD - 12 Columns Copy 61.png

Desktop HD - 12 Columns Copy 64.pngDesktop HD - 12 Columns Copy 64.png

Artikelansicht

Die Artikelansicht unterschied sich in der grundständigen Version kaum von der Startseite. Statt mehreren wurde lediglich ein Artikel angezeigt. Hinzu kam lediglich die Möglichkeit, Kommentare zu sehen und zu hinterlassen.

Um den Lesefluss zu verbessern, habe ich die Schriftgröße und den Zeilenabstand erhöht, sowie die Spaltenbreite verringert. Somit ist es einfacher, den Text zu scannen und den Zeilenumbrüchen zu folgen. Die Bilder brechen das Textraster und lockern so das Layout auf. Die Bilder sind nun viel größer und unterstützen auf diese Weise die Stimmungen und Geschichten in den Texten. Die Schriften habe ich dahingehend so verändert um den Charakter der alten Seite beizubehalten, sie aber gegen professionellere, besser ausgebaute Schriften getauscht.

Unter dem eigentlichen Artikel befinden sich die Filtertags zu dem Artikel, die man auch im Menüpunkt Reiseroute wiederfindet. Die Teilen- und Kommentarfunktion sind weiterhin Bestandteil des Redsigns, wurden allerdings visuell angepasst.

Leser_innen haben, wie auch bereits in der grundständigen Version der Artikelansicht, die Möglichkeit, den vorherigen bzw. nächsten Beitrag mit einem Klick im Anschluss zu lesen. Ich habe die Buttons bewusst groß gestaltet, damit diese schwieriger zu übersehen sind. Zusätzlich habe ich eine Sektion eingebaut, die Leser_innen ähnliche Artikel verschlägt. Dies dürfte die Klickzahlen erhöhen.

Bevor Leser_innen auf der Artikelansicht zum Footer gelangen, haben sie in der neuen Version die Möglichkeit, direkt zu den beliebtesten bzw. neusten Artikel zu gelangen, ohne zurück navigieren zu müssen oder zum Header zu scrollen.

Bildschirmfoto 2019-07-09 um 15.05.53.pngBildschirmfoto 2019-07-09 um 15.05.53.png

Bildschirmfoto 2019-07-09 um 15.05.55.pngBildschirmfoto 2019-07-09 um 15.05.55.png

Bildschirmfoto 2019-07-09 um 15.05.57.pngBildschirmfoto 2019-07-09 um 15.05.57.png

Bildschirmfoto 2019-07-09 um 15.05.59.pngBildschirmfoto 2019-07-09 um 15.05.59.png

Bildschirmfoto 2019-07-09 um 15.06.00.pngBildschirmfoto 2019-07-09 um 15.06.00.png

Bildschirmfoto 2019-07-09 um 15.06.01.pngBildschirmfoto 2019-07-09 um 15.06.01.png

Bildschirmfoto 2019-07-09 um 15.06.03.pngBildschirmfoto 2019-07-09 um 15.06.03.png

Bildschirmfoto 2019-07-09 um 15.06.04.pngBildschirmfoto 2019-07-09 um 15.06.04.png

Bildschirmfoto 2019-07-09 um 15.06.06.pngBildschirmfoto 2019-07-09 um 15.06.06.png

Bildschirmfoto 2019-07-09 um 15.06.07.pngBildschirmfoto 2019-07-09 um 15.06.07.png

Bildschirmfoto 2019-07-09 um 15.06.10.pngBildschirmfoto 2019-07-09 um 15.06.10.png

Mockup_2.jpgMockup_2.jpg

Desktop HD - 12 Columns Copy 62.pngDesktop HD - 12 Columns Copy 62.png

Desktop HD - 12 Columns Copy 63.pngDesktop HD - 12 Columns Copy 63.png

Lyrische Texte

Keşke

Ich wünschte, er würde nicht weiter fragen,
was geschehen ist.
Ich wünschte, er würde meine Aufrichtigkeit höher schätzen
als meinen Fehltritt.
Ich wünschte, er würde darauf vertrauen,
dass was wir bis hierhin ausgehandelt haben größer ist
als was es noch auszuhandeln gäbe.
Ich wünschte, Leid und Liebe, Eifersucht und imaginierte Bilder
würde ihn nicht fürchten.
Ich wünschte, er würde um mich kämpfen
wie ich um ihn zu kämpfen bereit wäre.
Ich wünschte, er würde keinen roten Linien ziehen.
Ich wünschte, er würde mich bitten, nach Berlin zu kommen.
Mein Lieblingswort im Türkischen ist „keşke“ und heißt so viel wie „ich wünschte“.

Pamphlet meiner Träume

Ich träumte, was ich tun will, um mich und die Welt zu verändern. Heute träume ich davon, wer ich sein will.

Ich träumte, in ferne Länder zu reisen. Heute träume ich davon, immerzu zu reisen, selbst dann, wenn ich fest an einem Ort lebe, denn reisen heißt für mich, die Angst zu meinen Kompass zu erklären und in mich selbst sowie in die Welt rundherum zu vertrauen.

Ich träumte, sieben Sprachen fließend zu sprechen. Heute träume ich davon, stets meine Sicht auf die Welt zu verändern, den Menschen zuzuhören, egal in welcher mir noch so fremden Sprache sie sprechen.

Ich träumte, einen Roman zu schreiben. Heute träume ich davon, immerzu zu schreiben und Geschichten zu erzählen, die mir und Anderen aufzeigen, wie die Welt gesehen und das Leben gelebt werden kann.

Ich träumte, ein Kind zu bekommen. Heute träume ich davon, immerzu zu lieben und zu verstehen, dass ich selbst entscheiden kann, genug Raum, Geld und Zeit zu haben.

Ich träumte von der Zukunft.Heute träume ich davon, über die Gegenwart dankbar zu sein statt mich an Erinnerungen aus der Vergangenheit oder Hoffnungen für die Zukunft zu klammern.

Die Sufis des Sudan, Teil 1

Seinen Eltern missfiel, dass T. Sufi wurde, denn sie befürchten wie meine Eltern, wir könnten der Welt zu weit entsagen und dem Geldverdienen zu stark abschwören. Sie hoffen auf ein gutes Leben für uns und das Leben, dass sie führen, ist das beste, das sie kennen.

Zerbrechlich

Jede Bewegung so unwahrscheinlich
dass wunderbar.
Jedes Wort so Bedeutungsvoll,
dass der Raum sich dehnt.
Jede Berührung so flüchtig,
die Zeit bleibt stehen
Jeder Blick so sehnsüchtig,
ich will niemals gehen.

Fazit

Die Struktur des Kurses hat mir sehr gut gefallen, die kleineren wöchentlichen Aufgaben waren immer gut zu schaffen und man musste nicht das Rad neu erfinden, sondern handwerklich und technisch Gelerntes umsetzen. Die Aufgaben waren eine gute Vorbereitung für die Abschlussaufgabe. Jedoch hätte ich natürlich gerne viel mehr Zeit gehabt, um die komplette Webseite neu zu gestalten und mich gerne daran versucht, das Redesign umzusetzen. Ich hätte mich auch gerne mit interaktiven Elementen im Detail auseinander gesetzt und versucht, das Layout so gut wie möglich responsive zu gestalten.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Digitale Typografie · SoSe 2019

Entstehungszeitraum

Sommersemester 2019

Keywords