Required Design – Designsprache
Projekt:
Task:
Was habe ich mir dabei gedacht?
Ein paar Wochen. So lange ist meine neue Website nun schon online. Zeit, Fazit zu ziehen. Denn mittlerweile ist natürlich einiges an Feedback gegeben und es wurden Erfahrungswerte gesammelt.
Über das Grundlegende habe ich mich ja schon in einem anderen Blog-Beitrag geäußert. Welches Framework ich gewählt habe und warum ich mir überhaupt die Arbeit angetan habe, eine funktionierende Website komplett neu zu gestalten.
Required Design
Ich wollte es einfach. Da war so eine Idee, nicht nur die Seite sehr minimal zu gestalten, ein paar frische Ideen einzubauen, sondern auch die Technik dahinter so simpel wie möglich zu gestalten. Möglichst ohne Aufwand neue Inhalte einpflegen zu können und mich danach nicht um Formatierungen und Layout scheren zu müssen. Dafür habe ich eine Design-Idee, einen Grundsatz entwickelt, den ich Required Design nenne. Der Ansatz zieht sich von der Designsprache bis hin zu dem Design der dahinterstehenden Technik.
Die wichtigste Frage, die ich mir bei jeder Entscheidung selbst stellte: Braucht es das? Und wie begründe ich meine Entscheidung? Heraus kam eine Designsprache, die sich sehr stark an Whitespace-Konzepte anlehnt und minimal ist. Für mich hat die Methode wunderbar geklappt. Ich konnte auf das reduzieren, was nötig ist, ohne die Funktionalität der Website zu beeinträchtigen. Bei Design und bei der technischen Umsetzung. Und eine Seite ohne Menü konnte ich mir bis zu diesem Zeitpunkt auch nicht vorstellen.
Nerd-Alarm
Ja, jetzt kann es nerdig werden. Wo fange ich an? Am besten bei dem, was immer zu Beginn einer Website stehen sollte: Wozu brauche ich sie? Die Frage war schnell beantwortet. Sie soll zeigen, wie ich mir Webdesign vorstelle, meine Showcases beinhalten, und natürlich suchmaschinenoptimiert sein.
Grafisch habe ich sehr reduziert entworfen. Eine Akzentfarbe, eine Schriftart, kein Logo. Die Frage, ob es mehr braucht, konnte ich sehr eindeutig mit einem Nein beantworten. Was ich jedoch absolut wollte: Eye-Candy. Nicht zu knapp. Und technisch betrachtet war der Wunsch da, dass ich im Weiteren sehr schnell und einfach Inhalte einpflegen kann. Und hier beginnt die Arbeit. Will man es später einfach haben, muss man im Vorfeld viel dafür tun. Für all das stecken rund 100 Stunden Arbeit in der neuen Seite. Mit dem Ergebnis, dass ich nun in Sekundenschnelle Inhalte einbauen kann, ohne mich um Formatierungen zu kümmern. Wie habe ich das gemacht?
Die Details
Als Framework kommt Elementor Pro zum Einsatz, ein Pagebuilder, der im WordPress-Bereich sehr verwendet wird und stetig weiterentwickelt wird, sehr im Gegensatz zu den kleinen Themes, die irgendwann einfach nicht mehr unterstützt werden. Um die Inhaltspflege leicht zu machen, gibt es kategorieabhängige Templates und entsprechende Advanced Custom Fields. Bei der Erfassung gebe ich nur noch Texte und Bilder ein und muss diese nicht mehr layoutieren. Das System weiß aufgrund der Kategorie, wo was platziert werden muss. Und wenn mal ein Inhaltsteil nicht erfasst wird, weil es z.B. keine ausführende Agentur gibt, werden aufgrund von Display Conditions die leeren Inhalte gar nicht erst angezeigt. Es ist viel Arbeit, das initial einzurichten, aber im Alltag geht es dann wirklich sehr einfach.
Dazu kommen Funktionalitäten, die die Website schnell machen, SEO-konform und sicher machen. Selbst gehostete Fonts, kein externes Tracking (aber durchaus internes, aussagekräftiges Tracking), keine Cookies. Eine Seite, bei der sich Benutzer*innen sicher sein können, dass nichts an Dritte weitergegeben wird. Eine Seite, bei der es rechtlich gar kein Cookie-Banner braucht und an der sich Abmahnanwälte die Zähne ausbeißen.
Weitere technische Kniffe:
- Sogenannte Loop Grid Items, die meine Beiträge automatisch darstellen und filtern.
- Bereiche, die tatsächliche Pop-Ups sind und weiterführende Informationen preisgeben.
- Java-Script-gesteuertes Verhalten, das die Navigation der Website ohne Menü erlaubt (und es ist erstaunlicherweise nahezu niemandem aufgefallen, dass die Seite kein Menü hat).
- Die nötige Portion Eye-Candy gepaart mit einem sehr minimalistischen Look, der Informationen den nötigen Fokus gibt, aber trotzdem nicht übertreibt.
Das Ergebnis
Heraus kam eine Website, die sehr gut zeigt, wie ich mir modernes Web-Design vorstelle. Reduziert, fokussiert, schnell, sicher, voller Inhalte, die dennoch rasch erreichbar sind. Das, was nötig ist. Nicht mehr, aber auch auf keinen Fall weniger. Required Design. Immer noch Form Follows Function, aber mit Fokus auf Form, ohne die Funktion zu beeinträchtigen. Weniger wäre zu wenig. Gute Speed- und gute SEO-Werte. Dass ich meine Website sehr mag, dürfte kein großes Geheimnis sein. Und dem Feedback von Experten nach: auch anderen