Konzeption Hochseilgarten Skyloft

Monique Hahnefeld Nr. 107/3505554
Dokumentation
Arbeitsplanung
Musterentwürfe
Parcoursplan

Aufgabenstellung:
Für die KletterKult GmbH soll ein Internetauftritt erstellt werden, in der ihr Hochseilgartens
„skyloft“ sich präsentiert und informiert. Die 5 Parcours sind das Highlight
des Angebotes von Skyloft. Um das Interesse des Besuchers für die Parcours
zu wecken und darüber zu informieren soll der Parcourplan mit bestimmten
Funktionen und Vorgaben gestaltet werden.
Vorgaben zur Seite „Touren“ und zum Parcouroplan
Rollover: Alle Stationen des
Parcours werden angezeigt
Klick: Farbliche Hervorhebung
bleibt erhalten + Anzeige des
Infotextes
Rollover über Linien der Stationen
des ausgewählten Parcours
mit dem dazugehörigen
Infotext
Icons für Kreuzungsplattform
und normale Plattform erstellen
Mitgeliefertes Material: Logo, Texte, Fotos
Parcours
Plangrafiken erstellen
und in Plan einfügen
Legende
-Magischer Zirkel
-Silbener Pfad
-Mammut Tour
-Adlerhorst
-Flying Circus
A-Grillhütte
B-Teich mit Fluss
C-Kinderspielplatz
D-Shop und WC
E-Eingang
F-Parkplatz

Analyse des Themas um auf ein Gestaltungssystem
hinzuführen:
Das Angebot von Skyloft unterteilt sich in drei Bereiche
Familie & Freizeit
-für Kinder ab 6 - 14Jahren
-Geburtstagsfeiern
-Grillen an der Blockhütte
-Schulen: pädagogische
Vor-/Nachbereitung
der Klasse
Die Zielgruppe bilden demzufolge alle abenteuerlustigen Menschen von Schulgruppen,
Familien, über blutige Anfänger bis hin zum Profikletterer.
Was ist ein Hochseilgarten?
Ein Hochseilgarten ist ein gesagt ein Abenteuerspielplatz auf Baumkronen mit Seilkonstruktionen,
Plattformen und Hindernissen die es zu überwinden gilt.
„In einer Höhe zwischen 8 und 15 Metern bewegen Sie sich von Baumkrone zu Baumkrone,
von einer Plattform zur nächsten. Sie balancieren über Balken, Baumstämme, Taue und
überwinden schwingende Seilkonstruktionen.“ (Quelle:gelieferter Text für Start-Seite)
Worum geht es in Kletterparks?
Firmen & Incentives
-Managertraining
-Teamfähigkeit schulen
-Mitarbeiter, Kollegen
Freunde
Proficliber
-Profis
-für Nervenkitzel, Ausdauer,Herausforderung,
Geschicklichkeit
» um schwindelerregende Höhen
» Überwindung von Grenzen
» Gefühl von Freiheit
» Herausforderung, über sich hinauswachen, sich seinen Ängsten stellen, Selbstbewusstsein
steigern
» neue Horizonte entdecken
» Kraft, Ausdauer, Geschicklichkeit
Welche Empfindungen verbindet man damit?
» Mut
» Abenteuerlust
» Spaß
» Spannung
» Freiheit
Was für Metapher oder Symbole eignen sich?
» hohe Bäume, Baumkronen
» Himmel, Wolken
» Luft, Bewegung, Geschwindigkeit
» Seile
» Karabinerhaken
» Balancierende Menschen
» Plattformen
Welche Farben passen dazu?
Es geht weniger darum die Stille der Natur zu genießen, sondern vielmehr darum die
Abenteuer in der Natur zu erleben. Sich selber erleben, neu erfahren indem Grenzen überwunden
werden. Aktivität, Adrenalin und Nervenkitzel.
Es geht vorwiegend darum aktiv zu werden, den Besucher der Website zu animieren und
ein Vorgeschmack für das Abenteuer zu liefern. Mit aktiven, leuchtenden Farben lässt sich
das Thema gut unterstreichen. Besucher der Website werden dadurch angesprochen aktiv
den Inhalt der Seite zu erleben. Ihnen werden nicht die Schrift und der Inhalt auf zurückhaltenden,
passiven Farben vorgelegt. Leuchtende Farben aktivieren den Geist, genauso
wie Bewegung und Abenteuer.
passive Farben
aktive Farben

Konkurrenzanalyse:
Über google lassen sich sehr viele Mitbewerber von Skyloft finden, über Suchbegriffe wie
„Hochseilgarten“ und „Skyloft“.
Im Harz:
www.skyrope.de – Ist nicht nur namentlich ähnlich, sondern hat auch die gleiche Farbe
im Logo. Als zweite Farbe hat Skyrobe Orange. Daher wird auf jeden Fall von Orange im
Layout abgesehen.
www.harz-hochseilgarten.de
www.thale.kletterwald-erleben.de
www.harz-paradies.de/FamilienspassimHarz/HarzFreizeitparks.htm
www.hochseilgarten-finden.de
Deutschlandweit:
www.highspirits-kiel.de – Highspirits hat einen schönen Header mit Animation
www.kletterwald-scharnebeck.de – Hat ein sehr gutes Konzept und auch ein Parcoursplan
www.kletterwald-leipzig.de – hat ein sehr individuelles Design
www.syntura.de –Schwarz und Grün als Layoutfarben
www.naturaktiv-gd.de – Sehr modern und frei mit den Farben Grün und Pink
www.eventurepark.de
www.erlebnis-waldseilpark.de – Schönes Design aber zu ruhig für dieses Thema
http://elchristo.de/kletterparks.html
Der Großteil der Mitbewerber verwendet zurückhaltende Naturtöne. Die Hochseilgärten
verwenden oft einen Menschen am Seil als festes Gestaltungselement des Layouts. Die
Fotos sind denen der Mitgelieferten im Großen und Ganzen ähnlich.
FAZIT: kein Orange als zweite Farbe, kein Menschen am Seil als Layoutelement, professionelle
Bearbeitung der Fotos, keine Ähnlichkeit mit diesen Seiten.
Lösungsvorschlag
Erste Ideen und Skizzen:
Menüpunkte und dazu passende Fotos:
(Bezugnehmend auf die gelieferten Texte)
Start:
Touren:
Preise & Zeiten:
Impressum:
Angebote:
-Familie & Freizeit
-Firmen & Intencives
-Proficlimber

Layout und Reinzeichnung:
Typografie
Logo-Schrift-Analyse:
Schriftfamilie „Harlem“ ist futuristisch und schwungvoll.
Großer Kontrast zwischen Grund und Haarlinie, schwungvolle Linienführung, hartes
auslaufen der Buchstaben zeichnet diese Schrift aus.
Schriftwahl
Die Auswahl der Schrift ist auf die „Humanst521 BT“ gefallen, da Sie einen Ausdruck
von Leichtigkeit und Eleganz hat, dabei jedoch nicht untergeht neben dem Starken
Charakter der „Harlem“
Lesbarkeit – Schriftgrade
Überschrift 1
Überschrift 2
navigation
aktiver link
hover link
LINK Hervorhebung
Subnavigation
Fließtext
Raumaufteilung
NAVIGATION LOGO
ÜBERSCHRIFT
FLIEßTEXT
Leserichtung
EYECATCHER
DES HINTER-
GRUNDFOTOS
Hier ruht das Auge
kurz, bevor es zur
nächsten zeile wechselt.
Daher hat dieser
Bereich die größte
Aufmerksamkeit
Der Eyecatcher
führt den Betrachter
zu der
Information

Die Navigation befindet
sich klassisch im oberen
Bereich der Webseite.
Die rote Fläche in
der aktive Menüpunkt
wiederholt
wird führt zum Menü
zurück.
Die Überschrift befindet
sich auf einer imaginären Linie
zum Eyecatcher des Hintergrundbildes.
Das Auge
wird von der Überschrift auf
den Fließtext gelenkt.
Das Logo sollte von den Benutzergewohnheiten
ausgehend
zwar auf der linken Seite stehen.
Nach sorgfältiger Abwägung
ob diese Platzierung noch den
heutigen technischen Anforderungen
entspricht und zwingend
notwendig ist, fiel die
Entscheidung zu Gunsten der
Originalität aus.
Diese Position liegt außerdem
in dem Bereich des Bildschirms
der vom Betrachter am meisten
Aufmerksamkeit bekommt.
Das Logo wurde im Rechten Bereich Platziert, weil
es da spielerisch zum symbolischen Bestandteil des
Navigationsparcours eingesetzt wird.
Da Webseiten heutzutage üblicherweise Zentriert
ausgerichtet sind im Browser, wird das die Usability
nicht beeinträchtigen.
Der Eyecatcher des Hintergrundfotos
befindet sich ebenfalls
in dem Bereich, der nach
den Erkenntnissen der
Wahrnehmung hohe Aufmerksamkeit
gewinnt.
Dieses System mit gleicher
Position des Eyecatchers ist einfach
und kann mit mindestens
zehn Fotos der gelieferten
Dateien umgesetzt werden.
Dieser Bildaufbau wiederholt
sich auf allen Seiten mit
Ausnahme der Seite Touren.
Der darin erscheinende
Parcoursplan benötigt mehr
Raum um übersichtlich zu
bleiben (siehe Raumaufteilung
).

Anhang
Arbeitsplan
Screenshots:
Start
Angebote
Touren
Preise & Zeiten
Impressum
Arbeitsplan
Arbeitsplanung
für den 21.12.2010
Arbeitsschritt Beschreibung Zeit in Minuten
Exportieren der Bilddaten aus Photoshop 60
Erstellen der xHTML Grundstruktur mit Grundformatierung (CSS) 120
Anlegen der Unterseiten (ohne Touren) in xHTML 30
Anlegen des Parcoursplanes in xHTML 60
Programmierung der Rolloverfunktionen 60
Prüfen und Bugfixing 90
Brennen der Daten und Drucken 0

Musterentwürfe
als Screenshots

Impressum
Verantwortlich für diese Seiten: Monique Hahnefeld /107/3505554
Abschlussprüfung Mediengestalter Winter 2010/11
Aufgabenstellung: Zentral-Fachausschuss
Berufsbildung Druck und Medien
Wilhelmshöher Allee 260
34131 Kassel
Farbschehma:
Logo-Farben-Analyse:
Blau:
Verbindung zum Himmel, Freiheit, Leichtigkeit
Grau:
- Gestein des Harzes Tonschiefer(Dunkelgrau), Grauwacke(Mittelgrau), Granit(Hellgrau)
Weiß ist gut, weiß wie die Wolken am Himmel oder die blendende Sonne.
Grau ist nützlich als neutrales Zwischenelement, auch zur Wiederholung der Logo-
Zweitfarbe im Layout.
Das Hauptfarbschehma setzt sich also aus dem Blau und Grau des Logos, sowie Weiß
zusammen. Die Fotos werden sehr farbenreich aufbereitet und gegebenenfalls angemessene
Farbakzente gesetzt um die vorher erwähnte aktivierende Stimmung zu
erreichen. Möglich wären ein sattes Braun, Rot, Grün, Gelb.