Tutorials Main: Tutorials: Seitenstrukturierung
Grundlagen
Projektplanung
Seitenstrukturierung
Medien und Workflow
Provider und Domain
Kalkulation und Budget
WebpromotionSuchmaschinen-
    Optimierung SEO

Bannergestaltung
  Auflisten, bündeln, kanalisieren...
Klingt eigentlich ganz einfach, bedeuted aber in der Realität stunden- oder sogar tagelange Konzeptionsarbeit, die keiner sieht. Als Eselsbrücke können Sie sich das Inhaltsverzeichnis eines Buches vorstellen. Daraus ergibt sich allerdings noch keine nutzerfreundliche Navigation, denn Bücher sind eine stumpfe Aneinanderreihung von Themen oder Kapiteln. Ihre Webseite sollte jedoch selbsterklärend permanent navigierbar bleiben - auch für Anfänger.

Sie werden feststellen wie schwierig es ist, für wildfremde Besucher allgemeingültige Begriffe logisch zu sinnvollen Kategorien zu bündeln. Ich kann hier nicht in aller Kürze erklären, wie das funktioniert, denn dieser Schritt muß für jedes Projekt neu und spezifisch erarbeitet werden. Grundsätzlich gibt es aber eine allgemeingültige Regel, die immer richtig ist: "Weniger ist mehr!" Gut aufbereitete Webinhalte rekrutieren sich immer aus der "Kunst des Weglassens". Für alle anderen Fälle gibt es Fachliteratur oder z.B. Ihre eigenen Prospekte.

Gliedern und strukturieren Sie nun Ihre Informationen aus der Analysephase um eine schlüssige Navigation zu erörtern. Nehmen Sie dazu wieder Stift und Papier zur Hand: Versuchen Sie übergeordnete Kategorien zu finden, indem Sie alle geplanten Informationsinhalte zunächst ungeordnet aufschreiben. Daraus entsteht dann eine üppige Liste, mit zunächst unübersichtlichem Inhalt - beim genaueren Betrachten kristallisieren sich oft Gruppen heraus, die einige Untergruppen doppelt und dreifach enthalten. Bündeln Sie diese zunächst ohne Feingliedrigkeiten einfach zu streichen.
Step 1:   Eindeutige Hauptnavigation definieren
Die folgenden Liste an Haupt-Menupunkten gehört bei Besuchern mit
durchschnittlicher Surferfahrung zum alltäglichen Orientierungs-Vokabular:
    1. Grundelemente
Homepage
Kontakt / Email
Produkte / Dienstleistungen
Impressum

2. Hilfsnavigation
Sitemap
Links
Guided Tour
Suche
Hilfe

  3. Features
Firmenchronologie / Über uns
Kunden (-login)
Referenzen
Support
Downloads
News
Forum
Shop / Warenkorb
FAQs
(Gewinn-) Spiel
Links
Step 2:  

Eindeutige Sub-Navigation definieren

Bevor Sie nun alle Unterpunkte einfach auf die Hauptkategorien verstreuen,
hier noch ein paar Tipps um grobe Fehler zu vermeiden:

1. Die Hauptnavigation muß unbedingt immer sichtbar bleiben
2. Alle Elemente der Hauptnavigation haben eine feste Position
3. Eine gute Navigation besteht aus max. 3 Unterebenen (Level 1-3)
4. Auch bei großen Projekten unbedingt auf Level 4 verzichten
5. Alle Submenus haben ebenfalls eine feste Position auf allen Seiten
6. Planen Sie Platz für die Zukunft mit ein - Ihre Inhalte werden wachsen - nicht schrumpfen
7. Auf Links zu Baustellenseiten unbedingt verzichten

Step 3:   Gestalterische Umsetzung - nicht nur für Designer!
Unser gesamter Alltag ist durch bestimmte Strukturen und Verhaltensschemen geprägt. Lassen Sie sich zusätzlich auch davon inspirieren! Bringen Sie Ihre eigenen Ideen ein, wie was wo erscheinen soll, ohne die allgemeingültigen Spielregeln des Internets zu brechen. Erfinden Sie keine eigene Sprache, aber spielen Sie z.B. mit klar, interpretierbaren Dialekten, um Ihren eigenen Charme zu versprühen. Dadurch kann eine Site wesentlich interessanter wirken und gerichtete Highlights setzen. Behalten Sie die folgenden Punkte als "roten Faden" im Hinterkopf:
    Adäquate Gestaltungskonzepte durch:
Pfiffige Umsetzung Ihrer CI /CD innerhalb der Site
Gezielte Ansprache der Zielgruppe mit fachspezifischen Know-how
Verwendung passender Claims mit entsprechendem Bildmaterial
Knappe, gefilterte Informationsaufbereitung
Erweckung von Neugier und / oder Vertrauen
Anpassung durch klare Navigation & kurzen Ladezeiten
...usw. um hier nur einige Beispiele zu nennen.
    Kreative Potenziale erwecken:
Brainstorming in zunächst kleinen Gruppen
Attributesammlung durch Assoziationsketten und Wortspielereien
Spontankonfrontation mit Freunden, Bekannten oder Kollegen
Analogienbildung durch Bionik, Technik und Sozialverhalten
Zunächst völlige Loslösung von technischen Problemen
Alles unbedingt aufschreiben!
    Visuelle Gruppierungen schaffen:
Farbcodierungen
Geometrische, eindeutige Anordungen
Klare Visualisierung von Hauptmenu, Submenu & Links im Text
Konsequenter Einsatz einer homogenen Bildauswahl
Verwendung von max. 3 Schriftarten
Step 4:  

Mehrere Grundkonzepte kommen für Ihren Auftritt in Frage:

Nun können Sie sich zunächst für eines der Screenkonzepte entscheiden, oder eine Mischvariation wählen. Der gesamte Designprozeß sowie die Produktion und Programmierung ist von dieser Entscheidung abhängig. Ein Beratungsgespräch mit erfahrenen Onlineprofis kann dabei übrigens sehr hilfreich sein.

  Splashscreen, Eventsite, Microsite
Laut, schrill, aber unerhört attraktiv und mutig. Auf dieser Basis lassen sich ganz hervorragend kurzlebige Werbekampagnen realisieren. Alles bewegt sich - alles dreht sich, das Erscheinungsbild und Wording ist aufregend und frech. Eine solche Kampagne besteht nur aus ein paar attraktiven Seiten, hat aber oft eine Halbwertzeit von mehreren Jahren. Sie können diese Zeit z.B. dazu nutzen, um seriöse Inhalte dahinter aufzubauen, falls noch nichts existiert. Eventsites werden heute seltener.

Interessanterweise wurde dieses Konzept früher oft von großen Firmen benutzt, die schon lange im Netz sind. Gerade hier liegt aber die Chance des Mittelstands und kleiner Privatiers ihr Top-Produkt oder eine außergwöhnliche Dienstleistung webadäquat zu präsentieren ohne gleich 20 Seiten ins Internet stellen zu müssen.

Beispiel: www.airy.de
  Klassischer Auftritt
Der Klassiker in Sachen Onlinegeburt: Mit 10-150 Folgeseiten versuchen Sie, die gesamte Kompetenz Ihrer Produkte oder Dienstleistungen vollständig online abzudecken. Seriös und anwenderspezifisch detailliert werden sogar filigrane Feinheiten geklärt. Es gibt FAQs, internationale Email-Formulare und Datenbanken, die gezielt abgefragt werden können.
Auftritte wie z.B. Screendesignshop.de fallen genau in diese Kategorie. Ein oft unterschätzter Faktor ist hier die Pflegbarkeit der Site, die bei späteren Updates und Änderungen die Spreu vom Weizen trennt.

Beispiel: www.a3plus.de
 

Portalsite
Eine Portalsite bündelt mehrere Dienste von einzelnen Webseiten. Früher sahen fast alle bekannten Suchmaschinen so aus. Feste Werbebereiche versuchen die Site zu finanzieren, der Rest besteht aus gezielten Links. Es ist der Versuch, mehr als 500 Folgeseiten einigermaßen verständlich erreichbar zu machen.
Die Navigation und Pflege wird dann als heilig erklärt, alles andere ist sekundär. Ausgewachsene Portalseiten sind auch von erfahrenen Surfern nicht so einfach zu überblicken: Kleine Schriftgrößen und ausgeweitete Textwüsten bestimmen das primäre Erscheinungsbild.

Beispiele:www.mobile.de, www.sueddeutsche.de, www.heise.de


Flashsite
Sound, Videos, Texte und Animation verschmelzen mit Hilfe von Flash bzw. Shockwave zu einer zeitgenauen Filmsynthese im stark komprimierten Format. Viele Browser unterstützen diese Technologie seit vielen Jahren serienmäig. Größte Tücke daran: Fehlt das erforderliche Plug-in, sieht man gar nichts und bei langsameren Rechnern (Net- oder Notebooks) laufen Vollflashanimationen nicht immer ruckelfrei. Flashseiten sehen toll aus, sind aber in Suchmaschinen schlecht oder gar nicht zu finden. Ein weiterer Nachteil ensteht durch die extrem aufwendige Pflege einer reinen Flashseite bei Änderungen oder Updates - und nicht zu vergessen: Die Entwicklung von coolen Spezialeffekten ist oft kostspielig...

Beispiel: www.2advanced.com
    Block
Ein Block ist ein Online-Tagebuch, bzw. ein Journal. Dieses Medium lebt von News und ist perfekt dazu geeignet seine eigenen Ansichten, Meinungen, Darstellungen im Netz zu verbreiten. Interessant ist dies vor allem, weil die Leserschaft oft eigene Kommentare hinterlassen kann und Diskussionen möglich sind. Leider wurde diese Funktion in der Vergangenheit oft dazu genutzt Spam und Unsinn zu verbreiten.

Blocks werden aufgrund der relativ einfach aufzusetzenden Software oft statt eigener Homepage benutzt. Das Redaktionsmodul wird dann mehr oder weniger erfolgreich als Content Management System eingesetzt. Einige Blocks von erfolgreichen Autor|-innen haben sich als Meinungsmacher einen festen Platz im Internet verschafft und werden regelrecht verehrt. Einige Firmen wie z.B. Frosta sezen es gezielt als Marketinginstrument ein.

Beispiele:www.frostablog.de/blog, blog.tagesschau.de
   

Forum
Ein Onlineforum dient dem Austausch von Erfahrungen zu einem speziellen Thema. Es gibt Firmen, die Foren geschickt einsetzen, um den Markt zu beobachten, Kunden zu binden, Neugier zu erwecken oder einfach innovativ zu erscheinen. Gelingt dies hat man ein sehr mächtiges Marketinginstrument in der Hand.

Ein Standard-Forum ist durch zahlreiche Freeware relativ schnell aufgesetzt, aber mühsam zu pflegen: Die Seiten müssen ständig auf Spam kontrolliert werden, unseriöse User müssen gesperrt -, unqualifizierte Aussagen gelöscht werden. Die Administratoren, die für die Inhalte verantwortlich sind haben viel redaktionelle Arbeit. Foren werden deshalb meistens von mehreren Admins betrreut. Eine weitere Schwierigkeit besteht darin, ein Forum mit ganz wenigen Inhalten zu starten. Am Anfangsind ja keine Inhalte da ...

Beispiel: www.schwalbennest.de

Materialien | Workflow