Auftraggeber
Atelier C
Rolle
UX Lead
Partner
Moving Water, Dimando
Als Illustratorin hat Claudine Etter schon für Kunden wie die Schweizerische Post, Swisscom und Coop gearbeitet. Als Sie mich anfragte, ihre Atelier C Website neu zu gestalten, musste ich als Illustrationsfan nicht zweimal überlegen.
Claudine erhält einen grossen Teil ihrer Aufträge online. Somit ist die Atelier C Website für sie ein unentbehrliches marketing Tool. Der Grund für den Relaunch war jedoch ein anderer: Die Website lief auf einer veralteten Typo3-Systemversion und musste aktualisiert werden. Das Update hätte finanziellen Aufwand bedeutet, ohne einen sichtbaren Mehrwert zu bieten. Zudem unterstützte die Website keine mobilen Geräte wie Smartphones und Tablets, was sich negativ auf die Benutzerfreundlichkeit und das Suchmaschinenranking auswirkte. Die Gestaltung erinnerte an einen Lifestyle-Blog und passte nicht mehr zu ihrem Profil als professionelle Dienstleisterin. So entschied sie sich, die Chance für einen Relaunch zu nutzen.
Um mich auf Konzept, Design und Frontend fokussieren zu können, haben wir ein kleines Team zusammengestellt:
Um die Programmierung kümmerte sich Jonathan Hess von Moving Water. Jörg Heynen von Dimando realisierte die Suchmaschinenoptimierung. Und Claudine übernahm das Erstellen und die Pflege des Contents.
Auf der alten Website verwendete Claudine Holzhintergründe, um ihre Arbeiten zu präsentieren. Daraus haben wir leichte Brauntöne abgeleitet. Zusammen mit dem Rot aus dem Logo ergibt sich die Farbkombination.
In den Geschäftsunterlagen von Atelier C sind zwei unterschiedliche Schriften aufgetaucht: Die DIN und die Circular. Wir haben uns für die Circular als Webfont entschieden. Diese ist harmonischer und weniger technisch als die DIN.
In den Wireframes werden die verschiedenen Inhaltstypen festgelegt (z.B. Navigation, Slider, Kontakt etc.). Durch einen modularen Aufbau kann die Website jederzeit erweitert werden, ohne dass eine Neuprogrammierung notwendig ist.
In den Screendesigns setzte ich die abstrakten Wireframes gestalterisch um. Die Detailgestaltung fand bei mir jedoch im Frontend statt, da erst im Browser ein realistisches Gefühl für die Website entsteht.
Ein grobes Sitemap hilft, den Inhalt und die Struktur im Überblick zu behalten.
Kreativität heisst nicht einfach Probleme zu lösen. Sondern braucht es, wenn man nicht weiss, was dabei herauskommen soll.
Richard David Precht
Workshop für die Anforderungen
Zu Beginn haben Claudine und ich in kleinen Meetings das Konzept der neuen Website ausgearbeitet. Dabei hat sich herauskristallisiert, dass sie neben dem illustrativen Handwerk eine Stärke in Storytelling und Visualisierungen besitzt. Diese Dienstleistungen sind auf der alten Website leider untergegangen. Sie wünscht sich in Zukunft vermehrt Aufträge von Kreativagenturen im Publishing Bereich.
Im nächsten Schritt haben wir folgende Zielgruppen erarbeitet:
- Marketing- und Kommunikationsbeauftragte von Firmen
- Kreativagenturen (Art Buyers, Art Directors und Grafiker )
- Einzelunternehmer und Privatpersonen
Einerseits erhält Claudine Aufträge über Empfehlungen, anderseits landen viele Kunden per Google Schlagwort- oder Bildsuche auf ihrer Website. Dabei werden oft nach konkreten Stilen und Sujets gesucht. Folglich ist eine quantitative Übersicht der Arbeiten wichtig. Zugleich soll der Besucher einen Einblick in die konzeptionelle Arbeitsweise von Claudine erhalten.
Content statt Design First
Die Website soll kommunizieren: Hier werden illustrative Dienstleistungen angeboten. Das bedeutete für mich, das die Illustrationen möglichst attraktiv präsentiert werden müssen. Die Gestaltung soll den Rahmen bieten, darf aber keinesfalls von den Arbeiten ablenken. Deshalb wählte ich eine dezente Gestaltung, die aus einfachen Elementen wie Typografie, Farbflächen und Vektorgrafiken besteht.
Eine Herausforderung waren die Bildformate: Die Illustrationen variieren zwischen Hoch- und Breitformaten bis hin zu quadratisch. Mein Gestaltungsansatz bestand darin, dass sich das Layout intelligent den Formaten anpasst. Zudem sollten die Illustrationen auf den verschienden Ausgabegeräten (Smartphone bis 4k-Displays) harmonisch dargestellt werden.
Trotz der schlichten Gestaltung habe ich kleine interaktive Elemente eingebaut, um der Website eine gewisse Rafinesse zu verleihen. Beim laden der Bilder beispielsweise erscheint kurz ein animierter roter Balken.
Agile Entwicklung
Bei der Programmierung arbeiteten Joni und ich von Beginn an in einer gemeinsamen Entwicklungsumgebung. Für die Versionisierung verwendeten wir GIT und hosteten das Projekt auf Bitbucket. So konnte ich das Frontend entwicklen, während Joni das Backend aufsetzte und die Templates implementierte.
Als Content Management System empfahl Joni «Kirby». Dieses flatfile System legt die Daten direkt als Files (z.B. in Marddown) auf dem Server ab. Eine Datenbank wie MySQL entfällt, was den technischen Aufwand reduziert. Zudem sind diese Systeme meist schneller und schlanker als ihre alten Brüder wie Typo3 und Co. Auch das User Interface im Backend hat viele praktische Funktionen, was das editieren der Inhalte für Claudine wesentlich erleichtert.
Während der Entwicklung und Inhaltpflege hat Jörg ein SEO Audit gestartet und eine Keywordanalyse erstellt.
Jedes Projekt hat eine eigene Unterseite. Dort gibt Claudine Einblick in ihre konzeptionellen Überlegungen und zeigt Skizzen aus dem Entstehungsprozess.
Smartes Teamplay
Ich schätze es, in kleinen Teams zu arbeiten. Die Atelier C Website ist ein Gemeinschaftsprojekt. Design, Backend, Content und SEO konnten wir parallel entwickeln. Das hatte den grossen Vorteil, das alles in einander griff und unnötige Umwege wegfielen. Das Resultat ist eine moderne und konsequente Website. Ich wünsche Claudine in Zukunft viel Erfolg mit ihrem neuen Auftritt.
Atelier C
Zum Webprojekt
Partner
Moving Water & Dimando Marketing & Media Sarl
