LPE14+15: Digitale Medien Flashcards
Erkläre den Begriff Web-Design.
Konzeption und Gestaltung der visuellen, sichtbaren Oberfläche von Websites sowie die technische Realisierung.
Nenne fünf wichtige Themen für ein Briefing zu einem Web-Design-Auftrag.
Wesentlicher Inhalt der Site, Funktionen der Site, Ziele der Site, Zielgruppen, Existiert bereits ein CD?, Domain-Name vorhanden?, Ergebnisse und Erfahrungen aus früheren Web-Projekten, Stil, Tonalität, technische Rahmenbedingungen, erwartete Zugriffe, Termine für Re-Briefing, Präsentationen und Veröffentlichung der Site.
Erkläre den Begriff Screen-Design.
Konzeption und Gestaltung der visuellen, sichtbaren Oberfläche von Websites, MM-Präsentationen, Info-Terminals, etc.
Erkläre, was man unter einem Re-Briefing versteht.
Beim Re-Briefing legt der Auftragnehmer sein Verständnis des Auftrags vor. So sollen Unklarheiten und Missverständnisse ausgeräumt werden.
Beschreibe, was ein Strukturplan eines Multimediaproduktes zeigt.
Es werden logische Positionen der Seiten (wesentliche Inhalte) und ihre Beziehungen (Lineare Struktur, Baumstruktur, Netzstruktur, …) visualisiert.
Erkläre, was bei der Erstellung eines Gestaltungsrasters für ein Multimediaprodukt gemacht wird.
Einheitliche Elemente (Logo, Headline der Site, Navigation) werden in ihrer Position festgelegt – vgl. Template.
Beschreibe, was ein Navigationsplan eines Multimediaproduktes zeigt.
Im Navigationsplan werden Verlinkungen und damit die Navigationsmöglichkeiten innerhalb der Site festgelegt.
Beschreibe den Zweck von Scribbles und was darauf zu sehen ist.
Scribbles dienen der Ideenfindung für das zukünftige Layout. Hier wird grob festgelegt, wo die geplanten Elemente auf der Webseite platziert werden.
Erkläre, was man unter einem De-Briefing versteht.
Beim De-Briefing besprechen Auftraggeber und Auftragnehmer nach dem abgeschlossenen Auftrag, wie alles gelaufen ist und wo man Verbesserungspotentiale sieht.
Beschreibe, wie Entwurfsskizzen entstehen und was darauf zu sehen ist.
Basierend auf dem Scribble wird z. B. mit Photoshop eine Entwurfsskizzen hergestellt. Dieser Designentwurf beinhaltet sämtliche Elemente, ist farb-, positions- und größenverbindlich.
Erkläre am Beispiel „#FF0066“, wie hexadezimale Farbangaben funktionieren.
Diese setzen sich aus den einzelnen Zahlenwerten für Rot, Grün und Blau (RGB-Werte) zusammen. Der Zahlenwert #FF0066 entspricht einem „vollen” Rotanteil (FF=100%), mit keinem Grünanteil (00=0%) und einem „mittleren” Blauanteil (66=40%). Die Farbe mischt sich additiv und ergibt ein dunkles Magenta.
Erkläre, was mit „flexibler“ und „fester“ Größe von Webseiten gemeint ist.
Bei flexibler Größe passt sich die Darstellung an die Browserbreite an. Wobei Schriftgrößen und einzelne Elemente der Seite in der Größe nicht verändert werden. Lediglich die Breite von Textzeilen wird verändert, wodurch sich ein anderer Umbruch ergeben kann. Bei einer festen Größe findet keine Anpassung statt.
Angenommen es soll eine Webseite mit fester Größe erstellt werden. Erkläre, wie man herausfindet, welche Ausmaße die Webseite haben soll (Höhe/Breite).
Heute kann man von Bildschirmauflösungen 1024 x 768 Pixel (XGA) oder mehr ausgehen. Bei diesem Werten muss der äußere Rahmen des Browserfensters inkl. Scrollbalken etc. abgezogen werden. Unter Zugabe einer Sicherheitsreserve ergeben sich so für die eigentliche HTML-Seite z. B. 955 x 600 Pixel.
Benenne die hexadezimale Farbangabe „#000000“.
Schwarz
Benenne die hexadezimale Farbangabe „#333333“.
Dunkelgrau
Benenne die hexadezimale Farbangabe „#FFFFFF“.
Weiß
Benenne die hexadezimale Farbangabe „#FF0000“.
Rot
Benenne die hexadezimale Farbangabe „#DDDDDD“.
Hellgrau
Benenne die hexadezimale Farbangabe „#0000FF“.
Blau
Benenne die hexadezimale Farbangabe „#FF00FF“.
Magenta
Benenne die hexadezimale Farbangabe „#FFFF00“.
Gelb
Benenne die hexadezimale Farbangabe „#00FF00“.
Grün
Benenne die hexadezimale Farbangabe „#00FFFF“.
Cyan
Nenne fünf Dinge, die man zur Lesefreundlichkeit am Bildschirm bezüglich Typografie beachten muss.
Monitor-optimierte Schriften, Sparsamer Einsatz kursiver und fetter Schriftschnitte, Zeilenbreite ca. 40 bis 60 Zeichen, Zeilenabstand mindestens 130% der Schriftgröße, Rechtsbündiger Satz oder Mittelachsensatz nur für sehr kleine Textmengen, Blocksatz vermeiden, Keine manuelle Silbentrennung, Kurze Absätze (ca. 5 bis 7 Zeilen), Ausreichender Hell-Dunkel-Kontrast (nicht maximal)
Beschreibe, was Schriftglättung (Anti-Aliasing) bewirkt.
Verhindert eine verpixelte Darstellung der Schrift, jedoch wirken die Schriften unscharf. Das Lesen solcher Texte ist anstrengend und wirkt ermüdend. Für die Schriftglättung von Texten ist der Browser bzw. das Betriebssystem auf dem Zielrechner verantwortlich.
Erkläre, warum bezüglich der Lesbarkeit nicht jede Schrift auch für die Darstellung am Bildschirm geeignet ist.
Aufgrund der geringen Auflösung der Monitore (80 - 100 dpi) wirken viele Schriften pixelig. Feine Linien (z. B. Serifen) werden zu kräftig oder überhaupt nicht dargestellt. Abstufungen von Strichstärken sind immer Vielfache eines Pixels. Es wurden daher Schriften speziell für die Bildschirmdarstellung entwickelt (z. B. Chicago, Geneva, …)
Erkläre, warum technisch nicht jede Schrift auch für Webseiten geeignet ist.
Um Text in HTML-Seiten darstellen zu können, müssen die verwendeten Fonts auf dem Zielrechner installiert sein. Entweder müssen Standardschriften verwendet werden (Arial, Verdana, Times) oder Webfonts.
Nenne zwei Formate für Webfonts.
.WOFF, .WOFF2, .EOT und .SVG (.TTF, .OTF)
Erkläre, was man unter einem Corporate Design versteht und nenne drei Beispiele für Elemente des CD.
Unter Corporate Design (CD) wird die visuelle Identität verstanden, die als Erscheinungsbild Teil der Corporate Identity ist. Im Corporate Design werden firmenspezifische Festlegungen getroffen, z. B. zu: Logo(s), Farben, Typografie, Bilder, Grafiken und Symbole, Gestaltung von Visitenkarten, Briefbögen, Messeständen, Flyern, Website, Broschüren, Pressemeldungen, Briefumschläge, CD-Cover, Beschilderung, E-Mail-Signatur, Präsentationen…
Beim Screendesign wird oft mit Metaphern gearbeitet. Man versteht darunter die Verwendung von Bildsymbolen, mit einer übertragenen Bedeutung. Nenne drei Beispiele für Metaphern in multimedialen Produkten und erkläre deren übertragene Bedeutung.
„?“ für Hilfe „Lupe“ für Suche „Briefumschlag“ für Mail „Haus“ für Home oder Startseite „Pfeil“ für vor/zurück ...
Beim Screendesign wird oft mit Metaphern gearbeitet. Man versteht darunter die Verwendung von Bildsymbolen, mit einer übertragenen Bedeutung. Begründe, weshalb die Verwendung von Metaphern in interaktiven Medien sinnvoll ist.
- Ermöglichen intuitives Verständnis von Funktionen
- Textverzicht zugunsten der Internationalität
- Platzersparnis (Symbol statt Text)
- Schnellere Erfassbarkeit von Symbolen im Vgl. zu Text
- …
Bei Navigationsstrukturen wird zwischen „linear“, „hierarchisch“ und „vernetzt“ unterschieden. Erkläre, was man unter einer „linearen“ Navigationsstruktur versteht.
Websitebesucher können sich nur logisch weiter- oder zurückbewegen. Das unabhängige Wechseln zwischen nicht aufeinanderfolgenden Webseiten ist nicht gestattet oder gewünscht. Die wenigsten Websites werden mit einer linearen Navigationsstruktur erstellt. Meist handelt es sich dann um Tutorials oder Seiten, bei denen Informationen aufeinander aufbauen, wie bei einem Bestellvorgang oder einer Anmeldung.
Bei Navigationsstrukturen wird zwischen „linear“, „hierarchisch“ und „vernetzt“ unterschieden. Erkläre, was man unter einer „hierarchischen“ Navigationsstruktur versteht.
Der größte Teil der im Internet anzutreffenden Websites hat eine hierarchische Baumstruktur. Dieser Typus ist am besten mit einem gut strukturierten Buch mit Kapiteln und Unterkapiteln vergleichbar und stellt die am einfachsten benutzbare Navigationsvariante für Ihre Websitebenutzer dar.
Bei Navigationsstrukturen wird zwischen „linear“, „hierarchisch“ und „vernetzt“ unterschieden. Erkläre, was man unter einer „vernetzten“ Navigationsstruktur versteht.
Die Netzstruktur entspricht im Prinzip dem Aufbau des Internets im Kleinen und stellt keinerlei geordnete Hierarchie bereit. Die Netzstruktur kann bei vielen Einzelseiten höchst unübersichtlich werden und wird deshalb meist durch eine Suchfunktion unterstützt. Die Netzstruktur ist vor allem für Querverweise in Nachschlagewerken geeignet.
Eine gut gestaltete Navigation sollte Antworten auf die fünf W-Fragen geben. Wie lauten diese fünf W-Fragen?
- Wo bin ich?
- Woher komme ich (und wie geht es dahin zurück)?
- Wohin geht es als nächstes?
- Wo ist das, was ich suche?
- Was gibt es sonst noch?