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

SURFER Magazine – Redesign

Im Abschlussprojekt des Kurses »Digitale Typografie« bei Frank Rausch wurde die mobile Version des Online Magazines SURFER in Hinblick auf gute Typografie überarbeitet. Dabei habe ich ein neues visuelles Konzept entwickelt, das den Ursprung der Surfer Kultur charakterisiert.

Status Quo

Doku Copy.pngDoku Copy.png

Neben der Navigationsarchitektur, Lesetypografie und Inhaltstruktur mit zahlreichen Dopplungen, stellt die fehlende visuelle Identität eine der größten Probleme dar. Die Webseite ist austauschbar und nicht unterscheidbar von vergleichbaren Online-Surfer-Magazinen. Sie verfehlt den Charakter des Sports und der Kultur – hier wurde am Thema vorbei gestaltet.

Was macht den 90's Surfer Vibe aus?

Bildschirmfoto 2019-06-14 um 01.51.45.pngBildschirmfoto 2019-06-14 um 01.51.45.png

Die Arbeiten von David Carson, einer der Urväter des Grundge-Stils, war prägend für die »visuelle Identität« der Surferkultur in den 90er Jahren. Seine experimentelle Typografie untersteicht den Charakter des Action-Sports.

Keywords.JPGKeywords.JPG

Von David Carsons Arbeiten inspiriert und vom Charakter der Grundsteine der Surferkultur leitete ich diese Keywords ab, die mir als Orientierungshilfe bei der Erarbeitung der visuellen Identität half.

Doku Copy 2.pngDoku Copy 2.png

Moodboard: ausdruckstarke Typografie, auffällige Muster, knallige Neonfarben, speziell die Farbe Lila und Verläufe.

Erste Entwürfe

Doku Copy 3.pngDoku Copy 3.png

Dieser Entwurf schien mir etwas zu extrem und vom Lesetext ablenkend.

Doku Copy 4.pngDoku Copy 4.png

Dieser Entwurf schien mir zu clean.

Redesign

Mockup_04.pngMockup_04.png

Surfer_Mockup_02.pngSurfer_Mockup_02.png

Home_Animation.gifHome_Animation.gif

Visuelles Konzept

Zutaten:

+ Lila als Primärfarbe

+ Neonfarben

+ dynamische Linien

+ Noise Filter

+ ausdrucksstarke Display Schrift

Konzept_Animation_gif02.gifKonzept_Animation_gif02.gif

Die Neonfarbpalette nimmt Bezug auf die Farbwelt der 90er Jahre und der Noise-Filter ist eine Interpretation der Grundge-Muster. Dynamische linien verkörpern den Charaker des Aktionsports. Klare Hierachien und eine klare Strukturierung der einzelnen Rubriken sorgen für eine verbesserte Orientierung. Um einen guten Lesefluss zu gewähren, ist der Unterschied zwischen Rubrik-Überschriften, Artikel-Überschriften und Lesetext deutlich definiert. Die Form der Display Schrift »Greta« erinnert an Blattstrukturen von Palmen und kann so mit Strand, Sonne und Meer assoziert werden. Ihr Charakter verkörpert die Tikki-Surferkultur der 90er Jahre.

Color_Palette.pngColor_Palette.png

Greta02.pngGreta02.png

Artikelseite

Artikel_Animation.gifArtikel_Animation.gif

Wann ist der Artikel zu Ende? Wo bin ich? Welchen Text soll ich als nächstes Lesen? In Form eines endless Scrolls waren dies die Hauptprobleme der Originalseite. Im Redesign wird durch Überschriften, Trennlinien und unterschiedlichen Hintergründen eine deutliche Differenzierung ermöglicht.

Original_Animation_gif Kopie.gifOriginal_Animation_gif Kopie.gif

Hashtags_Newsletter.pngHashtags_Newsletter.png

Comments.pngComments.png

Navigation

Navigation_Animation.gifNavigation_Animation.gif

Das Navigationselement im Header erscheint beim Hochscrollen, sodass SurferInnen direkt Zugriff auf das Seitenmenü und die Suchleiste haben. Zur Navigation auf der Artikelseite ist zu sagen, dass die Anzahl der vorgeschlagenen Artikel verringert wurde, damit man nicht mit einer Vielzahl Auswahlmöglichkeiten überladen wird. Außerdem sind die Hashtags auffälliger gestaltet, da diese eine gute Möglichkeit bieten, Artikel zu ähnlichen Personen, Orten und Themen zu finden.

Die Vorschaubilder der Originalseite verraten nicht viel über den Inhalt des dazugehörigen Textes, fast jedes Bild umfasst eine/n SurferIn auf einer Welle. Kombiniert mit unleserlichen Überschriften erschwert dies die Entscheidung, einen bestimmten Artikel anzuklicken und zu lesen. Im Redesign sind die Vorschaubilder entsprechend ihrer Artikelrubrik (Featured, Videos, Fotostrecken, Gear) farbkodiert – diese Filter erscheinen nur auf der Startseite, auf der Artikelseite können Originalbilder betrachtet werden.

Color_Coded.pngColor_Coded.png

Fazit

Die größte Herausforderung war es, die Balance zwischen guter Lesetypografie und einem Erscheinungsbild der dem Kontext gerecht wird, zu finden.

Auffällig ist es, dass man sich leicht in der Menge an Artikeln verlieren kann. Das Medium gibt keinen Anfang und kein Ende vor. Meiner Meinung nach, ist es ein befriedigenderes Gefühl eine analoge Zeitschrift zu lesen, da dort dieser Rahmen vordefiniert ist. Diesen Aspekt wäre es wert, weiter zu untersuchen – wie viel Inhalt konsumiere ich bis ich das Smartphone wieder weglege?

Zusätzliche Funktionen könnten ein »Crazy Mode«, ein Light Mode sowie eine Extrafunktion sein, die die Seite blockiert, wenn in deiner Nähe gute Wellen sind. Es wäre einfach zu schade diese zu verpassen und anstatt dessen am Smartphone zu hocken.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Digitale Typografie · SoSe 2019

Entstehungszeitraum

Sommersemester 2019