Marcus Weblog

3. Aufgabe Style-Guide
1. Zielsetzung und Zielpublikum
2. Interface-Design
3. Screen-Design
1. Zielsetzung und Zielpublikum
1.1 Zielpublikum
Vorrangig für mich selbst, sowie für alle Interessierten (des Kurses PIM und auch nicht Collabor-User)
1.2 Erwartungen der Nutzer
Die Nutzer erwarten sich eine übersichtliche Seite, mit einfacher Navigation zum finden ausgewählter Themen sowie einfaches lesen auf der Seite ohne die Beiträge
ausdrucken zu müssen.
1.3 Absichtserklärung
Die Seite soll einen Lernblog repräsentieren wo vorwiegend ich meine Lernfortschritte des Kurses PIM sowie andere Kurse, welche einen online Lernblog benötigen dokumentieren kann. Auch andere Nutzer sollen an meinen Dokumentationen teilnehmen können (lesen und kommentieren).
1.4 Ziele
Chronologische Dokumentation des Lernerfolgs sowie der Aufgaben.
Nachlesen und finden aller Beiträge mit einfacher Suchfunktion.
Kommentieren der Beiträge von anderen Nutzern.
Interaktion mit anderen Nutzern.
1.5 Inhalte
Dokumentation des Kursablaufs PIM
Beschreibungen von techn. Möglichkeiten und deren Umsetzungen
Beispiele und Übungen aus Tutorien
(Grafiken, Videos, Flash Animationen)
2. Interface-Design
2.1 Informationsarchitektur
Die Seite besteht aus:
Header, Navigationsleiste und Inhaltsbereich
2.2 Navigation
Die Navigation besteht aus den Blöcken in folgender Reihe:
.Status
.Menü
.Letzte Kommentare
.Suche
.Kalender
.Links
2.3 Inhaltsseiten
Der Inhaltsbereich enthält alle Beiträge, welche von mir (Administrator)
erstellet wurden, welche die Themen und Aufgaben des Kurses PIM wiedergeben, sowie die Kommentare, welche von den Lesern mit Kommentarberechtigung hinzugefügt werden.
2.4 Wording
Die Seite ist in deutsch sowie englische Begriffe, welche im deutschprachigem Raum verbreitet sind.
2.5 Startseite
Die Startseite ist nahezu ident mit den anderen Seiten, es gibt die Möglichkeit des einloggens, erst bei richtigem Usernamen und Passwort wird die Seite interaktiv (Menübereich erweitert sich und die Möglichkeit zum Kommentieren ist gegeben)
2.6 Multimedia
Multimediale Elemente sind grundsätzlich nicht auf dem Lernblog, lediglich Aufgaben und Beispiele welche Multimedia Themen behandeln sind vorhanden.
2.7 Interaktionsdesign
Die erste Interaktionsmöglichkeit ist das einloggen auf dem Blog.
Nach erfolgreichem Login sind weitere Interaktionen möglich, das Suchen in den Beiträgen sowie kommentieren und als Administrator das verändern des Layouts.
3. Screen-Design
3.1 Layout und Layoutverhalten
Die Gesamtbreite richtet sich nach dem Bild im Header = 780px
Einrückung von links = 80px, oben = 5px
Die Hintergrundfarbe füllt die ganze Bildschirmbreite.
Der Inhaltsbereich ist in der Länge nicht limitiert, es muss gescrollt werden.
3.2 Typografie/Schrift
Die Schriftarten sind in allen Varianten immer gleich (Verdana, Helvetica, Arial, sans-serif)
Schrifftgrössen: Titel 15px, normaler Text 11px, kleiner Text 10px
3.3 Farben/Farbverläufe
Die Hintergrundfarbe ist eher sehr hell gehalten (#ffffd5),
die Schrift bei normalem Text (Beiträge) eher dunkel (#333333), nach dem Prinzip dunkler Schrift auf hellem Hintergrund ist besser für die Augen.
Andere Texte wie Datum oder aktueller Status sind in einem hellerem Grau (#959595) gehalten um den Inhalt der Beiträge mehr hervorzuheben.
Links bzw. alle Möglichkeiten zur Interaktion sind eindeutig erkennbar mit einem braun-orange (#906200).
Die Bezeichnungen der Navigationsblöcke sind mit weißer Schrift und grauem Hintergrund gestalltet für ein gute Übersicht.
3.4 Grafiken
Gibt es nur das Lernblog Logo (.JPG) sowie die Möglichkeit in Beiträgen zu Erläuterungszwecken das Einbetten von allgemein HTML tauglichen Formaten.
3.5 Tabelle
Es gibt keine Tabellen, welche mit Struktur und Aufbau der Seite zu tun haben, lediglich in Beiträgen zu Darstellungszwecken sind Tabellen erlaubt.
3.7 Einheitlichkeit
Der ganze Block ist einheitlich aufgebaut es ändern sich keine Schriften oder Farben bei allen Interaktionen.

Kommentieren