Wir helfen Ihnen gern! Schreiben Sie uns eine E-Mail.

Tutorials

Laden ...

Tutorial: Grundlagen guten Webdesigns

Wenn Sie schon eine Weile im Internet surfen, ist Ihnen sicher aufgefallen, dass es einfach ist, eine hässliche Website zu machen. Zum Glück ist es nur eine Frage des Wissens, ein stümperhaftes Erscheinungsbild Ihrer Website zu vermeiden.

Dieses Tutorial soll als Leitfaden für die Grundlagen guten Webdesigns und das Erstellen attraktiver Yola-Websites dienen. Es befasst sich aber auch mit allgemeineren Themen rund um gutes Webdesign.

Das Tutorial zeigt Ihnen Schritt für Schritt, wie Sie eine Website entwerfen, deren Informationsfluss strukturieren, eine Kopie anlegen, Fotografien und anderes visuelles Material zusammenstellen, und das alles schließlich mithilfe des Yola-Baukastens zusammenfügen.

Inzwischen haben Sie sicher schon eine Vorstellung davon, was Sie mit Ihrer Website erreichen wollen. Ob es dabei um die Webpräsenz Ihrer Firma, um die Bewerbung und den Verkauf Ihrer Dienstleistungen und Produkte im Internet oder einfach nur um das Loswerden Ihrer Alltagsgeschichten in einem Blog geht, der Zweck Ihrer Seite sollte Ihre Herangehensweise an Gestaltung und Erstellung bestimmen.

Gutes Webdesign will vorbereitet sein

Sammeln Sie Ihr gesamtes Material schon im Vorfeld. Sie können Ihre Seite viel leichter planen, wenn Sie genau wissen, was diese später beinhalten soll. Erstellen oder erschließen Sie die Kopie, Fotos, Diagramme, Videoclips, Logos usw. Überlegen Sie sich außerdem genau die Websitestruktur, um nicht in letzter Minute noch vergessene Links einfügen zu müssen. Wenn Sie Interesse haben, finden Sie nähere Informationen zur Planung Ihrer Website unter Berücksichtigung der Suchmaschinen in unserem folgenden Tutorial: Ihre Website unter Berücksichtigung der Suchmaschinenoptimierung planen (bald auf Deutsch)

Ordnen Sie Ihre Dateien, indem Sie sie so in Ordnern ablegen, wie Sie es für Ihre Website vorhaben. Legen Sie für jede Seite oder Abschnitt einen Ordner an und bewahren Sie dort alle Dateien auf, die Sie eventuell brauchen.

Weniger ist mehr

Endlose Seiten voller Inhalte können abschreckend und anstrengend für Ihre Leser sein. Teilen Sie solche Seiten in mehrere auf, um die Länge der einzelnen Seiten auf ein Mindestmaß zu beschränken. Verwenden Sie in Ihrer Navigationsleiste kurze, klare und präzise Stichwörter, damit Ihre Besucher sofort wissen, was sie auf diesen Seiten finden können (z.B. "Über uns", "Kundenservice", "Kontakt" usw.).

Einfache Orientierung

Eine unentbehrliche Grundlage guten Webdesigns ist eine klare und einheitliche Navigation. Wichtige Links sollten konstant auf jeder Seite Ihrer Website vertreten sein. Achten Sie darauf, dass die Links in Ihrer Navigationsleiste nach Wichtigkeit angeordnet sind. Denken Sie auch daran, dass Sie wahrscheinlich in regelmäßigen Abständen neue Links hinzufügen werden, lassen Sie dafür also noch ein wenig Platz.

Von anderen lernen

Erforschen Sie andere Websites, achten Sie darauf, wie andere Design, Farbe und Layout miteinander verbinden. Surfen Sie ein bisschen im Netz und suchen Sie sich Seiten heraus, von denen Sie denken, dass diese Ihren Bedürfnissen in Bezug auf Struktur und Erscheinungsbild am nächsten kommen. Nutzen Sie diese als Modell (aber kopieren Sie sie nicht!) und als Ausgangspunkt für Ihre eigene Website.

Wählen Sie Ihr Design

Kommen wir zurück auf den Zweck Ihrer Website: Es ist wichtig, dass Sie aus unserem Angebot von über 100 Designvorlagen diejenige aussuchen, die Ihren Bedürfinissen am besten entspricht. Wählen Sie ein Design, der so gut wie möglich zu Ihrem Firmenlogo passt (Achten Sie auf Form, Farbe und Gesamteindruck). Unter den Yola-Designs gibt es kostenfreie Designs und kostenpflichtige Premium-Designs. Ein Premium-Design lässt Ihre Website unter Umständen professioneller und exklusiver erscheinen, ohne dass Sie selbst zu viel Arbeit in die detaillierte Ausgestaltung stecken müssen. Eine Reihe unserer kostenfreien Designs können Sie jedoch ebenfalls so individuell anpassen, dass Sie ausgezeichnete Ergebnisse erzielen.

Das Design "Red Planet" ist eine Vorlage, die das Einfügen einer individuellen Kopfzeile gestattet. Dies ist eine hervorragende Möglichkeit, Ihrer Website ein einzigartiges Erscheinungsbild zu verleihen und dem Design Ihrer Marke anzupassen.

Gestalten Sie Seitenlayout und -design Ihrer gesamten Website einheitlich. Glücklicherweise ist es bei Yola ohnehin nicht möglich, auf ein und derselben Website unterschiedliche Designvorlagen zu verwenden. Mehrere Designs gestatten eine individuelle Anpassung der Kopfzeile – Sie können Ihr eigenes Logo und/oder Titelbild hochladen. Sie haben die Möglichkeit, ein einheitliches Bild für Ihre gesamte Website oder, wenn es Ihnen lieber ist, für jede Seite ein anderes zu verwenden.

Um dies durchzuführen, müssen Sie, wenn Sie z.B. die Vorlage "Red Planet" verwenden, ein neues Bild mit den Maßen 877 x 140 Pixel erstellen. Klicken Sie auf das Bannerbild und führen Sie die Schritte zum Hochladen Ihres Bildes durch. Wenn die Größe nicht genau stimmt, können Sie diese mithilfe unseres Tools zum Zuschneiden von Bannern anpassen.

Farbe ist ein einflussreicher Baustein. Achten Sie darauf, dass sich Ihre Farben gut ergänzen. Vermeiden Sie ein Übermaß an grellen Farben. Ein weiterer Tipp wäre, dass Sie Ihre gewünschten Schriftfarben auf Ihr Titelbild abstimmen (dies ist in vielen Designs individuell anpassbar). Color Hunter (englisch) ist ein nützliches Tool, das eine Farbpalette auf der Grundlage der Farbwerte eines hochgeladenen Bildes erzeugt. Probieren Sie es mal aus!

Grafiken, Text und Navigationselemente sollten ausgewogen und wohl proportioniert sein. Zu viele animierte Grafiken können ablenkend wirken und die Datenübertragunsgeschwindigkeit beeinträchtigen.

Wählen Sie Ihr Seitenlayout

Sie können aus 9 verschiedenen Layouts wählen. Klicken Sie in der Menüleiste auf die Schaltfläche "Layout", um alle Optionen anzuzeigen. Sie können mit einer leeren Seite beginnen oder ein voreingestelltes Layout mit Ablagefeldern verwenden, um eine bessere Übersicht über Ihre Inhalte zu haben.

Ziehen Sie Widgets auf Ihre Seite und legen Sie sie vertikal oder horizontal ab, um bequem das beste Ergebnis bei Erscheinungsbild und Gesamteindruck zu erzielen. Sie können dasselbe Layout für Ihre gesamte Website oder ein anderes auf jeder einzelnen Seite verwenden.

Gute Lesbarkeit

Achten Sie auf Schriftart, -farbe und -größe. Halten Sie sich an gängige und professionelle Internetschriftbilder wie Arial, Helvetica, Georgia oder Verdana. Sehen Sie ab von ausgefallenen Schriftarten wie z.B. Comic Sans MS, die möglicherweise nicht auf jedem Computer verfügbar sind – es sei denn, Sie sind Comiczeichner, in diesem Fall wäre die Verwendung von Comic Sans MS natürlich angemessen. Was Text- und Überschriftengestaltung betrifft, beschränken Sie sich auf eine oder zwei Schriftarten und zwei oder drei Schriftgrößen und Farben. SCHREIEN Sie nicht – verfassen Sie Text außer in Überschriften nicht in Großbuchstaben.

Für optimale Lesbarkeit ist es ratsam, eine dunkle Schriftfarbe vor einem hellen Hintergrund oder eine weiße Schriftfarbe vor einem dunklen Hintergrund zu wählen.

Um das Lesen auf dem Bildschirm zu erleichtern, sollten auf einer Website die Spalten des Texts schmaler als in einem Buch sein. Das Widget "Spaltenteiler" ist für diese Zwecke ganz wesentlich. Ziehen Sie an der Mittellinie der beiden Spalten, um die Spaltenproportionen zu ändern. So können Sie z.B. die Mittellinie nach rechts ziehen, um die linke Spalte größer als die rechte zu machen, und dann z.B. umfangreicheren Text in die linke Spalte und ergänzende Informationen in die rechte einfügen.

Diese Funktion können Sie auch dazu nutzen, Ihre Seiten in klar abgegrenzte Bereiche einzuteilen.

Mit Bildern arbeiten

Halten Sie die Anzahl von Bildern pro Seite möglichst gering. Als grobe Orientierungshilfe: Zehn bis zwanzig Bilder je 20 KB pro Seite sind mehr als genug. Achten Sie darauf, Ihre Bilder für das Internet zu optimieren. Alle Bilddateien sollten eine niedrige Auflösung (72dpi) haben. Als Faustregel gilt: Verwenden Sie das GIF-Format für computergenerierte Grafiken wie z.B. einfache Logos, Schaltflächen oder Animationen und das JPG-Format für Fotografien oder gescanntes Material.

In der Software "Adobe Photoshop" ist die Funktion "Für das Internet speichern" außerordentlich wertvoll, um große Dateien zu komprimieren. Denken Sie daran, die Bildabmessungen Ihrer Datei zu reduzieren, bevor Sie sie für das Internet speichern.

Qualitativ hochwertige Fotografien und Illustrationen werden langfristig dazu beitragen, Ihr Unternehmen gekonnt und professionell darzustellen. Probieren Sie doch mal Fotolia aus, um preisgünstige Archivbilder dieses Diensteanbieters für Ihre Website zu nutzen – Sie können ganz einfach Fotolia-Credits kaufen, wenn Sie im Yola Baukasten ein Bildwidget hinzufügen oder bearbeiten.

Klein aber fein

Achten Sie darauf, dass Ihre Website schnell geladen wird, denn das ist ein äußerst wichtiger Aspekt guten Webdesigns. Wenn Ihre Seite nur langsam geladen wird, werden Ihre Besucher schnell die Lust verlieren. Es sollte nicht länger als 15 Sekunden dauern, bis eine Seite geladen ist. Bei Yola ist das Hochladen von Dateien auf 5 MB bzw. 100 MB (Yola Silver) pro Datei beschränkt.

Das heißt aber nicht, dass es klug wäre, 5 MB oder gar 100 MB große Dateien hochzuladen! Bitte vermeiden Sie übergroße Bilder, Videos, Audio- und andere große Dateien. Die meisten Bildbearbeitungsprogramme wie z.B. Adobe Photoshop oder Picnik bieten wertvolle Optimierungstools, um die Dateigröße Ihrer Bilder zu verringern. Probieren Sie doch mal dieses Bildoptimierungsprogramm im Internet: www.imageoptimizer.net (englisch). Sie können auch das Programm Image Compression Tool (englisch) nutzen, mit dem Sie Ihr Bild hochladen, komprimieren und dann als kleinere Datei wieder herunterladen.
 
Sie können die Downloadgeschwindigkeit Ihrer Website mit folgendem Tool im Internet testen: www.iwebtool.com/speed_test (englisch)

Was man nicht tun sollte

Unten stehend finden Sie eine Liste allgemein typischer Webdesignfehler. Wenn Sie diese vermeiden, ist das fast schon eine Garantie für eine gut lesbare und attraktive Website.

Zu unseren bestgehassten Website-Inhalten gehören folgende: fehlender Sinn für gute Farben, zu viele Animationen, der Hinweis "Seite befindet sich im Aufbau", automatisch abgespielte Audio-Dateien, zu viele Werbeanzeigen, langsames Laden der Seite, Grammatik- und Rechtschreibfehler, Druckschrift, zu lange Absätze, leere Seiten und Absätze mit zentriertem Text.

Robin Williams benennt auf www.ratz.com/featuresbad.html (englisch) schlechte Designelemente so gut, dass wir ihn hier auch erwähnen.

Links und Quellen: