04 Sep. Die D/7 Designbibliothek ist online. Und ja, das war mehr Arbeit als gedacht.
Bei einem neuen Webdesign-Projekt kommt irgendwann die Frage auf, wie die Website eigentlich aussehen soll. Und genau da wird es oft schwieriger als gedacht. Begriffe wie „modern“, „hochwertig“, „ruhig“ oder „nicht zu verspielt“ helfen zwar ein bisschen – aber jeder hat dabei andere Bilder im Kopf.
Warum wir die D/7 Designbibliothek gebaut haben
In Gesprächen mit Kunden geht es früher oder später um Farben, Bilder, Schriften, Buttons und die Frage, wie viel Bewegung eine Website verträgt. Manche möchten große Bilder, andere lieber viel freie Fläche. Manche mögen sehr klare Seiten, andere etwas mehr Tiefe und Bewegung.
Das Problem dabei: Über Gestaltung zu sprechen, ohne etwas vor Augen zu haben, ist erstaunlich schwierig. Zwei Menschen können beide von einer „modernen Website“ sprechen und dabei komplett unterschiedliche Dinge meinen.
Genau daraus entstand die Idee für die D/7 Designbibliothek. Ich wollte einen Bereich schaffen, in dem man sich solche Dinge nicht umständlich erklären muss, sondern einfach anschauen kann.
Anfangs dachte ich noch an ein paar Buttons, Farben und Karten. Daraus wurde dann ziemlich schnell mehr. Es kamen Typografie, Hover-Effekte, CTA-Bereiche, Animationen, Hero-Bereiche und schließlich auch die Premium-&-Glossy-Ecke dazu.
Die Arbeit daran war deutlich umfangreicher, als ich am Anfang gedacht hatte. Viele Beispiele mussten nicht nur gut aussehen, sondern auch sauber auf unterschiedlichen Bildschirmgrößen funktionieren und sich teilweise direkt ausprobieren lassen. Dazu kam der D/7 Merkzettel, über den sich Ideen aus allen Bereichen sammeln lassen.
Inzwischen ist daraus genau das geworden, was ich mir gewünscht hatte: eine kleine Webdesign-Bibliothek, durch die man einfach stöbern kann. Und ja – die Arbeit hat sich gelohnt.
Die Idee dahinter
Vieles im Webdesign lässt sich leichter zeigen als erklären. Deshalb können Sie sich in der D/7 Designbibliothek einfach ansehen, was Ihnen gefällt – und müssen nicht erst versuchen, einen Stil in Worte zu fassen.
Webdesign lieber anschauen als erklären
Die Designbibliothek ist vor allem für Menschen gedacht, die eine neue Website erstellen lassen oder einen bestehenden Internetauftritt überarbeiten möchten. Sie können sich durch unterschiedliche Website-Beispiele klicken und dabei nach und nach herausfinden, welche Richtung zu Ihrem Unternehmen passen könnte.
Dabei geht es ausdrücklich nicht darum, am Ende zehn einzelne Bausteine zu einer fertigen Website zusammenzuklicken. Die Auswahl zeigt uns vielmehr, was Ihnen gefällt. Wenn auf Ihrem Merkzettel zum Beispiel ein ruhiger Hero-Bereich, dunkle Karten, gedeckte Grüntöne und zurückhaltende Hover-Effekte landen, wissen wir schon ziemlich viel über die Richtung.
Das ist meistens hilfreicher als ein Satz wie: „Es soll modern sein, aber nicht zu modern.“
Wer selbst Websites baut, kann die Bibliothek ebenfalls nutzen. Bei vielen Beispielen lassen sich HTML und CSS direkt aufklappen und übernehmen. Bei Animationen und interaktiven Effekten ist teilweise auch JavaScript dabei.
Hero-Bereiche & Website Header
Der erste sichtbare Bereich einer Website prägt den Eindruck stärker als fast alles andere. Deshalb haben die Hero-Bereiche und Website Header bei uns eine eigene Rubrik bekommen.
Dort finden sich sehr unterschiedliche Ansätze: große Hintergrundbilder, ruhige Split-Layouts, kleinere Bilder neben dem Text, zentrierte Einstiege, persönliche Varianten, Referenz-Heros und auch deutlich dunklere Premium-Lösungen. Gerade hier sieht man schön, wie stark sich die Wirkung einer Website verändern kann, obwohl die eigentliche Aussage ähnlich bleibt.
Für Hotels, Gastronomie, Beratung, Architektur, Dienstleistungen oder klassische Unternehmensseiten ist der Hero-Bereich oft ein guter Ausgangspunkt, weil man sehr schnell merkt, welche Bildsprache und welcher Aufbau sich richtig anfühlen.
Farben & Farbtöne
Eine Website kann exakt gleich aufgebaut sein und allein durch die Farbe komplett anders wirken. Deshalb gibt es in der Designbibliothek einen eigenen Bereich für Website-Farben und Farbtöne.
Dort haben wir Farben zusammengestellt, die wir selbst für moderne Websites verwenden würden – von klaren Blau- und Grüntönen über Petrol und Anthrazit bis zu ruhigeren Naturfarben. Dazu kommen fertige Farbpaletten, wenn nicht nur ein einzelner Ton, sondern gleich eine passende Kombination gesucht wird.
Das ist vor allem dann praktisch, wenn die Richtung schon ungefähr feststeht, aber „ein schönes dunkles Grün“ noch nicht besonders viel weiterhilft.
Typografie für Websites
Bei Typografie merkt man besonders schnell, wie viel Gestaltung allein durch Schrift entstehen kann. Eine Überschrift braucht nicht zwangsläufig ein Bild oder einen Effekt daneben. Manchmal reichen eine gute Größe, ausreichend Luft und eine interessante Zeilenaufteilung.
In unserer Rubrik Website-Typografie zeigen wir verschiedene Möglichkeiten: große ruhige Headlines, Outline-Schrift, farbige Wörter, unterschiedliche Größen oder kleine Bewegungen beim Erscheinen.
Das Ganze ist weniger als Sammlung ausgefallener Schrifttricks gedacht. Vielmehr kann man dort ziemlich schnell erkennen, ob man eine eher reduzierte oder etwas auffälligere Richtung mag.
Besonders gut funktioniert das bei Hero-Bereichen, Kampagnenseiten, Editorial-Layouts und Websites, bei denen Schrift selbst einen größeren Teil der Gestaltung übernimmt.
Karten & Boxen
Leistungen, Vorteile, Zahlen, Referenzen oder Angebote lassen sich oft besser erfassen, wenn sie nicht alle in einem langen Textblock stehen. Genau dafür gibt es unsere Karten & Boxen.
Die Beispiele reichen von einfachen Leistungskarten über Zahlen- und Referenzboxen bis hin zu Preisbereichen, Kundenstimmen und Frage-Antwort-Karten. Gerade bei diesem Bereich war mir wichtig zu zeigen, dass nicht jede Karte automatisch ein weißes Rechteck mit Icon und Schatten sein muss.
Karten eignen sich überall dort, wo Inhalte schneller erfassbar werden sollen – bei Leistungen, Vorteilen, Preisen, Kennzahlen, Referenzen oder anderen wiederkehrenden Informationen.
CTA-Bereiche
Irgendwann soll auf einer Website etwas passieren. Jemand soll Kontakt aufnehmen, anrufen, einen Termin vereinbaren, ein Angebot ansehen oder eine Anfrage schicken.
In unserer Rubrik CTA-Bereiche zeigen wir unterschiedliche Möglichkeiten für genau diesen nächsten Schritt. Von sehr einfachen Kontaktbereichen über Telefon und E-Mail bis zu dunkleren, auffälligeren Varianten.
Ein guter Call-to-Action muss dabei nicht schreien. Er sollte nur im richtigen Moment verständlich machen, wie es weitergeht.
Button-Effekte
Buttons gehören zu den kleinsten Elementen einer Website und trotzdem klickt man ständig darauf. Deshalb lohnt sich auch hier ein bisschen Aufmerksamkeit.
Bei unseren CSS Button-Effekten gibt es bewusst unterschiedliche Varianten. Manche bleiben sehr ruhig, andere verändern ihre Fläche, bewegen einen Pfeil oder reagieren etwas stärker.
Entscheidend war für uns weniger die Frage, wie spektakulär ein Button werden kann. Wichtiger war, dass die Effekte auch nach dem fünften Klick noch angenehm wirken.
Hover-Effekte
Hover-Effekte sind oft genau die Kleinigkeiten, durch die sich eine Website etwas fertiger anfühlt. Ein Bild vergrößert sich leicht, eine Karte hebt sich an, eine Linie wächst oder ein Pfeil kommt dazu.
In unserer Sammlung mit CSS Hover-Effekten lassen sich diese Reaktionen direkt ausprobieren. Hier geht es weniger um große Show als um kleine Rückmeldungen auf eine Bewegung mit der Maus.
Das funktioniert besonders gut bei Bildern, Projektvorschauen, Karten, Links und anderen Elementen, die ohnehin anklickbar sind.
Animationen & Scroll-Effekte
Etwas mehr Bewegung kommt bei unseren Website-Animationen und Scroll-Effekten ins Spiel. Elemente können beim Scrollen erscheinen, Bilder aufgedeckt werden, Zahlen hochzählen oder Inhalte leicht versetzt reagieren.
Auch hier gilt für mich: Nur weil etwas animiert werden kann, muss es nicht animiert werden. Richtig eingesetzt kann Bewegung aber dabei helfen, den Blick zu führen und längere Seiten angenehmer zu machen.
Besonders sinnvoll ist das bei Referenzen, Zahlen, Bildbereichen, längeren Startseiten und Stellen, die etwas mehr Aufmerksamkeit bekommen dürfen.
Animationen & Scroll-Effekte ansehen
Premium & Glossy
Und dann gibt es noch die Dinge, die man mit einem Screenshot eigentlich schlecht erklären kann: Glasflächen, Licht, Glow, Tiefe, Chrome und bewegte Oberflächen.
Dafür gibt es inzwischen Premium & Glossy. Dort darf es bewusst etwas besonderer werden. Nicht für jede Unterseite und auch nicht für jedes Unternehmen – aber an der richtigen Stelle können solche Effekte sehr stark aussehen.
Ich würde damit keine komplette Website zukleistern. Für einen Hero-Bereich, eine einzelne Karte, einen Button oder einen besonderen Akzent kann genau so etwas aber den Unterschied machen.
Ideen merken und zusammenstellen
Der für mich wichtigste Teil der Designbibliothek ist am Ende nicht ein einzelner Effekt, sondern der D/7 Merkzettel. Bei jedem Beispiel können Sie sich die Varianten merken, die Ihnen gefallen.
Das funktioniert über die verschiedenen Bereiche hinweg. Sie können also mit einem Hero anfangen, später eine Farbe auswählen, eine Typografie ergänzen und irgendwann noch einen CTA oder Hover-Effekt dazu nehmen.
Ihre Auswahl bleibt erhalten, während Sie weiter durch die Bibliothek stöbern. Am Ende können Sie den Merkzettel direkt zusammen mit ein paar Zeilen zu Ihrem Projekt an uns schicken.
Das Praktische daran: Wir müssen beim ersten Gespräch nicht bei null anfangen. Wir sehen schon vorher, was Ihnen gefällt und in welche Richtung es ungefähr gehen darf.
Keine Sorge: Sie bauen damit keine fertige Website zusammen.
Der Merkzettel zeigt uns einfach Ihre Richtung. Zwei oder drei Favoriten können dabei genauso hilfreich sein wie zehn.
Was aus der Idee geworden ist
Als ich mit der D/7 Designbibliothek angefangen habe, war noch nicht ganz klar, wie groß der Bereich einmal werden würde. Inzwischen gibt es dort zahlreiche Beispiele für Webdesign, Website Header, Farben, Typografie, Buttons, Karten, CTA-Bereiche, Hover-Effekte, Animationen und moderne Website-Effekte.
Und fertig ist die Bibliothek damit wahrscheinlich trotzdem nicht. Es gibt noch genug Dinge, die man besser zeigen als erklären kann. Formulare fallen mir spontan ein. Bildideen ebenfalls. Und wahrscheinlich taucht beim nächsten Kundenprojekt schon wieder etwas auf, bei dem ich denke: Das gehört eigentlich auch noch hinein.
Für den Moment freue ich mich aber erst einmal darüber, dass sie online ist. Wenn Sie gerade eine neue Website planen, schauen Sie sich einfach um und merken Sie sich, was Ihnen gefällt.