Cordula Gibson
Rebranding | Konzeption & Text | Fotografie | Webdesign | WordPress
Entwicklung einer Webseite
Als Psychologin und Coach benötigte Cordula Gibson eine Website, die ihre fachliche Kompetenz und ihre Seriosität überzeugend vermittelt. Im Fokus standen eine klare, reduzierte Gestaltung sowie eine strukturierte Darstellung ihres Vorgehens in den verschiedenen Themenschwerpunkten. Die Konzentration auf das Wesentliche und ein visuelles Konzept, das den Blick gezielt führt, waren dabei zentral. Ergänzend dazu wurden ein neues Logo entwickelt und professionelle Fotografien umgesetzt.
Zeitraum
2025
Schwerpunkte
Entwürfe mit Figma, Fotografie und Bildbearbeitung mit Photoshop, Logogestaltung mit Illustrator, Aufbau der Seite in WordPress
Herausforderung
Die Kundin verfügt als Coachin und Organisationspsychologin über außerordentliches Wissen und jahrzehntelange Erfahrung. Diese inhaltliche Dichte musste in eine für Webseitenbesucher taugliche Form komprimiert werden, die gleichzeitig ihrem hohen ästhetischem Anspruch genügt.
01 Zieldefinition
Konzeptionsgespräch zur Klärung der Vorstellungen und Wünsche: Klärung, welche Inhalte auf jeden Fall auf die Website sollen und Festlegung der Navigationstiefe und des Gesamtumfangs des Projekts
02 Mockup
In einem Wireframe wurden die inhaltlichen Schwerpunkte definiert und die Struktur der einzelnen Seiten dargestellt. Mit dieser Vorlage konnten wir in ein weiteres Abstimmungsgespräch gehen und den grundlegenden Aufbau festlegen. Dadurch wurde klar, an welchen Stellen welche Fotos benötigt werden, sodass das Fotoshooting gezielt geplant werden konnte. Nun wussten wir genau, welche Motive und Formate erforderlich waren.
Beim Fotoshooting wählten wir verschiedene Orte, um später eine möglichst hohe Variabilität in der Darstellung zu haben. Panoramafotos sollten als Banner dienen, Porträtfotos für die „Über uns“-Seite.
03 Designsystem
Mit der Entwicklung des Logos, das eine persönliche Note haben sollte, wurden erste Vorschläge für Schriftarten und Farbwelt erarbeitet und mit Cordula Gibson abgestimmt. Im Logo verwendeten wir die Initialen in handschriftlicher Form und wählten darunter als Kontrast eine Serifenschrift.
Die Farben sollten Nähe und Erdung vermitteln, gleichzeitig aber auch Professionalität ausstrahlen. Daher fiel die Wahl auf erdige, satte Töne sowie ergänzend auf helle Kontraste, beispielsweise ein leichtes Beige. Die Schriftarten sollten klar und serifenlos sein, mit Ausnahme der Zitate, die sich bewusst vom restlichen Text abheben. Für den Fließtext wählten wir Noto Sans, da sie durch ihre organischen Formen klar, freundlich und gut lesbar wirkt.
04 Entwürfe
Nachdem die grundlegenden Farben, Schriftarten sowie das Logo freigegeben waren, entwickelte ich zwei unterschiedliche Entwürfe. Ziel war es, zwei gegensätzliche gestalterische Richtungen zu zeigen:
einen geradlinig-geometrischen Entwurf sowie einen Entwurf mit organischen Formen und wellenartigen Elementen, ergänzt durch einen stärkeren Einsatz von Fotos im Header.
Diese beiden Entwürfe dienten als Grundlage für eine weitere Abstimmungsrunde. So konnten wir gemeinsam klären, welche Richtung den Vorstellungen am ehesten entsprach und besser zur Zielgruppe – Unternehmen – passte. Final entschieden wir uns für die klare, geometrische Gestaltung. Ein großes Headerbild hätte zwar eine persönlichere Wirkung, würde jedoch eher eine kleinere Zielgruppe ansprechen. Die Gestaltung sollte bewusst offen bleiben und nicht zu stark in eine bestimmte Richtung festlegen.
05 High-Fidelity-Prototyp
Im finalen Design wurden anschließend alle weiteren Unterseiten gestaltet. Features wie ein animiertes Kachelsystem auf der Startseite, ein Filtersystem für das Portfolio sowie Akkordeons auf den Serviceseiten sorgen für eine dynamische und intuitive Zugänglichkeit der Inhalte.
06 Finale Seite
Auf Basis der Entwürfe in Figma wurde schließlich die WordPress-Seite umgesetzt.
07 Features
Dynamische Kacheln auf der Startseite:
Akkordeon auf den Schwerpunktseiten:
Verlinkung zu allen Unterseiten auf jeder Schwerpunktseite
Portfoliofiltersystem
