Semesterprojekt WS07/08 // Anne Dahl David van Stephold // DMP-MD/WS06 // Macromedia Fachhochschule der Medien
n i g h t l i v e . d e
Hiermit versichern wir, dass die vorliegende Arbeit selbstständig verfasst worden ist, dass keine anderen Quellen und Hilsmittel, als die angegebenen, benutzt worden sind . Die Stellen der Arbeit, die anderen Werken dem Wortlaut oder Sinn nach entnommen wurden, sind nur unter Angabe der Quelle kenntlich gemacht worden . KÜln, 28.01.2008
Anne Dahl
David van Stephold
Einleitung Grundidee Zielgruppe Produkteinsatz Fragebogen Recherche Zeitmanagement
7 8 9 10 12 14 16
konzept
Navigation Flowchart Funktionslayout Format Das Logo Typographie Farbigkeit Die Homepage
20 21 22 24 26 28 30 32
umsetzung
Erweiterungen Res端mee R端ckblick
evolution
48 52 54
n i g h t l i v e . d e
konzept
6 | 7
Es ist Wochenende und du hast keine Ahnung wo man abends hingehen kann? Du bist unterwegs mit Freunden und in keinem Club ist wirklich was los? Wird dir ein Club empfohlen und du weisst nicht wo er liegt? Diese Fragen gehĂśren dank unseres Internetauftritts der Vergangenheit an. Egal wo du dich befindest, unsere Internetseite informiert jederzeit Ăźber die aktuellen und angesagtesten Partys der Region und bietet dir die MĂśglichkeit dich von der Karte intuitiv leiten zu lassen...
einleitung
Aufgabe ist es eine Internetseite zu konzipieren und zu gestalten. In erster Linie soll ein Konzept erstellt und nur die Elemente in Flash programmiert werden, die für das Verständnis von Nöten sind.
grundidee
Bei dieser Website handelt es sich um ein Party- bzw. Clubsverzeichnis für, und rund um den Kölner Ring. Der User soll sich auf der Seite anhand verschiedener Komponente über das aktuelle Partyangebot der angesiedelten Clubs informieren können. Hauptbestandteil der Seite ist ein illustrativ gestalteter Stadtplan, der alle Clubs des Bezirks erfasst und den Kölner Ring schematisch darstellt. Des weiteren haben User die Möglichkeit Kommentare und Bewertungen zu den Clubs des Bezirks abzugeben und Fotos der Locations hochzuladen. Der gesamte Informationsbestand wird für jeden Club auf einer Profilseite zusammengefasst, so dass der User alle relevanten Infos zum gewünschten Club auf einen Blick bekommt. (siehe die homepage)
8 | 9
Da unsere Datenbank hauptsächlich Clubs beinhaltet, die die jüngere Generation (16 bis 35 Jährige) ansprechen, wird diese unmittelbar zu unserer Zielgruppe. Im Prinzip richtet sich dieser Webauftritt an alle Nachtschwärmer aus Köln und dem Umland. Jeder Internetnutzer, der sich über das Nachtleben auf dem Kölner Ring informieren möchte, findet auf unserer Seite die passenden Informationen. Insbesondere richtet sich koelnnightlive.de jedoch an User, die Entscheidungshilfen suchen, welcher Club abends besucht werden soll.
zielgruppe
Ist-Zustand
produkteinsatz
Bisher gibt es eine Vielzahl an Internetseiten, die über Clubs vieler Städte Deutschlands informieren. Diese sind meist überfüllt mit Werbung, unübersichtlich, und beinhalten nur die größten Clubs der jeweiligen Stadt. Spezifische Informationen oder Partyfotos muss der User sich oft mühsam auf mehreren Seiten zusammensuchen. Ein weiterer Kritikpunkt des vorhandenen Webangebots ist, dass relevante
Informationen zwar aufgelistet werden, jedoch kein charakteristischer Eindruck der Clubs entsteht. Oft ist nur eine Auflistung des Clubangebots zu finden, die von spärlichen Textinformationen (wie Adressangaben, Links oder Öffnungszeiten) ergänzt wird. Dadurch werden lediglich gezielte Suchabfragen gefördert, und dem Verbraucher keine intuitive Suchmöglichkeit geboten. Unentschlossenen Usern hilft das vorhandene Angebot nicht weiter, und auswärtige User, die die Clubs nicht kennen, können sich höchstens über Fotos einen spezifischen Eindruck der Clubs verschaffen.
10 | 11
Soll-Zustand Anders als andere Seiten, beschränken wir uns nur auf einen bestimmten Bezirk
Clubs schematisch dargestellt. Durch einen MouseOver-Effekt über die als Buttons
einer Stadt und möchten hierfür die bestmögliche Informationen bieten. Unsere Internetseite soll...
definierten Clubs werden zu den jeweiligen Clubs passende Musikstücke (oder Musikmixe) abgespielt, die einen charakteristischen Eindruck vermitteln sollen (siehe die homepage_karte).
..alle für den User relevanten Informationen leicht verständlich und übersichtlich darstellen. ..dem User die Möglichkeit bieten, den vorhandenen Informationsbestand durch persönliche Meinungen und eigene Fotos zu ergänzen. ..dem User die Möglichkeit bieten intuitiv zu entscheiden, welcher Club abends besucht werden soll.
Die intuitive Suche soll zu jedem Zeitpunkt gestartet werden können. Sie macht unsere Website einzigartig und stellt somit das zentrale Element dar. In ihr wird der Kölner Ring, von Barbarossaplatz bis Friesenplatz, mit allen im Bezirk befindlichen
So soll der User auch auf andere, nicht seinem üblichen Geschmack entsprechenden Musikrichtungen aufmerksam gemacht werden. Wir wollen eine Plattform bieten, die den Anwendern eine neue Form des Suchverhaltens ermöglicht.
fragebogen
Diesen Fragebogen nutzten wir zur Orientierung f端r die Arbeit an unserem Projekt. Er half uns wesentliche Dinge nicht zu vergessen und uns von vornherein dar端ber bewusst zu sein, welche Aspekte ber端cksichtigt werden m端ssen.
12 | 13
Was sind die Ziele des Projekts?
Was ist das Alleinstellungsmerkmal – in der Marketing-Sprache „unique selling proposition“ (USP)? (Was unterscheidet den Auftraggeber von seinen Wettbewerbern?)
Wer ist die Zielgruppe (Kunden bzw. Besucher der Site)? Welche Inhalte sollen auf die Site?
Wie sehen die Web-Auftritte der wichtigsten Konkurrenten aus? Haben sie Funktionen, die über das hinaus gehen, was sich Ihr potentieller Auftraggeber vorstellt? Was ist gut, was schlecht?
Welche Funktionen soll die Site haben? Gibt es Vorbilder (positive wie abschreckende) für die gewünschte Produktion?
Welche Bedeutung hat das Web für die Firma? Ein Hersteller von Schuhen beispielsweise wird dem Web eine ganz andere Bedeutung beimessen als ein IT-Unternehmen.
Möglichkeiten für den User zu durchsuchen. Diese Art der Recherche galt unserer Ideenfindung, um Originalität anderen Seiten gegenüber zu gewährleisten. Unser Ziel lag darin Elemente und Dienste zu entwickeln, die uns konkurrenzfähig und einen Besuch auf unserer Seite lohnenswert machen. Zunächst diente die Recherche im Internet der Themenfindung für unser Lehrprojekt. Das Thema Köln nightlive wurde relativ schnell festgelegt. Nun war es daran, die bereits bestehenden Seiten auf Inhalt, Angebot und
Nachdem die Konzeption feststand und die Inhalte klar definiert waren, ging es an die Gestaltung und Festlegung des Designs. Auch hier nahmen wir uns Anregungen und Gestaltungsideen im Internet. Diese Anregungen bezogen
14 | 15
sich hauptsächlich darauf, welche Elemente besser umgesetzt werden könnten, um unser Angebot von der
die Anzahl der angesiedelten Clubs, ihren Namen, Fotos, Clubbeschreibung und Adresse informieren.
Konkurrenz abzuheben.
Ebenfalls an Recherchearbeit viel das Informieren über Programmierprobleme in Flash an. Viele verwendete Action-Script Befehle waren uns vor dem Lehrprojekt noch nicht bekannt und stellten somit eine besondere Herausforderung dar.
Wir versetzten uns in die Lage des Anwenders und definierten klar, welche Absicht dieser hat und was er an Funktionalität und gestalterischer Umsetzung erwartet. Nun wurde beobachtet, wie die bestehenden Partyverzeichnisse die betreffenden Funktionen umsetzten, und welche uns verbesserungsbedürftig erschienen. Zusätzlich zu der Planung und Konstruierung der Seite mussten wir uns über
recherche
Nachdem wir zunächst grob die Einzelbestandteile unseres Semesterprojektes bestimmt hatten, definierten wir einen ersten Zeitplan. Zu Beginn haben wir uns sehr lange mit der eigentlichen Idee und dem grundlegenden Design aufgehalten und den Zeitplan nur wenig berücksichtigt. Wir überlegten, welche Funktionen die Seite überhaupt haben sollte und entwickelten ständig neue Ideen und Designvorschläge (siehe rü ckblick).
zeitmanagement
Nachdem wir ein gemeinsames Funktionslayout erstellt hatten, entwickelte jeder von uns Beiden ein eigenes
Design, woraus letztendlich das Aktuelle entstand. Erst Ende November wurden wir uns über die bevorstehende Arbeit und die dafür verbleibende Restzeit bewusst und begannen strategischer und organisierter zu arbeiten. In dieser Woche aktualisierten wir unseren Zeitplan und nahmen uns vor ihn strikt zu befolgen. Überraschenderweise traten bei der relativ umfangreichen Programmierung keine nenneswerten Probleme auf, so dass unser zweiter Zeitplan ohne Verzögerung eingehalten werden konnte.
16 | 17
01
9
Gestaltung Programmierung Karte Programmierung Homepage
7
9
14 8
21 15
Verkn端pfung der Inhalte Inhalt Dokumentation Gestaltung Dokumentation
4 1
11
15
18 12
25
n i g h t l i v e . d e
umsetzung
navigation
Um die bestmögliche Übersicht zu
Innerhalb der Karte existieren Links, die
gewährleisten entschlossen wir uns die Menüführung so simpel wie möglich zu halten. Die Hauptnavigation besteht aus drei Buttons (News, Clubs und Gallery), die die für den User wichtigsten Informationen umfassen.
die jeweiligen Profile des in der Karte ausgewählten Clubs in den Menüpunkten Clubs und Gallery abrufbar machen.
In einer Nebennavigation werden die Unterseiten mit sekundärer Bedeutung angezeigt. Ein weiteres Hauptelement stellt ein Button in Pfeilform dar, der die bereits angesprochene Karte zu jedem beliebigen Zeitpunkt aufruft.
Ausserdem besteht eine Navigation um die Funktionen der Karte zu steuern, auf die im Punkt die homepage genauer eingegangen wird. Die Inhalte der Nebennavigation und des Pfeilbuttons können jederzeit über einen „schliessen„-Button wieder ausgeblendet werden.
20 | 21
02
Login Gallerie Clubs News Karte
Impressum
flowchart
Clubinfos kommentieren / bewerten
Termininfos
clubs gallery googlemaps
Karte schliessen Ton aus Kartennavigation Clubkurzinfo
Unternavigation
aktuelle Partys Kalenderfunktion
Clubauswahl
Partyauswahl ansehen hochladen
Clubauswahl
Kontakt
03 header logo
hauptnavigation
nebennavigation karte
Funktionslayout der Hauptseiten
content
status
unternavigation
22 | 23
04 kartennavigation
karte
Funktionslayout
clublinks
der Karte
unternavigation
funktionslayout
komponente des jeweiligen Browsers), konzipierten wir die Homepage innerhalb eines „sicheren Bereiches“, so dass sie
format
Bei der Auswahl des verwendeten Format der Internetseite mussten mehrere Aspekte mit in die Entscheidung einbezogen werden, welches Format umgesetzt wird. Da der angezeigte Internetseiteninhalt in den verschiedenen Browserprogrammen auch verschieden groß ist (je nach Größe der einzelnen Interface-
in möglichst vielen Browsern, möglichst vollständig angezeigt werden kann. Da die statistisch am meisten verwendeten Browserprogramme der Internet Explorer und der Mozilla Firefox sind, entschlossen wir uns, das Format für unsere Internetseite an das Graphical User Interface dieser beiden Programme anzupassen. Der nächste Aspekt, an den das verwendete Format angepasst werden musste, war die Bildschirmauflösung
24 | 25
05
997px
der Benutzer der Homepage. Auch hier entschieden wir uns dafür, das Format der Mehrheit der Internetuser anzupassen, die eine Bildschirmauflösung von 1024*768 Pixeln bevorzugt. Geht man von dieser Auflösung aus, ergibt sich aus den Seitenanzeigebereichen der beiden Programme, ein sicherer Bereich von 997*554 Pixeln. Diese Maße gewährleisten, dass alle Infos ohne lästiges Scrollen auf einen Blick erfasst werden können, und die Navigationselemente nicht verschwinden.
554px
prägt sich die Adresse besser in die Köpfe der potentiellen User ein, da sie Bestandteil des Logos ist. Das Logo besteht zentral aus dem Wort „Köln“ und verdeutlicht somit auf den ersten Blick, welche Stadt unser Angebot thematisiert.
das logo
Unter diese Aussage wurde der Schriftzug „nightlive.de„ gesetzt, der die Thematik der Seite genauer wiedergibt und gleichzeitig die Internetadresse des Angebotes visualisiert. Dies bietet einen Vorteil: egal wo das Logo auftaucht, es ist mit der direkten Zugangsadresse verknüpft. Bei einer Werbekampagne,
Das Wort „nightlive“ stellt dabei ein Worstpiel dar, dass den Rezipienten einerseits verdeutlichen soll, dass die Homepage das Nachtleben (Night Life) thematisiert. Auf der anderen Seite steht es aber auch für die ständige Aktualisierung der Inhalte durch die User (Live) und somit für die aktuellsten Neuigkeiten rund um das Thema. (siehe Die Homepage) Der Anfangsbuchstabe des Wortes Köln wurde durch den vom Kartebutton
26 | 2 7
n i g h t l i v e . d e
start
verwendet, um einen hohen Wiedererkennungswert zu erzielen. Wer unsere Homepage und vor allem das, was sie ausmacht (die Karte) schon einmal genutzt hat, wird das Logo mit hoher Wahrscheinlichkeit wieder erkennen. Auch dies bietet Vorteile f체r eventuelle Werbekampagnen. Die Erkennbarkeit des Logos erlaubte uns seine unterschiedlichen Einf채rbungen auf den einzelnen Seiten der Hauptnavigation, ohne dass seine Funktion beeintr채chtigt wird. 06
n i g h t l i v e . d e
n i g h t l i v e . d e
clubs
bekannten Pfeil ersetzt. Auf diese Weise wird im Logo ein von der Homepage bekanntes grafisches Element
n i g h t l i v e . d e
gallery news
06
Im Logo haben wir die Schriftart Neogrey verwendet. Sie vermittelt unserer Meinung nach die Attribute Modernit채t, Style und Eleganz und eignet sich somit ideal, um unser Webangebot zu repr채sentieren. Die Neogrey kommt auch in den Buttons zum Einsatz, sowie im Status-Bereich und in der Karte.
typographie
F체r die drei Unterseiten der Hauptnavigation, wurde im Contentbereich bewusst eine andere Font (Helvetica) gew채hlt
28 | 29
07 um die Karte optisch von den restlichen Inhalten abzugrenzen. Da die Helvetica eine gängige Fließtextschriftart ist, die verschiedene Schriftschnitte beinhaltet und sich optisch gut in das Gesamtbild unserer Website einfügt, haben wir uns für sie entschieden. Für Überschriften innerhalb der Unterseiten sowie für die Buttons der Neben- und Unternavigation wurde der Schriftschnitt Helvetica73 - Extended verwendet. Um einen optischen Kontrast zu schaffen wurde für Fließtext die Helvetica Narrow benutzt.
Neogrey - 12 pt.
Helvetica73Extended - 12 pt.
Helvetica Narrow - 12 pt.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvqxyz 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvqxyz 123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvqxyz 123456789
farbigkeit
Unsere Farbwahl soll das Nachtleben symbolisieren. Der Hintergrund wurde dunkel gewählt, um die Nacht zu repräsentieren. Als Kontrast haben wir drei knallige Farben gewählt, die für das bunte Nachtleben stehen, und Modernität, Leben und Frische vermitteln sollen.
30 | 31
08
233 103 33
169 196 6
128 181 39
#D05C17
#E96721
#A9C406
#80B527
CMYK
news
208 92 23
RGB
clubs
58 2 97 0 43 1 99 0 0 71 92 0 14 73 99 2 67 14 0 0 81 40 3 0
Die Kölner Stadtsilhouette im oberen Bereich der Seite stellt einen Schattenriss dar und ist somit noch etwas
gallery
#49AEDE
Schein in Form eines Farbverlaufs gesetzt, der die Dynamik und Lebhaftigkeit dieser Stadt bei Nacht verbildlichen soll.
73 174 222
jeweils eine Farbe, mit unterschiedlichen Farbtönen zugeordnet. Die Unterschiedlichkeit der Farben gewährleistet, bei häufiger Verwendung, einen hohen Wiedererkennungswert der einzelnen Unterseiten. Um das Design schlicht und übersichtlich zu halten, wurden jeweils nur zwei Farbtöne je Unterseite verwendet. 08
#1582BD
dunkler gehalten als der Hintergrund. Hinter die Silhouette wurde ein heller
21 130 189
Den drei Seiten der Hauptnavigation, und den zugehörigen Buttons, wurde
Startseite Zun辰chst wird durch das Einfliegen der Grundbausteine das Hauptnavigationselement zusammengesetzt. Nun befindet sich das Grundger端st der Men端leiste, bestehend aus Logo, Stadtsilhouette, Pfeilbutton, Hauptund Nebennavigation in der Mitte des Bildschirms. Alle Elemente werden hier in schlichten Grauabstufungen vom Hintergrund hervorgehoben. 09
die homepage
Der Anwender wird nach Eingabe der Internetadresse nicht sofort mit Informationen 端berflutet, sondern kann sich
32 | 33
09 zunächst nur auf die Navigationsmöglichkeiten beschränken. Dadurch, dass alles in eintöniger Farbigkeit erscheint und nur das Menü zu sehen ist, wird der Anwender animiert zu handeln. Die Buttons der Hauptnavigation färben sich bei MouseOver in der Farbe der jeweiligen Unterseite ein. Auf diese Weise werden minimale knallige Farbakzente gesetzt, die das Interesse des Anwenders wecken sollen. Bei betätigen der Buttons färbt sich die Menüleiste in der jeweiligen Farbe ein und die ausgewählte Unterseite erscheint durch eine Animation.
Animation Die Animationen in unserer Webseite dienen unterschiedlichen Zwecken: In erster Linie wollen wir durch sie aber die Lebhaftigkeit unserer Seite (dynamische Inhalte/siehe das Logo)
und des Kölner Nachtlebens verbildlichen. Der Anwender soll optisch
das Logo, der Nebennavigationsbalken und der Pfeil für das Öffnen der Karte.
angesprochen werden, aber auch unterbewusst darauf hingewiesen, dass die Seite sich ständig „in Bewegung„ befindet. Ein weiterer Vorteil der Animationen ist, dass sie unsere Seite vom Konkurrenzangebot abgrenzen.
Aus dem Balken/ der Linie der Nebennavigation entsteht eine weitere Linie. Gleichzeitig während diese in den unteren Bereich der Seite fährt und dort zum Stehen kommt, fährt die gesamte Navigationszeile, die zu Beginn zu sehen war, in den oberen Bereich der Seite. Im zwischen den Abgrezungslinien entstandenen Bereich fliegt nun der Content ein. Ausserdem wird die jeweilige Unternavigation eingeblendet, sowie die Unterseitenbezeichnung im Status-Bereich (siehe Funktionslayout). 03
Der Aufbau der drei Unterseiten der Hauptnavigation erfolgt immer gleich: Zunächst werden die Hauptelemente in der Farbe eingefärbt, die der ausgewählte Button beim MouseOver- Zustand angenommen hatte. Zu ihnen gehören
34 | 35
10 aufzurufen, bzw den Ursprungszustand der Unterseite wiederherzustellen.
Contentaufbau Der Aufbau der Inhalte innerhalb der Hauptnavigation folgt einer grundlegende Struktur, die auf der gesamten Homepage beibehalten wird. Jede Unterseite setzt sich aus drei Rubriken zusammen, von denen jeweils zwei bei Aufruf der Unterseite angezeigt werden. Ăœber die Unternavigation ist es dem User mĂśglich die dritte Rubrik
Die Club- bzw. Kalenderauswahl wird als zentrales Element der Unterseite bei beiden Varianten angezeigt. 10
11
News Wählt der Nutzer den ersten Menüpunkt „News“ aus, folgt die oben beschriebene Animation zum Aufbau des Contents. (siehe Animation) In diesem Bereich erfolgt die Einfärbung
36 | 3 7
12 der Hauptelemente in Grüntöne. Wie der Name des Buttons schon
gewählt, verschwindet „aktuelles„ im rechten Bildrand. Der Ursprungszustand
aussagt, findet der Anwender hier Informationen über die aktuellsten Szene-News. Diese werden innerhalb der ersten Rubrik „aktuelles„ im Contenbereich angezeigt. 11 Die zentrale Rubrik stellt die Kalenderfunktion („eventkalender„) dar. Über sie kann der User Newsbeiträge nach Datum kategorisiert abrufen. Diese erscheinen innerhalb der Rubrik „dates„, die auch über die Unternavigation angewählt werden kann. Wird „dates„ aufgerufen oder ein Datum im Kalender
ist über die Unternavigation wieder herstellbar. Im Gegensatz zu den anderen beiden Unterseiten der Hauptnavigation können die Inhalte in „News„ nicht von den Usern bearbeitet werden, sie werden vom Betreiber der Seite aktualisiert. 12 (siehe Das Logo)
13 Clubs Die Unterseite Clubs wird in Orangetönen dargestellt. Das zentrale Element stellt die Rubrik „clubs„ dar, in der alle Clubs unserer Datenbank alphatisch aufgelistet werden. Wird ein Club aus dieser Liste angwählt, erscheinen in der ersten Rubrik alle Informationen zu dem ausgewählten Club. 13 Diese Informationen setzten sich zunächst aus einem Bild der Location, den wichtigsten Daten zum Club, einer Kurzbeschreibung und einer Durchschnittsbewertung anhand von Sternen
zusammen. Je nach Anzahl der eingefärbten Sterne kann der Anwender erkennen, wie die Durchschnittsbewertung des Clubs, durch die User, ausgefallen ist. Die wichtigsten Daten zum Club werden durch den Clubnamen, die Anschrift, und ein besonderes Angebot (z.B.: 21:00 h Freibier) gebildet. Anhand dieser Informationen, die auf den ersten Blick wahrgenommen werden sollen, kann der User sich sofort einen Eindruck verschaffen, ob der Club für ihn interessant scheint oder nicht. Unterhalb diesen ersten Infors befinden sich die Userbewertungen und -kommentare,
38 | 39
14 die die Meinungen der Community zum Club wiederspiegeln. Möchte nun ein Anwender einen Club bewerten, ist dies über die Unternavigation möglich. Bei Auswahl wird die „info„-Rubrik von der Rubrik „bewerten„ aus dem rechten Bildrand geschoben. In dem erscheinenden Bewertungsformular kann der User anhand verschiedener Kategorien den jeweils ausgewählten Club auf einer Skala von ein Stern bis fünf Sterne bewerten. 14 Zu bewerten sind Musik, Publikum, Location und Preise. Aus den Bewer-
15 tungen ergibt sich eine Durchschnittsbewertung, die dem User angezeigt wird. Darunter befindet sich ein Button
Clubs in der Rubrik „info„ hinzugefügt. Wenn man nun seine Eingaben beendet hat, kann man über die Unternavigation
„Bewertung abschicken“. welcher sich durch einen orangenen Kasten hervorhebt.
wieder in die Rubrik „info„ switchen. Die Clubliste und der info-Bereich schieben sich zurück zu ihrer Anfangsposition. 13
Zusätzlich zu der Vergabe der Sterne, kann der Anwender auch einen bewertenden Kommentar verfassen. Dafür müssen zunächst Basis-Angaben wie Name, Alter und Stadt gemacht werden. Nach verfassen des Kommentares kann er diesen wiederum über einen Button abschicken. Diese Informationen werden kurze Zeit später der Profilseite des
In diesem Unterkapitel und bei „gallery“ tritt der Fall ein, dass der Inhalt größer ist als der vorgesehene Bereich. Hierfür haben wir einen eigenen Srollbalken in die betroffene Rubrik eingefügt, durch den sich lediglich der Text verschieben lässt und die Homepage ihre normale Struktur und Position beibehält.
40 | 41
16 Gallery Bei Auswahl des Buttons „gallery“ erscheint die zugehörige Unterseite in Blautönen. 16 Hier besteht die Möglichkeit, ähnlich wie bei Clubs, in der Hauptrubrik zunächst einen Club auszuwählen.(siehe Clubs) Bei Mouseover über die einzelnen Clubs erscheint eine kleine Infobox, indem alle zum Club gehörigen Gallerien nach Datum sortiert aufgelistet werden. Wählt man nun eine Gallerie aus, erscheinen die zugehörigen Fotos im rechten Contentbereich. Es wird zunächst das erste Foto der Gallerie dargestellt.
17 Darunter befinden sich Navigationselemente in Form von Zahlen und Pfeilen,
evtl. einen Kommentar angeben und kann schließlich die gewünschten Fotos
die das switchen zwischen den Fotos ermöglichen. Oberhalb der Fotos wird der Club-/ Partyname und das jeweilige Datum angezeigt.
über einen Button hochladen. Die Fotos werden nach kurzer Zeit dem Inhalt in der Rubrik „gallery„ hinzugefügt, die wiederum über die Unternavigation abrufbar ist. 17
Möchte man nun zu einem Club eigene Bilder hochladen, ist dies wieder über die Unternavigation möglich. Nach betätigen des Buttons „Fotos hochladen„ erscheint die zugehörige Rubrik. Die Fotoanzeige wird ausgeblendet. Im Upload-Formular muss der User zunächst Name, Stadt, Gallerytitel und
42 | 43
Karte Wie schon mehrmals angedeutet ist die
ligen Unterseite von der sie aufgerufen
sich eine Art Unternavigation, die das
Karte zu jedem Zeitpunkt abrufbar.
wurde. („News“=grün, „Clubs“=Orange, „Gallery“= blau). Bei klicken des Pfeilbuttons wird der Content der Unterseite durch den Inhalt der Karte ersetzt. Ausserdem verändert sich die Bezeichnung der jeweiligen Unterseite im Status-Bereich zu „karte„.
schliessen der Karte und das stoppen der abgespielten Musik ermöglicht. Neben der Karte bestehen zwei weitere Navigationselemente: Im oberen Bereich befindet sich eine Möglichkeit um zwischen den vier Orientierungspunkten der Karte (in Form der Plätze Barbarossaplatz, Zülpicher Platz, Rudolfplatz und Friesenplatz) zu switchen. (siehe Funktionslayout) Auf dieser „Minikarte„ wird der Name des jeweils ausgewählten Platzes ausgeblendet und durch einen farbigen Punkt ersetzt,
Der Pfeilbutton, der sie aufruft, stellt eines der Elemente dar, die die Startseite aufbauen. Innerhalb der einzelnen Unterseiten rückt der Button an die rechte obere Ecke des Contents und überdeckt diesen zum Teil. (siehe Animation) Je nachdem von welcher Unterseite aus die Karte aufgerufen wird, steht die Farbgebung der Elemente innerhalb der Karte in Einklang mit der jewei-
Durch Animationen wird der Inhalt der Karte aufgebaut, die in drei Bereiche aufgeteilt ist: Im Hauptfenster befindet sich das zentrale Element, die eigentliche Karte. Im unteren Bereich befindet
18 der sich in vergrösserter Darstellung auch im Hauptfenster befindet, und dort den genauen Lagepunkt des Platzes innerhalb der Karte visualisiert. Dort findet sich auch der Names des ausgewählten Platzes wieder. Wird innerhalb der Minikarte ein Platz ausgewählt rückt der Fokus im Hauptfenster auf den jeweils ausgewählten Standpunkt. 18 Unterhalb dieser Minikarte erscheinen bei Mouseover über einen Club innerhalb der Karte die zum Club passenden Informationen und Verlinkungen. Im Einzelnen beinhalten diese den Namen
44 | 45
19 des Clubs, die Durchschnittsbewertung der User in Form der Sterneskala
Club stoppt die vorherige Musikwiedergabe und der Musikmix des aktuell
Aktualität der Inhalte zu gewährleisten. Freitags wird bei CLub X beispielsweise
und Links die die passenden Seiten in den Hauptmenüpunkten clubs und gallery aufrufen. Zusätzlich besteht die Möglichkeit über einen Link zu googleMaps die Lage des jeweiligen Club dort zu orten. 19
angewählten Clubs wird abgespielt. Dadurch wollen wir den Usern ermöglichen, sich über eine unkonventionelle Art und Weise über das Clubangebot zu informieren und intuitive Entscheidungen zu fällen. Da viele Clubs regelmässige Themenpartys und spezielle Events anbieten, könnten, durch Rücksprache mit den Clubbetreibern und -DJ´s, mehrere Musikmixe pro Club in der Datenbank gespeichert werden. Diese würden dann wochentags- bzw. datumsspezifisch abgespielt werden um die
ein Zusammenschnitt des Haus-DJ´s abgespielt, während Samstags der Sound des Künstlers, der an diesem Abend einen Autritt hat, erklingt.
Bei MouseOver über die Clubs kommt auch die zentrale Funktion unserer Website zum Vorschein: Es wird ein kurzer, für den Club repräsentativer Musikmix abgespielt. Geht der User mit seiner Maus über den nächsten
n i g h t l i v e . d e
evolution
Um die Erreichbarkeit unseres Angebotes auch durch mobile Empfangs-
erweiterungen
geräte zu gewährleisten, könnte die Webseite mit geringen Modifikationen auch für Handys umgesetzt werden. Denkbar wären zwei verschiedene Varianten, die jeweils die Technik der älteren und der neueren Handygenerationen berücksichtigen. Für Handys der älteren Generation würde sich eine Reduktion der Funktionen auf die Auswahlpunkte der Hauptnavigation und der Karte anbieten. 21 Für die Handys der neueren Generation mit grösserem Display (z.B. iPhone)
48 | 49
20 könnte von einer Reduzierung der Inhalte abgesehen werden, es müsste lediglich das Layout an die Bildschirmauflösungen angepasst werden. 20 login
|
impressum
|
n i g h t l i v e . d e
Durch den Abruf auf mobilen Endgeräten hätten die User die Möglichkeit, selbst unterwegs oder noch vor Ort in der Kölner City unser Angebot zu erreichen. Dadurch würden vor allem Nutzer bedient, die sich zunächst in einer Bar mit Freunden treffen und die weitere Planung des Abends auf die späten Abendstunden verlegen.
news
so könnte eine Umsetzung unseres
Clubs Primeclub Hallifax Anne Claude Djdjkeneu Ding Joghurt Oschka Hallibum Kancker Stiefel Flotter Zum Miche Braunsfeld Macrom CAfé Kuchen Tee Joga Kaputt Logo Hannibal Timos Cafe Coconut
Angebotes für das iPhone aussehen
gallery
clubs
gallery
Zum Miche- Freibierparty- 20.05.06
Freibierparty- 20.05.06 Freibierparty- 25.05.06 Freibierparty- 25.05.06 Freibierparty- 25.05.06
01 02
Fotos hochladen
03
04 ...10
kontakt
21 Loginbereich Damit der Besuch unserer Seite nicht
n i g h t l i v e . d e
news clubs gallery privileg
barbarossaplatz
e
ub
cl
nd
e
beehive
s
ro
o rla re e te nd o w
s
ub
cl
ll
he
m
s
ri
für gängige Handybildschirme
e
p
lu
b
Neuordnung der Interfacekomponenten
friesenplatz
stereo wonderland > clubprofil > gallery > googlemaps
rudolfplatz zü lpicher platz barbarossaplatz
einmalig bleibt, wollen wir mittels eines Loginbereichs und den dadurch gegebenen zusätzlichen Möglichkeiten möglichst viele User für unsere Seite gewinnen. Durch die Registrierung auf unserer Seite bekäme der Nutzer verschiedene weitere Optionen. Neben den gängigen Community-Funktionen wie Messaging-System, Userprofilseiten oder ein Forum hätten registrierte User die Möglichkeit verschiedene Clubs zu einer persönlichen Favoriten-
50 | 51
liste
hinzuzufügen.
Anhand
dieser
würden dann Newspakete seiner Top5-Clubs abonniert werden, die ihm dann, wahlweise per e-mail oder SMS, an bestimmten Daten, oder bei speziellen Anlässen, zugesendet werden. So ist er immer auf dem aktuellsten Stand und verpasst keine Party. Ausserdem wird registrierten Usern das Eingeben der Basisinformationen bei den Uploadund Kommentierungsformularen erspart. Sobald er eingeloggt ist, werden diese Angaben automatisch ausgefüllt. 21
Cluberweiterung Sollte unser Angebot hohen Zuspruch bei den Endverbrauchern entwickeln, wäre eine Aufstockung des Clubangebots in allen Themenbereichen denkbar. Im Optimalfall könnte die Webseite das Angebot aller Clubs in Köln und der Großdiskos im näheren Umkreis umfassen. Diese Möglichkeit haben wir uns auch durch die Regionsbezeichnung im Logo (und der web-adresse) offen gehalten.
resumee
Was wir am meisten aus diesem Projekt mitnehmen, neben der Arbeitser-
sehr hilfreich sein kann und ist. Dies wurde uns zum Vorteil, sodass wir trotz
fahrung, ist die Erkenntnis, wie wichtig Absprachen und genaue Strukturierung der Arbeitsabläufe für ein gelungenes Projekt sind. Aus unserer anfänglichen gediegenen Einstellung entwickelte sich zum Glück sehr bald ein strukturierter Arbeitsplan mit klaren Aufgabenbereichen. (siehe Zeitmanagement) Gelernt haben wir dadurch, dass vor allem ein gut durchdachtes Zeitmanagement, mit realen Einschätzungen und Berücksichtigung anderer Faktoren,
2 Wochen Ferien, in denen wir uns nicht treffen konnten, kaum Probleme bekamen an unserem Projekt zusammen zu arbeiten. Zu Beginn jedoch war die Aufteilung nicht so einfach zu gestalten, zumal wir nur 2 Personen waren und unsere Interessengebiete ähnlich liegen. Dies machte sich vor allem beim grundlegenden Design bemerkbar, wo wir zunächst unterschiedlicher Meinung waren und lange Zeit benötigten, bis
52 | 53
wir einen Kompromiss gefunden hatten. Alle Arbeitsprozesse (siehe Zeitma-
schnell definiert. Die Herstellung aller Zusammenhänge zog sich jedoch länger
Wissensstand dazugewonnen. (siehe Recherche)
nagement) wurden so eingeteilt, dass wir beide zu unterschiedlichen Zeiten an allen Arbeitsschritten beteiligt waren. Im Gegensatz zum vorherigen Lehrprojekt bestand keine klare Aufgabenteilung, wodurch viele Arbeitsprozesse erschwert wurden.
hin, als in unserem Zeitmanagement eingeplant. Die Hauptproblemfelder lagen darin, die Elemente, unsere Gedanken und Assoziationen so in Worte zu verfassen, dass sie dem Leser klar werden.
Insgesamt sind wir selber sehr zufrieden mit dem Ergebnis unserer Semesterarbeit und denken, dass wir trotz der knappen Zeit und allen widrigen Umständen sehr viel geleistet haben.
Als weiteres und wohl größtes Problem, nach der praktischen Umsetzung, stellte sich für uns das Verfassen der Dokumentation. Die Orientierungspfeiler der Doku waren
Erfolgserlebnisse erfuhren wir vor allem in der Programmierung unserer Homeage. Probleme die sich ergaben haben wir selbstständig durch Foren im Internet und Fachbücher bewältigt und haben so viel zu unserem vorherigen
.. ruckblick
54 | 55
56 | 5 7
58 | 59