Problemstellung
Der Beruf eines Medienschaffenden trifft in der heutigen Zeit leider häufig auf wenig Wertschätzung. Moderne
Werkzeuge, wie Smartphone-Kameras, Baukastensysteme für Websites etc., machen es Laien heute nämlich einfach,
verschiedene Medien, auch ohne gestalterische Ausbildung, zu erstellen. Das kann dazu führen, dass Personen,
die keine Berührungspunkte mit der professionellen Gestaltung haben, die dahinterliegende Expertise und Arbeit
folglich nicht erkennen können. Die Tätigkeit als Medienschaffender, egal in welchem Teilbereich, findet so
leider oft nur wenig Akzeptanz und Anerkennung in der Gesellschaft. So auch im Teilbereich Webdesign, der aber
gerade in unserer heutigen, digitalisierten Welt unbedingt notwendig und nicht mehr wegzudenken ist. So hat
jeder täglich mehr oder weniger Berührungspunkte mit Websites. Es ist eigentlich der Job des Webdesigners,
Websites professionell zu erstellen. Doch fehlende Aufklärung über den Beruf des Webdesigners und zahlreiche
Angebote von Baukastensystemen, die es jedem ermöglichen, mit nur wenigen Klicks eine eigene Website zu
erstellen, können dazu führen, dass nicht gesehen wird, wie viel Arbeit, Zeit und Mehrwert wirklich hinter
einer professionell erstellten Website steckt. Dadurch kann die Frage aufkommen, welche Expertise ein
Webdesigner überhaupt hat. Doch natürlich steckt viel mehr hinter dem Erstellungsprozess, als es vielleicht im
ersten Moment den Anschein macht.
Aufklärung über den Beruf des Webdesigners und über professionelle Websites
ist deshalb unbedingt notwenig.
Recherche
Natürlich erfordert Aufklärungsarbeit einiges an Recherchearbeit. Diese umfasste fünf größere Themengebiete.
Zunächst beschäftigte sich die Recherche mit der Rolle des Mediums Website in der heutigen, digitalisierten
Zeit und mit der Frage, woher die Geringschätzung von professionellem Webdesign kommt. Um die dahinterliegende
Expertise und den Mehrwert einer professionellen Website erklären zu können, thematisiert die Recherche
außerdem, welchen Mehrwert Design im allgemeinen und Webdesign im Besonderen hat. Der hauptsächliche Mehrwert
einer professionell erstellten Website liegt im nutzerzentrierten Gestaltungsprozess, wie vorherige
Rechercheergebnisse zeigten. Aus diesem Grund wurde außerdem der nutzerzentrierte Gestaltungsprozess eines
Webprojekts genauer untersucht und herausgearbeitet. Dieser Rechercheteil stellte somit auch die Basis für die
späteren Websiteinhalte dar. Abschließend wurde in der Rechreche versucht, die Frage zu beantworten, wer
überhaupt eine professionelle Website braucht und welche alternativen Lösungen es gibt.
Konzeption
Um die Zielgruppe der Aufklärungswebsite zu definieren wurde zunächst eine Zielgruppensegmentierung
durchgeführt. Dabei konnten drei verschiedene Gruppen ermittelt werden, die mit einer späteren Erstellung von
Personas und dazugehörigen Szenarien, also beispielhaften Nutzungsverhalten, einen guten Einblick darüber
gaben, was angeforderten Website-und Nutzerziele sind. Bei dem Aufklärungsmedium soll es sich um eine Art
digitales Buch, beziehungsweise Magazin handeln, das passend zum inhaltlichen Thema aber nicht als
Printmedium, sondern als Website realisiert wird. Diese hat den Vorzug einer kostenfreien, zeit- und
ortsunabhängigen Erreichbarkeit für ein breites Publikum. Das kommt der angestrebten Aufklärungsarbeit zugute
und stellt somit einen wesentlichen Vorteil gegenüber vergleichbaren Printmedien dar. Um dabei jedoch eine
Informationsführung zu erhalten, die der eines Buches ähnelt, soll die Aufklärungswebsite nach der Methode des
Scrollytellings realisiert werden. Scrollytelling stellt nämlich eine gute Methode dar, um die Interaktivität
einer Website einzuschränken und so die Reihenfolge der Informationsaufnahme gezielt zu steuern.
Aufbau der Website
Bei dem Aufklärungsmedium handelt es sich um eine Art digitales Buch, beziehungsweise Magazin, das passend zum
inhaltlichen Thema aber nicht als Printmedium, sondern als Website realisiert wurde. Diese hat den Vorzug
einer kostenfreien, zeit- und ortsunabhängigen Erreichbarkeit für ein breites Publikum. Das kommt der
angestrebten Aufklärungsarbeit zugute und stellt somit einen wesentlichen Vorteil gegenüber vergleichbaren
Printmedien dar. Um dabei jedoch eine Informationsführung zu erhalten, die der eines Buches ähnelt, wurde die
Aufklärungswebsite nach der Methode des Scrollytellings realisiert. Scrollytelling stellt nämlich eine gute
Methode dar, um die Interaktivität einer Website einzuschränken und so die Reihenfolge der
Informationsaufnahme gezielt zu steuern. Aus dem Grund eignet sich diese Methode gut, um einen linearen
Prozess, wie die Erstellung einer Website und die dazugehörigen einzelnen Arbeitsschritte, aufzuzeigen.
Inhalte der Website
Um einen guten Einblick und Überblick über den Verlauf und die einzelnen Arbeitsschritte eines Webprojekts zu
geben, wurden textuelle Beschreibungen auf Basis der vorherigen Recherche für alle einzelnen Schritte
verfasst. Dabei wurde im Sinne der Zielgruppe vor allem darauf geachtet, dass die Texte sowohl sprachlich, als
auch inhaltlich leicht verständlich und nachvollziehbar sind. Um dem Leser das Gefühl zu geben, dass auf ihn
und seine Bedürfnisse eingegangen wird und er sich verstanden fühlt, wurde bei der Tonalität auf eine
Du-Ansprache gesetzt. Da es sich um eine, für Laien komplexe Thematik handelt, bestand die Herausforderung
darin, eine richtige Balance zwischen Textlänge und inhaltlichem Verständnis zu finden. Neben den
Textinhalten, die zwar viel Informationen bieten, aber alleine verwendet, schnell eintönig wirken können,
wurden Illustrationen für ein visuell ansprechendes Erscheinungsbild eingesetzt. Diese unterstützen die
Informationsaufnahme visuell und schaffen eine positive und persönlichere Atmosphäre. In den Illustrationen
ist eine Webdesignerin zu sehen, die die einzelnen Arbeitsschritte ausführt und den Leser durch den Prozess
einer Websiteerstellung mitnimmt. So wird eine emotionale Verbindung zum Website-Besucher aufgebaut und ein
roter Faden im Sinne des Storytellings erzielt. Für ein spannenderes Nutzererlebnis wurden die Illustrationen
im weiteren Verlauf animiert. Durch einen Einstufungstest ist es dem bedarfsinteressierten Laien möglich, eine
Einschätzung darüber zu erhalten, welche Website-Lösung für sein Anliegen passend sein könnte.
Snapscrolling
Snap-Scrolling ist ein Scroll-Verhalten, dass auf dem „Einrasten“ von, im HTML-Dokument dafür definierten,
Container-Elementen basiert. Scrollt der Nutzer nur minimal, wird die Website automatisch bis zum nächsten
Container weitergescrollt. Da in diesem Konzept eine volle Bildschirmhöhe und -breite für die Snap-Container
vorgesehen wird, wird so ein Effekt erzeugt, der das Umblättern einer Buchseite nachahmen soll. Durch dieses
Scroll-Verhalten, dass dem Standard und somit dem intuitiven und gewohnten vertikalen Scrollen folgt, entsteht
eine gute Übersichtlichkeit und folglich eine einfache und nutzerfreundliche Navigationsweise. Unterstützt
wird diese von einem zweispaltigen Raster-Layout innerhalb der einzelnen Snap-Seiten, in dem Text und
illustrierte Animationen in abwechselnder Reihenfolge angeordnet werden. Das Scrollverhalten und das
angestrebte Layout sind somit passend für die Menge an definierten Inhaltskomponenten. Aufgrund der
Übersichtlichkeit, der nutzerfreundlichen Orientierung und des interessanten Look and Feels, wurde das Konzept
des Snap-Scrollings für die Aufklärungsseite ausgewählt.
Design
Die Aufklärungswebsite zeigt einen Prozess von vier verschiedenen Phasen. Pro Phase wurde deshalb eine eigene
Auszeichnungsfarbe definiert. Diese systematische Farbgebung soll so eine gute Orientierung auf der Website
unterstützen. Da jeweils eine Farbe für eine Projektphase steht, wird eine Auszeichnungsfarbe ausschließlich
in Kombination mit weiteren Grautönen verwendet. Weiter finden alle vier Auszeichnungsfarben jeweils
zusätzlich in einer helleren, sowie einer dunkleren Farbabstufung Einsatz auf der Website. Für die angestrebte
moderne, cleane und neutrale Anmutung der Website, im Sinne einer sehr weitläufigen Zielgruppe, eignete sich
eine serifenlose Linearantiqua gut. Durch die fehlenden Serifen hat diese Schriftgruppe eine moderne und
cleane Anmutung. Die Entscheidung fiel dabei auf die geometrisch konstruierte Schriftart „Poppins“.
Illustrationen
Pro Arbeitsschritt wurde eine Illustration angefertigt, in der die Leitfigur auf eine anschauliche Art und
Weise bei den jeweiligen Aufgaben gezeigt wird. Um die Illustrationen schnell und einfach verständlich für
jeden zu gestalten, wurde darauf geachtet, dass diese vor allem wesentliche Elemente der textuellen
Beschreibungen zeigen. Durch das Arbeiten mit flächigen Elementen und der Einsatz von ausschließlich einer
Auszeichnungsfarbe, in Kombination mit verschiedenen Grautönen, wirken die Illustrationen so modern,
hochwertig und plakativ, ohne aufdringlich zu sein. Die Illustrationen wurden größtenteils auf Basis
geometrischer Grundformen konstruiert, weshalb sie im Gesamterscheinungsbild gut mit der ausgewählten
Schriftart Poppins harmonieren. Auch die Figuren selbst wurden auf geometrischen Formen aufgebaut, weshalb sie
die Anatomie einer Gliederpuppe aufweisen. Für mehr Abwechslung wurden nicht nur Illustrationen erstellt, in
der die Leitfigur zu sehen ist, sondern auch solche, die ausschließlich durch prägnante Objekte den jeweiligen
Arbeitsschritt erläutern.
Animation der Illustrationen
Für ein spannenderes Nutzererlebnis wurden die Illustrationen im weiteren Verlauf zusätzlich animiert. Durch
die Architektur einer Scrollytelling-Website wird die Interaktivität einer Website im Sinne einer geführten
Informationsaufnahme eingeschränkt. Um das Nutzungserlebnis trotzdem spannend zu gestalten und dem
Website-Besucher das gewohnte Gefühl einer interaktiven Website-Nutzung zu geben, eignen sich Scroll-
Triggered Animation sehr gut. Dabei handelt es sich um Websiteinhalte, die durch die Scrollaktion des Nutzers
ausgelöst, beziehungsweise abgespielt werden. Durch diese, für den Nutzer interaktiv steuerbaren Elemente,
entsteht das Gefühl, mit der Website zu interagieren.
Entwurf Snapscrolling
Wie bereits im Skizzenkonzept definiert wurde, haben alle Snap-Seiten eine volle Bildschirmhöhe und -breite.
Bei der Gestaltung dieser, musste folglich darauf geachtet werden, dass innerhalb einer Snap-Seite, ein in
sich geschlossenes, harmonisches Gesamtbild entsteht. Das stellt einen signifikanten Unterschied zu einer
Website mit herkömmlichen Scrollverhalten dar, bei der durch Scrollen der Bildausschnitt verändert werden
kann. In diesem Sinne wurde das Websitelayout auf einem zweispaltigen Raster aufgebaut, in dem illustrierte
Animationen und Textinhalte jeweils in einer Spalte, innerhalb einer Snap-Seite, platziert wurden. Für ein
harmonischeres Gesamtbild wurde der gesamte Inhalt vertikal zentriert. Sowohl genügend Seiten- als auch
Spaltenabstand sorgen für ausreichend Weißraum und erzeugen ein übersichtliches und cleanes Erscheinungsbild,
das sowohl den Textblöcken, als auch den animierten Illustrationen genügend Raum gibt, um ihre Wirkung
entfalten zu können. Insgesamt entsteht durch dieses konstante Layout eine Ähnlichkeit mit der Anmutung von
Präsentationsfolien, was den angestrebten Effekt von Buchseiten,
die umgeblättert werden, verstärkt.
Entwurf Einstufungstest
Durch einen Einstufungstest ist es dem bedarfsinteressierten Laien möglich, eine Einschätzung darüber zu
erhalten, welche Website-Lösung für sein Anliegen passend sein könnte. Aus der Recherche ließen sich einige
relevante Faktoren ableiten, die entscheidend für solch eine Einschätzung sind und somit Basis für die
gestellten Fragen bilden. Dazu gehört die Art des Werbezieles, das kommerziell oder nicht-kommerziell,
beziehungsweise marketingorientiert oder nicht-marketingorientiert sein kann, das Budget, die gewünschte Art
der Websitepflege und der Stand von HTML-Kenntnissen oder auch das Interesse dafür. Der Nutzer muss so im
späteren Test drei bis fünf Fragen beantworten, worauf er eine, für ihn, passende Website-Lösung vorgeschlagen
bekommt.
Realisierung
Die Realisierung der Aufklärungswebsite erfolgte mit Hilfe von HTML, CSS und JavaScript. Die Scrollanimationen
wurde durch GSAP und Lotties realisiert. Bei GSAP handelt es sich um eine Framework-unabhängige
Animationsbibliothek, die innerhalb aller Möglichkeiten von JavaScript eine unkomplizierte Animation von
Websiteinhalten ermöglicht. Eine Lottie ist ein JSON-basiertes Animationsdateiformat. Lotties haben den
Vorteil einer kleinen Dateigröße, sind unendlich skalierbar und interaktiv nutzbar. Bei den Scrollaniationen
selbst, handelt es sich um Scroll-Triggered Animationen. Das sind Websiteinhalte, die durch die Scrollaktion
des Nutzers ausgelöst, beziehungsweise abgespielt werden. Durch diese interaktiv steuerbaren Elemente,
entsteht das Gefühl, mit der Website zu interagieren.
Finale Website
Öffnet der Besucher die Website, wird er zunächst auf einer plakativen, aufmerksamkeitserregenden Startansicht
durch einen animierten Pfeil aufgefordert, nach unten zu scrollen. In drei darauffolgenden Snap-Seiten wird
der Nutzer mit einer kurzen Einleitung in das Thema eingeführt. Dadurch soll Interesse geweckt und zum
Weiterscrollen animiert werden. Pro Projektphase gibt es eine Übersichtsseite, die durch einen kurzen
Beschreibungstext einen groben Überblick über den Kapitelinhalt geben soll. Damit diese Übersichtsseiten auch
sofort als Beginn einer neuen Phase identifiziert werden, wurden sie gestalterisch durch eine farbliche
Überschrift, sowie einem organischen Flächenelement von den restlichen Seiten hervorgehoben. Der Einsatz von
organischen Flächenelementen bildet gleichzeitig einen spannenden Kontrast zu den sonst verwendeten
geometrischen Elementen. Auf der jeweils darauffolgenden Snap-Seite, werden die einzelnen Arbeitsschritte der
jeweiligen Phasen gezeigt. Um diese zur ihrer Projektphase zugehörig erscheinen zu lassen, wurde auch hier die
zuvor definierte, systematische Farbverwendung eingesetzt. So wurde der Hintergrund dieser Seiten in eine
hellere Abstufung der Auszeichnungsfarbe ihrer jeweiligen Phase gefärbt. Das soll neben der Farbkodierung in
den Illustrationen nochmals zusätzlich die visuelle Orientierung verstärken. Weiter werden die einzelnen
Arbeitsschritte mit Hilfe von plakativen Überschriften bezeichnet. Typografische Hervorhebungen im Fließtext
und ausreichend Zeilenhöhe sorgen außerdem für ein angenehmes Lesevergnügen.
