Neuerstellung des Web-Auftritts für die Psychologin M.Sc. Johanna Mandel

 
 
NAVIGATION UND STRUKTUR

Nach Sichtung und Sortierung der Inhalte folgt die Strukturierung. Besucher:innen sollen sich leicht auf der Webseite zurechtfinden und schnell zu den gewünschten Inhalten navigieren können.

 
 

Ein Strukturbaum zeigt die einzelnen Seiten der Webseite und die darin enthaltenen Inhalte. Auf der Startseite werden bereits die wichtigsten Bereiche – wie zum Beispiel Kursangebote oder Johanna Mandels Arbeitsweise – kurz angesprochen. Diese sogenannten Teaser führen an die Stelle auf den weiteren Seiten, wo die Themen ausführlicher dargestellt werden.


Anschließend ist es Ziel der sogenannten Wireframes, den genauen Aufbau der Inhalte zu planen. Hier wird definiert, wo Bilder und Grafiken platziert werden, wo sich Texte und Buttons befinden und auch schon, wie diese Elemente in etwa aussehen können. Das ausgearbeitete Design ist zu diesem Zeitpunkt jedoch noch nicht nötig, es würde ablenken. Das Screendesign erfolgt erst im nächsten Schritt.

 
CORPORATE DESIGN

Parallel zur Entwicklung von Navigation und Struktur wird das bereits erarbeitete Corporate Design (eigene Projektvorstellung unter Referenzen) weiterentwickelt.


Das grafische Kernsymbol, die Pusteblume bzw. ihre einzelnen Schirmchen, werden in zwei verschiedenen Headergrafiken (Startseite und Unterseiten) eingesetzt. Das Symbol hat eine postive Bedeutung, es strahlt Leichtigkeit aus und steht zudem für Wachstum und Entwicklung. Dies lässt sich metaphorisch gut auf Kindheit und Zukunft übertragen.
Die Linie taucht als Grafikelement häufiger auf, um inhaltlich verschiedene Bereiche auch optisch zu unterteilen. Wie bereits auf der Rückseite der Visitenkarten werden thematisch passende Zitate grafisch durch Linien umrandet. Generell werden jedoch Gestaltungselemente sparsam eingesetzt, die Informationen an sich stehen im Vordergrund und so wird auch auf den Einsatz von Fotomaterial nahezu verzichtet. Ledlich die Psychologin Johanna Mandel ist auf einem Foto zu sehen.

 
 

Ein großes Augenmerk liegt auf der typografischen Gestaltung. Da die Seite von einem hohen Informationsgehalt geprägt ist, ist es ganz wichtig, den Nutzer:innen Übersichtlichkeit und einen angenehmen Lesefluss zu ermöglichen. Dies passiert mit relativ vielen Überschriftenebenen, in denen auch die Farben aus dem bereits erarbeiteten Corporate Design eine wichtige Rolle spielen und das Auge leiten.

 
SCREEN DESIGN

Sind Navigation und Struktur, Wireframes, sowie das Corporate Design abgestimmt, dann erfolgt die grafische Ausarbeitung der Webseite, das Screendesign. Je nachdem wie die spätere technische Umsetzung erfolgt (auf Basis eines Content Management System (CMS) wie zum Beispiel Wordpress oder komplett auf HTML) werden verschiedene Größen gestaltet: Desktop, Tablet und Mobile. Gerade bei letzterem verändert sich die Gestaltung wie auch die Bedienungsweise sehr stark.


Die programmierte Webseite wird später responsive sein, d.h. die Inhalte passen sich je nach Endgerät an die Größe an. In der heutigen Zeit ein technischer Standard, den die Webseite definitiv haben soll.

 
KUNDENSTIMME
 
Barbara Dilg ist es bestens gelungen, für die Website eine dezente, ansprechende Bildsprache zu entwickeln, die die Inhalte wunderbar widerspiegelt. Mit Weitblick, viel Liebe zum Detail und passgenauen Lösungen. Durch ihre zugewandte, zielorientierte und engagierte Art hat mich Barbara Dilg sicher durch alle Phasen der Gestaltung geführt. Ich bin sehr glücklich mit dem Ergebnis, was ich ihrem gutem Gespür für individuelle Lösungen verdanke.– Johanna Mandel