Webdesign - Was ist das überhaupt? Ist es wichtig? Wie wird gutes Webdesign realisiert?
- Inhaltsverzeichnis
- 1. Einleitung
- 2. Was ist Webdesign?
- 3. Die Geschichte des Webdesigns
- 4. Wie wichtig ist das Design für Websites?
- 5. Gutes Webdesign
- 5.1 Optik
- 5.1.1 Usability
- 5.1.2 Lesbarkeit
- 5.1.3 Schriftgröße und Schriftarten
- 5.1.4 Farben
- 6. Inhalt
- 7. Technik
- 8. Fertige Weblayouts
- 9. Fazit
- 10. Videos
*
1. Einleitung
Das Wort Webdesign ist den meisten Menschen geläufig. Aber was ist damit eigentlich gemeint? Woher kommt der Begriff? Welche Aspekte hat Webdesign? Und nicht zuletzt wie realisiert man ein möglichst gutes Webdesign?
Auf diese Fragen möchte ich an dieser Stelle umfassende praxisorientierte Antworten liefern.
2. Was ist Webdesign?
Der Begriff Webdesign ist entsprechend dem Medium aus dem er entsprungen ist nämlich dem Internet relativ jung. Webdesign ist ein synonymer Begriff zu Webgestaltung. Genauer gesagt zur Gestaltung von einzelnen Webseiten beziehungsweise ganzer Websites. Mit der Gestaltung ist primär das Aussehen von Webseiten gemeint.
Webdesign ist eine Kombination von klassischem Grafikdesign, Interaktionsdesign und Motion Design. Das Interaktionsdesign setzt sich mit der Interaktion von Mensch-Maschine-Schnittstellen auseinander. Das Motion Design ist die Darstellung von Animation, Film und Ton.
3. Die Geschichte des Webdesigns
Die Entwicklung des Webdesign geht einher mit der Entwicklung des Internets. Letzteres hat seinen Ursprung in den späten 1960er Jahren. Es diente zum Austausch von Informationen zwischen verschiedenen Rechnern. Das amerikanische Militär hat es zuerst genutzt. Später kamen Universitäten dazu. Technisch lief der Austausch über das TCP/IP Protokoll, das auch heute noch (in modifizierter Form) verwendet wird, ab.
1972 wurde die E-Mail von Ray Tomlinson "erfunden". Das war ein Meilenstein für die elektronische Kommunikation. Aber noch ein weiter Weg bis zur E-Mail Kommunikation wie wir sie heute kennen.
Tim Berners-Lee ist ein britischer Physiker und Informatiker. Er nahm sich 1989 vor ein Hypertext Projekt zu verwirklichen, mit dem man Informationen in einer netzartigen Struktur
verbinden und abrufen konnte.
Das war die Geburtsstunde des World Wide Web (WWW), wie wir es heute kennen.
Tim Berners-Lee hat auch die Sprache des Web die HyperText Markup Language (HTML)
erfunden, mit der heute alle Webseiten dargestellt werden.
1991 bis 1993 wurde das WWW dann entwickelt. Damals konnte man lediglich Textseiten mit Hilfe eines Webbrowser anzeigen lassen. Von (grafischem) Webdesign war hier noch nichts zu sehen.
1994 entstand das World Wide Web Consortium (W3C). Dessen Aufgabe war und ist es bis heute das Potential des WWW weiter zu entwickeln und die Techniken des WWW zu standardisieren. Letzteres dient dazu einen "Wildwuchs" unterschiedlicher Techniken zu verhindern, die inkompatibel zueinander sind und damit die Nutzbarkeit des WWW einzuschränken.
Beispiele für durch das W3C standardisierte Technologien sind: HTML, XHTML, XML, RDF, OWL, CSS, SVG und WCAG.
In den 90er Jahren entstanden auch die "Browserkriege". Insbesondere Netscape und Microsoft kämpften um die Vorherrschaft im Browsermarkt. Die Hersteller entwickelten neue Techniken, um sich von der Konkurrenz abzuheben. Einerseits wurde die Entwicklung des WWW dadurch vorangetrieben. Andererseits bauten die Browserhersteller Features in ihre Browser ein, die nicht den Webstandards entsprachen. Der eine oder andere kann sich vielleicht noch daran erinnern, das man in seine Webseiten Browserweichen einbauen musste, damit die Webseiten in den verschiedenen Browsern so ausgegeben wurde, wie man sich das vorgestellt hatte.
Die Zeit der Browserkriege und Browserweichen ist glücklicherweise lange vorbei.
Heutzutage kann man mit den Mittel von HTML, CSS, JavaScript und vielen anderen Techniken (fast) alles verwirklichen, was man möchte. Vor allen Dingen ohne nicht standardisierte Techniken einsetzen zu müssen.
Aktuelle Webseiten können mit dem Benutzer interaktiv agieren. Bilder, Grafiken, Filme, Videos, Social Media PlugIns können problemlos eingebunden werden. Es gibt Content-Management-Systeme, Static-Site-Generatoren, Frameworks und Programmiersprachen, die einem viel Arbeit abnehmen können. Allerdings ist nicht jede Sotware für jede Art von Website unbedingt geeignet.
4. Wie wichtig ist das Design für Websites?
Um die Antwort auf die Frage vorwegzunehmen: Extrem wichtig!
Innerhalb eines kleinen Bruchteils einer Sekunde entscheidet ein Besucher, ob er auf Ihrer Website bleibt oder sie wieder verlässt. Kehrt er Ihrer Website den Rücken, hat das für Ihre Website mehrere negative Auswirkungen:
- Sie haben einen Besucher verloren.
- Sie haben einen Besucher wahrscheinlich für immer verloren.
- Google registriert genau, wenn eine Seite aufgerufen und kurz danach wieder verlassen wird. Das hat einen enormen (negativen) Einfluss auf das Ranking.
Analog umgekehrt registriert Google (und andere Suchmaschinen auch), ob ein Besucher auf Ihrer Website bleibt. Außerdem wie lange er sich darauf aufhält, welche Interaktionen er ausführt, ob er sich noch andere Seiten, die zu Ihrer Webpräsenz gehören, anschaut und vieles andere mehr.
Eine lange Verweildauer auf einer Webpräsenz signalisiert Google das ein Besucher das, was er über Google gesucht auch gefunden hat, und das sich auf dieser Website weiterführende Informationen vorhanden sind, die diesen Besucher interessieren.
Für Googles Algorithmus ist der Rückschluss, das das angezeigte Suchergebnis dem entspricht, was Besucher erwarten. Die Konsequenz ist das Ihr Ranking dann steigt, da Google möglichst gute Suchergebnisse liefern möchte.5. Gutes Webdesign
Die Antwort auf die Frage, was ein gutes Webdesign ausmacht, ist komplex. Nur viele Einzelfaktoren zusammen ergeben gutes Webdesign. Da gibt es Kriterien, die bei jeder Webpräsenz erfüllt sein sollten. Aber auch welche die abhängig von der Art des Contents und dem Ziel, das man mit einer Website verfolgt, unterschiedlich zu erfüllen sind.
Gutes Webdesign heißt also bei bei weitem nicht nur das eine Webpräsenz "schön" aussehen sollte. Abgesehen davon das das, was als schön empfunden wird, sehr individuell ist. Die Schönheit liegt bekanntlich ja im Auge des Betrachters. Wenn Sie den aber kennen, das heißt natürlich Ihre Zielgruppe, ist das enorm hilfreich.
5.1 Optik
Bei der Optik also dem Aussehen der Website kann man verschiedene Kriterien unterscheiden.
Dazu gehören:
- Usability
- Lesbarkeit
- Schriftgröße und Schriftarten
- Farben
5.1.1 Usability
Usability bedeutet Benutzerfreundlichkeit. Die sollte immer gegeben sein. Dazu gehört eine Menüstruktur die als solche klar erkennbar ist. Sie sollte am besten von jeder Webseite der gesamten Webpräsenz leicht zu erreichen sein und Bezeichnungen enthalten, die möglichst eindeutig vermitteln, welchen Inhalt ein Besucher auf einer Webseite erwartet. Dabei muss man einen guten Kompromiss zwischen der Textlänge und dem Platz, den man zur Verfügung hat, finden.
Halten Sie die Navigation möglichst flach. Ist die Webpräsenz so umfangreich, das das nicht möglich ist, bauen Sie zusätzlich eine Bread Crumb Navigation ein.
Zur Benutzerfreundlichkeit gehört zumindest aus meiner Sicht das weglassen von andauernd aufpoppenden Fenstern mit Aufforderungen Pushnachrichten zu aktivieren und/oder Newsletter zu abonnieren. Besucher die das nutzen wollen, werden das freiwillig machen. Alle anderen und das ist wahrscheinlich die Mehrzahl vergrault man damit.
Links sollten als solche ebenfalls klar erkennbar sein und aussagekräftig beschriftet sein.
Inhaltsverzeichnisse und Sprungmarken erleichtern Besuchern die gewünschten Informationen schnell zu finden. Vielleicht verkürzt das die Verweildauer auf einer Website. Aber man hat dann zufriedene Besucher die vielleicht noch mal wiederkommen. Ich persönlich hasse diese Webseiten, die einen häppchenweise mit Informationen füttern und einen zwingen wollen 10 Seiten aufzurufen, wenn man alles lesen möchte, obwohl das Ganze übersichtlich auf einer Webseite abrufbar wäre. Solche Seiten besuche ich nur einmal!
Zur Benutzerfreundlichkeit gehört auch das man Textpassagen und/oder Wörter durch Fettschrift und Unterstreichungen abhebt. Das erleichtert das lesen und scannen von Seiten. Bilder und Grafiken sollten Informationen ergänzen oder auch einfach nur der Auflockerung der Webseite dienen.
Webseiten werden anders aufgenommen als zum Beispiel Buchseiten. Das Lesen am Bildschirm ist deutlich anstrengender als das von Printmedien. Textwüsten haben zwar einen hohen Informationsgehalt. Aber den liest keiner.
Hat man eine kommerzielle Seite mit beispielsweise einem Onlineshop, sollte man die Besucher zum Kauf "führen". Das macht man, indem man beispielsweise das Produkt mit allen seinen Vorteilen ausführlich darstellt, präsent auf die Vorteile des eigenen Shops hinweist (zum Beispiel Übernahme der Versandkosten, verlängertes Rückgaberecht, Angebot möglichst vieler Bezahlmethoden und so weiter...) und einen Shop hat, der für den Besucher so einfach wie möglich zu bedienen ist.
Untersuchungen zeigen, das viele Nutzer den angefangenen Kaufvorgang abbrechen. Vermutlich weil ihnen die ganze Prozedur zu umständlich ist.
Nicht zuletzt ist dafür Sorge zu tragen, das die Webseiten auf möglichst vielen Endgeräten gut dargestellt werden. Das ist angesichts der Fülle an existierenden Endgeräten mit unterschiedlichen Bildschirmdiagonalen und Auflösungen, die webtauglich sind, eine echte Herausforderung. Das sogenannte "responsive Webdesign" beschäftigt sich damit diese Herausforderung zu meistern.
5.1.2 Lesbarkeit
Das eine Webseite gut lesbar sein sollte ist selbstverständlich. Trotzdem findet man immer wieder Webseiten mit dunkelgrauer Schrift auf schwarzem Hintergrund und/oder Minischrift.
Zur guten Lesbarkeit gehört auch eine angemessene Schriftgröße. Außerdem sollte ein guter Kontrast zwischen Schriftfarbe und Hintergrund vorhanden sein. Der sollte aber auch nicht zu stark sein. Denn dann das blendet beim lesen.
Auch der Zeilenabstand sollte ausreichend groß sein. 1,5 zeilig ist für viele Anwendungsfälle ein guter Richtwert. Das hängt aber natürlich auch wieder ab von der gewählten Schriftgröße. Man muss da schon selber etwas experimentieren.
5.1.3 Schriftgröße und Schriftarten
Überschriften werden größer dargestellt werden als der "normale" Text. Die Überschriften fangen mit der größten an und werden dann, wenn es um Unterabschnitte geht, kleiner.
Bei den Schriftarten wählt man angenehm lesbare aus. Man kann auch verschiedene gleichzeitig verwenden. Aber weniger ist mehr. Mehr als 3 verschiedene Schriftarten auf einer Webseite führen zu einem unruhigen Schriftbild.
5.1.4 Farben
Es gibt eine Farblehre. Psychologen haben festgestellt das von Farben Signalwirkungen ausgehen. Rot wird als Warnfarbe wahrgenommen. Grün als positiv. Blau und grau vermitteln Seriösität. Zur Farblehre/Farbpsychologie gibt es ganze Bücher. An dieser Stelle möchte ich dieses Thema nicht zu weit vertiefen.
Wer sich in dieses interessante Thema richtig einarbeiten will, dem empfehle ich folgende Lektüre:
Farben im Webdesign*Bei den Farben gilt grundsätzlich wie bei den Schriftarten weniger ist mehr. Aber hier kommt es natürlich auch auf den angebotenen Inhalt an. Eine Website die sich mit Gaming beschäftigt darf natürlich auffällig und bunt gestaltet sein. Die Webpräsenz eines Arztes oder Steuerberaters wird farbtechnisch so gestaltet, das Kompetenz und Seriösität vermittelt wird. Eine Seite die sich mit Naturthemen befasst, verwendet möglicherweise nur Farben, die in der Natur vorkommen.
6. Inhalt
Inwieweit der eigentliche Inhalt (Content) dem Webdesign zuzuordnen ist mag diskussionswürdig sein. Ich finde er gehört dazu.
Insbesondere das der Inhalt gut strukturiert dargestellt wird. Dazu gehören Überschriften, Kapitel, Unterüberschriften, Unterkapitel. Also eine vernünftige Gliederung, falls der Text so umfangreich ist, dass er es zulässt.
Dadurch hat der Besucher einen Überblick über die angebotenen Informationen und kann sich das gewünschte schneller herausfiltern. Für Sie als Content Ersteller bietet sich damit auch die Möglichkeit Ihre Besucher durch Ihr Angebot zu führen.
Außerdem sollten Rechtschreib- und Grammatikfehler vermieden werden. Der zugrundeliegende HTML-Code sollte ebenfalls möglichst fehlerfrei sein, auch wenn Ihre Besucher sich den in der Regel nicht anschauen werden. Aber Suchmaschinen registrieren solche Fehler und "sehen" die nicht gerne.
Um sich die umfangreiche Arbeit, die mit der Erstellung und Pflege einer Webpräsenz verbunden ist, zu erleichtern, gibt es diverse Tools am Markt.
Ich benutze seit Jahren regelmäßig:
Seobility SEO Tool
Kostenfrei registrieren!*
Man kann sich definitiv kostenfrei registrieren und muss auch nichts kündigen. Es bleibt dabei. Nutzbar ist es in der kostenlosen Variante für 1 Projekt. Und es gibt natürlich Einschränkungen gegenüber den kostenpflichtigen Versionen. Diese sind aber für kleine Webpräsenzen absolut verschmerzbar.
Neben umfangreichen Analysen Ihrer Website findet bei einem Crawling auch eine Rechtschreibprüfung statt, die einem die richtige Schreibweise direkt anzeigt.
Auch wenn sie im Browser nicht sichtbar sind. Semantische Tags gehören nicht umsonst zum Sprachrepertoire von HTML. Sie erleichtern Suchmaschinen Ihren Inhalt zu "verstehen". Sie sind sehr wichtig für die Suchmaschinenoptimierung!
Verlinken Sie Ihre Seiten mit Textlinks im Fliesstext untereinander. Dadurch können erklärungsbedürftige Begriffe auf Ihrer Webpräsenz erläutert werden. Der Besucher holt sich die Information auf Ihrer Website und nicht woanders. Dadurch erreichen Sie eine höhere Verweildauer Ihrer Besucher.
Schreiben Sie klaren, verständlichen Text, den möglichst jeder leicht verstehen kann. Vermeiden Sie lange Schachtelsätze.
7. Technik
Das oben angeführte läßt sich alles problemlos realisieren. Wenn man weiß wie. Content-Management-Systeme können einem viel Arbeit abnehmen. Aber in die muss man sich erst einarbeiten und sind je nach Art und Umfang der Webpräsenz nicht bedingungslos empfehlenswert.
Meiner Meinung nach sollte man sich zumindest ein Basiswissen über HTML und CSS aneignen. Damit kann man seine ersten Gehversuche wagen. Alles weitere lernt man im Laufe der Zeit.
HTML und CSS sind inzwischen so leistungsfähig, das man (fast) alles weiter oben angesprochene, damit realisieren kann.
JavaScript und/oder PHP oder Python bieten natürlich noch mehr Möglichkeiten. Hierbei handelt es sich aber um echte Programmiersprachen. Eine Basiswissen über Programmierung ist erforderlich, um damit arbeiten zu können.
8. Fertige Weblayouts
Es gibt im Netz haufenweise fertige Weblayouts. Sowohl für pures HTML/CSS als auch als Plugins für diverse Content-Management-Systeme und Static-Site-Generatoren. Viele davon sind kostenfrei nutzbar. Aber natürlich gibt es auch kostenpflichtige.
Wenn man damit überfordert ist, ein eigenes Webdesign zu entwerfen und anschließend auch umzusetzen, kann die Nutzung eines fertigen Weblayouts eine Lösung sein.
Man sollte aber, bevor man sich dazu entschliesst, folgendes beachten und bedenken:
Studieren Sie die Lizenzbedingungen vor der Nutzung genau, damit Sie später keine böse Überraschung erleben.
Ein fertiges Layout scheint erst mal praktisch zu sein. Wenn Sie anfangen, das an Ihre eigenen Bedürfnisse anzupassen werden Sie wahrscheinlich 2 Dinge feststellen:
- Das schöne Design sieht, nachdem Sie Anpassungen vorgenommen haben, auf einmal gar nicht mehr schön aus.
- Wenn Sie Änderungen vornehmen wollen, sehen Sie Code, den Sie unter Umständen nicht verstehen.
Mein erster Ansatz meiner Website fußte auch auf einer Vorlage mit der ich mich lange rumgeplagt habe. Irgendwann habe ich dann einen Schlußstrich gezogen und mein eigenes Design entworfen. Um das zu bewerkstelligen muss man sich etwas mit HTML und CSS auskennen, sonst ist das nicht möglich.
Dieser scheinbar etwas mühselige Weg hat aber nur Vorteile.
- Man hat ein einzigartiges Design.
- Man versteht den HTML/CSS Code zu 1oo% so das einem Änderungen leichtfallen.
9. Fazit
Gutes Webdesign ist kein Hexenwerk. Das Angesprochene sollte man beherzigen. Festgeschrieben ist allerdings nichts. Wer zu den Kreativen gehört, darf gerne experimentieren.
Wichtig ist, das man das geplante umsetzt. Vieles ergibt sich bei der Umsetzung von selbst. Webseiten und Ihre Layouts verändern sich im Laufe der Zeit. Man muss nicht jede Mode mitmachen, sollte aber veraltete Techniken aus seiner Webpräsenz entfernen beziehungsweise ersetzen.
Papier und Bleistift sind gute Werkzeuge für das eigene Webdesign. Überlegen Sie sich, was Sie wo auf Ihrer Seite plazieren wollen, wie Ihre gesamte Site aufgebaut werden soll und entwerfen Sie erstmal ein grobes Layout. Nehmen Sie das als Grundlage. Wenn Sie anfangen das in Code umzusetzen, werden Sie die Erfahrungen sammeln, dieses Design im Lauf der Zeit immer weiter zu verbessern.