Human Computer Interaction
|
|
- Karsten Pohl
- vor 6 Jahren
- Abrufe
Transkript
1 Human Computer Interaction Gestaltung und Implementierung effizienter Benutzungsschnittstellen V-02 Elemente des Screen Designs Johann Wolfgang Goethe-Universität
2 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 2
3 Grundregeln zur Gestaltung Weniger ist oft mehr! Gute Lesbarkeit ist oberstes Gebot Bescheidenheit im Einsatz der Mittel Beschränkung auf wenige Ideen Zu viele Effekte nehmen sich gegenseitig die Wirkung Je weniger einer braucht, desto mehr nähert man sich den Göttern, die gar nichts brauchen. (Sokrates) Nach: da findet man auch Online Kurse zur Typographie und zum Gestalten 3
4 Optische Achsen beachten! Optische Achsen sind zum Beispiel Satzkanten oder die Ränder von Bildern, Fensterränder oder Bildschirmränder Je mehr optische Achsen auf einem Blatt verteilt sind, desto problematischer ist ein Entwurf, umso schwieriger ist gute Typografie. Besonders heikel wird es, wenn die Achsen noch verschiedene Winkel haben 4
5 Optische Mitte Wann sitzt ein Objekt (Punkt, Text) genau in der Mitte? - Es handelt sich hierbei also um eine optische Täuschung. Rechtes Beispiel (beinahe zuviel) nach oben geschoben. Sitzt also weit über der Mitte! Aber trotzdem befindet er sich scheinbar in der Mitte des Blattes. Man nennt dieses Phänomen optische Mitte. Sie befindet sich immer etwas über der tatsächlichen (geometrischen) Mitte. Deshalb ist der untere Rand bei Büchern fast immer größer als der obere. 5
6 Eleganz und Einfachheit Eleganz Ziel des Entwurfsprozesses eligere (lat.): (sorgfältig) auswählen Einfachheit Zentrales Element zur Erreichung von Eleganz Erhöht Verständlichkeit Wiedererkennbarkeit Einfachen Zugang Usability 6
7 Eleganz und Einfachheit Prozess zur Erreichung von Eleganz und Einfachheit Vereinheitlichung: Zusammenführung der Gestaltungselemente zu einem einheitlichen Ganzen Verfeinerung: Zielgerichtete Anpassung an Erfordernisse (Ziel, Betrachter, Kontext) Eignung: Überprüfung der Fitness des Entwurfs nach jedem Entwurfszyklus 7
8 Eleganz und Einfachheit Häufige Fehler Überfrachtung des Designs (Clutter) Gegenseitiges Stören visueller Elemente Komplexe visuelle Strukturen Zu hoher Detailgrad der graphischen Elemente 8
9 Skalierung, Kontrast und Proportion Information consists of differences that make a difference. (Edward Tufte, 1990) Skalierung Relative Größe bzw. Faktor eines Gestaltungselements in Relation zu allen anderen Elementen Kontrast Erkennbare Unterschiede zwischen den Gestaltungselementen in den visuellen Dimensionen: Position, Größe, Farbe, Textur, Form, Orientierung, Bewegung Grundlage für Unterscheidbarkeit, Betonung, Interessenssteuerung, etc. Element zur Erreichung Klarheit im Design durch bewussten Einsatz zur Unterscheidung von Elementen Proportion Balance und Harmonie der Verhältnisse zwischen Gestaltungselementen Kein absolutes Maß! 9
10 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 10
11 Graphische Semiologie (Graphical Semiotics) Graphische Semiologie Wissenschaft der graphischen Zeichen und Symbole Basiert auf tausende Jahre alten Traditionen Wissenschaften mit Bezug zu dieser Thematik Theologie, Philosophie, Anthropologie, Psychologie,..., Kartographie,..., Visualisierung Grundlegende Arbeiten von Jacques Bertin The Semiology of Graphics, 1982 Grundlage der modernen Visualisierung 11
12 Visuelle Variablen (Grundelemente der Gestaltung) nach Bertin, 1982 Position (x und y) Fläche, Größe Helligkeit Textur Neigung, Orientierung Form, Gestalt Farbe 12
13 Visuelle Variablen Mögliche Ergänzungen Länge Volumen Farbton Sättigung Winkel Verbindung Enthaltung 13
14 Visuelle Variablen Weitere Ergänzungen Bewegung Veränderung Blinken 14
15 Eigenschaften Visueller Variablen (nach Bertin) Selektiv Spontane Gruppierung beim menschlichen Betrachter Besonders nützlich zur Visualisierung nominaler Daten Weitere Unterscheidung: Assoziativ vs. Nicht assoziativ Assoziativ: alle Variablen haben bei Benutzung dieser Variablen weiterhin die gleiche Sichtbarkeit Ordinal Spontane Anwendung einer Ordnung beim menschlichen Betrachter Besonders nützlich zur Visualisierung ordinaler Daten Proportional Spontane Anwendung einer Ordnung beim menschlichen Betrachter Direkte Assoziation eines Wertes Besonders nützlich zur Visualisierung ordinaler und quantitativer Daten 15
16 Visuelle Variablen Bertin
17 Hohe Effektivität Geringe Effekt. 17 Quantitativ Ordinal Nominal Position Position Position Länge Winkel Neigung Fläche Volumen Helligkeit Sättigung Farbton Textur Verbindung Enthaltung Form Helligkeit Sättigung Farbton Textur Verbindung Enthaltung Länge Winkel Neigung Fläche Volumen Form Farbton Textur Verbindung Enthaltung Helligkeit Sättigung Form Länge Winkel Neigung Fläche Volumen Nach Mackinlay 1986 mit Adaptionen
18 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 18
19 Harmonie - Proportionen Harmonie Effekt des Erreichens eines einheitlichen und gefälligen Gesamteindrucks Als harmonisch empfundene Verhältnisse 1:2 2:3 3:4 Quadrat (1:1) Goldener Schnitt (oft überschätzt) 19 Vitruvian-Mensch von Leonardo da Vinci
20 Goldener Schnitt Zwei Strecken stehen im Verhältnis des Goldenen Schnittes, wenn sich die größere zur kleineren verhält wie die Summe aus beiden zur größeren Verhältnis wird mit dem griechischen Buchstaben Φ (Phi) bezeichnet Sei a die längere und b die kürzere Strecke, so gilt: 20
21 Viele geometrische Konstruktionsmethoden 1. Errichte auf der Strecke AB im Punkt B eine Senkrechte der halben Länge von AB mit dem Endpunkt C. 2. Der Kreis um C mit dem Radius BC schneidet die Verbindung AC im Punkt D. 3. Der Kreis um A mit dem Radius AD teilt die Strecke AB im Verhältnis des Goldenen Schnittes Viele weitere, siehe z.b. Wikipedia 21
22 Goldener Schnitt Geschichte des goldenen Schnitts Erste Erwähnung: Hippasos von Metapont (um 450 v. Chr.) Analytische Auseinandersetzung: Euklid ( v. Chr.) Anwendung Cheops-Pyramide Vorderfront des Panthenon Dom von Florenz, Notre Dame Alte Rathaus in Leipzig, ein Renaissancebau aus den Jahren 1556/57. Panthenon Tempel, Athen 22
23 Goldener Schnitt Moderne Anwendung Le Corbusier ( ): Modulor Auf der Mathematik und den menschlichen Körperverhältnissen aufgebautes Maßsystem auf Grundlage des goldenen Schnitts 23
24 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 24
25 Gestalt-Prinzipien Thurston
26 Gestalt-Prinzipien Andere Bezeichnung Gestalt-Gesetze Aber: keine Gesetze im strengen Sinn, keine absolute Gültigkeit, kein Beweis Thema Beschreiben verschiedene Phänomene der höheren Wahrnehmung (im Gegensatz zum frühen Sehen) Organisatorische Prinzipien als grundlegende Prozesse der menschlichen visuellen Wahrnehmung Holistische Natur der menschlichen Wahrnehmung Das Ganze unterscheidet sich von der Summe seiner Teile. Grundlage Frankfurter Schule der Gestalt-Psychologie (seit 1912) Max Wertheimer, Kurt Koffka, Wolfgang Kohler,... 26
27 Gestalt-Prinzipien "Laws of Oranization in Perceptual Forms" (Wertheimer 1923) Prinzip der Nähe (Proximity) Prinzip der Ähnlichkeit (Similarity) Prinzip der stetigen Fortsetzung (Continuity) Prinzip der Konvexität (Geschlossenheit, Closure) Prinzip des Gemeinsamen Schicksals (Common Fate) Prinzip der Prägnanz 27
28 Gültigkeit der Gestalt-Prinzipien Die damaligen Erklärungen entsprechen nicht dem heutigen Wissensstand Prinzipien selbst sind jedoch nach wie vor gültig und Grundlage wichtiger Gestaltungsregeln 28
29 Prinzip der Nähe (Proximity) Näheres wird als zusammenhörig empfunden Eines der wirksamsten Prinzipien Einfachste und mächtigste Möglichkeit eine enge Beziehung zwischen Entitäten auszudrücken 29
30 Prinzip der Nähe (Proximity) Spätere Erweiterung und Generalisierung: Prinzip der räumlichen Konzentration (Principle of Spatial Concentration, Slocum 83) 30
31 Prinzip der Ähnlichkeit Gleiches (oder fast gleiches) wird als zusammengehörig empfunden Farbe (Helligkeit hier) gruppiert stärker als Form 31
32 Prinzip der stetigen Fortsetzung (Continuity) Es werden eher einfache, regelmäßigere, glatte oder kontinuierliche Formen wahrgenommen im Gegensatz zu solchen mit abrupten Änderungen 32
33 Anwendung des Prinzips der stetigen Fortsetzung z.b. in Blockdiagrammen: Verbindungen zwischen Diagrammelementen werden einfacher erkannt, wenn die Linien kontinuierlich und glatt sind 33
34 Prinzip der Konvexität Konvexe Konturen werden bevorzugt geschlossen und bevorzugt wahrgenommen 34
35 Anwendung des Prinzips der Geschlossenheit Venn Diagram: Elemente können zu A und C gehören, aber nicht zu A, B, und C Alle Elemente, die die sowohl zu B als auch zu C gehören, sind auch Elemente von D 35
36 Prinzip der Verbundenheit (Connectedness) Prinzip der Verbundenheit (Connectedness) Ergänzung von Palmer und Rock, 1994 Verbundenheit ist stärker als Nähe, Farbe, Größe, Form 36
37 Anwendung: Knoten-Kanten-Diagramme 37
38 Prinzip der Symmetrie (Symmetry) 38
39 Prägnanzprinzip Prägnanzprinzip (engl. Simplicity, Prägnanz) Nicht direkt von Wertheimer als Prinzip genannt, aber in Verbindung mit der Prinzip der guten Gestalt erwähnt "Of several geometrically possible organizations that one will actually occur which posesses the best, simplest, and most stable shape." (Koffka 1935) 39
40 Prinzip des Gemeinsamen Schicksals Objekte, die sich gemeinsam bewegen, werden als zusammengehörig erkannt 40
41 Prinzip der Relativen Größe (Relative Size) Kleinere visuelle Komponenten werden eher als Objekte wahrgenommen Beispiel: schwarzer Propeller vor weißem Grund Beachte: generell werden horizontale oder vertikale Strukturen gegenüber diagonalen häufiger als Objekte erkannt 41
42 Figur-Grund-Trennung Visuelles System unterscheidet Vordergrund (Objekte, Figuren) und Hintergrund bereits in den frühen Stufen der Wahrnehmung (Rubin 1915) Rubin 1921 Grundlage für die Objektidentifikation Viele Einzelelemente (geschlossene Konturen, Symmetrie, weiße Fläche als Hintergrund,...) tragen dazu bei Klare geometrische Strukturen sind nicht erforderlich Escher 42
43 Figur-Grund-Trennung Turston 1986 Kanizsa Triangle 43
44 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 44
45 Organisation und visuelle Struktur Organisation und visuelle Struktur Wichtiges Element, um dem Anwender einen strukturierten Zugang zu ermöglichen Erste Form der Information, die wahrgenommen wird Leitet die Interaktion Gestaltprinzipien als Leitfaden zur Schaffung von Struktur Gruppierung Hierarchisierung Schaffung von Beziehungen Balance 45
46 Organisation und visuelle Struktur Techniken zur Kommunuikation visueller Struktur und Organisation Symmetrie zur Erreichung von Balance Ausrichtung für visuelle Beziehungen Schaffung von Strukturen für das menschliche Auge durch Ausrichtung Negative Space: Schaffung von Kontrast durch Verwendung von Leerflächen 46
47 Organisation und visuelle Struktur Häufige Fehler Keine oder inhaltlich falsche Strukturen Falscher Einsatz von Symmetrie Unklare innere Strukturen (z.b. bzgl. Hierarchien) Fehlende oder mangelhafte Ausrichtung graphischer Elemente Information Overload 47
48 Gestaltungsraster Grundlage der meisten typografischen Entwürfe Kein universelles Raster, sondern angepasst an Medium Größe der Darstellungsfläche Gestaltungselemente, die verwendet werden sollen Zielgruppe und kommunikatives Ziel Satzspiegel mit Rändern im Verhältnis 2:3:4:5 Klassische Konstruktion für einen Satzspiegel 48
49 Gestaltungsraster 3-spaltiges Raster Raster mit 5 Spalten und Bildbereichen 49
50 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 50
51 Was ist Farbe? Farbe ist ein durch das Auge vermittelter Sinneseindruck, also eine Gesichtsempfindung. Die Farbe ist diejenige Gesichtsempfindung eines dem Auge strukturlos erscheinende Teils des Gesichtsfeldes, durch die sich dieser Teil bei einäugiger Beobachtung mit unbewegtem Auge von einem gleichzeitig gesehenen, ebenfalls strukturlosen angrenzenden Bezirk allein unterscheiden kann. (DIN 5033 Farbmessung, Teil 1, 1979) 51
52 Farbe ist ein sehr vielschichtiges Problem Verschiedene Aufgaben und Ziele verlangen unterschiedliche Farbsysteme, Farbräume und Repräsentationen: Eine Auswahl Farbwahrnehmung Physiologie und Psychologie Farbordnung Kunst... Harmonien... Wirkungen subjektiv Farbrechnen im Computer,... in CG: Farbe als Tripel (3D-Vektor) Farberzeugung Lichtquellen, Körperfarben, Durchlichtfarben Farbmischung Ideal: Additiv, Subtraktiv (Multiplikativ) und Real Farbmessung Reproduktion (objektiv, reproduzierbar, kalibriert 52 nicht vom Individuum abhängig, Spektrum Tripel) Farbübertragung in Kommunikationssystemen, z.b. Fernsehen,... Farbauswahl User Interface
53 Details zur Farblehre z.b. im Veranstaltungsarchiv GDV GDV 07: Vorlesungen Elemente der Bildwahrnehmung und Farbrepräsentationen Bitte schauen Sie diese Materialien einmal durch es trägt zum tieferen Verständnis bei! 53
54 Einsatzgebiete für Farbe im HCI Farbe kann für folgende Aufgaben eingesetzt werden Lenken der Aufmerksamkeit Gruppierung von Merkmalen durch Visualisierung qualitativer Aspekte Visualisierung ordinaler Daten Visualisierung quantitativer Daten 54
55 Ordinale Daten Je nach Aufgabe: Suchen und Identifizieren: Wahl wie bei nominalen Daten Übersicht oder Vergleichen: Abbildung auf Farbskalen wie bei quantitativen Daten Beispiel: modifizierter Farbkreis Problem: Werden diese Größen dann auch als quantitative Größen interpretiert? 55
56 Quantitative Daten Beachte: Immer nur einen Teil der Buntton-Skala benutzen Die zwei unteren Verfahren erlauben den Einsatz von Farbtabellen (Color-Look-Up-Table) 56
57 Farbskalen Typen von Farbskalen Grauwertskalen: Variation der Helligkeit Farbskalen: Variation der Farbart (Sättigung und Farbton) Aspekte von Farbskalen Abbildung auf RGB i.d.r. nicht effizient und wenig effektiv Abbildung auf HSV, HLS, o.ä. möglich Spezielle Farbskalen i.d.r. effizienter Ein Hinweis: Der Color Brewer (Cindy Brewer) liefert in vielen Anwendungsfällen recht gute Ergebnisse ( wenn man es nicht doch selbst machen will) aber nur, wenn man ihn richtig benutzt! 57
58 Grauwertskalen Man verwende empfindungsmäßig gleichabständige Stufen, etwa nach folgender Formel: Berücksichtigt man die nötige Gammakorrektur (für Farbmonitore 2,3... 2,8), so erhält man: Kuriosum: Diese Zwei Effekte korrigieren sich fast selbst! 58
59 Farbskalen Aufgabe: Bringen Sie die Farbe in eine Ordnung! Farbordnungssystem Basis oft die Qualitäten: Helligkeit Farbton Farbsättigung, z.b. HLS 59
60 Farbskalen Gray scale Full spectral scale Single sequence part spectral scale Single sequence single hue scale Double-ended multiple hue scale 60
61 Einige Regeln für den Einsatz von Farbskalen Wenn eine wahrnehmungsmäßig geordnete Sequenz benötigt wird, bevorzuge man eine Grauwertskala, Rot-Grün Skala Gelb-Blau Skala Sättigungsskala 61
62 Einige Regeln für den Einsatz von Farbskalen Verschiedene Skalen sind für verschiedene Detailgrade unterschiedlich gut geeignet: Großer Detailreichtum Luminanzskalen Geringerer Detailreichtum Farton- oder Sättigungsskalen 62
63 Einige Regeln für den Einsatz von Farbskalen Uniforme Skalen können durch Verwendung von CIELUV (CIELAB) gewonnen werden. Achtung: auf Gamma-Korrektur achten! Achtung: Manchmal sollen spezielle Eigenschaften durch nichtuniforme Skalen hervorgehoben werden! 63
64 Einige Regeln für den Einsatz von Farbskalen Für ein Ablesen von Datenwerten sollte man Farbskalen benutzen, die durch viele Farbarten charakterisiert ist Minimiert Fehler durch Farbkontrast Oft ist eine Spiralskala, z.b. im CIELUV-Farbraum sehr gut Alle Farben unterscheiden sich auch in der Helligkeit 64
65 Einige Regeln für den Einsatz von Farbskalen Durch Wahrnehmungseffekte erscheinen kontinuierliche Skalen oft diskret Um Formen und Strukturen in Wertefeldern wahrnehmbar darzustellen, ist die Betrachtung der Daten als Höhenfeld und ein Standard-Shading der CG oft effizienter als Farbskalen 65
66 Farbfehlsichtigkeit Farbe wird nicht von allen Personen gleich wahrgenommen Farbfehlsichtigkeit Abnormale Farbwahrnehmung Ca. 8% der männlichen und ca. 0.4% der weiblichen Bevölkerung Häufig nur für kleine Sehwinkel (< 20) Betroffene Personen wissen oft nichts von ihrer Farbfehlsichtigkeit 66
67 Farbfehlsichtigkeit Anomalien: Wahrgenommener Farbraum kann mit immer noch mit 3 Primärvalenzen beschrieben werden Protanomalie Schwäche in der Rot-Grün Wahrnehmung (Schwäche im Rot-Bereich) ca 1% der Bevölkerung Deuteranomalie Schwäche in der Rot-Grün Wahrnehmung (Schwäche im Grün-Bereich) 5-6% der Bevölkerung 67
68 Allgemeine Regeln zur Visualisierung mit Farbe Verwende Farbe mit Zurückhaltung: Weniger ist mehr! Verwende Farbe zur Gruppierung und zur Unterstützung beim Suchen Betone das Interessante und vermeide das Störende Verwende gewohnte Farbkodierungen: Nutze Metaphern des Anwendungsgebietes Gestalte für Nutzer mit Farbanomalien Say it again! - Farbe für redundante Kodierungen Verwende einen angemessenen Level-of-Detail! 68
69 Allgemeine Regeln zur Visualisierung mit Farbe Verwende blau für großflächige Bereiche, keine dünnen Linien Verwende rot und grün im Zentrum der Blickfeldes Randbereiche der Retina sind nicht sensitiv für diese Farben Verwende schwarz, weiß und gelb in der Peripherie Verwende Farben für benachbarte Regionen, die sich in Farbton und Helligkeit unterscheiden; Vermeide die Verwendung verschiedener Blautöne für benachbarte Regionen Verwende möglichst nicht mehrere hoch gesättigte Farben, insbesondere mit großen spektralen Unterschieden, zusammen Vermeidung von Nachbildern Berücksichtige mögliche Farbverschiebungseffekte benachbarter Farbflächen 69
70 Übersicht Grundregeln zur Gestaltung Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen Harmonien Proportionen Gestaltprinzipien Organisation und visuelle Struktur Raster Layout Elemente der Farblehre und Farbskalen Elemente der Typographie und des Satzes 70
71 Typographie Typografie Als Kunst oder Kunsthandwerk verstandene Gestaltung einer Textseite, eines Plakats oder eines gesamten Dokuments mittels Schrift, Bildern, Linien, Flächen (Weißräume) und Farben Handwerk mit langer Tradition: Anfänge des Buchdrucks im Mittelalter Mikrotypografie Schriftgestaltung Makrotypografie Layout einer gesamten Seite oder Publikation. Typografie und Computer Übernahme vieler der traditionell gewachsenen Regeln Neuinterpretation, aber auch Verletzung einiger Regeln Vertiefung in Typografie Theorie und sehr viel Praxis: in Vorlesung allein nicht vermittelbar! Begabung 71
72 Schriften Schriftart, Schrift (Typeface) In der Typografie die grafische Gestaltung eines Zeichensatzes. Schriften werden unterteilt in Schriftgruppen (Klassen, Familien, Kategorien) DIN legt verschiedene Schriftgruppen fest Hauptkennzeichen von Schriftfamilien Proportional vs. nicht proportional mit Serifen vs. serifenlos Serifen: kleine horizontale Endlinien an Buchstaben, an denen sich das Auge orientieren kann Serifenbehaftete Schriften eignen sich für gedruckten Fließtext Schriften ohne Serifen auf Entfernung besser erkennbar Nutzung für Plakate 72
73 Schriftfamilien nach DIN (Auswahl) Gruppe Bemerkung Zeichensätze Beispiel Franz. Barock- Antiqua Entwickelt um 1540, insb. Claude Garamond z.b. Garamond, Bembo, Goudy, Palatino Barock-Antiqua Blütezeit ca z.b. Baskerville, Tiffany, Times- Antiqua Klassizistische Antiqua Serifenlose Linear- Antiqua Ca. 1800, Bodoni und Didot Erste Hälfte 19. Jahrhundert; alte Bezeichnung: Grotesk Bodoni-Antiqua, Didot, Madison- Antiqua, Torino, Avant Garde, Franklin Gothic, Frutiger, Futura, Helvetica, Lucida, Rotis Sans, Univers 73
74 Schriften für Computereinsatz Zeichensatz Bemerkung Beispiel Andale Microsoft's freie Version der klassischen Monotype (Gleichmäßige Zeichenbreite) Arial Lucida Sans Tahoma Verdana P. Sunders, R. Nicholas/Microsoft Frei verfügbarer Ersatz für Helvetica K. Holmes Eine der ersten für Computereinsatz optimierten Schriften Microsoft, Frei verfügbar. M. Carter / Microsoft, Frei verfügbar a e f g AM a e f g AM a e f g AM a e f g AM 74
75 Schriftstärke und Schriftschnitt Schriftstärke (Font Weight) Gewicht bzw. Größe der Zeichen Schriftschnitte (Font Style) Normal (book, medium): normaler Text Fett (bold): Auszeichnungen Kursiv (italic): Hervorhebungen, Bildlegenden, Zitate extra schmal (condensed) Extra breit (extended) 75
76 Beispiel: Frutiger 76
77 Bemaßung und Schriftsatz 77
78 Regeln für Schrifteinsatz Mehr als zwei verschiedene Schriften erzeugen Unruhe Ähnliche Schriften nicht mischen Besser eine Serifenschrift mit einer serifenlosen mischen Auch der inhaltliche Aufbau kann so nicht mehr sinnvoll und logisch dargestellt werden Die Visualisierung von Daten beinhaltet die Erzeugung von Bildern und Bildsequenzen, welche die Eigenschaften dieser Daten veranschaulichen. Hierzu werden die Eigenschaften dieser Datenmengen auf visuelle Attribute abgebildet. Diese Abbildungen können dabei von elementarer Form sein, wie etwa bei der Abbildung von Datenwerten auf Farb- und Texturattribute, oder äußerst komplexer Form, wie bei der Visualisierung von komplexen natürlichen Prozessen durch dreidimensionale Darstellungen verbunden mit Animationen. Ziel ist es in jedem Fall, die in den Daten verborgenen Zusammenhänge darzustellen. 78
79 Regeln für Schrifteinsatz Zeilen über die ganze Papierbreite Erschweren Gestaltung Text in mehrere mehrere schmalere Satzblöcke (Spalten) aufteilen. Die Visualisierung von Daten beinhaltet die Erzeugung von Bildern und Bildsequenzen, welche die Eigenschaften dieser Daten veran-schaulichen. Hierzu werden die Eigenschaften dieser Datenmen-gen auf visuelle Attribu-te abgebildet. Diese Abbildungen können dabei von elementarer Form sein, wie etwa bei der Abbildung von Datenwerten auf Farb- und Texturattribute, oder äußerst komplexer Form, wie bei der Visualisie-rung von komplexen natürlichen Prozessen durch dreidimensionale Darstellungen verbun-den mit Animationen. Ziel ist es in jedem Fall, die in den Daten verbor-genen Zusammenhänge darzustellen. Bertin unterscheidet drei verschiedene Stufen der Information, die in einem Bild ver-mittelt oder dargestellt werden können ([Bertin 82]). Auf der ersten Stufe, der elementaren Stufe, wer-den die vorliegenden grundlegenden Infor-mationen in direkter Form abgebildet. Das heißt, zu jeder Infor-mation existiert im Bild eine entsprechende Repräsentation in Form einer spezifi-schen Ausprägung von visuellen Attributen. Die zweite Stufe, die mittlere Stufe, dient bereits zur Abstraktion von den elementaren Informationen. Auf dieser Stufe werden das Wesentliche und die Ergebnisse der Untersuchung verdeut-licht. 79
80 Schriftsatz Linksbündiger Flattersatz Linksbündige Ausrichtung mit gleichmäßigen Wortabständen Blocksatz Sowohl links- wie rechtsbündige Ausrichtung durch Streckung der Wortabstände, ggf. auch (Buchstabenabstände) Mittelachsensatz (zentrierter Satz) Möglichst vermeiden Insbesondere Mischen von symmetrischem und asymmetrischem Satz vermeiden Rechtsbündiger Flattersatz Rechtsbündige Ausrichtung mit gleichmäßigen Wortabständen Besonders bei längeren Texten findet das Auge die Zeilenanfänge schlechter wieder als beim linksbündigen Satz 80
81 Schriftsatz Vorteile Nachteile Flattersatz Blocksatz wirkt leicht und modern gut für kurze Zeilen kommt ohne viele Worttrennungen aus für Computer leicht zu verarbeiten saubere Ränder, sieht aus 'wie gedruckt' gut für längere Zeilen lange Zeilen schwerer lesbar typischerweise unschöne Zackenbildung am rechten Rand nicht für längere Druckwerke geeignet funktioniert nur mit gutem Trennalgorithmus nicht für kurze Zeilen geeignet 81
82 Weiterführende Literatur Kevin Mullet, Darrell Sano: Designing Visual Interfaces Communication Oriented Techniques, SunSoft Press, 1995, ISBN Donald A. Norman. The Psychology of Everyday Things. New York: Basic Books, ISBN
83 Zusammenfassung Fast nur die klassischen Regeln besprochen und nur das Allerwichtigste. Vertiefung erfolgt in der Übung Input dort! 83
84 (Endlich ;-) )Schluss und vielen Dank für Ihre Aufmerksamkeit
Human Computer Interaction. Übersicht. Einführung. Einführung. Visuelle Variablen. Harmonie Proportionen. Gestaltprinzipien
Human Computer Interaction Gestaltung und Implementierung effizienter Benutzungsschnittstellen V-02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Johann Wolfgang Goethe-Universität Übersicht Einführung
MehrSchrift & Typografie I. DI (FH) Dr. Alexander Berzler
Schrift & Typografie I DI (FH) Dr. Alexander Berzler Schrift & Typografie Theorie Der Ausdruck Typografie/Typographie geht zurück auf die Worte "typos" (Abdruck, Abbild, Form) und "graphein" (schreiben,
MehrSeite 1 von Kognition 1 Gestalt und grafische Gestaltung für GUIs
Seite 1 von 6 5. Kognition 1 Gestalt und grafische Gestaltung für GUIs Wahrnehmung in der Gestaltpsychologie - Entstehung Anfang 20. Jhdt. - Gestalt-Qualitäten beeinflussen das Wahrnehmungserleben - Vertreter:
MehrVisualisierung. Rückblick. Übersicht zum Thema Farbe. Farbmetrik. Übersicht. CIE XYZ, Yxy, CIELUV, CIELAB
Abbildung auf Farbe Prof. Dr.-Ing. Detlef Krömker Goethe-Universität, Frankfurt Graphische Datenverarbeitung Rückblick Übersicht zum Thema Farbe Farbmetrik CIE XYZ, Yxy, CIELUV, CIELAB Übersicht. Abbildung
Mehrseit Jahrhunderten Thema von Physikern, Physiologen, Psychologen und Philosophen bis heute nicht vollständig verstanden und durchdrungen
Farbe seit Jahrhunderten Thema von Physikern, Physiologen, Psychologen und Philosophen bis heute nicht vollständig verstanden und durchdrungen Meilensteine der geschichtlichen Entwicklung unserer Vorstellungen
MehrGestaltgesetze der Wahrnehmung. DI (FH) Dr. Alexander Berzler
DI (FH) Dr. Alexander Berzler Gestaltpsychologie Die Gestaltpsychologie wurde zu Beginn des 20. Jahrhunderts begründet. Die Wahrnehmung unserer Umwelt geschieht nach der Gestaltpsychologie durch die Wahrnehmung
MehrAusgewählte Kombinationen von. Visuelle Variablen beim multivariaten Einsatz
Ausgewählte Kombinationen von Visuellen Variablen beim multivariaten Einsatz Colloquium Map Design Institut für Kartografie ETH Zürich Dominique Kröpfli 24.03.2010 Visuelle Variablen beim multivariaten
MehrVisualisierung, WS07/08 9. November 2007. Visualisierung. Visuelle Variablen, Standardgraphen
Visualisierung, Standardgraphen Detlef Krömker Uni Frankfurt, Graphische Datenverarbeitung Wolfgang Müller PH Weingarten, Mediendidaktik und Visualisierung 09.11.2007 Visualisierung - D.Krömker, W.Müller
MehrFarbe in der Computergraphik
Farbe in der Computergraphik 1 Hernieder ist der Sonnen Schein, die braune Nacht fällt stark herein. 2 Gliederung 1. Definition 2. Farbwahrnehmung 3. Farbtheorie 4. Zusammenfassung 5. Quellen 3 1. Definition
MehrText- und Layoutwerkstatt
Text- und Layoutwerkstatt Seminarüberblick Nachricht und Bericht (Wiederholung) Planung von Druck-Produkten Konzeption eines Layouts Umsetzung des Konzepts zum Entwurf Prüfung und Optimierung Nachricht
MehrErgonomisches UI Design. Das lass mal den Grafiker machen
Ergonomisches UI Design Das lass mal den Grafiker machen Werbung Alexander Klein Senior Consultant bei BeOne Stuttgart GmbH Consulting für Prozesse, Engineering und IT http://www.beone-group.com Committer
MehrDOKUMENTATION HGKZ IAD / 1. SEMESTER WS MODUL DIGITAL DESIGN ELEMENTS II KURS SCREENTYPOGRAFIE
DOKUMENTATION HGKZ IAD / 1. SEMESTER WS 06.07 MODUL DIGITAL DESIGN ELEMENTS II KURS SCREENTYPOGRAFIE Student: Kai Jauslin // Dozent: Prof. Jürgen Späth Aufgabe 01 Analyse Wählen Sie jeweils eine Schrift
MehrTypografie und Layout für digitale Medien
Typografie und Layout für digitale Medien Bearbeitet von Isolde Kommer, Tilly Mersin 1. Auflage 2002. Buch. 324 S. Hardcover ISBN 978 3 446 21399 9 Format (B x L): 19,9 x 23,6 cm Gewicht: 995 g Zu Leseprobe
MehrVL Wahrnehmung und Aufmerksamkeit. Woher weiß ich, was das ist? Objektwahrnehmung
VL Wahrnehmung und Aufmerksamkeit Woher weiß ich, was das ist? Objektwahrnehmung Was ist das? Was ist das? Was ist das? Oft hilft Verdeckung bei Erkennung. http://www.blelb.ch/deutsch/blelbspots/spot21/blelbspot21_de.htm
MehrLOGO HANDBUCH Definition der grundlegenden Verwendung des Logos BIKE COMPANY
LOGO HANDBUCH Definition der grundlegenden Verwendung des Logos EINLEITUNG Das KELLYS CORPORATE DESIGN Handbuch legt die grundlegenden Bestimmungen für die Verwendung der grafischen Einheinten des Logos
MehrGestaltungstipps. PowerPoint Grundlagen ZID/Dagmar Serb V.04/Sept. 2018
Gestaltungstipps PowerPoint 2010 - Grundlagen ZID/Dagmar Serb V.04/Sept. 2018 GESTALTUNGSTIPPS... 2 WAS DAS PUBLIKUM STÖRT... 2 KLASSISCHER AUFBAU EINER PRÄSENTATION... 2 PASSENDES SEITENFORMAT... 2 ÜBERSCHRIFTEN...
MehrGestaltgesetze Figur-Grund-Beziehung
Figur-Grund-Beziehung Die Wahrnehmung unserer Umwelt geschieht nach der Gestaltpsychologie durch die Wahrnehmung von Formen. Nur so kann die unbestimmte Komplexität der Sinneswahrnehmungen aufgelöst und
Mehr3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML Link zu 3.1 3.3: http://papress.com/thinkingwithtype/
MehrGestaltungstipps. PowerPoint Grundlagen ZID/Dagmar Serb V.02/Apr 2013
Gestaltungstipps PowerPoint 2010 - Grundlagen ZID/Dagmar Serb V.02/Apr 2013 GESTALTUNGSTIPPS... 1 WAS DAS PUBLIKUM STÖRT... 1 KLASSISCHER AUFBAU EINER PRÄSENTATION... 1 PASSENDES SEITENFORMAT... 1 ÜBERSCHRIFTEN...
Mehr3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML Link zu 3.1 3.3: http://papress.com/thinkingwithtype/
Mehr3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML Link zu 3.1 3.3: http://papress.com/thinkingwithtype/
MehrCorporate Design Manual
Corporate Design Manual für Stand: 22.08.2014 Inhalt: 1.0 Die Verwendung des Corporate Manuals...S. 2 2.0 Die allgemeinen Gestaltungselemente...S. 3/4 3.0 Die Schrift...S. 5/6 4.0 Das Logo...S. 7/8 5.0
MehrTechnik WPK 09. Schriften. Thema: Texte fo r m a t i e r e n Klasse: Datum: Name: Teil 2
Technik WPK 09 Name: Thema: Texte fo r m a t i e r e n Klasse: Datum: Teil 2 Die Schrift ist der Träger einer Botschaft. Sie verlangt daher eine klare, gut leserliche Typographie, die schnell erkannt und
MehrHCI-9- Informationsdarstellung
HCI-9- Informationsdarstellung Ilse Schmiedecke 2008 Informationscodierung 2 Seiten des "Dialogs": Informationsausgabe durch den Rechner Benutzerschnittstelle mit Interaktionselementen Handlungsanweisungen
MehrPräsentationstechniken. [ Präsentationstechniken]
Präsentationstechniken [ Präsentationstechniken] Themenpunkte: Präsentationsvorbereitung Präsentationsdurchführung Foliengestaltung Schriftauszeichnung Farbeinsatz Bildgestaltung [ Präsentationstechniken]
Mehr3. Farbe, Textur und Tiefenwahrnehmung
3. Farbe, Textur und Tiefenwahrnehmung 3.1. Farbe seit Jahrhunderten Thema von Physikern, Physiologen, Psychologen und Philosophen bis heute nicht vollständig verstanden und durchdrungen Meilensteine der
MehrDie drei Komponenten Helligkeit, Farbton und Sättigung erlauben die Beschreibung von Farben.
Farbkontraste Ein Farbkontrast ist wahrnehmbar, wenn im Vergleich zwischen zwei oder mehreren nebeneinander liegenden Farben deutlich erkennbare Unterschiede bestehen. Die drei Komponenten Helligkeit,
MehrLernförderliche Faktoren und Rahmenbedingungen
CHECKLISTE 1 Lernförderliche Faktoren und Rahmenbedingungen In der Vorbereitung und Durchführung der Veranstaltung sollten folgende Aspekte reflektiert werden: die Veranstaltung bezüglich Didaktik und
MehrGestaltgesetze. Grundlagen der Gestaltung. bbw Berlin Internet Grundlagen Seite 1 / 21
bbw Berlin Internet Grundlagen Seite 1 / 21 Das Ganze ist mehr als die Summe seiner Teile Die Gestaltgesetze dienen in der menschlichen Wahrnehmung der Raumaufteilung in Figur und (Hinter-)Grund. bbw Berlin
MehrOptische Täuschungen. physiologische, psychologische und physikalische Sicht
Optische Täuschungen physiologische, psychologische und physikalische Sicht Wissenschaftliche Arbeit zur Erlangung der ersten Staatsprüfung für das Lehramt Gymnasium Universität Leipzig Fakultät für Physik
MehrBildschirmtypografie MG 43 Block 2.2
Wo ist der Unterschied zwischen Print-Typografie und Bildschirmtypografie? Es stellt sich natürlich die Frage: Warum kann man nicht einfach die bewährten Regeln der Print-Typografi e 1:1 auf den Bildschirm
MehrLicht und Farben. Andreas Spillner. Computergrafik, WS 2018/2019
Licht und Farben Andreas Spillner Computergrafik, WS 2018/2019 Farbwahrnehmung des Menschen im Auge Das Verständnis, wie Farbeindrücke entstehen, ist ein wesentlicher Bestandteil der Computergrafik. Der
MehrFarbtechnik und Raumgestaltung/EDV
Abb. 1 Das RGB-Farbmodell Über die additive Farbmischung werden durch die 3 Grundfarben Rot, Grün und Blau alle Farben erzeugt. Im RGB Modell werden ihre Werte je von 0 bis 1 festgelegt. R = G = B = 1
Mehrgrundlagen rechnergestützter entwurf
grundlagen rechnergestützter entwurf gestaltgesetze gestaltgesetze Gestaltgesetze Gestaltungsgesetze gestaltgesetze Was sind Gestaltgesetze? gestaltgesetze Gestaltgesetze können einen Hinweis darauf geben,
Mehrabcdeäöü abcdefloq äbcqgäöü Q U w U t? ol \J U Q m t& <gi ü i& * m * Q * * * <& * # <*> * * * * * <*> <*>
Schriftarten... Wählen Sie eine Schrift, die auch für sehbehinderte Menschen gut zu lesen ist, wie die Lucida Sans Unicode oder die Verdana. Beide sind auf den städtischen Computern verfügbar und erfüllen
MehrWahrnehmung und wahrnehmungsgerechte Gestaltung
Wahrnehmung und wahrnehmungsgerechte Gestaltung 37 Gestalt in der Wahrnehmungspsychologie (1) Kants Idee des Vorwissens beeinflusste u.a. die Entwicklung der Gestaltpsychologie, der zufolge einige Aspekte
MehrKartographische Visualisierung
Kartographische Visualisierung Zeichenverknüpfung, Kartenschichtung Kartenbeschriftung Mehrdimensionale Karten Kartographische Abbildung mehrerer substanzieller Objektattribute: bei abhängigen substanziellen
MehrFarben und ihre Benutzung
Farben und ihre Benutzung Marc Werner und Sebastian Proksch 01.03.2007 Marc Werner und Sebastian Proksch Farben und ihre Benutzung 1 / 27 Übersicht 1 2 3 4 Marc Werner und Sebastian Proksch Farben und
Mehr0 Einführung: Was ist Statistik
0 Einführung: Was ist Statistik 1 Datenerhebung und Messung 2 Univariate deskriptive Statistik Häufigkeitsverteilungen Statistische Kennwerte 3 Multivariate Statistik 4 Regression 5 Ergänzungen Deskriptive
MehrLMU München LFE Medieninformatik Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) SS2016. Mensch-Maschine-Interaktion
1 Mensch-Maschine-Interaktion Kapitel 2 - Wahrnehmung Sehsinn und visuelle Wahrnehmung Physiologie der visuellen Wahrnehmung Farbwahrnehmung Attentive und präattentive Wahrnehmung Gestaltgesetze Hörsinn
MehrTechnische Umsetzung. Workshop Systematisches Instruktionsdesign TU Dresden
Technische Umsetzung Dr. Cornelia Schoor Workshop Systematisches Instruktionsdesign TU Dresden 09.07.2010 Wie geht man bei der Entwicklung digitaler Lehrmaterialien vor? ANALYSE PLANUNG Bestimmung der
MehrWas haben die folgenden Dinge gemeinsam?
Was haben die folgenden Dinge gemeinsam? Parthenon zu Athen Mona Lisa von Leonardo da Vinci Nautilus Berliner Fernsehturm CN Tower Obelix Brüder Grimm Ananas Rose Biene Apple Das goldene Zeitalter Der
MehrFür wichtige Sätze und Wörter empfiehlt sich mindestens Schriftgröße 16. Die Folie zeigt: Nicht nur die Größe an sich ist ein Problem für die Lesbarkeit, auch hat der Bildschirm oftmals erhebliche Schwierigkeiten
MehrWissenschaftliche Arbeiten typografisch gestalten
Wissenschaftliche Arbeiten typografisch gestalten Mit Word und InDesign ans Ziel Bearbeitet von Manuela Bendix 1. Auflage 2007. Taschenbuch. xviii, 160 S. Paperback ISBN 978 3 540 73391 1 Format (B x L):
MehrWorum geht es bei Gestaltung?
Fläche Raum Gestaltung Worum geht es bei Gestaltung? Lesbarkeit von Text (keine Kunst) Keine Frage der Software sondern eine Frage der Professionalität Unkenrufe oder Mythen zu Softwareprodukten sind meist
MehrFormwahrnehmung aus Schattierung. Von Vilayanur S. Ramachandran bearbeitet von Anna- Marisa Piontek
Formwahrnehmung aus Schattierung Von Vilayanur S. Ramachandran bearbeitet von Anna- Marisa Piontek Wie sehen wir dreidimensional? Seherfahrung basiert auf zweidimensionalen Bildern, die auf Retina abgebildet
MehrDB Type Eine Übersicht über die neuen Schriften der Bahn
DB Type Eine Übersicht über die neuen Schriften der Bahn DB Type 2 Seite 3, Italic, Bold, Bold Italic, Black, Black Italic Seite 4 Light, Light Italic,, Italic, Black, Black Italic Seite 5 Condensed, Italic,
Mehrexists to honor content.
exists to honor content. Definition Die Typographie gibt Richtlinien für die Gestaltung von Texten unter funktionalen und ästhetischen Gesichtspunkten vor. Es ist die Kunst, richtige Abstände und Proportionen
MehrÜberblick Designtheorie Web Web-Design
Herzlich Willkommen Designtheorie Web Gestaltungselemente... Grundelemente Typografie Text Bild Farbe Bonneberg Kommunikation für Unternehmungen: Vorlesungsreihe SS 2009 FH Wolfenbüttel Mediendesign Gestaltungselemente
MehrSeminar Screendesign Einführung. Andreas Naurath E 04 S, SoSe 2005 MIE 110, Uhr
Seminar Screendesign Einführung Andreas Naurath E 04 S, SoSe 2005 MIE 110, 10-12 Uhr Typographie Griechisch»typos«- Gestalt, Muster Griechisch»graphein«- schreiben Schrifteinteilung (DIN 16 518) Venezianische
MehrKapitel 7 Schriftauszeichnung
Kapitel 7 Schriftauszeichnung Auszeichnungsbereiche Auszeichnungen dienen dem Hervorheben von Textstücken durch Veränderung der Schrift oder des Schriftschnitts. Die Auszeichnung erzeugt eine Unterbrechung
MehrErstellen von barrierefreien Präsentationen
Erstellen von barrierefreien Präsentationen Warum ist es wichtig barrierefreie Präsentationen zu erstellen? Nicht alle Menschen können uneingeschränkt Präsentationen lesen, z.b. Brillenträger, farbenblinde
MehrAbcd. Abcd. Abcd. Abcd. Abcd. Typographie_Geschichte. Textur. Rotunda. Phönizisch 1200 v. Chr. Schwabacher. 15. Jh. Humanistische Minuskel
Typographie_Geschichte Phönizisch 1200 v. Chr. 15. Jh. Textur Schwabacher Rotunda Humanistische Minuskel Altgriechisch 900 v. Chr. Renaissance-Antiqua (Bembo) Abcd Altlateinisch 500 v. Chr. 16. Jh. Fraktur
MehrEinheit 2. Wahrnehmung
Einheit 2 Wahrnehmung Wahrnehmung bezeichnet in der Psychologie und Physiologie die Summe der Schritte Aufnahme, Interpretation, Auswahl und Organisation von sensorischen Informationen. Es sind demnach
MehrGestaltungsrichtlinien. für den internen und externen Gebrauch
Gestaltungsrichtlinien für den internen und externen Gebrauch Inhalt 3 Das Logo Kopfzeile und Fußzeile 4 Die Kopfzeile 5 Die Kopfzeile für die Verbandskorrespondenz 6 Die Kopfzeile für die Vereinskorrespondenz
MehrLeibniz-Institut für Geschichte und Kultur des östlichen Europa. Stand 22 / 01 / 2018 gekürzte Version. Handbuch zur visuellen Identität
Stand 22 / 01 / 2018 gekürzte Version 1.0 GWZO Marke Seite 2 Die GWZO-Marke besteht aus zwei Teilen: einer Buchstabenmarke und einer Wortmarke. Sie basiert auf einem Raster, dessen kleinste Einheit 1 x
MehrWählt eines eurer Lieblingsbücher, Lieblingsfilme oder Alben bzw. Künstler! (Schreibt den Namen auf!)
Wählt eines eurer Lieblingsbücher, Lieblingsfilme oder Alben bzw. Künstler! (Schreibt den Namen auf!) Was macht die gewählte Sache besonders gut? (In maximal 5 Worten!) Was macht die gewählte Sache besonders
MehrTAG DER NIEDERSACHSEN 2017 LOGO-GUIDELINE JANUAR 2017
TAG DER NIEDERSACHSEN 2017 LOGO-GUIDELINE JANUAR 2017 VERZEICHNIS Das Verzeichnis Seite 3 - Vorwort Seite 4 - Glossar Seite 5 - Das Logo Seite 6 - Schwarz-weiß Seite 7 - Herleitung Seite 8 - Aufbau Seite
MehrKlassische Typografiefehler
Von Schusterjungen, Hurenkindern und Zwiebelfischen Tipps und Tricks rund um Ihr Marketing, Grafik und Design Von Schusterjungen, Hurenkindern und Zwiebelfischen Langner Beratung GmbH Metzgerstraße 59
Mehr4.1 Fontmanagement. Seminar Document Engineering. Michael Boehnke. Fontmanagement
4.1 Seminar Document Engineering Michael Boehnke 01 Motivation 01 Was ist Schrift? Hat der Rechner damit etwa Probleme? Was heisst das für mich? 02 So... ZDv 37/10 102. Die Uniform der Bundeswehr weist
MehrTypografie und Layout \ Catrin Sieber \ Wintersem ester \ Hochschule für Künste Bremen \ Studiengang Digitale Medien \ Mediengestaltung \
Typografie und Layout \ Catrin Sieber \ Wintersem ester 2005-06 \ Hochschule für Künste Bremen \ Studiengang Digitale Medien \ Mediengestaltung \ Medieninformatik Optische Grundlagen Typografie und Layout
MehrTypo gra phie- Schulung <em >- fa ktor November Einführung in die Typographie. Sommer. Sommer. Sommer. Sommer
Einführung in die Typographie Sommer Sommer Sommer Sommer Einführung in die Typographie Typo (altgriechisch typos Schlag, Stoß, später auch Eindruck, Muster, Bild ) graphie (altgriechisch -graphia Schreiben,
MehrTypografie. Griechisch typos (=Gestalt) und graphein (=schreiben) Die bewußte Verteilung von Schriftzeichen in einem vorgegebenen Raum
Definition Typografie Griechisch typos (=Gestalt) und graphein (=schreiben) Die bewußte Verteilung von Schriftzeichen in einem vorgegebenen Raum Typografie ist Sinnvermittlung unter funktionellen und ästhetischen
MehrFarbumfänge. Arbeiten mit Farbe
Farbumfänge Beim Farbumfang bzw. Farbraum eines Farbsystems handelt es sich um den Farbbereich, der angezeigt oder gedruckt werden kann. Das vom menschlichen Auge wahrnehmbare Farbspektrum ist größer als
MehrCorporate Design & Identity Handbuch der Verfassten Studierendenschaft
Corporate Design & Identity Handbuch der Verfassten Studierendenschaft Inhalt Werbebezeichnung 3 Logo 4 Anatomie des Logos 5 Anwendungsbeispiele 6 Typografie 8 Farbe 9 Impressum 10 Dieses Handbuch ersetzt
MehrEin übersichtliches und zugleich attraktives Design ist hier von Vorteil.
TUTORIAL In diesem Tutorial erklären wir Ihnen wie Sie die Schrift, das Layout und die Farben Ihrer Website so anpassen, dass diese in sich stimmig sind und Ihre Website ein perfektes Design erhält. Warum
MehrKP Ludwig John. Layout + Gestaltwahrnehmung
Zeit Literatur Nr. 49 Nov. 2008 Layout + Gestaltwahrnehmung Gestaltwahrnehmung Gestaltwahrnehmung Wahrnehmungssystem ist bestrebt, möglichst ökonomisch zu arbeiten. - gruppiert die Gesamtheit der einströmenden
MehrTeil 6: Farbe. Einleitung. Farbreiz vs. Farbwahrnehmung. Farbräume, Verwendung von Farbe
Farbräume, Verwendung von Farbe Einleitung Farbe: Wichtiger Bestandteil d. vis. Wahrnehmung Mehrdimensional (Farbton, Helligkeit, etc.) Rechnen mit Farben: Farbmetrik Was ist Farbe überhaupt? Eigenschaft
MehrTeil 6: Farbe Farbräume, Verwendung von Farbe
Farbräume, Verwendung von Farbe Einleitung Farbe: Wichtiger Bestandteil d. vis. Wahrnehmung Mehrdimensional (Farbton, Helligkeit, etc.) Rechnen mit Farben: Farbmetrik Was ist Farbe überhaupt? Eigenschaft
MehrBildschirmdarstellung
Checkliste darstellung Mit der folgenden Checkliste können Beschäftigte die Qualität ihrer darstellung und die Gebrauchstauglichkeit ihrer Software überprüfen. Beschäftigte/r: : Datum: Der ist so eingestellt,
MehrSchrift- klassifikation
Schrift- klassifikation Warum sollten wir Schriften klassifizieren? Orientierung in der Schriften-Fauna Orientierung in der Schriften-Fauna Vertrieb/Verkauf Orientierung in der Schriften-Fauna Vertrieb/Verkauf
MehrDigitale Bildbearbeitung und Fotografie. Dozenten: Arne Scheffer
Dozenten: Arne Scheffer Wiederholung: Kompression: Einführung zum Verständnis Teil 1: nicht fertig, Teil 2: nicht fertig, Teil 3: nicht fertig, Teil 4: nicht fertig Fortsetzung Teil 2: Teil 2.2: blau!
MehrFarbe in der Computergraphik
Farbe in der Computergraphik Farbe in der Computergraphik Gliederung: Licht und Farbe Farbspezifikation Farbmodelle Gamma und Gammakorrektur B. Preim AG Visualisierung Farbe 2 Farbe in der Computergraphik
MehrDie Typografie. Daimler Brand & Design Navigator
Daimler Brand & Design Navigator 01. Mai 2016 Die Typografie Das visuelle Erscheinungsbild greift die Elemente der Schweizer Typografie auf. Sachlichkeit und Klarheit sind grundlegend für Schrifteinsatz
MehrTypografibel. xefg. Robert Engelhardt Werbemittelgestaltung FIGD, August 011
Typografibel xefg H 1 Robert Engelhardt Werbemittelgestaltung FIGD, August 011 Inhaltsverzeichnis Typografische Begriffe... 3 H Venezianische Renaissance-Antiqua... 4 Französische Renaissance-Antiqua...
MehrButz, Krüger: Mensch-Maschine-Interaktion, Kapitel 2 - Wahrnehmung. Mensch-Maschine-Interaktion
Folie 1 Mensch-Maschine-Interaktion Kapitel 2 - Wahrnehmung Sehsinn und visuelle Wahrnehmung Physiologie der visuellen Wahrnehmung Farbwahrnehmung Attentive und präattentive Wahrnehmung Gestaltgesetze
MehrFarbatlas nach Johann Heinrich Lambert
Farbordnungssysteme im letzten Kapitel Farbmetrik als Grundlage des wissenschaftlichen Umgangs mit Farbe Werkzeug eines technischen Spezialisten Problem Kunden von Architekten oder Designer beherrschen
MehrDamit die IwebsN Ihre Besucher nicht sticht Unsere EMPFEHLUNGEN für Ihren gepflegten Webauftritt
Damit die IwebsN Ihre Besucher nicht sticht Unsere EMPFEHLUNGEN für Ihren gepflegten Webauftritt INHALTSVERZEICHNIS INHALTSVERZEICHNIS... 2 ALLGEMEIN... 3 SCHRIFT... 5 GRAFIKEN... 6 FARBEN... 7 Seite 2
MehrEINFÜHRUNG GRAFIK 1 Von Elvira Stein
EINFÜHRUNG GRAFIK 1 Von Elvira Stein / @elvirastein HALLO! Ich bin Elvira. Ich lebe und arbeite als Grafikerin und Illustratorin in Wien. Bitte stellt euch kurz vor. Was sind eure Erwartungen und Wünsche
MehrMetrix Design Guidelines
s 12.12.2013 www.open-store.net Um einen professionell aussehenden SkinPart zu erstellen musst du auf einige simple Dinge achten. Sofern du diese Regeln beachtest, wirkt das Ergebnis aufgeräumt und übersichtlich,
MehrColorcontex Zusammenhänge zwischen Farbe und textilem Material
Colorcontex Zusammenhänge zwischen Farbe und textilem Material Zusammenfassung 2 2 2 Abstract Gruppierungen nach Eigenschaftspaaren Wirkung der Materialien Auswertung 3 4 5 6 7 8 9 10 Gelb Orange Rot Braun
Mehr92. Schriften. Thomas Worsch. Wintersemester 2014/2015
LATEX, beamer, tikz und Co. LATEX, beamer, tikz und Co. 92. Schriften Thomas Worsch Fakultät für Informatik Karlsruher Institut für Technologie Wintersemester 2014/2015 1 / 12 Überblick Encodings and Fonts
MehrPräsentationsziele Vorüberlegungen zum gewählten Thema
Präsentation Grundlagen und Tipps 1 Präsentationsziele Vorüberlegungen zum gewählten Thema Ich will mit meiner Präsentation erreichen, dass... Ziele müssen sein:... realistisch... auf die Zielgruppe abgestimmt...
MehrEmpfehlungen zur Erstellung von Infomaterial
Information, Beratung und Vernetzung für die Alphabetisierung und Grundbildung Erwachsener Empfehlungen zur Erstellung von Infomaterial Typografie Einsatz von Schrift Bilder Piktogramme Icons Orientierung
MehrDigitale Bilder. Ein Referat von Jacqueline Schäfer und Lea Pohl Am
Digitale Bilder Ein Referat von Jacqueline Schäfer und Lea Pohl Am 06.05.2015 Inhaltsverzeichnis Einheiten Grafiktypen Bildformate Farbtiefe Farbbilder/ Farbräume Quellen Einführung in die Bildverarbeitung
MehrANZEIGENDESIGN NEU GRUNDLAGENINFORMATIONEN
ANZEIGENDESIGN NEU GRUNDLAGENINFORMATIONEN Allgemeine Basisinformationen, Grundelemente und Anwendungsbeispiele Gordana Uzelac, Agentur für Kommunikation im August 2013 WWW.RZENS.DE INHALT Anzeigen Konzept
MehrObjekterkennung durch Vergleich von Farben. Videoanalyse Dr. Stephan Kopf HWS2007 Kapitel 5: Objekterkennung
Objekterkennung durch Vergleich von Farben 48 Farbräume (I) Definitionen: Farbe: Sinnesempfindung (keine physikalische Eigenschaft), falls Licht einer bestimmten Wellenlänge auf die Netzhaut des Auges
Mehr5 Methoden zur genauen Ermittlung des Goldenen Schnittes:
Der Goldene Schnitt Harmonie und Proportion in Kunst, Design, Innenarchitektur und Architektur Die in der Natur herrschenden Verhältnisse des gleichseitigen Dreiecks, des Quadrates, des gleichseitigen
MehrCorporate. Design HANDBUCH. Ihr Spezialist für Prospektverteilung!
Corporate Design HANDBUCH Ihr Spezialist für Prospektverteilung! 2 Armin Diehl GmbH CD Handbuch Inhalt 4-5 6-7 8-9 10-11 12 Das Logo Logoproportionen Unzulässige Verwendung Die Logofarben Die Schriften
Mehrl nicht von oben fotografieren l Mitten meiden (kein mittlerer Horizont)
Seite 1/5 Bildgestaltung Wirkung kennen und richtig einsetzen Warum Bilder Gefallen Grundsätzlich ist ein Bild dann gut, wenn derjenige der es gemacht hat, gut findet. Warum sprechen gewisse Bilder die
MehrCorporate Design-Manual 11/2008 Leitfaden zur Verwendung der Dachmarke für die Region Itzehoe
Corporate Design-Manual 11/2008 Leitfaden zur Verwendung der Dachmarke für die Region Itzehoe Die Region Itzehoe präsentiert sich mit einer neuen Dachmarke und dem Slogan Hightech & Lebenslust im Norden".
MehrGeschichte Grundlagen Fibonacci-Zahlen Geometrischer Trugschluß Anwendung Fazit und Ausblick. Der Goldene Schnitt. Dario Jotanovic
Der Goldene Schnitt Dario Jotanovic Mathematisches Proseminar Implementierung mathematischer Algorithmen Hochschule Darmstadt 19. Dezember 2013 Inhaltsangabe 1 Geschichte 2 Grundlagen Teilung im goldenen
MehrInhalt und Überblick. Visuelle Kognition Adrian Schwaninger Universität Zürich
Einleitung Visuelle Kognition Adrian Schwaninger Universität Zürich Inhalt und Überblick Repräsentation, Erkennung, Kategorisierung Traditioneller Ansatz Ansichtenbasierte Modelle Diskussion Gesichterwahrnehmung
MehrSchriftfamilien. Schriftschnitte
Schriftfamilien Was meist vereinfachend als Schrift bezeichnet wird, (also z.b. Helvetica oder Times ) ist genau genommen eine Schriftfamilie. Innerhalb einer Schriftfamilie kommen unterschiedliche Strichstärken,
MehrCorporate-Design-Manual für Print-Anzeigen
Corporate-Design-Manual für Print-Anzeigen Einführung Auf den folgenden Seiten wird das Corporate Design für Print-Anzeigen beschrieben. Die Vorgaben sind für Dokumente bis zu einer Größe von DIN A3 maßgeblich.
MehrSatzarten. Blocksatz. Flattersatz linksbündig
Satzarten Das Schriftbild wird in hohem Maße durch die Satzausrichtung bestimmt. Die meisten Programme die mit Text arbeiten, lassen eine Einstellung der Textränder zu. Blocksatz Der Blocksatz ergibt klar
MehrAbstrakter Expressionismus. Willkommen
Willkommen... in der grossen Familie derjenigen Künstler, die sich der abstrakten Malerei verschrieben haben. Du wirst berühmten Namen begegnen: Gorky, Pollock, Rothko, Newman, Klein. Diese Maler-Gruppe
MehrTypografie Farbgestaltung Schreiben fürs Web
Typografie Farbgestaltung Schreiben fürs Web Prof. Astrid Beck Gestaltung Ziel der Gestaltung mit Schrift und Farbe Aufmerksamkeit wecken Gute Lesbarkeit Inhalt unterstreichen Inhalt vermitteln Vermeidung
Mehr