Wie erstellst du eigentlich ein ansprechendes Webdesign? Mit dieser Frage beschäftigen wir uns in diesem Anfänger-Crashkurs.
Viele Entwickler bauen zwar komplizierte und effiziente Programme, aber sind oft mit dem Design überfordert. Deshalb möchte ich dir in diesem Beitrag anhand vieler visueller Beispiele und Tipps zeigen, wie du die Usability und Optik deiner Website verbessern kannst.
Dieses Design-"Regelwerk" soll dir nur als Leitfaden dienen, wenn es um die Gestaltung geht. Du kannst natürlich dein eigenes Farbschema, deine eigenen Schriftarten usw. benutzen. Jedoch sind die hier gezeigten Design-Tipps gute Faustregeln, wenn du eine Webseite schnell und ansprechend gestalten möchtest.
Legen wir los mit der Farbe.
Farben bzw. Farbschema
Farben sind ideal, um deine Webseiten-Besucher anzusprechen. Leider benutzen Webseiten-Inhaber zu viele Farben. Bei einem Farbschema sollte immer ein Gleichgewicht entstehen, damit die Webseite konsistent und professionell aussieht.
Außerdem ist es wichtig, dass die ausgewählten Farben nicht miteinander kollidieren, sprich sie sollten einen guten Kontrast haben und konsistent sein.
1. Konsistenz
Hier ist mein Farbschema für LerneProgrammieren
Ich verwende die folgenden Hex-Codes (Türkisblau, Hellblau, Dunkelgrau) im LerneProgrammieren Logo sowie für Überschriften, Texte und Buttons. Wenn du CSS-Variablen benutzt, kannst du auf diese Hexcodes immer wieder einfach zugreifen:
body {
--türkisblau: #2a6780;
--hellblau: #6ad4ff;
--dunkelgrau: #373a3c;
}
h1 {
farbe: var(--dunkelgrau);
}
Wenn du SCSS (SASS) oder einen anderen CSS-Präprozessor verwendest, ist das sogar noch einfacher.
Was die Anzahl der Farben in einem Farbschema angeht, sind drei bis vier Farben oft optimal. Das ist eine Faustregel und kein Gesetz!
Ein bis zwei Farben deines Schemas sollten neutrale Farben (wie Schwarz, Weiß oder Grau) enthalten.
Wenn du ein besonders buntes Design hast, kannst du den "Regenbogen" als eine Farbe behandeln. Es empfiehlt sich dann, für alle weiteren Elemente, wie Überschriften, Texte, Buttons, Linktexte usw. zwei neutrale Farben zu benutzen. Zum Beispiel verwende ich im folgenden Bild-Beispiel ein dunkles Grau für den Text, Weiß für den Hintergrund und dann die Regenbogenfarben im Daniel-Logo.
2. Harmonierende Farbkombinationen
Es ist wichtig, darauf zu achten, dass Farben gut zusammenpassen und sich nicht stechen. Normalerweise kollidieren die Farben, die sich auf dem Farbkreis gegenüberliegen.
Natürlich kannst du tolle Webdesigns erstellen, die nicht harmonierende Farben verwenden, aber das erfordert etwas Geschick und sollte besser einem erfahrenen Designern überlassen werden.
Einige zu vermeidende Farbbeispiele wären:
- Rot mit Grün oder
- Orange mit Lila.
Achte auch auch auf den Farbton bzw. die Farbtemperatur. Wenn du ein kühles Grün benutzt, solltest du es mit einem kühlen Blau kombinieren, anstatt mit einem warmen Blauton. Warmtonige Farben haben rötlichere Untertöne, und kühltonige Farben sind blauer.
3. Kontrast
Ganz wichtig ist ein guter Kontrast zwischen den Farben, die für dein Webdesign vorgesehen sind. Ohne guten Kontrast ist es schwer, gewisse Inhalte gut zu erkennen.
Um den Kontrast deines Designs zu prüfen, kannst du einen der vielen kostenlosen Kontrast-Checker (siehe Link) benutzen. Eine Faustregel zum Kontrast: Setze helle Farben über dunkle Farben und dunkle Farben über helle Farben!
Hier ein Kontrast-Beispiel mit schlecht lesbarem und gut lesbarem Text:
4. Farb-Psychologie
Wenn du an der Website einer Marke arbeitest, haben verschiedene Farben unterschiedliche implizite Bedeutungen für die Besucher. Farben können die Stimmung des Webseiten-Besuchers beeinflussen. Blaue Farben strahlen Sicherheit sowie Autorität aus und werden daher gerne in Webseiten für Arztpraxen benutzt. Über das Thema der Farbpsychologie kann man ganze Bücher schreiben. Sollte es in deiner Nische einen großen Konkurrenten geben, kannst du dich von dem Farbschema auf seiner Website inspirieren lassen.
5. Tipps für die Auswahl von Farben
An dieser Stelle seien ein paar hilfreiche Webseiten aufgeführt, die es dir leicht machen ein gutes Farbschema zu finden. Hier klickst du nur einen Button und schon wird eine Farbpalette aus gut zusammenpassenden Farben erstellt:
- Coolors.co - https://coolors.co/
- Adobe Color Wheel - https://color.adobe.com/de/create/color-wheel
- ColorSpace - https://mycolor.space/
So viel zu Farben. Im Anschluss lernst du die wichtigsten Webdesign-Regeln zu Texten.
Text
Texte gibt es auf fast jeder Webseite. Sie sind ein wichtiger Teil, denn sie müssen gut lesbar sein.
Fangen wir mit einem schlechten Beispiel an. Was fällt dir an folgendem Text auf?
Richtig! Der o.g. Text ist schwer lesbar. Arbeiten wir also mit ein paar einfachen Regeln daran, ihn für unsere Webseiten-Besucher lesbarer zu machen.
1. Abstände
Um einen Text einfach lesbar zu machen, hilft schon die einfachste Formatierung mit ein paar Abständen. Fügen wir zunächst einen Seitenabstand auf der Webseite ein.
1.1 Seitenabstand einfügen
Auf vielen Websites erstreckt sich der Text nicht über die gesamte Breite der Seite, sondern befindet sich in einem Container, der nur einen Teil der Seite einnimmt. Das macht den Inhalt leichter lesbar, da sich die Augen des Lesers weniger bewegen müssen. Die Seite sieht ebenfalls aufgeräumter aus. Grobe Regel: Benutze weniger als 80 Zeichen pro Zeile.
<style>
.container {
width: 80%;
margin: 0 auto; /* div im Container zentrieren*/
}
</style>
<div class="container">
<p>Lorem ipsum dolor abstand usw.</p>
</div>
1.2 Zeilenabstand
Wir können den Zeilenabstand vergrößern, um mehr Platz zwischen den Textzeilen zu schaffen. Damit bereitest du dein Webseiten-Design auch für eine bessere Barrierefreiheit vor. Die Empfehlung liegt hier bei einer Zeilenhöhe von 1,5 bis 2,0.
So könnte das Ganze im CSS-Code aussehen.
CSS-Code - Zeilenabstand von 1.8:
p {
font-size: 17px;
line-height: 1.8;
}
Durch das Einfügen des größeren Zeilenabstand, verändert sich das Textbild wie folgt:
1.3 Absatz-Abstand
Zusätzlich zum Zeilenabstand sollte nach jedem Absatz ein weiterer Abstand eingefügt werden. Dadurch unterscheiden sich die einzelnen Textpassagen leichter voneinander.
CSS-Code - Absatz-Abstand (padding-bottom)
p {
padding-bottom: 25px;
}
Nach eingefügtem Padding-Bottom sieht der Text so aus:
1.4 Wortabstände
Wenn du bspw. eine Überschrift in Großbuchstaben benutzt, kannst du mehr Abstände zwischen den Wörtern einfügen, um sie mehr vom restlichen Text hervorzuheben. Hier ist ein CSS-Code mit folgendem Bildbeispiel zu diesem Webdesign-Tutorial:
CSS-Code für Wortabstände:
h1 {
word-spacing: 8px;
}
Hier eine Überschrift mit Wortabstand:
Hier die gleiche Überschrift ohne Wortabstand:
1.5 Ausrichtung
In den meisten Sprachen, wie bspw. auch in Deutsch, wird der Text von links nach rechts gelesen. Daher empfiehlt es sich, den Text linksbündig auszurichten. Viele Anfänger zentrieren große Textblöcke, was diesen schwerer lesbar macht.
Wenn du gerne eine Überschrift oder einen Teil des Textes zentriert darstellen möchtest, kannst du das gerne machen. Erstelle dafür am besten einen zentriert-ausgerichteten Container. Stelle auch hier sicher, dass der Text in diesem Container linksbündig ausgerichtet ist.
2. Schriftarten
Einige Schriftarten sind leichter zu lesen als andere. Für Inhalte im Web ist es im Allgemeinen einfacher, Schriftarten des Typs Sans-Serif zu benutzen, da dieser leichter lesbar sind. Eine Serif-Schriftart erkennst du daran, dass sie eher dekorativ bzw. traditionell aussieht. Um das zu verdeutlichen findest du nachfolgend ein Beispiel einer Serif- sowie Sans-Serif-Schriftart.
Als kleine Faustregel kannst du dir Folgendes merken: Benutze eine Serif-Schriftart für dekorative Inhalte deiner Webseite wie bspw. Überschriften und eine Sans-Serif-Schriftart für den Haupttext sowie andere Inhalte deiner Webseite.
3. Textfarbe
Schwarzer Text (#000000) auf weißem Hintergrund (#FFFFFF) kann die Augen auf Dauer überanstrengen, da der Kontrast zu groß ist. Ich persönlich benutze daher gerne dunkle Grautöne für meine Text-Inhalte. Der Kontrast ist dann immer noch gegeben und die Augen des Lesers können sich etwas mehr entspannen.
p {
color: #2b2b2b;
}
Dasselbe gilt für Hintergründe - ein schwarzer Hintergrund ist oft nicht die beste Wahl. Hingegen kann ein dunkles Marineblau oder Dunkelgrau den Inhalt leichter lesbar machen.
4. Textgröße
Es gibt unterschiedliche Meinungen darüber, wie groß der Inhalt sein sollte und welche Maßeinheit (z. B. em vs. px) am besten geeignet ist. Der Konsens unter Webdesignern geht in Richtung 16-18 Pixel für den Haupttext. Die Textgröße sollte jedoch skalieren, wenn ein Besucher den Zoom im Browser benutzt.
Überschriften (h1, h2, h3 usw.) unterschiedlicher Art sollten größer sein als der Hauptinhalt. Verwenden immer unterschiedliche Schriftgrößen, um den Text zu differenzieren.
Hintergrund
Hintergrundbilder gut aussehen zu lassen, besonders mit Text darüber, ist für jeden Designer eine Herausforderung.
Am einfachsten ist es auf Hintergrundbilder zu verzichten, es sei denn, sie sind wichtig für die jeweilige Seite.
Ich werde ein paar Alternativen und Lösungen für die Gestaltung von Hintergrundbildern aufzeigen, falls du unbedingt ein solches Bild in deinem Webdesign benutzen möchtest. Schau dir folgendes Hintergrundbild mit darüberliegendem Text an:
Text und Bild aufteilen
Wenn du das Bild behalten möchtest, kannst du die Webseite so aufteilen, dass das Bild auf einer Hälfte und der Text auf der anderen Hälfte dargestellt wird.
Das kannst du z.B. mit folgendem CSS- & HTML-Code erreichen:
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
<div class="container">
<div>Mein Text</div>
<img src="bild.png" />
</div>
Verwende ein Bild mit weniger Details
Wenn das Hintergrundbild auf der ganzen Seite beibehalten werden soll, verwende nach Möglichkeit ein einfaches Bild, in dem nicht zu viel los ist. In dem o.g. Beispielbild, gibt es viele Farben und Text. Die Verwendung eines Landschaftsbildes oder eines Musters wird weniger vom Text ablenken.
Textschatten hinzufügen
Alternativ kannst du auch einen Textschatten hinzufügen, um ihn etwas vom Hintergrund abzuheben und besser lesbar zu machen.
.text {
text-shadow: #343434 1px 1px 9px;
}
Mit den oben genannten Änderungen und einer vergrößerten Schriftgröße wird der Text bereits besser lesbar.
Noch nicht perfekt, aber besser als am Anfang.
Hintergrund-Farbüberlagerung (Overlay)
Um den Text noch mehr von unserem wilden Hintergrundbild abzuheben, kannst du mithilfe von CSS eine Farbüberlagerung erstellen. In unserem Fall legen wir ein schwarzes Hintergrundbild mit einer Transparenz von ca. 50% über das Bild. Dadurch wird das Hintergrundbild dunkler und der weiße Text kommt besser zur Geltung.
CSS-Code für Farbüberlagerung (Overlay):
.bild-overlay {
background:
linear-gradient(
rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)
),
url(url/zum/bild.png);
}
So sieht das Ergebnis aus:
Kann sich doch sehen lassen, oder?
Tipp: Wenn dir das Hintergrundbild durch die schwarze Farbüberlagerung zu dunkel geworden ist, kannst du die Transparenz (z.Zt. 50%) weiter heruntersetzen, um es wieder aufzuhellen.
Call-To-Action (CTA)
Wenn du eine Website erstellst, willst du meistens, dass der Besucher irgendwann eine gewisse Aktion ausführt. Im Marketing nennen wir das den Call-To-Action (kurz: CTA).
- In einem Online-Shop soll der Besucher irgendwann ein Produkt bestellen.
- Wenn ein Besucher dein Webseiten-Portfolio anschaut, möchtest du, dass er dich danach kontaktiert, um ein Design bei dir zu buchen.
- Bei einem Blog möchtest du, dass sich der Benutzer für deinen Newsletter anmeldet usw.
Wenn du deine Webseite entwirfst, solltest du diese geplanten Benutzer-Interaktionen im Hinterkopf behalten. Vielleicht möchtest du den "Jetzt Kaufen" Button (Schaltfläche) in einer besonders auffälligen Farbe gestalten, damit sich dieser vom Rest des Inhalts abhebt.
Oder wie wäre es, wenn du den Button mehrmals auf der Seite platzierst, damit dein Webseiten-Besucher nicht wieder zum Anfang der Seite hochscrollen muss? Das sind alles kleine Details, die man beim Webseiten-Design beachten sollte.
Wie du deine wichtigen Inhalte hervorhebst, bleibt dir überlassen. Die Hauptsache ist, dass du bei jeder Designentscheidung die Besucher-Interkation im Auge behältst.
UI-Frameworks
Wenn du bei der Gestaltung deiner Website nicht bei Null anfangen möchtest, kann ich dir Design-Frameworks empfehlen. Wir bei LerneProgrammieren arbeiten sehr gerne mit Bootstrap. Es ist kostenlos, Open-Source und lässt sich leicht in wenigen Minuten in jede Webseite einbinden.
Fazit zum Webdesign-Crashkurs - Die Checkliste
Obwohl es nur ein sehr kurzer Crashkurs zum Design von Webseiten werden sollte, haben wir ziemlich viele Themen behandelt. Solltest du bis zu diesem Fazit gekommen sein, weißt du bereits 90% mehr als viele Software-Entwickler, die sich mit dem Styling von Webseiten oft schwer tun.
Nachfolgend fassen wir die wichtigsten Informationen dieses Beitrags in einer Checkliste zusammen:
(Du kannst diese Checkliste gerne für eigene Zwecke kopieren)
Farben & Farbschema
- [ ] Konsistente Farben benutzen (3-4 Hauptfarben, 2 neutrale Farben)
- [ ] Harmonisierende Farben benutzen (Farblehre beachten)
- [ ] Kontraste beachten
- [ ] Bei Unternehmen, die Farb-Psychologie beachten
Text
- [ ] Seitenabstände (oben, unten, links, rechts) für Texte einfügen
- [ ] Zeilenabstand beträgt 1,5-2,0
- [ ] Textabschnitte mit Absätzen formatieren (Padding-Bottom)
- [ ] Bei Überschriften in Großbuchstaben den Wortabstand vergrößern
- [ ] Textblöcke nicht im Blocksatz anordnen
- [ ] Textblöcke linksbündig ausrichten
- [ ] Für den Hauptinhalt Sans-Serif-Schriftarten benutzen
- [ ] Nicht mehr als zwei Schriftarten benutzen verwendet (Überschriften: z.B. Serif, Haupttext: Sans-Serif)
- [ ] Haupttext nicht mit schwarzer Textfarbe auf weißem Hintergrund (Empfehlung: Dunkelgraue Textfarbe)
- [ ] Textgröße 16-18px und skalierbar (Zoom in/out).
- [ ] Überschriften größer als Haupttext
Hintergrund
- [ ] Einfaches Bild (nicht zu bunt, nicht zu viele Details) benutzen
- [ ] Textschatten oder Overlay benutzen, um Texte auf dem Hintergrund lesbarer zu machen
- [ ] Hintergrund nicht zu hell/grell
Call-To-Action
- [ ] Elemente hervorheben, die für Besucher-Interaktionen verantwortlich sind (Größe, Farbe, Häufigkeit)
Du hast es geschafft! Schreib uns gerne in die Kommentare, was du zum Webdesign in diesem Tutorial gelernt hast oder auf welcher Webseite (URL), du dein neues Wissen umgesetzt hast. Wir sind gespannt auf dein Feedback :-)
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor
