Neue Medien

• Seiteneinteilung, welche nicht sichtbar ist
• schnellerer Bildaufbau für austauschbare Seitenelemente
• Seitenelemente die nicht wechseln, sondern stehen bleiben
• Im Frameset werden alle Seiten, die zu einer Website gehören, zusammengefasst
• Frameworks: Slideshows, alle Elemente werden eingebaut

lange Werbebanner, Infobanner, meist auf der rechten Seite

• fotocommunity, facebook, twitter, instagram, social media
• Wenn User mitbeteiligt sind an den Inhalten, abstimmen, gründen

• HTML-Seite ist barrierefrei, suchmaschinenfreundlich, lädt schneller
• Flash-Site braucht Flash-Player, ist oft gross und träge, wird im Webdesign nicht mehr eingesetzt, aber bei Games oder grossen firmeneigenen Websiten mit Animationen / Games usw

• 960 Pixel breit, bei Desktop bis 1440 Pixel (beliebt: 1280 Pixel)
• 480 Pixel breit für iPhone

• Header/Kopf, Navigation, Inhalt/Content, Footer
• (Seiteninformation)

• Webschriften (fontsquirrel usw) .wof (web-open-fonts)
• viele TrueType-Fonts
• Verdana, Georgia, Lucida, Trebuchet: sind breiter gezeichnet, hohe x-Höhe, offene Punzen, allgemein weite Buchstaben

• unterschiedlicher Inhalt:
• Website (ruft Website ab auf Browser)
• Programm (xcode, wird eingebunden)
• News App (ruft Datenbank ab, generiert ständig neue Informationen)
• PDF (Download, E-Reader bsp NZZ-Sonntag)
• DPS (Content-Viewer, Bibliothek, Magazin)

• Usability gute Benutzerführung
• Accessability gute technische Führung
• klare Struktur, Konzept

• unsichtbare Schaltfläche, bei Rollover oder Klick wird etwas sichtbar (Textfeld, neue Website), sensitiv
• nicht barrierefrei

• Im Photoshop genau mit Hilfslinien unterteilen
• mit Slice-Werkzeug jeden Bereich aufteilen und in Einzelteile abspeichern, nicht ein grosses Bild
• von oben links nach rechts
• diese Bilder kann man für das Layout verwenden

• Login = einloggen / anmelden mit Passwort und Benutzername
• Link = Verknüpfung mit einer Datei / Website
• Domain = Webadresse
• Weblog = Blogsystem im Web, Web-Tagebuch, hierarchisch aufgebautes Magazin
• Homepage = erste Seite einer Website / Internetauftritt

• Die Skriptsprache zur Einbindung von Animationen im Webdesign
• alles was sich bewegt und dynamisch ist wurde mit Java-Script gemacht (Slideshows, Verschiebungen der Navigationen usw)

Firefox, Safari, Google Chrome, Internet Explorer, Opera

• 216 websichere Farben (bsp #99FF00 HEX, #C9E3D6)
• sehen auf allen Monitoren etwa gleich aus

1.
 Projektdefinition: 
 Bestimmen: Ziele, Nutzen, Dynamik
 Erstellen: Sitearchitektur
 Offertenerstellung

2.
 Grobkonzept und Designkonzept: 
 Bedürfnisanalyse, def. Sitearchitektur, Look & Feet und Navigations-
 konzept, Storyboard, Abnahme, Gestaltungsraster, Screendesign

3.
 Feinkonzept und Umsetzung Design:
 Definition Content-Modul, Feinkonzept (Typo, Farbe, Bild …),
 Umsetzung im Photoshop der kompexesten Inhaltsseiten

4.
 Produktion und Contentdesign: 
 Präsentation Detailgestaltung, Mediaaufbereitung, Evtl. Prototyp

5.
 Dokumentation: 
 Designstyleguide für Realisation.

• Bildlauf waagrecht oder senkrecht
• durch Scrolling erscheinen noch nicht sichtbare Website-Bereiche im View-Port
• das Verschieben von Bildschirminhalten (sowohl Text als auch Grafik)
• Zweck ist die Darstellung umfangreicher Inhalte auf begrenztem Platz (wie z.B. bei Bildschirmen, Fenstern, Listenfeldern usw.)

digitale Medien und Technologien, die es Nutzern ermöglichen, sich untereinander auszutauschen und mediale Inhalte einzeln oder in Gemeinschaft zu erstellen.

Responsive Design

Siehe Bild.

RGB

1. Der Kontrast von Vorder- und Hintergrund sollte es sich gut unterscheiden.
2. Weniger ist mehr
3. Mit weiss aufgehellten Farben mit kleiner Sättigung = für grosse Flächen
4. Intensive Farben für Hervorhebungen
5. Rot-Blau als Vorder- und Hintergrundkombination nicht in gesättigter Form verwenden
6. Farben nicht als Kodierung von komplexen Bedeutungen einsetzten

Arial, Times New Roman, Georgia, Verdana, Lucida

• Normale und halbfette Schnitte.
• Serifenlose Schriften passen sich dem Pixelraster des Monitors besser an. 

Verdana, Arial, TImes New Roman usw. 

• Die Eigenschaften des Bildschirms können das Auge stören
• Bildschirmflimmern ist anstregend
• Der Leseabstand zum Bildschirm ist grösser und das Auge hat schwierigkeiten zu fokusieren
• Die Umgebung reflektiert im Bildschrim

Schriften sind instabil auf dem Bildschirm

Kantenglättung = der Sägezahneffekt wird durch weiche Übergänge (Grauwerte) abgeschwächt. Kann bei Schriften und Linien abgerundet werden.

GIF, JPEG, PNG

Geeignet für Komprimierung von Bildern.
Flexible Komprimierung möglich ohne grosse Einschnitte der Bildqualität.

• vereint die Vorteile von GIF und JPEG. 
• verlustfreie Kompression
• hohe Farbtiefe wie JPEG
• Transparenz möglich

gute Kompression für Bilder mit geringer Farbtiefe. 

Photoshop

• HTML5, CSS3, Java Script
• Es gibt Stimmen die sagen, dass Photoshop im Webdesign tot ist!
• Stimmt teileweise braucht jedoch HTML+CSS Kenntnisse

72dpi, 1024x768

entspricht der Häufigkeit

1024x768px

• Globales Navigationssystem
• lokales Navigaionssystem
• lineares Navigationssystem