Die oberste Regel des Webdesigns
Das wichtigste Ziel eines guten Webdesigns ist es, die Informationen auf der Website ansprechbar und zielorientiert zu vermitteln. Dazu gehören nicht nur die offensichtlichen Elemente wie Farbe und Gestaltung, sondern auch die Bildsprache sowie die Positionierung des Inhalts zu einem einheitlichen Layout. All diese einzelnen Elemente spielen zusammen und verbinden sich zu einem stimmigen Gesamtbild.
Corporate Design
Kreiere ein Webdesign, mit dem deine Marke oder deine Firma wiedererkannt wird – ein sogenanntes Corporate Design. Das betrifft nicht nur das Webdesign, sondern das gesamte visuelle Erscheinungsbild. Überlege dir, wie du auftreten und gesehen werden möchtest. Was ist deine Zielgruppe? Welche Stimmung, welche Emotionen möchtest du vermitteln? Was passt du deinem Thema, zu deiner Firma? Überlege dir ein Grundkonzept. Dies wird dir helfen, Webdesignentscheidungen zu treffen.
Als Erstes in einem Website Creator Projekt definiere ich zumeist die Farben und Schriften. Diese haben eine starke visuelle Wirkung auf das Webdesign. Somit kriegst du schnell einen ersten Eindruck davon, wie deine Seite wirkt.
Farben
Farben beeinflussen nachweislich nicht nur das Handeln von uns Menschen, sondern vor allem auch unsere Gefühle. Die Wahl der richtigen Farbe für deine Website kann also helfen, deine Besucher positiv zu beeinflussen und einen bleibenden Eindruck zu hinterlassen. Neben der richtigen Farbwahl gilt es auch, diese sinn- und wirkungsvoll auf deiner Website einzusetzen. Die Farben helfen dir, wichtige Sachen hervorzuheben, zu leiten und auch zu Handlungen zu animieren.
Farben in deinem Website Creator Projekt definieren
Für die Farbwahl im Website Creator sind dir keine Grenzen gesetzt. Dennoch hilft es, wenn du dich an eine festgelegte Farbpalette hältst. Im Website Creator Editor gibt es bei «Template Einstellungen» ein vordefiniertes Farbschema mit vier Farben, welche du auf dein Farbschema anpassen kannst. Damit steuerst du die Farben auf all deinen Seiten.
Wähle deine Akzentfarben
Wähle eine bis maximal zwei Akzentfarben für deine Website. Falls du schon ein Logo hast, ist es sinnvoll, die Logofarbe(n) zu verwenden, damit das Corporate Design gewahrt wird. Hast du noch keines, kannst du die Farben auch passend zu deinem Thema wählen.
Definiere eine Farbhierarchie
Definiere eine Hauptfarbe und eventuell eine zweite Akzentfarbe zur Unterstützung. Nutze die Hauptfarbe deines Webdesigns für wichtige Elemente, Highlights oder auch Buttons und als Hintergrundfarbe. Die zweite Farbe kann für weniger wichtige Elemente eingesetzt werden.
Farbe ist nicht gleich Farbe
Jede Farbe hat eine andere psychologische Wirkung auf uns. Bestimmt ist dir auch schon aufgefallen, dass bestimmte Themen oft bestimmte Farben oder Farbschemata verwenden. Beschäftige dich mit der Wirkung der Farben, damit du sicherstellen kannst, dass die Farben für dich und nicht gegen dich arbeiten.
Ein grelles Rot kann aggressiv wirken, ein dunkles Rot wird oft gern bei Wein verwendet. Ein Rosa kann unpassend für eine Anwaltskanzlei sein. Nicht zufällig haben viele der Social Media Marken Blau in ihrem Logo und Design, denn Blau wirkt zuverlässig, ruhig und vertrauensvoll. Bestimmt ist dir auch schon aufgefallen, dass Blau im Gesundheitswesen, auch zusammen mit Grün, gern verwendet wird.
Auch der Farbton und die Helligkeit spielen eine Rolle. Ein dunkles Blau wirkt anders als ein grelles Hellblau. Falls du dich weiter über die Wirkung der Farben informieren möchtest, gibt es im Internet viele Seiten zum Thema Farbpsychologie und deren Wirkung.
Schriften und Farben
Vor allem bei der Farbwahl für Schriften gilt: «Weniger ist meist mehr». Zu Recht verwenden die meisten Websites einen weißen oder hellen Hintergrund und dunkle, meist schwarze, Schrift. Am wichtigsten ist, dass die Schriften bestmöglich lesbar sind. Da darfst du ruhig mit dem Mainstream gehen. Eine gelbe Schrift auf blauem Hintergrund mag vielleicht deinem Farbschema entsprechen, ist jedoch nicht ansprechend und so mühsam zu lesen, dass die Benutzer deine Seite wieder verlassen.
Schriften
Die richtige Schriftart(en) auszuwählen und richtig zu nutzen, kann einen großen Einfluss auf dein Webdesign haben. In erster Linie muss die Website natürlich gut lesbar sein. Eine tolle und spezielle Schrift zu verwenden nützt nichts, wenn der Text nicht lesbar ist. Die Lesbarkeit hängt von der gewählten Schriftart, aber auch von der Größe und Farbe ab.
Schriften und Formate im Website Creator definieren
Auch die Schriftarten kannst du, gleich wie die Farben, in den Template Einstellungen im Website Creator Editor definieren. Diese Einstellungen gelten für die gesamte Website. Es gibt verschiedene Schriftformate, die du alle individuell ändern kannst. Danach kannst du im Inhalt nur noch das Format auswählen. Damit ersparst du dir viel Zeit, wenn du nicht bei jeder Textbox die Schriftart, -größe, -farbe usw. manuell einstellen musst. Außerdem stellst du dadurch sicher, dass deine Texte visuell einheitlich aussehen.
Am besten ist es, die Schriften möglichst zu Beginn einzustellen, damit du die Wirkung deines Webdesigns prüfen kannst. Auch könnte es später wieder zeitlich aufwendig sein, dein Layout auf eine neue Schrift anzupassen.
Schriftwahl und Wirkung
Genau wie auch bei den Farben vermittelt jede Schriftart einen bestimmten Eindruck. Eine Schrift kann modern, traditionell, schwer, verspielt oder feminin wirken, um einige Beispiele zu nennen. Suche also Schriftarten, die zu deinem Webdesign passen.
Grundsätzlich empfehle ich, nicht mehr als zwei verschiedene Schriftarten auf einer Website zu benutzen. Es wird gern eine Schriftart für die Überschriften verwendet und eine weitere Schrift für den Inhalt. Du kannst auch verschiedene Schriftstile mischen. Die Schriftart der Überschrift darf auch ruhig etwas ausgefallener sein, da die Überschriften kurz sind. Ausgefallene Schriftarten sollten im normalen Lauftext aber vermieden werden, da sie in langen Texten nicht gut lesbar sind.
Schriftgröße
Wähle eine Schriftgröße und auch einen Zeilenabstand, die angenehm zu lesen sind. Denke dabei auch an deine Zielgruppe. Sind es ältere Menschen, darf die Schriftgröße auch gern etwas größer sein. Nicht jede Schriftgröße funktioniert für jede Schriftart, da die Schriftarten unterschiedlich groß wirken können bei gleicher Schriftgröße. Teste dies also immer und vergiss auch nicht die mobile Version.
Struktur und Inhalt
Bevor du mit der Umsetzung deiner Website beginnst, mache dir Gedanken über den Inhalt und die Aufteilung. Damit kannst du nachher gezielter und effektiver den Inhalt gestalten. Es hilft dir sicher auch, wenn du schon Texte und Inhalte vorbereitest. Was möchtest du mit deiner Seite erreichen? Welche Informationen möchtest du vermitteln? Was sind die wichtigsten Informationen? Wie kannst du deine Themen sinnvoll gliedern und aufteilen?
Navigation
Die Navigation ist das wichtigste Element auf deiner Website. Eine gute Navigation bietet dem Benutzer eine schnelle Orientierung und leitet ihn direkt zum gewünschten Ziel. Um dies zu erreichen, kommt es auf eine gute Strukturierung und ein klares Webdesign an. Mache dir im Vorfeld schon Gedanken dazu: Wie viele Seiten wirst du benötigen? Wie möchtest du deine Inhalte aufteilen? Benötigst du Unterseiten?
Verwende möglichst kurze und verständliche Begriffe für die Navigation. Dies hilft dem Benutzer, schneller einen Überblick zu erhalten, als wenn er mehrere Wörter oder halbe Sätze lesen muss.
Layout
Das Layout ist wichtig, um die Informationen auf deiner Seite in ansprechend aufgeteilten Themen, übersichtlich darzustellen. Somit kann sich der Benutzer zielorientiert auf der Website bewegen.
Lange Textabschnitte schüchtern Leser ein. Gliedere daher deine Texte in kleinere Abschnitte oder einzelne Textblöcke mit Überschriften. Dies macht es für den Benutzer auch einfacher, gezielt die Informationen zu finden, die ihn interessieren.
Bilder können Textabschnitte auflockern, sofern die Bilder zum Inhalt passen und diesen ergänzen oder unterstützen.
Hebe verschiedene Inhalte auch visuell voneinander ab. Verwende Inhaltsabschnitte mit farblich abgehobenem Hintergrund oder Textblöcke mit einer Hintergrundfarbe oder einem Rahmen, um Inhalte gezielt von anderen abzuheben.
Inhalt nach Wichtigkeit layouten
Das Wichtigste auf jeder Seite sollte immer zuoberst stehen. Es ist nicht garantiert, dass ein Benutzer immer bis zuunterst liest oder scrollt. Lege daher eine Hierarchie deiner Inhalte auf einer Seite fest.
Benutze dafür auch die Schriftformate, um deine Inhalte nach Wichtigkeit zu sortieren: Da zuoberst das Wichtigste steht, benutze auch eine große Überschrift und benutze kleinere Überschriften für weniger wichtige Abschnitte.
Bilder
Ein passendes Bild auf der Website kann einen guten und eindrucksvollen ersten Eindruck vermitteln. Im Gegensatz zu Text, der erst gelesen werden muss, wird ein Bild auf den ersten Blick wahrgenommen. Bilder können Gefühle auslösen und eine emotionale Bindung ermöglichen und sind daher sehr wichtig für eine Website. Hochaufgelöste Bilder und ein ansprechendes Motiv sind dafür Voraussetzung.
Bildmotiv und Farbe
Verwendete Bilder sollten immer einen Zweck haben und mit dem Inhalt übereinstimmen. Versuche auch, Bilder passend zu deinem Stil oder Thema zu verwenden. Wenn du zum Beispiel eine Seite für einen Kindergarten erstellst, nutze bunte und fröhliche Bilder. Wenn du die Möglichkeit hast, kannst du ein Bild auch farblich auf dein Farbschema abstimmen.
Website Creator Trick: Benutze den Transparenzregler im Headerbild, um eine gewählte Hintergrundfarbe «durchscheinen» zu lassen. Damit kannst du dem Bild die Farbgebung deines Webdesigns mitgeben, ohne es speziell bearbeiten zu müssen. Auch kannst du dabei die Überschrift über dem Bild vom Hintergrund abheben, wenn du das Bild etwas abdunkelst.
Welches Dateiformat benutzen?
Es gibt unzählige Bildformate. Im Website Creator (und im Web allgemein) kannst du JPG und PNG verwenden. Die Wahl des Dateiformates hängt davon ab, wie du es verwenden möchtest.
JPG (Joint Photographic Experts Group) ist das gängigste Format und benötigt sehr wenig Speicherplatz. Es wird für normale Bilder und Fotografien verwendet.
PNG wird für sehr hochwertige, detaillierte Bilder verwendet oder wenn Transparenz benötigt wird. Es braucht etwas mehr Speicherplatz als ein JPG. Benutzt du ein PNG mit Transparenz im Website Creator, kannst du bei den Bildeinstellungen eine Hintergrundfarbe aktivieren, welche dann sichtbar ist hinter dem Bild.
Bildgröße und Qualität
Verpixelte oder niedrig aufgelöste Bilder vermindern die Qualität und das Aussehen deiner Website. Verwende qualitativ gute, hochaufgelöste Bilder, vor allem für den Headerbereich.
Grundsätzlich muss ein Bild nur so groß sein, wie es nachher angezeigt werden soll. Lädst du also dein Bild in der Originalgröße von 4000 x 6000 Pixeln hoch und es soll nachher nur 400 x 600 Pixel angezeigt werden, ist das Bild unnötig groß.
Als Richtwert für ein Headerbild im Website Creator kannst du mit etwa 2000 Pixeln Breite rechnen und hast damit die maximale Größe abgedeckt. Für den Inhalt kommt es auf die gewählte Größe an. Da kannst du auch gerne das Bild etwas größer hochladen. Mit 1000 Pixeln Breite bist du gut dabei.
Dateigröße
Größe Bilder benötigen lange Ladezeiten. Oder umgekehrt: Je kleiner ein Bild in der Dateigröße, desto schneller kann es geladen werden. Gerade im Zeitalter der Handynutzung ist es wichtig, die Bilder für den Webauftritt zu komprimieren und so die Dateigröße zu reduzieren. Somit vermeidest du lange Ladezeiten deiner Website. Auch für die Suchmaschinenoptimierung ist dies ein Indikator.
Tipp: Falls du selbst keine Software hast, um ein Bild zu komprimieren, empfehle ich das Verwenden eines Onlinetools, auf welchem du online JPG und PNG Bilder kostenlos komprimieren kannst:
Bildrechte
Stelle sicher, dass du die Bilder, die du auf deiner Website einbinden möchtest, auch legal nutzen darfst. Bilder von Google oder auch anderen Seiten dürfen nicht einfach so genutzt werden. Ob oder wie du ein Bild von der Google-Suche nutzen darfst, ist bei jedem einzelnen Bild von dessen Bestimmungen abhängig.
Eine weitere Möglichkeit, wenn du keine eigenen Bilder hast, sind Stockfotos. Dabei gibt es sowohl kostenpflichtige Seiten wie z.B. Adobe Stock, iStock oder shutterstock, als auch kostenlose Anbieter wie Unsplash, pexels.com oder lifeofpix. Einige sind komplett frei und kommerziell nutzbar, andere benötigen eine Urheberangabe. Überprüfe sie, bevor du ein solches Bild verwendest. Bei allen seriösen Seiten sind die Lizenz- bzw. Nutzungsbedingungen klar angegeben.
Lege los!
Hol dir den Website Creator und lege los. Es lohnt sich, Zeit ins Webdesign zu investieren. Das Webdesign ist ein Teil des Erfolgs deiner Website und kann dir auch Zeit ersparen. Die Tools im Website Creator helfen dir, ein einheitliches Webdesign zu gestalten und umzusetzen.