Website Creator Tipps vom Profi

Der ultimative Guide zur Erstellung der eigenen Website

Das erste, was auf einer Webseite auffällt, ist das Design. Innert Sekunden entscheiden wir, ob uns etwas optisch gefällt oder nicht. Mit einem guten Design kannst du dich positiv von Mitbewerbern abheben und kommst auch bei (zukünftigen) Kunden besser an. Wir geben dir hier Tipps und Tricks, wie du mit deiner Webseite einen guten Eindruck hinterlassen kannst und eine ansprechende, einheitliche Seite erstellst!

Das wichtigste Ziel eines guten Designs ist es, die Informationen auf der Webseite 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 Design, 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? Wenn du dir ein Grundkonzept überlegst, dies wird dir helfen, Designentscheidungen zu treffen.

Als Erstes in einem Website Creator Projekt definiere ich zumeist die Farben und Schriften. Diese haben eine starke visuelle Wirkung auf das Design. Somit kriegst du schnell einen ersten Eindruck davon, wie deine Seite wirkt.

Farben

Farben beeinflussen nachgewiesen nicht nur das Handeln von uns Menschen, sondern vor allem auch unsere Gefühle. Die Wahl der richtigen Farbe für deine Webseite 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 Webseite 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 deinem Design, 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.

Mit dem Farbschema lassen sich Farben für das ganze Projekt definieren

Wähle deine Akzentfarben

Wähle eine bis maximal zwei Akzentfarben für eure Webseite. 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 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.  

Farben und ihre Bedeutungen für den Menschen

Es kommt jedoch auch auf den Farbton und die Helligkeit darauf an – 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 Webseiten einen weissen 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, aber ist 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 grossen Einfluss auf dein Webdesign haben. In erster Linie muss die Webseite 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össe 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 Webseite. Es gibt verschiedene Schriftformate, die du alle individuell ändern kannst und nachher im Inhalt nur noch das Format auswählen musst. Damit ersparst du dir viel Zeit, wenn du nicht bei jeder Textbox die Schriftart, -grösse, -farbe usw. manuell einstellen musst. Ausserdem stellst du dadurch sicher, dass deine Texte visuell einheitlich sind.

Am besten ist es, die Schriften möglichst zu Beginn einzustellen, damit du die Wirkung deines Designs prüfen kannst. Auch könnte es später wieder zeitlich aufwändig 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 Konzept passen.

Grundsätzlich empfehle ich, nicht mehr als zwei verschiedene Schriftarten auf einer Webseite 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. Ausgefallenen Schriftarten sollten im normalen Lauftext aber vermieden werden, da sie in langen Texten nicht gut lesbar sind.

Schriftgrösse

Wähle eine Schriftgrösse und auch einen Zeilenabstand, die angenehm zu lesen sind. Denke dabei auch an deine Zielgruppe. Sind es ältere Menschen, darf die Schriftgrösse auch gern etwas grösser sein. Nicht jede Schriftgrösse funktioniert für jede Schriftart, da die Schriftarten unterschiedlich gross wirken können bei gleicher Schriftgrösse. Teste dies also immer und vergiss auch nicht die mobile Version.

Struktur & Inhalt

Bevor du mit der Umsetzung deiner Webseite beginnst, mache dir Gedanken über den Inhalt und die Aufteilung zu machen. 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 eurer Webseite. 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 Design 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 zu lesen.

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 Webseite 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 sein. 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 grosse Überschrift und benutze kleinere Überschriften für weniger wichtige Abschnitte.

Bilder

Die Qualität von Bildern ist wichtig für die Ladezeit der Webseite

Ein gutes Bild auf der Webseite 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 Webseite. 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 erstellt, 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 Designs 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össe & Qualität

Verpixelte oder niedrig aufgelöste Bilder vermindern die Qualität und das Aussehen deiner Webseite. Verwende qualitativ gute, hochaufgelöste Bilder, vor allem für den Headerbereich.

Grundsätzlich muss ein Bild nur so gross sein, wie es nachher angezeigt werden soll. Lädst du also dein Bild in der Originalgrösse von 4000 x 6000 Pixeln hoch und es soll nachher nur 400 x 600 Pixel angezeigt werden, ist das Bild, die Dateigrösse betreffend, unnötig gross.

Als Richtwert für ein Headerbild im Website Creator kannst du mit etwa 2000 Pixeln Breite rechnen und hast damit die maximale Grösse abgedeckt. Für den Inhalt kommt es auf die gewählte Grösse darauf an. Da kannst du auch gern das Bild etwas grösser raufladen, in der Breite muss es aber meistens nicht mehr wie 1000 Pixel maximal sein. 

Dateigrösse

Grosse Bilder benötigen lange Ladezeiten. Oder umgekehrt: Je kleiner ein Bild in der Dateigrösse, 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össe zu reduzieren. Somit vermeidest du lange Ladezeiten deiner Webseite. 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 welcher du online jpg und png Bilder kostenlos komprimieren kannst:

Bildrechte

Stelle sicher, dass du die Bilder, die du auf deiner Webseite 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 Bild von einer verwendest. Bei allen seriösen Seiten sind die Lizenz- bzw. Nutzungsbedingungen klar angegeben.

Lege los!

Falls noch nicht passiert, hol dir den Website Creator und lege los. Es lohnt sich, Zeit ins Design zu investieren. Das Design ist ein Teil des Erfolgs von deiner Webseite und kann dir auch Zeit ersparen. Die Tools im Website Creator helfen dir, ein einheitliches Design zu gestalten und umzusetzen. Sende gerne den Link zu deiner Webseite in den Kommentaren unten. Ich freue mich auf dein Design!

Alle Blogeinträge