Wie entsteht eigentlich eine Website?

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 sie 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 Gestaltungprozess, 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

Aufbau Website

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 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 eine gute Methode dar, um die Interaktivität einer Website einzuschränken und so die Reihenfolge der Informationsaufnahme gezielt zu steuern. Aus diesem Grund eignet sich diese Methode gut, um einen linearen Prozess, wie die Erstellung einer Website und die dazugehörigen einzelnen Arbeitsschritte, aufzuzeigen.

Websiteinhalte

textuelle Beschreibungen

Um einen guten Einblick und Überblick über den Verlauf und die einzelnen Arbeitsschritte eines Webprojekts zu geben, wurden textuelle Beschreibungen für alle einzelnen Schritte verfasst. Diese wurden auf Basis der vorherigen Recherchearbeit erarbeitet. Bei der Erstellung der Texte wurde im Sinne der Zielgruppe vor allem darauf geachtet, dass diese 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 eher persönlichere Atmosphäre mit Hilfe einer Du-Ansprache gesetzt. Für eine gute Lesbarkeit wurde darauf geachtet, dass die einzelnen Textblöcke nicht zu lange sind. 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.

Animationen

Für ein spannenderes Nutzererlebnis war es unter anderem Ziel, die Illustrationen im weiteren Verlauf außerdem zu animieren. 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.

Illustrationen

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 sollen zum einen die Informationsaufnahme durch das Lesen der Infotexte visuell unterstützen. Zum anderen sollen sie eine positive und persönlichere Atmosphäre schaffen, sodass sich der Nutzer gerne auf der Website aufhält und sich wohlfühlt. Dies soll erreicht werden, indem eine Webdesignerin als Leitfigur in den Illustrationen zu sehen ist, welche die einzelnen Arbeitsschritte ausführt und den Leser so an die Hand nimmt und durch den Prozess einer Websiteerstellung mitnimmt. So soll eine emotionale Verbindung zum Website-Besucher aufgebaut und ein roter Faden im Sinne des Storytellings erreicht werden.

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.

Design

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.

Styleguide

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, eignete sich gut eine serifenlose Linearantiqua. Durch die fehlenden Serifen hat diese Schriftgruppe eine moderne und cleane Anmutung. Die Entscheidung fiel dabei auf die geometrisch konstruierte Schriftart Poppins.

Realisierung

Die Realisierung der Aufklärungswebsite erfolgte mit Hilfe von HTML, CSS und JavaScript. Weiter wurden die Scrollanimationen 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.