Design und Aufbau

Der Internetauftritt ist das Gesicht des Unternehmens. Das Image wird heute darüber transportiert. Das richtige Werkzeug zur Gestaltung des Internetauftritts und zur Integration der Daten ist daher wichtig.

Alle publizierbaren Objekte sind standardisiert. Es werden keine Inhalte mit "Templates" oder ähnlichem Eingefügt. Jedes Objekt im System verfügt über ein standardisiertes und hochdynamisches Frontend.

  • Der Internetauftritt verfügt über eine moderne grafische Gestaltung
    • Die Seite arbeitet mit einem dynamischen 12-spaltigen Gestaltungsraster (Grid). Diese übersichtliche, strukturierte Anordnung aller Inhalte entspricht dem höchsten, aktuellen Stand der Technik.
    • Die Inhalte z.B. der TagCloud werden in einem ansprechenden Applikationsstyle dargestellt.
    • Mit „Arial“ setzt der Internetauftritt auf eine der weltweit am meisten verbreiteten Standardschriftarten. Damit wird der Punkt "Robust" im WCAG-Standard gewürdigt.
    • Die Programmbereiche können auf drei unterschiedliche Arten dargestellt werden. Die Darstellung der Programmbereiche hat eine edle Kacheloptik. Die einzelnen Kacheln reagieren auf den Mauszeiger und heben die ausgewählte Kachel hervor.
    • Die Abstände zwischen den einzelnen Seitenelementen sind optimal aufeinander abgestimmt, wodurch die Seite übersichtlich und ruhig wirkt.
    • Darstellungsattribute (Hintergrund, Minimale Höhe, Darstellungsart usw.) stehen für alle Inhalte zur Verfügung.
    • Das moderne, cinematische Layout des Fußbereichs ist vom Abspann in  Filmen inspiriert. Im Fußbereich können  individuelle Inhalte hinterlegt werden, die dann auf jeder Seite erscheinen.
  • Multimediale Gestaltung
    • Inhalte und Teaser sind mit Micro-Animations lebendig gestaltet.
    • Alle Bilder werden automatisch skaliert und in der optimalen Größe dargestellt. So werden auch große Fotos immer vollständig im sichtbaren Bildschirmbereich angezeigt. Wird ein Bild in voller Größe dargestellt, skaliert das System dieses Bild automatisch auf 80% der sichtbaren Fläche (Viewport).
    • Die Darstellung der Bilder wird automatisch auf das Umfeld angepasst. Damit die Bilder sich klar vom Hintergrund abheben, werden sie automatisch mit einem sehr dezenten Schatten versehen. Als Effekt erlangt man aber automatisch eine deutlich verbesserte Tiefenwirkung
    • Logos, Icons und Grafiken werden immer vollständig dargestellt und nicht automatisch zugeschnitten.
    • Alle Elemente des Internetauftritts können durch Hintergrundbilder und -videos optisch aufgewertet werden.
    • Hintergrundbilder werden nach dem Laden animiert (Cinematic-Effekt, langsames Hereinzoomen). Damit wird jedes Bild zu einem kleinen Video.
    • Hintergrundbilder oder -videos wechseln mit einer Animation / Überblendung. 
    • Das „Album“ zeigt alle enthaltenen Fotos in einer Miniaturvorschau an. Das Vorschaubilder ist "strahlen" hervorgehoben. Mit diesen Mikroeffekten erreichen wir eine sehr hohe Qualitätsanmutung. Im Bildbetrachtungsmodus (Vollansicht) können alle Bilder im Album per Klick, Pfeiltasten oder per Scrollbewegung betrachtet werden.
  • Teaser
    • Teaser enthalten keine funktionale Elemente wie z.B. Links oder Formulare. Damit ist das Design robuster und der Benutzungsprozess besser gewürdigt.
    • Die Veranstaltungs-Teaser enthalten die wesentlichen Informationen inkl. Belegungsanzeige. Der Teaser enthält automatisch das Bild der Veranstaltung oder eine Platzhaltergrafik. darüber hinaus können Hintergrundbilder eingebunden und so die Darstellung deutlich hervorgehoben werden.
    • Für den Kontakt-Teaser gibt es zwei unterschiedliche Darstellungen.
    • Die Darstellungsart „Zusammenfassung“ ermöglicht aufklappbare Artikel (z. B. für FAQs).
  • Detailseiten
    • Die Detailseite der Veranstaltung  ist optisch ansprechend, übersichtlich (Textdarstellungen, Bilder, Anmeldebereich, etc.) und auf den Buchungsprozess optimiert.
  • Kopfleiste, Navigation und Suche
    • Die Kopfleiste wird beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben in kompakter Form eingeblendet. Sie kann alternativ am oberen Bildschirmrand fest „angeheftet“ werden (sticky header).
    • Die Hauptnavigation ist mit ansprechenden und leicht verständlichen Icons bestückt.
    • Die Suche ist in der Hauptnavigation immer sichtbar und somit immer direkt erreichbar.
    • Im Kopfbereich wird der Warenkorb dargestellt und ist auf allen Seiten verfügbar (WCAG Robustheit).
    • Der Internetauftritt verfügt über eine schnelle und effektive Suche über alle Inhalte der Seite. dabei reagiert die Suche auch auf hinterlegte Schlagworte.
    • Der Navigationspunkt "Suche" dient der Anzeige des Suchfeldes und der Darstellung des Programms. Ist die Suche auf der Startseite eingebunden, wird sie offen dargestellt. 
    • Die Suchfilter sind grafisch als übersichtliche Leiste dargestellt. Die Filter nach Tagen, Tageszeiten und Orten sind direkt verfügbar. Komplexe Filter sind in der Suche nicht erforderlich, da durch eine intelligente Darstellung der Suchergebnisse und einfache Filter bereits beste Suchergebnisse erreicht werden.
    • Die Suche reagiert semantisch und „weiß“ in vielen Situation wonach der Benutzer sucht. Wird z. B. nach "Yoga" gesucht und existiert ein Programmbereich mit diesem Namen, wird dieser direkt offen dargestellt. Die Suche listet neben Veranstaltungen und Programmbereichen auch Kontakte (Honorarkräfte, Mitarbeiter) und redaktionelle Inhalte.
  • Dynamik mobiler Darstellung
    • Auf Unterseiten wird die Suche bei der Darstellung auf mobilen Geräten automatisch auf einen Navigationspunkt  "Menü" verkleinert. Diese kleine, platzsparende Navigation wird prominent dargestellt und ist einfach zu klicken.
    • Die Applikation „Karte“ passt Positionen von Kartenpunkten dynamisch an die Darstellungsgröße des Kartenbildes an.