So kriegst du schönes Design in deine Website
Gutes Design ist toll. Es darf aber niemals zu Lasten der Inhalte oder der Benutzerfreundlichkeit gehen, weil dann ist es kontraproduktiv. Denn das Wichtigste ist, dass deine Seitenbesucher deine Inhalte rasch aufnehmen und gut finden.
Squarespace und andere Website-Builder stellen dir fertige Layouts zur Verfügung. Das ist toll: Du wählst das Layout, das am besten gefällt und zu deinem Projekt passt. Du passt es individuell an deine Bedürfnisse an und befüllst es mit deinen Inhalten.
Wie kriegst du das aber hin, dass deine Website so schön aussieht wie die Beispielwebsite? Du kannst die Bilder aus dem Template ja nicht 1:1 übernehmen, sondern musst sie durch eigene ersetzen. Geschweige denn den Text, der mengenmäßig und überhaupt so schön ins Mustertemplate reinpasst.
Lies hier weiter, wie du das hinkriegst:
1. Welche Websites gefallen dir?
Suche Websites, die dir gefallen. Analysiere danach, was genau dir an ihnen gefällt. Sind es Elemente, Farben, Schriftarten, Struktur der Inhalte oder Funktionen? Wie ist alles angeordnet und wie wird es kombiniert? Du findest zB. die Farbkombination schön? Dann überleg dir, ob sie auch zu deiner Seite passt.
2. Welche Persönlichkeit hat deine Seite?
Überleg dir, welche Persönlichkeit oder welches Thema die Seite haben soll. Und finde dafür zwei Begriffe. Mögliche Begriffe wären: verspielt, fröhlich, dezent, minimalistisch ... Daran hältst du dich während des gesamten Gestaltungsprozesses.
3. Farben
Welche passen zu dir? Zu deiner Zielgruppe? Hast du bereits Fotos, die du verwenden wirst? Gibt es Farben, die sich in den Bildern wiederholen? Geht dein physisches Business online, zum Beispiel dein Laden? Gibt es im Laden / Restaurant / Atelier / Büro ein Farbschema? Dann übernimm das!
Ich kenne zwei Regeln zur Anzahl der verwendeten Farben:
Die eine besagt, dass zwei Komplementärfarben ideal sind.
Die andere, dass man nie mehr als maximal drei Farben verwenden soll.
Ich finde, es hängt vom Thema und deinem persönlichem Geschmack ab, für welche Variante du dich entscheidest. Zu viele eingesetzte Farben für Hervorhebungen sind jedenfalls zu viel des Guten. Weil du dann nichts mehr hervorhebst.
4. Struktur
Biete den Besuchern eine klare und durchgängige Struktur. Die erreichst du mit einem einheitlichen Layout und klaren Beziehungen zwischen den Designelementen.
Rücke deinen linksbündigen Text zum Beispiel nicht unterschiedlich ein. Beginne ihn also nicht einmal bei Zentimeter ‘Null’, das nächste Mal rückst du ihn zwei Zentimeter ein und das nächste mal bei einem Zentimeter.
Erleichtere den Seitenbesuchern das zu finden, was sie suchen mithilfe hervorgehobener Klickflächen ('Buttons') oder sog. 'Call-to-actions' (Handlungsaufforderungen), wie zum Beispiel hier:
;-)
5. Weißraum
Oder: weniger ist mehr ;) Weißraum ist unbeschriebener Freiraum auf Seiten. Er dient dazu, Texte oder andere Inhalte hervorzuheben. Er erleichtert das Lesen, hilft, den Überblick zu behalten und lenkt den Blick schneller auf wichtige Inhalte. Achte darauf, die Seiten nicht zu sehr vollzustopfen. Sag lieber weniger und lass es dafür besser wirken.
6. Kontrast
Was zum Beispiel gar nicht geht, ist gelbe Schrift auf Weiß oder eine schmale dunkelgrüne Schrift auf schwarzem Hintergrund. Die sind nämlich schwer lesbar, weil der Kontrast zu gering ist.
7. Ruhe
Vermeide außerdem zu große Unruhe oder chaotische Anordnung der Inhalte auf der Website. Das lenkt von dem ab, was du vermitteln willst und lässt Seitenbesucher nicht finden, wonach sie suchen. Ursachen für Unruhe können sein:
Zu viele Formatierungen mischen /einsetzen: Kursivschrift, Fett, Unterstreichungen und Kapitälchen ... das sind dann keine Hervorhebungen oder Akzente mehr, sondern behindern flüssiges Lesen
Hin- und Herwechseln zwischen linsbündigen und zentrierten Texten oder Blocksatz. Entscheide dich für einen Stil und ziehe ihn soweit wie möglich durch
Unterschiedliche Bildgrößen oder Fotos mit unterschiedlichen Stilen
Zuviele verschiedene Schriftarten und -größen
Du bringst deine Botschaft nicht rüber und die Leute machen auf der Seite nicht das, was du gerne hättest, zum Beispiel sich durchschmökern, weiterklicken, Kontakt aufnehmen ...
8. Bilder
Die verwendeten Bilder müssen miteinander harmonieren. Das heißt, sie passen zueinander, bestimmte Farben kommen in allen Bildern immer wieder vor und sie wurden im selben Stil gemacht.
Das gilt unabhängig davon, ob sie eigens für dich gemacht wurden oder du sie von einer Fotoplattform kaufst.
Ich finde übrigens, die idealen Fotos sind die eigens für dich und dein Projekt gemachten Bilder. Und zwar so qualitativ und hochwertig, wie die in den Templates. Das schönste Templatedesign wird ohne professionelle Bilder nicht wirken. Und eigens gemachte Bilder können deine Persönlichkeit und Individualität am besten wiederspiegeln. Eigene Bilder kosten natürlich ein bißchen was, und so ein Shooting (Fototermin) will gut geplant sein.
Hast du keine eigenen Bilder und willst du momentan auch nicht extra shooten, wählst du zum Beispiel bei Squarespace aus einem Riesenvorrat an sogenannten ‚Stockbildern’ von Unsplash oder Getty Images. Die Auswahl ist direkt in Squarespace integriert und von dort einbaubar. Unsplash-Bilder sind kostenlos, die von Getty kosten um die 10 Dollar. Die Rechte zur Verwendung kaufst du gleich mit.
9. Schriftarten
Schriftarten prägen gleich wie die Farben deinen (Web)Auftritt. Empfohlen wird auch hier, nicht mehr als zwei, maximal drei verschiedene Schriftarten zu verwenden. Zwei harmonierende Schriften machen die Seite lesbar und heben Wichtiges hervor.
Lange galt die Regel, dass Serifen-Schrift nichts für’s Web ist. Da hat sich aufgeweicht, weil die Bildschirme die kleinen ‘Füßchen’ an den Buchstaben mittlerweile gut darstellen können. Man sieht jetzt immer öfter, dass Überschriften mit einer Serifen-Schrift gestaltet sind.
10. Logo
Hast du bereits ein Logo? Dann bau es in dein gewähltes Template ein. Ein gutes Logo fungiert als visueller Anker. Es hilft dir, dich als Person oder deine Leistungen als unverwechselbar zu präsentieren und in Erinnerung zu behalten.
Generell gilt: Das Logo
Soll in kleiner Darstellung gut erkennbar sein (Smartphones!)
Soll gut in Schwarz/Weiß funktionieren
Muss kein graphisches Element enthalten
Soll für alle Anwendungen funktionieren (Print, Online, Social Media etc.)
In manchen Fällen funktionieren für Papier gestaltete Logos für die Anwendung ‚Online’ beziehungsweise ‚Website’ nicht. Oder sie passen nicht ins gewählte Template hinein. In diesem Fall wende dich an den Graphiker, von dem das Logo kommt und lass es anpassen.
Hast du noch kein Logo, habe ich eine gute Nachricht für dich: Du brauchst auch keines (Wieso, erkläre ich in diesem Artikel)!
Du kannst aus deinem Namen oder aus dem deines Businesses oder Projekts ein Logo machen. Hier unterstützt dich Squarespace zum Beispiel mit einem tollen Tool: Dem Logo-Creator. Selbst wenn du dein Logo letztendlich von einem Graphiker machen läßt, kannst du hier schon mal herumprobieren und herausfinden, was dir gefällt.
11. Bastle und probiere herum, bis es passt!
Was dir höchstwahrscheinlich nicht erspart bleibt, aber auch Spaß macht: du wirst eine Weile herumprobieren, Textblöcke an die Bildbreiten und –höhen anpassen und Dinge ausprobieren. Du wirst mit den Schriften spielen – mit der Größe der Zwischenräume der Buchstaben, den Zeilenhöhen, wie 'schwer' die Buchstaben sind oder mit der dargestellten Logogröße ...
12. Feedback einholen
Zuguterletzt: Es ist wichtig, dir die Außensicht reinzuholen. Frage Freunde, Bekannte, Kollegen, wie ihnen Design und Layout gefallen. Unterstützen sie deine Inhalte oder lenken sie eher ab? Welchen Eindruck vermittelt deine Seite? Den, den du vermitteln willst? Stört etwas? Was ist toll?
