Grundlagen guten Webdesigns

Beachten Sie: Dieser Artikel bezieht sich auf die frühere Version unseres Website Builders. Wenn Sie sich nach dem 11. März 2020 angemeldet haben, verwenden Sie den neuen Website Builder. Hilfe dazu finden Sie hier (derzeit nur auf Englisch verfügbar).

Dieses Tutorial soll als Leitfaden für die Grundlagen guten Webdesigns und das Erstellen attraktiver HostPapa Website Builder dienen.

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. 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!

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.).

use-page-titles

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 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).

Gestalten Sie Seitenlayout und -design Ihrer gesamten Website einheitlich. 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.

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 (derzeit nur auf Englisch verfügbar) 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.

choose-page-layout

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.

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.

easy-to-read-font

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.

use-page-names

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.

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.

Bitte vermeiden Sie übergroße Bilder, Videos, Audio- und andere große Dateien. Die meisten Bildbearbeitungsprogramme wie z.B. Adobe Photoshop bieten wertvolle Optimierungstools, um die Dateigröße Ihrer Bilder zu verringern. Probieren Sie doch mal dieses Bildoptimierungsprogramm im Internet: www.imageoptimizer.net (derzeit nur auf Englisch verfügbar).

Was man nicht tun sollte:

  • 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
  • Leere Seiten
  • Absätze mit zentriertem Text

Robin Williams benennt auf www.ratz.com/featuresbad.html schlechte Designelemente so gut, dass wir ihn hier auch erwähnen (derzeit nur auf Englisch verfügbar).

Links und Quellen (derzeit nur auf Englisch verfügbar):

Passende Artikel

Dieser Post ist auch verfügbar in: English
Gehen Sie online mit unserem günstigen Webhosting

Gehen Sie online mit unserem günstigen Webhosting

Erfahren Sie jetzt mehr
HostPapa Mustache