So kriegst du schönes Design in deine Website

 

So kriegst du schönes Design in deine Website

Gutes Design ist toll. Geht es jedoch zu Lasten der Inhalte oder der Benutzerfreundlichkeit, ist es kontraproduktiv. Weil letztlich der Inhalt zählt. Die Struktur und Designelemente sollen die Seite zwar auch verschönern, es gibt aber eine wichtigere Funktion: das Aufnehmen der Inhalte zu erleichtern - nicht zu behindern.

Squarespace und andere Baukastensysteme wie Jimdo, Weebly, ... stellen dir fertige Layouts zur Verfügung und schlagen dir Gestaltungsvarianten vor. Genau das ist das Tolle an diesen Systemen: Du musst dir nicht selbst ein Layout programmieren, sondern wählst eine der Vorlagen aus. Du entscheidest dich für jene, die am besten zu deinem Projekt passt und dir am besten gefälllt. Jetzt musst du sie noch an deine Bedürfnisse anpassen.

Und wie kriegst du das hin, dass deine Website dann auch so schön designt aussieht wie die Beispielwebsites? Du kannst die Bilder aus dem Template ja nicht 1:1 übernehmen, sondern musst sie durch eigene ersetzen. Geschweige denn den Text, der so schön ins Mustertemplate reinpasst -  mengenmäßig und überhaupt!

Du willst nach wie vor keinen Webdesigner beauftragen, sondern dir deine Seite selber machen (wann es Sinn macht, selber zu bauen, bzw. wann nicht, erfährst du übrigens hier). - Hier also einige Tipps:

1. Welche Websites gefallen dir?

Bestimme Websites, die dir gefallen. Analysiere danach, was genau dir an ihnen gefällt. Welche Elemente, Farben, Schriftarten, Struktur der Inhalte, Funktionen ... Überlege dir dann, was davon du sinnvollerweise für deine eigene Seite übernimmst. Damit kriegst du ein erstes Gefühl, wie dein Webauftritt aussehen soll.

2. Welche Persönlichkeit hat deine Seite?

Überleg dir im Vorfeld, 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 ... An diese Gedanken hältst du dich während des gesamten Gestaltungsprozess hindurch.

 Illustration zwei Vögel

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.

4. Struktur

Biete den Besuchern eine klare und durchgängige Struktur. Die erreichst du mit einem einheitlichen Layout und klare Beziehungen zwischen den Designelementen.

Rücke deinen linksbündigen Text zum Beispiel nicht unterschiedlich ein. Beginne ihn also nicht einmal bei Zentimeter 0, 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 vollzustopfen, lieber weniger zu sagen und zu schreiben und das dafür besser wirken zu lassen.

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 Getty Images. Die Auswahl ist direkt in Squarespace integriert und von dort abruf- und einbaubar. Sie kosten um die 10 Dollar und du kaufst die Rechte zur Verwendung gleich mit. Du brauchst dir danach keine Sorgen mehr über die Verwendungserlaubnis machen.

     Buchstaben auf blauem Hintergrund

    9. Schriftarten

    Schriftarten - sogenannte ‚Fonts’ - prägen gleich wie die Farben deinen (Web)Auftritt. Empfohlen wird auch hier, nicht mehr als zwei verschiedene Schriftarten zu verwenden. Zwei harmonierende Schriften machen die Seite lesbar und heben Wichtiges hervor. Mehr zu gut lesbaren Webtexten erfährst du hier.

    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?