Kommentare

Webseitenlayout


Format festlegen

wichtig dabei ist:

- Displaygröße (17“)
- Seitenverhältnis (4:3, 16:9)
- Displayauflösung (Laptop 1280x800, iPhone 640x960)
- Webbrowser (Firefox, IE)
- Smartphones benötigen eigene Layouts die mit verschiedenen CSS angepasst werden

Gestaltungsraster

Alle Formate lassen sich durch 8 Teilen also ist ein Gestaltungsraster das durch 8 Teilbar ist sinnvoll
z. B. 40x40pixel bei einem 1200x600pixel-Format ergibt das 30x40=1200 und 15x40=600.

Komponenten einer Website

Navigationsbereich:

- Hauptnavigation
- Subnavigation
- Hilfsnavigation
- Such- und Hilfsfunktion

Sonstige Bereiche:

- Kopfbereich
- Fußbereich
- Freiflächen

Inhaltsbereich:

- Name
- Logo
- Überschrift
- Aufmachertext
- Mengentext
- Bilder
- Grafiken
- Werbung
- Animationen
- Videos

Gestaltungselemente:

- Farbflächen
- Linien, Rahmen
- Hintergrund


Usability

..heißt soviel wie benutzerfreundliche Bedienung der Website

- Hauptnavigation links und / oder oben
- Logo links oben
- Die Wichtigkeit der Inhalte sollte von links oben nach rechts unten abnehmen (Lesegewohnheit)
- Navigation und Inhalt muss optisch klar getrennt sein
- Scrollbalken sind nicht schön aber in vertikaler Richtung nicht immer vermeidbar. In horizontaler
  Richtung scrollen ist ungewohnt und sollte vermieden werden.

Gestaltung – Ästhetik


- Harmonische Seitenaufteilung (z. B. Goldener Schnitt 1 : 1,68)
- ausreichend freie Flächen (nicht zu überladen)
- Mut zu neuem (Interesse wecken)
- Ansprechende Typografie
- Ausreichende Kontraste


Templates

Ein Template ist eine Musterseite für Webseiten und dient als Vorlage für alle weiteren Seiten mit dem Inhalt der auf jeder Seite zu sehen sein soll wie z.B. Hintergrund, Navigation und Logo.
Für veränderbare Texte und Bilder dienen im Template Platzhalter.
Mit CSS wird dem Template das gewünschte Erscheinungsbild gegeben (Schrift, Farben, Rahmen, Abstände).

Vorteile von Templates:
- Zeitersparnis beim Gestalten
- Einheitliche Gestaltung
- Einfache Pflege oder Erweiterung
- Einfache gestalterische Änderungen

20px Schriftgrösse als Empfehlung auf dem iPhone? Das bezieht sich aber auf die alten Geräte?
Für das iPhone 4 sollten es für Inhaltstexte wenigstens 32 Pixel sein (das entspricht etwa 8pt bzw. 2.4mm Zeichenhöhe auf dem Retina-Display).

Ideal wären normalerweise 3-3.5mm Zeichenhöhe (10-12 pt), wobei diese Empfehlung für die Arbeit am Bildschirm gilt. Dabei ist einerseits der Sehabstand eher grösser und die Bildschärfe um einiges niedriger aufgrund der geringeren Pixeldichte (100-120 dpi) im Vergleich zu einem Smartphone (bis zu 330 dpi).

Gibt es eigentlich "offizielle" Empfehlungen hierzu?

Hallo,

das ändert sichsicherlich ein wenig von generation zu Generation der Geräte. Der Beitrag ist ja auch bereits aus dem Jahr 2011.

Aber die Wikis sind ja da damit sie im Rahmen der Prüfungsvorbereitung auch jederzeit von euch ergänzt, korrigiert oder aktualisiert werden können.

Grüße

Peter