Was unterscheidet eine DIY von einer schicken professionell erstellten Website? Und wie bekommst du das selbst so hin, dass es wie vom Profi aussieht? Das will ich hier mal beleuchten.
Grundsätzlich bin ich der Meinung, dass es besser ist unperfekt zu starten, als gar keine Website zu haben - insbesondere für lokale kleine Unternehmen. Und wenn man am Anfang noch gar kein Budget für Webdesign hat, gibt es ja zum Glück auch gute Tools mit denen man auch ohne Design- und Technik-Vorkenntnisse gute Ergebnisse erzielen kann.
Squarespace zum Beispiel nimmt einem sehr viel ab, indem es von Haus aus, auf gut strukturierte Layouts und Design-Voreinstellungen achtet. Die vorhandenen Vorlagen, sind durchdacht und sehen einfach toll aus. Trotzdem ist es oft so, dass man die Vorlagen nicht eins zu eins übernehmen kann und dann anfängt alles Mögliche umzustellen.
Ich habe sehr viele selbstgebastelte Websites gesehen: meistens wird das Ergebnis eher “übereifrig”, sag ich mal. Deshalb habe ich dir hier 5 Tipps zusammengetragen, die dir helfen einen schicken Designer Look für diene Website zu kreieren. Das sind im Grunde die häufigsten “Fehler”, die mir auf DIY Websites auffallen und wie du es stattdessen machen kannst, damit deine Website nicht gebastelt, sondern klar strukturiert und schön aussieht.
“Perfektion ist, wenn man nichts mehr weglassen kann”*
Ich habe oft diesen Spruch im Kopf, wenn ich etwas entwerfe.
Was ich aber auf selbstgebastelten Websites sehe, ist eher das Gegenteil: hier noch eine andere Schrift, da noch ein Effekt und sehr viele verschiedene Farben, sowohl im Text als auch in den Fotos und Buttons.
Deshalb hier deine ToDos:
1.Verwende maximal zwei Schriftarten,
also eine für die Überschriften und eine für den Fließtext.
Es geht auch nur mit einer Schriftart für alles. Dann nutzt du einfach Schriftgrößen und Stile (fett, kursiv), um die Hierarchie der Texte darzustellen.
Hier zwei Beispiele, wo ich nur eine Schriftart verwendet habe: www.steffi-bothor.de und www.vollzeitmensch.ch
2. Verwende eine Akzentfarbe für die Buttons und bleibe ansonsten bei schwarz und weiß
Zum Thema Farbe könnte ich ein ganzes Buch schreiben 😅, aber wir wollen hier ja einfach und sofort umsetzbar bleiben.
Deshalb hier mein einfaches und sehr effektives Rezept für eine schnieke Website:
Man nehme weißen (oder sehr hellen) Hintergrund und schwarze (oder sehr dunkle) Schrift, um guten Kontrast und Lesbarkeit zu erreichen.
Man sprenkle eine Akzentfarbe in Form von Buttons und ggf. einigen Überschriften auf die Seiten. Am besten schaust du welche Farbe in deinen „Hauptfotos“ vorkommt und nimmst eine davon. Das sorgt für ein gleichmäßiges und gestyltes Erscheinungsbild.
Et voilà! Easy, oder?
Noch ein Punkt zum Thema Farbe: bei den Social Media Icons, kann du auch die Farbvielfalt reduzieren und so für eine aufgeräumte Erscheinung sorgen. Verwende dafür eine Farbe, die sowieso schon auf deiner Website vorkommt statt die Originale zu nehmen.
3. Lasse deine Inhalte atmen - hab keine Angst vor Leerräumen
Whitespace, Leerraum, Weißraum - so der Fachbegriff - ist der beste Freund von gutem Layout Design.
Das ist aus meiner Erfahrung das, was designte Websites von DIY am meisten unterscheidet. Professionell aussehende Websites lassen die Inhalte atmen, indem sie ihnen Raum geben.
Statt also jeden Fleck mit Text, Bild, Icon, Pfeil, Strich, was auch immer zu bedecken, lasse genug Abstände zwischen Texten und Bildern. Lasse deinen Inhalten Raum zum Wirken und dem Auge eine Pause von der Reizüberflutung.
4. Mache deine Texte gut lesbar
Hhmmmm 🤔. Ja, macht Sinn. Und wird doch übersehen.
Die offensichtlichste Stellschraube ist natürlich die Schriftgröße. Achte darauf, dass die Größe für dich selbst angenehm und ohne Anstrengung lesbar ist. Die Größe hängt von der Schriftart ab. 16px sind als Richtwert ganz gut. Im Zweifel lieber größer, als zu klein.
Die Schriftart selbst spielt natürlich auch eine große Rolle. Dazu aber bald mehr in einem anderen Blogartikel.
Weiterhin solltest du auf genug Kontrast achten. Dafür haben wir mit „dunkle Schrift auf hellem Hintergrund“ ja schon gesorgt.
Und noch eine Sache, die mir oft auffällt: dass ein Text über die komplette Bildschirmbreite gesetzt wird. Das erschwert das Lesen am Desktop ungemein, weil unser Auge beim Zeilenumbruch die nächste Zeile suchen muss und verrutscht. Das ist zu anstrengend und man lässt es im schlimmsten Fall einfach ganz bleiben. Das wollen wir nicht.
Mach‘s besser, indem du zum Beispiel
Abstand links und rechts vom Text lässt
Texte auf zwei oder drei Spalten verteilst
neben dem Text ein Bild einfügst
mit Aufzählungszeichen arbeitest, wenn es Sinn macht
5. Hinterfrage die Daseinsberechtigung von jedem Element auf deiner Seite
Wenn es nichts zum wesentlichen Ziel seiner Website beiträgt, schmeiß es raus. (Was ist denn das Ziel deiner Website? Kennst du es? Leitest du die Besucher:innen gezielt dorthin? Mehr dazu kannst du auch in diesem Artikel nachlesen.)
Was ist mit den Social Media Buttons? Muss jeder einzelne dadrauf? Oder gibt es Accounts, die du gar nicht bespielst, oder die gar nichts mit deinem Business zu tun haben.
Schmeiß sie raus.
(Ich habe zum Beispiel einen Instagram Account für meine Handlettering-Projekte. Da bin ich sehr unregelmäßig aktiv und mache das auch eher für mich, als Erinnerung & Sammlung. Diesen Account verlinke ich nicht auf meiner Webseite. Genauso wenig wie meinen TikTok Account mit 5 Followern 😝!)Was ist mit Fotos? Sind sie alle wirklich notwendig? Helfen sie dem Layout oder unterstreichen sie die Aussagen der Texte? Wenn nicht, schmeiß sie raus.
Bonus-Tipp: lass dich einfach wiedererkennen
Unterschätze den Effekt von Wiederholung und Konstanz in dieser riesigen und überfüllten Online Welt nicht.
Deine Website ist dein Online-Zuhause und mit den vorhergehenden Tipps hast du dort schon aufgeräumt und optimiert. Das hier geht über deine Website hinaus:
Als Personenmarke und Gesicht deines Geschäfts gehört dein wichtigstes Foto überallhin, wo du sonst online aktiv bist. Also als Profilbild auf Social Media, in WhatsApp (wenn du es geschäftlich nutzt) und ggf. auch in die Email Signatur.
Es wirkt wie (oder sogar noch besser als) ein Logo und erhöht die Chance im Gedächtnis zu bleiben. Du wirst wiedererkannt.
Das gleiche gilt übrigens für die Beschreibungen und Kurzbios auf Social Media. Schreibe dort das gleiche hin, wie auf deiner Website.
Bleib konstant. Und wiederhole dich.
Keine Sorge, du langweilst die Leute damit nicht. Sie kennen und lesen nicht alle, alles und jederzeit. Aber wenn sie immer wieder über dich und deine Profile stolpern, werden sie wiederholt das gleiche Foto und die gleichen Begriffe finden und es entsteht dieser Effekt von: „Das ist doch die mit den Chimpify Websites“ Oder: „Der, mit den coolen Plätzchen-Rezepten, mit so einem witzigen Elch-Pulli auf dem Profilbild“
Kennst du bestimmt. Nutze das für dich.
Und jetzt würde ich gern von dir lesen! Schreib mir, was dich an deiner Website am meisten stresst oder herausfordert.
* „Vollkommenheit entsteht offensichtlich nicht dann, wenn man nichts mehr hinzuzufügen hat, sondern wenn man nichts mehr wegnehmen kann.“
— Antoine de Saint-Exupéry
Wind, Sand und Sterne,
Karl Rauch Verlag 1941, S. 60;
18. Auflage 1989, S. 48 f.,
Übersetzung Henrik Becker
Original. franz.: "Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher." - Terre des Hommes, III: L'Avion, p. 60 (1939) Wind, Sand und Sterne, Terre des Hommes (1939)
Quelle: https://beruhmte-zitate.de/autoren/antoine-de-saint-exupery/