StyleGuide

Zielsetzung & Zielpublikum

Vorstellung

Dieser Blog lautet auf den Namen "Bierwin". Dieser Name hat eine gewisse Ähnlichkeit mit "Bwin", dem international bekannten Wettanbieter aus dem Internet. Dies ist kein Zufall, denn durch den ähnlichen Namen und das ähnliche Design soll man sich den Namen leicht einprägen können.

Zielpublikum

Grundsätzlich richtet sich dieses Medium an alle Mitglieder von Bierwin. Bierwin ist ein Freizeitverein, welcher über das ganze Jahr hinweg  Veranstaltungen durchführt, wie zum Beispiel das traditionelle Maibaumaufstellen. Aber natürlich sollen auch Interessenten, die durch Polo-Shirts, Jacken, Kappen, T-Shirts, Badehosen und diversen anderen Kleidungsstücken auf Bierwin aufmerksam werden, und sich fragen "Was soll Bierwin bedeuten?" einen Einblick in die Szene erhalten.

Absichtserklärung & Ziele

Dieses Medium soll es allen Mitgliedern ermöglichen, Informationen und Resümees über Veranstaltungen einzusehen. Weiters soll es auch allen angemeldeten Usern ermöglicht werden, selbst Blog-basierte Kommentare beizugeben. Außerdem werden alle Fotos und gedrehten Videos für jedermann zugänglich gemacht um auch noch neue Mitglieder anzuwerben.
Der Nutzer soll sich auf dieser Website das Gefühl von Bierwin spüren, nämlich Spaß in Verbindung mit einer Brise Professionalität. Um diese Brise Professionalität einzubringen, verlangt es natürlich einer guten Umsetzung der Ideen auf dieses Medium. Da nichts schlimmer ist, als eine Website die nicht aktuell und nicht editiert wird, sind folgende Maßnahmen für interaktives Arbeiten geplant:

1. User können Kommentare zu den Stories schreiben
2. User können Kommentare zu den Fotos & Videos schreiben
3. neue Kommentare werden sofort auf der Mainseite angezeigt
4. auch die nächsten Termine sind auf der Mainseite einsehbar und
5. auch nicht registrierte User können sich im Gästebuch verewigen

Das Interface-Design

Informationsarchitektur

Die Seite wird prinzipiell in mehrere Bereiche gegliedert. Grundsätzlich gibt es einen Top-Bereich, welcher durch das Logo und die Anmeldung deklariert wird. Dann folgt das Menü und unter diesem befindet sich der Hauptbereich mit den Texten bzw. Bildern. Es gibt sowohl reine Informationsbereiche, als auch Bereiche die auf einen Blog basieren und in denen Kommentare hinzugefügt werden können.

Navigation

Bei der Navigation wird auf eine Subnavigation verzichtet, da alle Menüpunkte ohnehin direkt auf einen bestimmten Bereich verweisen. Das Menü wird aus folgenden fünf Ebenen bestehen: Home, Events, Bildergalerie, Videos und Gästebuch und wird im oberen Bereich horizontal dargestellt.

Inhaltsseiten

Insgesamt gibt es fünf Inhaltsseiten: Home, Events, Bildergalerie, Videos und die Seite für das Gästebuch. Die Home-Seite soll schon einen kurzen Überblick über neue Events, Beiträge und die künftigen Veranstaltungen geben. Unter Events werden die einzelnen Veranstaltungen resümiert und der User soll zu den Beiträgen Kommentare schreiben können. Dassalbe gilt für die Bildergalerie und die Videos: die Bildergalerie soll zunächst die Bilder in einem kleinen Format anzeigen und bei Klick auf das jeweilige Bild in einer extra Seite größer erscheinen. In dieser Extraseite soll es dem User dann wieder erlaubt werden, Kommentare zu dem Foto abzugeben. Das Gästebuch wird ebenfalls mit Hilfe eines Blogs aufgebaut werden.

Wording

Grundsätzlich wird es auf diesem Medium zwei sprachliche Stile geben. Einerseits wird vom Administrator und anderen Usern welche eigens Beiträge verfassen können, schon ein gepflegter und wohlwollend ausgedrückter Schreibstil verwendet. Andererseits wird es von den Usern durch ihre Kommentarebei den Fotos oder Beiträgen wahrscheinlich auch zu nicht ganz professionellen Einträgen kommen, welche sicher auch teilweise in Mundart geschrieben werden.

Startseite

Als Startseite soll eine Animation die Besucher etwas zum Schmunzeln und weiters zum Eintreten bringen.

MultiMedia

Wie schon zuvor erwähnt, wird es auf dieser Website auch Bilder und Videos geben, welche von den eingeloggten Usern kommentiert werden können. Weiters wird auf der Startseite eine Animation eingebunden werden.

Interaktiondesign

Um den Nutzern dieses Mediums auch Gestaltungs- bzw. Bearbeitungsmöglichkeiten zu geben, kann jeder registrierte und eingeloggte User zu den diversen Einträgen seine eigenen Kommentare abgeben. Dadurch soll das Ziel erreicht werden, dass die User täglich einen Blick auf diese Seite werfen. Würde man auf dies verzichten, würde wohl nur einmal pro Monat von dem User auf diese Seite zugegriffen werden. Für einen Gästebucheintrag ist allerdings keine Registrierung bzw. Anmeldung notwendig.

Das Screen-Design

Grundsätzliches

Wie schon zu Beginn erwähnt, ist die namentliche Ähnlichkeit zu "Bwin" durchaus gewollt und aus diesem Grunde, wird auch das Design dieser Site durchaus an den Wettanbieter erinnern.

Layout

Das Fenster ist prinzipiell für 1280x800 designed worden, soll aber auch ohne Probleme für andere Bildschirmauflösungen verwendet werden können. Die Seite besteht einerseits sozusagen aus dem grauen Hintergrund, und andererseits aus dem Hauptteil, welcher zentriert auf dessem liegt und mit runden Kanten optisch etwas geschmeidiger wirkt. Die Länge der Seite soll durch eine Mindestlänge definiert werden, nicht jedoch auf ein Maximum. Das heißt, dass sich die Länge der Seite immer dem Inhalt anpassen soll, je länger der Text, desto länger die Seite. Dadurch soll ein lästiges scrollen innerhalb der Seite vermieden werden.

Typografie und Schrift

Die Gestaltung der Seite soll bis zum Schluss vollkommen ohne Tabellen auskommen, dh das Design wird vorwiegend mit <div> gestaltet. Die Gestaltung eines Beitrages oder Kommentars wird durch einen eigenen gelben Kasten gekennzeichnet, welcher den jeweiligen Beitrag abgrenzt und hervorhebt. Als Schriftart wird "Arial, Helvetica, sans-serif" benutzt und in weiß auf grauem Hintergrund dargestellt.

Farben

Einerseits sind auf dieser Seite starke Eindrücke der Seite "Bwin" zu erkennen, andererseits wird bei genauerem betrachten, doch ein feiner Unterschied zu erkennen sein. So wird auf dieser Seite grundsätzlich auf etwas hellere Farben gesetzt als beim Original, um die Seite etwas freundlicher zu gestalten. Außerdem werden die Beiträge und Kommentare stets durch einen gelben Rahmen gekennzeichnet und auch die Überschriften werden gelb hinterlegt um einerseits abzugrenzen und andererseits hervorzuheben. Die Schriftfarbe wird auf der ganzen Seite einheitlich weiß mit einem Stich ins Graue bleiben.

Icons

Icons werden im Prinzip nur im Menü eingesetzt. Die jeweilige aktuelle Seite und der Mouse-over-Button werden mit einem kleinen gelben Dreieck versehen, damit der Benutzer immer weiß auf welcher Seite er sich gerade befindet.

Grafiken

Es werden in dieser Site folgende Grafiken eingesetzt:

• Logo: der Top-Bereich mit Bierwin
• Anmeldungsbereich: wegen der runden Kanten
• Menüleiste
• bottom-Bereich: wegen runder Kanten und Schattierung unten
• Schattierung rechts

Fotos

Fotos werden hauptsächlich in der Bildergalerie eingesetzt. Diese wird aus jpg-Bildern bestehen und die Fotos sollen bei einem Klick auf die kleineren Vorschaubilder eigens größer geöffnet werden. Außerdem sollen alle Mitglieder Kommentare zu den Fotos abgeben können.

Formatierungen

Um eine gewisse Kontinuität an den Tag zu legen, sollen alle Bereichsformatierungen in den Beiträgen einheitlich sein und werden wie folgt festgelegt:

• Uhrzeit: hh:mm Uhr
• Datum: tt.mm.yyyy
• Währung: € 100,00

Tabellen

Da Tabellen nur wirklich für Tabellendaten verwendet werden sollen und nicht für Gestaltungen wird es nur drei Tabellen geben: die nächsten Termine, die nächsten Veranstaltungen und die Bildergalerie. Hier werden allerdings jeweils die Rahmen der Tabelle unsichtbar sein.

Einheitlichkeit

Die Gestaltung der jeweiligen Seiten wird immer einheitlich sein, das heißt dass sowohl die Schriftart als auch die Schriftfarbe und das komplette Layout einheitlich ist. Grundlegende Veränderungen würden den User nur verwirren.

Schlussbemerkungen

Da aber ein Bild mehr als tausend Worte sagt, gelangt man mit dem nachstehenden Link zum derzeitigen Screendesign: http://collabor.idv.edu/static/0655404/images/design.jpg

Mit dem folgenden Link sieht man die aktuelle Umsetzung des Projekts, allerdings ist bis dato nur das Design (mithilfe von Tabellen) erstellt worden: http://students.idv.edu/~0655404/ss09/dreamweaver/