Home > Tutorials > Tutorial Website-Planung

Webdesign-Tutorial: Planung Website-Struktur und Navigation

Zeitlich ist die Planung der Website-Navigation und Struktur zwischen dem Layoutentwurf und der Ausarbeitung der Website in HTML anzusetzen. Gewisse Grundgedanken fließen schon in den Entwurf des Layouts ein: Wieviel Platz wird die Navigation ungefähr benötigen? An welcher Stelle positioniere ich die Navigation? In der eigentlichen Ausarbeitungsphase sollte die Website-Navigation und Struktur fix sein, da Änderungen mit Mehraufwand verbunden sind. Dieser Webdesign-Workshop ist für Anfänger geeignet.Es ist wichtig, schon vor dem Entwurf einer Site die Struktur zu definieren: Welche Seiten werden benötigt? Wieviele werden es insgesamt? In welche Themenbereiche lassen sich die Webseiten aufteilen? Wie lassen sich diese gruppieren? Werden weitere Sub- Unterteilungen benötigt? Dieser Workshop hilft beim Finden der korrekten Struktur für Ihre Website.

Welche Seiten werden benötigt? Eine Homepage besteht aus zwei Arten von Webseiten: zum einen die Inhaltsseiten, die der Betreiber zum Vermitteln seines Angebotes braucht, zum anderen aus sogenannten Service-Seiten. Sie ergänzen das funktionelle und inhaltliche Angebot einer Website. Fangen Sie bei der Struktur-Planung der Website am besten immer mit den Site Services an. Die wichtigste Service-Seite ist das gesetzlich vorgeschriebene Impressum (TK-Gesetz Deutschland) mit einem rechtlichen Hinweis externe Links betreffend. Auch eine Kontaktseite (Formular und Adresse / Telefonnummer) wird auf praktisch jeder Website benötigt. Eine Sitemap (übersicht aller im Web vorhandenen Seiten) empfiehlt sich ab mittlere Seitengrößen (ab ca. 20 Seiten). Weitere mögliche Serviceseiten sind Website-Suche, Gästebuch oder ähnliches. Zu diesen Service-Seiten kommen die eigentlichen Inhaltsseiten. Zur Planung der Struktur einer Website benötigt man eine sinnvolle Gruppierung.

Wieviele Webseiten brauche ich? Das hängt von Ihrem Angebot ab. Verwenden Sie keine zu kurzen Seiten, aber auch keine zu langen. Zu kurze Seiten bieten nicht genug Inhalt für Suchmaschinen. Zu lange Webseiten erschlagen den Leser mit Masse und verscheuchen zur nächst besseren Website. Eine gute Seitengröße soll nur zwei bis vier Bildschirmhöhen belegen. Je nach verwendetem Layout und der gewählten Schriftgröße passen auf diese 2 Bildschirmseiten 200 bis 1200 Worte. Am Bildschirm lassen sich lange Texte bedeutend schlechter lesen, als auf Papier, fassen Sie also die Texte kürzer als für Printmedien. Navigationspunkte Haben Sie Ihre Texte in sinnvolle Blöcke unterteilt und reduziert, dann folgen als nächstes auch schon die Gedanken zur Gruppierung der einzelnen Inhalte. Aus der Gruppierung ergibt sich die Sitemap einer Homepage. Die Sitemap stellt schematisch die Zusammenhänge und Gruppierungen der einzelnen Webseiten im Projekt dar. Für Homepages unter 20 Seiten reicht in der Regel eine zweistufige Navigation: Die Hauptnavigationsebene bleibt immer sichtbar, die Subnavigation wird ergänzend zu dem jeweils geklicktem Hauptnavigationspunkt angezeigt. Eine sinnvolle Struktur für eine kleine Website könnte also folgendermaßen aussehen:

Navigationspunkte Haben Sie Ihre Texte in sinnvolle Blöcke unterteilt und reduziert, dann folgen als nächstes auch schon die Gedanken zur Gruppierung der einzelnen Inhalte. Aus der Gruppierung ergibt sich die Sitemap einer Homepage. Die Sitemap stellt schematisch die Zusammenhänge und Gruppierungen der einzelnen Webseiten im Projekt dar. Für Homepages unter 20 Seiten reicht in der Regel eine zweistufige Navigation: Die Hauptnavigationsebene bleibt immer sichtbar, die Subnavigation wird ergänzend zu dem jeweils geklicktem Hauptnavigationspunkt angezeigt. Eine sinnvolle Struktur für eine kleine Website könnte also folgendermaßen aussehen:

Sprachschule Sprachkurse Unterkunft Freizeit Termine & Preise Service
Lehrmethode
Einrichtungen
Sprachlehrer
Anreise
Intensivkurs
Superintensivkurs
Gruppenkurs
Einzelkurs
Gastfamilie
Pension
Hotel
Appartment
Ausflüge
Führungen
Sport
Fotogalerie
Termine Kurse
Preise Kurse
Preise Unterkunft
Preise Extras
Kontakt
Anmeldung
Gästebuch
Impressum

Die glorreichen Sieben Beachten Sie beim Gruppieren der Seiten und Entwerfen der Navigation Ihrer Homepage, dass zu viele auf einmal sichtbare Links sehr schnell verwirren. Bemühen Sie sich, möglichst genau sieben Hauptnavigationspunkte zu erhalten, mit jeweils maximal sieben Subnavigationspunkten. Sollten sich irgendwo mehr ergeben, dann bemühen Sie sich um eine andere Gruppierung oder weitere Zerteilung. Ab 30 HTML-Seiten benötigen viele Homepages schon eine dritte Navigationsbene: Hauptnavigation, darunter Subnavigation, darunter wiederum Subnavigation 2. Ebene.

Größe und Unterteilung der Textblöcke Bemühen Sie sich, Ihre Homepage weder zu klein zu zerstückeln, noch in zu umfangreichen Themenblöcken zu gruppieren. Eine zu kleine Zerteilung lässt den Benutzer den Überblick verlieren. Suchmaschinen finden möglicherweise nicht mehr genug Text, um die jeweilige Seite für wichtig zu erachten.
Allerdings gilt auch: Je mehr Seiten in einer Homepage vorhanden sind, desto mehr verschiedene Keywords können für getrennte Seiten eingesetzt werden. Zu große Themenblöcke bewirken ebenfalls Orientierungsverlust. In einem Medium, in dem Wissen in dermaßen großem Umfang zur Verfügung steht, wie dem Internet, ist jede bessere Homepage nur einen Klick entfernt.

Das Internet ist nicht linear aufgebaut! Beachten Sie beim Unterteilen der Texte stets, dass das Internet kein lineares Medium ist. Die Information muss nicht der Reihe nach von A bis Z übermittelt werden. Der Besucher kann immer auf Links klicken, die im bisher unbekannte Informationen auf seinem Weg durch das Web vermitteln. Es gilt somit, die Texte so effektiv wie möglich zu unterteilen. Weiterreichende Informationen werden an den entsprechenden Textstellen der allgemeinen Texte verlinkt.

Schreiben Sie kurz und eindeutig! Beim Texten für das Web ist die wichtigste Regel, alle Sätze immer so kurz und eindeutig wie möglich zu formulieren. Diese Regel entsteht aus der schlechteren Lesbarkeit von Texten am Bildschirm und der ständigen Verfügbarkeit potentieller Konkurrenz-Seiten. Schreiben Sie aus der Sicht des Kunden! Vermeiden Sie Fachbegriffe, wo immer möglich. Umgehen Sie jegliche Art von Negationen und verwenden Sie möglichst keine Nebensätze! Der Besucher Ihrer Homepage soll immer erst einen kurze Zusammenfassung, dann einen ausführlichen Text, und schließlich über weitere Links vertiefende Informationen erhalten.

Texte prüfen Sobald Sie erst Ihre Texte in Themenbereiche geordnet und sinnvolle Blöcke unterteilt haben, sollten Sie prüfen, ob Sie in den vorhandenen Texten noch Schwachstellen sehen: Fehlt etwas? Sind die Formulierungen kurz, einfach und aussagekräftig? Korrigieren Sie solche Fehler unbedingt vor der Ausarbeitungsphase der Homepage.

Navigationsformen Die Navigation einer guten Homepage ergibt sich größtenteils aus den durch die Struktur gesetzte Vorgaben. Die fett gedruckten Hauptnavigationspunkte werden immer auf jeder Seite des Projekts sichtbar sein, z.B. wie bei www.ih-berlin.de vertikal auf der linken Seite. Klickt man auf einen Hauptnavigationspunkt, der noch weitere Subseiten beherbergt, so setzen wir auf die betreffenden Seiten zusätzliche Zeilen unter den Hauptnavigationspunkt.

Platz für die Navigation Die wichtigste Frage die Navigation betreffend ist im Webdesign immer: wieviel Platz benötige ich? Eine Navigationsfläche, die keine Abstände zu anderen Seitenelementen einhält, ist zu klein geplant. Andererseits sieht man manchmal auch Navigationsflächen, die dermaßen ungenutzt sind, dass man die solitären Links nicht als Navigation wahrnimmt. Dadurch, dass Sie sich schon vor dem Design des Layouts Ihrer Homepage Gedanken über deren Struktur und Navigation machen, vermeiden Sie später überflüssige Korrekturen.

Horizontale oder vertikale Navigation? Eine horizontale Navigation am Kopf der Seite wirkt dezenter und feiner als ein vertikaler Balken auf der linken oder rechten Seite Ihrer Website. Allerdings hat man auf 780 Pixel Breite auch nicht allzuviel Platz für Erweiterungen. Steht die Struktur Ihrer Homepage sicher fest, spricht nichts gegen den Einsatz einer horizontalen Navigation. Wollen Sie flexibler bei den Inhalten und Erweiterungen Ihrer Homepage sein, empfehle ich einen vertikalen Navigationsbalken. Auch Mischformen aus beiderlei Orientierungen lassen sich sinnvoll verwenden.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot WDEpro : Webdesign-Entwurf + HTML

Unser Preis: ab 540 €626,40 € incl. MwSt.
Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.
Auftrag erteilen

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:

  • saubere Umsetzung des grafischen Entwurfs in HTML
  • semantisch korrekter HTML-Code, W3C-valide, barrierefrei
  • CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
  • Anordnung Dummy-Überschriften / Texte / Bilder
  • Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
  • ausgeführte Meta-Angaben für Eingangsseite
  • Layouttest in alle gängigen aktuellen Browsern und alten Internet-Explorer-Versionen
  • Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email

Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
Webdesign-Angebot WDE : Webdesign-Entwurf

Unser Preis: ab 360 €417,60 € incl. MwSt.
Für wen? Sie wünschen ein professionelles grafisches Homepage-Layout, die HTML-Struktur / das Template der Homepage aber selber erstellen
Auftrag erteilen

Bis zu 4h individueller grafischer Entwurf für Ihre Homepage in Photoshop, incl:

  • klare Definition von Navigations/Inhaltsbereichen
  • alle nötigen Ebenen und Ebeneneffekte / Stile
  • Farbschemata für die Umsetzung von Hintergrund, Vordergrund, Texten und Links
  • Anordnung Ihres Firmenlogos, Blindtexte, Blindnavigation und Blindgrafiken
  • Rücksprache und Korrekturen am Entwurf bis insgesamt maximal 1h
  • bei allen Entwurfsarbeiten achten wir auf die einfache Umsetzbarkeit unter Berücksichtigung der Barrierefreiheit im WWW
  • Slicen des fertiggestellten Entwurfes
  • die übergabe des Entwurfes erfolgt als .psd via Email

Das Angebote WDE beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität digital durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten

Unser Preis: 900 € 1.044,00 € incl. MwSt.
Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.
Auftrag erteilen

Komplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!

  • Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
  • Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
  • Erstellen und formatieren von Seiten incl. Impressum und Kontakt
  • Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
  • Individuelles überzeugendes Layout mit Ihrem Firmenlogo
  • Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
  • Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
  • Saubere Suchmaschinenoptimierung auf relevante Keywords
  • Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
  • Anmeldung bei den wichtigsten Suchmaschinen
  • Einrichtung aller Email-Adressen

Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]     Webdesign-Links    

drweb.de

Großartiges Portal rund ums Webdesign. Viele Tutorials, hervorragender redaktioneller Inhalt, teils kostenpflichtig.

dhtmlcentral.com

Viele gute Javascript rund um dynamisches HTML. Highlight ist das Javascript-Menü CoolMenus.

   
Einträge aus dem ff-Webdesign Lexikon:
Navigation Die Navigation ist der Hauptunterschied zwischen Internet und klassischen Printmedien. Durch die Navigation hat der Benutzer die freie Auswahl bei seiner Bewegung auf einer Homepage. Die Navigation einer Webseite wird in der Regel in einem Block zusammengefasst und kann bei größeren Homepages mehrere hierarchisch aufgebaute Ebenen beinhalten. Eine schlechte Navigation ist ... [ Mehr lesen ]
Layout ist die Verbildlichung eines geistigen Entwurfes. Das Layout vermittelt Auftraggebern erste Eindrücke und wird im Projektverlauf zunehmend konkretisiert. Webdesigner verwenden ein sogenanntes Master-Layout, aus der nach Freigabe durch den Auftraggeber alle weiteren Seiten der Webpräsenz erstellt werden. Gute Webdesigner versuchen immer, ... [ Mehr lesen ]
Funktionsflächen einer Homepage sind im Webdesign die verschiedenen Arten von Bereichen in einem Layout. Typische Funktionsflächen sind Navigation, Inhalt, Kopfbereich, Seitentitel und Kennzeichen (Markenlogo etc...). Gute Webdesigner schaffen es, die Funktionsflächen einerseits klar voneinander ... [ Mehr lesen ]
Ankerlinks sind Links zu unsichtbaren Markierungen (Ankern) innerhalb der gerade angezeigten HTML-Seite. Ankerlinks sollten nur bei wirklich umfangreichen und gleichzeitig schwer unterteilbaren HTML-Seiten angewandt werden. Jeder Link ruft im Normalfall eine neue Seite auf. Da Ankerlinks dies nicht tun, verwirren Sie unversierte Internetnutzer. ... [ Mehr lesen ]
CSS ist eine zu HTML gehörige Ergänzung, die die Trennung von Layout und Inhalten ermöglicht. In seperaten Dateien werden allgemeingültige Regeln für das Aussehen bestimmter Tags auf der gesamten Website definiert. Änderungen am Layout sind so flexibler und in kürzerer Zeit möglich. ... [ Mehr lesen ]
JavaScript ist eine von Netscape entwickelte objektbasierte Programmiersprache, die in erster Linie zur Dynamisierung von Webseiten verwendet wird. Javascript wird nicht auf dem Server, sondern auf dem Rechner des Betrachters ausgeführt und ist die einzige Möglichkeit ... [ Mehr lesen ]
DHTML ist ein Oberbegriff für alle Techniken, die HTML-Seiten dynamisch machen. Dynamic HTML besteht aus drei Technik-Arten: HTML für die Webseiten, eine clientseitige Scriptsprache und eine Schnittstelle zur Steuerung und Überwachung des DOM (Document Object Model, hierarchische Struktur aller Seitenelemente). DHTML wird eingesetzt für alle ... [ Mehr lesen ]
HTML ist die Kurzform von "Hyper Text Markup Language" und ist die jeder Webseite zugrundeliegende Programmiersprache im Web. HTML wurde 1989 von Tim Berners-Lee in Genf zur Übermittlung wissenschaftlicher Daten entwickelt. Seine heutige Bedeutung erhielt HTML erst durch den Boom im Internet ab ca. 1995. HTML regelt den Aufbau und ... [ Mehr lesen ]
Rollover ist das Austauschen einer Grafik gegen eine andere, sobald man darüber mit der Maus fährt. Ein Rollover wird im Webdesign gerne für Navigationselemente eingesetzt und basiert auf Javascript. Ein klassisches Beispiel ist die „Beleuchtung“ eines Buttons, wenn man mit der ... [ Mehr lesen ]
Sitemap Die Sitemap ist eine "Landkarte" der Homepage. Größere Webseiten verwenden häufig mehrere Navigationsebenen. Dies hat den Vorteil, dass die Möglichkeiten der Fortbewegung im Web klar strukturiert angezeigt werden. Nachteil dabei ist, dass man keine Seite mehr hat, auf ... [ Mehr lesen ]

Die kleinen Zimmer oder Behausungen lenken den Geist zum Ziel, die großen lenken ihn ab.

Leonardo da Vinci

Ausgezeichnet!

✓ 5/5 ☆☆☆☆☆ Bewertung auf Google

1 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 5 (1 Bewertungen, Ø 5,00 / 5)
Loading...

Listando
WordPress Cookie Plugin von Real Cookie Banner