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 erteilenAngebot 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 erteilenBis 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 erteilenKomplettangebot 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 ]