Webdesign Tutorial

Dieses Webdesign Tutorial soll dir dabei helfen, einen ersten Überblick über gutes Webdesign zu erhalten. Eine Website mit gutem Inhalt zu haben ist gut. Besser ist es, wenn die Website auch noch übersichtlich ist, auf verschiedenen Geräten dargestellt werden kann und dazu auch noch gut aussieht.

In diesem Tutorial zeige ich dir, auf welche grundlegenden Dinge du dabei achten solltest.

 

1. Der Anfang

Beim Thema Webdesign gibt es einige Dinge die später nur schwer änderbar sind. Daher solltest du dir vorher Gedanken darum machen, bevor du mit der Erstellung deiner Website beginnst.

Zunächst solltest du dir genau überlegen, wie deine Website aussehen soll. Du kannst dich dabei von deinen Lieblingsseiten inspirieren lassen, falls du nicht auf Anhieb eine eigene Idee finden solltest. Es ist jedoch wichtig, dass du nicht einfach das Design kopierst. Entwickle deine eigenen Ideen und Weiterentwicklungen.

Neben dem allgemeinen Aufbau einer Website muss auch das Textlayout stimmig sein. Der Text darf nicht zu klein, aber auch nicht zu groß sein. Durchgehender Text ohne Absätze ist ebenso schwierig zu lesen wie Text in durchgängigen Großbuchstaben. Die Grammatik und die Rechtschreibung sollte ebenso sitzen. Kleine Tippfehler können immer wieder mal passieren – aber sie sollten nur Ausnahmen bleiben.

Ebenfalls wichtig ist die Navigation auf deiner Website. Der Besucher muss sich auf Anhieb zurechtfinden. Die ersten paar Sekunden entscheiden, ob der Besucher auf deiner Website bleibt oder ob er die Seite einfach wieder schließt.

Wenn das Grunddesign und das Grundlayout deiner Website steht, solltest du auch andere Personen über das Design schauen lassen. Familie, Freunde und Bekannte können dir dabei helfen, die gröbsten Stolpersteine aus dem Weg zu räumen. Auch gibt es in diversen Foren oder Communites die Möglichkeit, die eigene Website einmal überprüfen zu lassen. Nehme diese Möglichkeiten in Anspruch.

Im Firmenumfeld kann man das Design einer Website übrigens genau so testen lassen. Ersetze dabei „Familie, Freunde und Bekannte“ einfach durch „Kollegen“.

 

2. Bildschirmauflösung

Websites sind heutzutage nicht mehr auf eine bestimmte Bildschirmauflösung hin optimiert. Früher sah die Welt noch anders aus. 800×600 oder 1024×768 werden den „alten PC-Hasen“ noch etwas sagen. Heutzutage hat das aber keinen Wert mehr. Neben den verschiedenen Desktop-Auflösungen kommen heutzutage noch zahlreiche mobile Geräte zum Einsatz. Notebooks, Netbooks, Tablets, Smartphones – alle in verschiedenen Größen mit verschiedenen Auflösungen. Diese Tatsache stellt Webdesigner heutzutage vor eine große Herausforderung. Denn die Website soll natürlich auf möglichst allen Geräten ordentlich dargestellt werden.

Das Zauberwort an dieser Stelle heißt „Responsive Webdesign“. Beim Responsive Webdesign die Website nicht fest für fixe Bildschirmauflösungen optimiert, sondern „fließend“ gestaltet. Die Website passt sich der verwendeten Auflösung einfach an. Menüs verschieben sich, Texte werden größer dargestellt, das Layout stellt sich um – alles vollautomatisch. Wer das Responsive Webdesign von Anfang an in seine Website mit einfließen lässt, der hat es leicht. Nachträgliche Änderungen sind schwierig einzubauen und erfordern meist ein komplettes Redesign der Website.

Mehr zum Thema Responsive Webdesign kannst du auch hier auf Webmasterparadies.de lesen.

 

3. Browser-Optimierungen

Browser-Optimierungen sind auch heute leider noch immer ein großes Thema. Jeder Browser interpretiert (x)HTML oder CSS-Code noch immer etwas auf die eigene Weise. Leider unterstützen manche Browser nicht einmal die aktuellen Web-Standards zu 100%. Dennoch solltest du versuchen (oder gerade deswegen) validen HTML-Code zu erzeugen.

 

4. Übermäßiger Einsatz von Scripten

Diverse Scripte unterstützen heute viele Funktionen moderner Websites. Das ist auch gut so. Allerdings darf man es mit deren Einsatz nicht übertreiben. Viele Scripte verlangsamen den Seitenaufbau deutlich. Insbesondere auf mobilen Geräten kann dies zu großen Leistungseinbußen führen. Übertreibe es daher nicht mit dem Einsatz von Scripts. Der Grundsatz sollte heißen: Lieber ein Script zu wenig, als eines zu viel.

Wenn es geht, kannst du auch diverse CSS-Lösungen als Alternative zu einem Script wählen. So lässt sich beispielsweise eine verschachtelte Ordnerstruktur allein mit CSS darstellen. Dieses und weitere nützliche Script-Snippets findest du im CSS-Bereich.

 

5. Satz & Layout

Deine Website sollte so übersichtlich wie nur möglich sein. Das betrifft das Design an sich, aber auch den Satzbau und das Layout der Textbereiche. Durchgängige Texte sind zu vermeiden. Arbeiten mit Absätzen.

Wenn es angebracht ist, kannst du thematisch zueinander passende Satzteile auch nebeneinander stellen (z.B. Pro und Contra). Extrem kleine Schrift ist ebenso zu vermeiden wie extrem große Schrift. Am besten ist (Thema Responsive Webdesign) wenn du die Schriftgröße prozentual festsetzt oder in der Einheit em.

Achte weiterhin darauf, dass die Schriftfarbe in Kontrast zum Hintergrund steht. Grüner Text auf gelbem Hintergrund ist ebenso schwierig zu lesen wie Dunkelblau auf Schwarz. Sorge daher immer für genügend Kontrast.

Auch unendlich lange Texte sind zu vermeiden. Unterteile längere Texte mit verschiedenen Überschriften oder sie auf mehrere Seiten auf. Wenn du mit Überschriften arbeitest, achte auf die richtige Struktur deiner Website. So ist der <h1>-Tag nur einmal zu verwenden für die Gesamtüberschrift. Unterüberschriften bekommen den <h2>-Tag und Unter-Unterüberschriften den <h3>-Tag und so weiter.

 

6. Hintergrund

Gerade Anfänger in Sachen Webdesign begehen meistens den Fehler, ein zu buntes oder ablenkendes Hintergrundbild für die eigene Website zu wählen. Ebenso häufig anzutreffen sind zu grell gewählte Farbtöne bei Verzicht auf ein Hintergrundbild.

Der Hintergrund sollte – wie der Name schon vermuten lässt – auch im Hintergrund bleiben. Am besten eignen sich hellere Farben für den Hintergrund bei entsprechend dunkler Schriftfarbe. Dies bietet den besten Kontrast. Wenn du einen farbigen Hintergrund wählst, benutze „sanfte“ Farbtöne. Pastellfarben eignen sich besonders gut, da diese in der Regel nicht zu grell sind. Der Hintergrund sollte nicht unnötig blenden und die Texte klar erkennbar bleiben.

Auf mehrfarbige Hintergründe solltest du nach Möglichkeit verzichten. Besser eignen sich sanfte Farbverläufe. Gleichzeitig sollten etwaige Muster eines Hintergrundbildes auch wirklich im Hintergrund bleiben. Bedenke bitte: Der Hintergrund deiner Website ist nicht dein Computer-Desktop. Im Wesentlichen geht es auf deiner Website um die Inhalte – nicht um die Hintergrundgrafik.

 

7. Der passende Editor

Ob du nun deine Website mit dem Windows-Texteditor schreibst, mit einem Programm wie Notepad++, einem WYSIWYG-Editor oder die Web-Oberfläche deines Anbieters: Dem Besucher, der die Seite betrachtet, ist das völlig egal. Deine Besucher erwarten, dass die Website fehlerfrei läuft. Besser ist, wenn sie dazu auch noch konform zu den aktuellen HTML-Standards läuft und keine Fehler verursacht.

Wie du deine eigene Website erstellst, bleibt grundsätzlich dir überlassen. Oftmals kommt es dabei auch auf die Möglichkeiten an, die dir dein Hoster bietet. Wenn du etwas mehr als nur eine rein private Website für deine Familie und Freunde erstellst, lohnt sich möglicherweise der Einsatz eines Content Management Systems wie beispielsweise Joomla. Wer einen Blog betreiben möchte, greift wahrscheinlich zu Wordpress. Wer hingegen nur eine Website erstellt, um die neuesten Urlaubsfotos mit der Familie zu teilen, der kann theoretisch auf den Einsatz solcher Werkzeuge verzichten.

Wichtig ist, dass du dich mit dem von dir gewählten Tool wohl fühlst und gut damit arbeiten kannst. Denn du musst schließlich dieses Tool einsetzen, wenn du einen neuen Artikel auf deine Website stellst oder einen vorhandenen anpassen willst.

Einen „besten“ Editor gibt es nicht unbedingt. Ich empfehle – wenn du dich beispielsweise für ein Blogsystem oder ein CMS entscheidest – den Einsatz bekannter Tools. Denn nur aktiv genutzte Tools werden auch in Zukunft weiterhin unterstützt. Und falls mal Fragen auftreten sollten, kannst du so auf eine zumeist sehr aktive Community und zahlreichen Hilfeseiten im Internet zurückgreifen. Ansonsten ist darauf zu achten, dass der gewählte WYSIWYG-Editor sauberen (x)HTML-Code erzeugt.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.