Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T

Transkript

1 Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T Inhaltsverzeichnis Technische Grundlagen S. 2 Grundsätzliches S. 2 Typographie und Farbgebung S. 3-4 Das Logo S. 5 Text S. 5 Die Navigation S. 6 Zu verwendende Grafiken S. 6-7 Raster S. 8 Entwurf S Seite 1 von

2 1. Technische Grundlagen Diese Webseite ist optimiert für den Firefox Vers. 2.8 sowie den Internet Explorer 7. Diese Seite ist optimiert für eine Auflösung von 1920 Pixel X 1200Pixel. Die minimale Auflösung beträgt 1280 Pixel x 1024 Pixel. Für alle Seiten innerhalb der Webseite gelten zur Gewährleistung von Barrierefreiheit und größtmöglicher Browserkompatibilität folgende technische Vorgaben: XHTML 1.0 Transitional Cascading Style Sheets 2.0 JavaScript Grundsätzliches Die Webseite soll eine Feste Größe erhalten, wie im Raster angegeben (siehe Seite 7). Außerdem soll sie exakt zentriert im Browserfenster liegen, sowohl vertikal, als auch horizontal. Das Design ist größten Teils durch in Photoshop erstellte Grafiken im png Format zu erstellen, (wenn noch nicht vorhanden). Design und Inhalt sollen strikt von einander getrennt werden (XHTML und CSS) Seite 2 von

3 3. Typographie und Farbgebung Schriftart ist durchgehend die Futura Lt BT. Wenn diese nicht zur Verfügung steht, kann alternativ die Verdana, sowie die Arial verwendet werden. In jedem Fall soll eine serifenlose Schrift verwendet werden. Allgemeine Schriften Schriftfarbe ist ein dunkles Grauschwarz mit dem Farbcode # Die Schriftgröße ist auf 14 Pixel festgesetzt. Weiter zu beachten: Linksbündigkeit, sonst standard- Einstellungen. Überschrift 1 Die Erste Überschrift unterstützt das bildliche Orientierungselement im Content-bereich und wird im Eyecatcher auf der rechten oberen Seite platziert. Der Farbton ist ein Silber-Grau mit dem Farbcode #e5e5e5. Die Schriftgröße ist auf 36 Pixel festgelegt. Überschrift 2 Die Zweite Überschrift dient der Themenbestimmung im Textlichen Teil des Contents. Sie wird linksbündig gesetzt und dient nicht vorrangig der Orientierung sondern der Gliederung von Inhalten des Content-Bereichs, sowie der Beschriftung der Navigations-Buttons (In diesem Fall ist der Text mittig auf die Buttons zu setzen). Der Farbton ist ein dunkles Blau mit dem Farbcode #183b4c. Die Schriftgröße ist auf 16 Pixel festgelegt. Allgemeine Farbgebung der Webseite Die Farben der Webseiten reichen von dunklen Blautönen, über mittlere und helle Grau Töne, bis zu ganz leichten Brauntönen. Der Hintergrund des Browserfensters soll in einem Hellen Graubraun-Ton gehalten werden mit dem Farbcode: #a Außerdem soll es einen schwarzen Schattenwurf der Seite und ihrer verwendeten Grafiken geben, der leicht nach unten links versetzt ist Seite 3 von

4 Es gibt folgende zwei Farbverläufe: Der Erste Farbverlauf verläuft gleichermaßen im Header, als auch im Footer Bereich der Seite, gleichmäßig mit einem dunklerem Braunton von links (#101210) nach rechts zu einem mittleren Grauton(#cccccc). Auf diesen Farbverläufen wird sowohl im Header, als auch im Footer Das zweiteilige Logo platziert. Der Zweite Verlauf zieht sich von der Navigation aus mit einem dunklerem Weiß (#cccccc) bis über den Content-Bereich zu einem perfekten Weiß (#ffffff). Unter den Bereich des Eycatchers bzw. Orientierungselementes wird ein blauer Hintergrund mit einem dunklem Blauton (#183b4c) eingesetzt. Es gilt, einen Abstand von mindestens 5 Pixeln zum Rand des umgebenden Content-Containers zu halten. Dieser Blauton findet sich auch in der Neben-Navigation wieder, links von den Navigations-Buttons, als Stilelement, ebenfalls mit 5 Pixeln Abstand zum Rand des umgebenden Containers. Farben der Navigation Zu beachten ist die Farbgebung von Beschriftungen der Navigations-Buttons. Ist ein Button der Navigation betätigt worden, so ändert sich seine Schriftfarbe in ein perfektes Weiß (#ffffff). Wird der Mauszeiger über einen Navigations-Button gefahren, so wird dieser in seiner Farbe heller, wobei der Farbton gleich bleiben soll. (Der Genau Farbton kann hier leider nicht genannt werden, da es sich um Farbverläufe handelt). Grafiken für das Design Die oben genannten Farbverläufe wurden der Vollständigkeit halber aufgeführt und müssen nicht mehr in eine CSS Datei geschrieben werden, da diese sich ausschließlich schon auf den zur Verfügung stehenden png Bildern, die Für das Design dieser Seite schon erstellt wurden vorhanden sind Seite 4 von

5 Farbtabelle 4. Das Logo Das Logo der Webseite liegt in Form einer fertigen Grafik vor und besteht aus zwei Teilen. Der Hauptteil kommt in den Header der Seite und geht fast über dessen gesamte Länge und Höhe. Der Zweite Teil des Logos wird in den Footer gesetzt, wobei dieser eher sekundär zu sehen ist. 5. Text Haupt Navigation in der Hauptnavigation befinden sich zwei Verlinkungen mit den Namen: Impressum und Help. Nebennavigation/ Footer Die Nebennavigation besteht aus vier Navigationsbuttons, mit folgenden Bezeichnungen: Index, 3D, SoB, ProjektW. Content Der Content-Bereich wird zu einem Späteren Zeitpunkt mit Text gefüllt. Solange ist der Gebrauch von Blindtexten, zur visuellen Veranschaulichung erwünscht Seite 5 von

6 6. Die Navigation Mit der Nebennavigation sollen verschiedene Themenbereiche der Web- Seite erreicht werden, die sich auf Sub-Seiten befinden. Das heißt, dass über die Buttons der Nebennavigation eine Verlinkung zwischen Sub- und Hauptseiten stattfinden soll. Die Nebennavigation ist ohne feste Maße angegeben, da diese zu einem späteren Zeitpunkt noch erweitert werden soll. Effektvolle Übergänge sollen durch Javascript umgesetzt werden. Mit Hilfe des Hover-Effektes soll der Fokussierte Button in seinem Farbton erhellt werden. Wenn ein Button aktiviert und die Gewünschte Haupt- oder Neben-Seite aufgerufen wurde, so soll dieser sich so mit verschieben, dass er seinen eigenen Schatten überdeckt. Dies hat den Effekt, dass der Button eingedrückt wirkt. Seine Schriftfarbe soll nun ein perfektes Weiß sein (#ffffff). 7. Zu verwendende Grafiken (Vordergrund.png) Seite 6 von

7 ( HintergrundPicCont.png) (schaddow.png) (1-y.png) Seite 7 von

8 8. Raster Das folgende Raster ist mit seinen Bemaßungen genau einzuhalten: 9. Entwurf Seite 8 von