Grundlagen Digitaler Mediengestaltung

Grundlagen der digitalen
Mediengestaltung
Ralf Stockmann, Nils K. Windisch
Niedersächsische Staats- und Universitätsbibliothek Göttingen

Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen

Gliederung
1. Einleitung
2. Medien
3. Farben
4. Typographie
5. Logodesign
6. Bildelemente
7. Iconsets
8. Animationen, Flash und AJAX
9. Barrierefreiheit
10. Usability
11. Performance
12. Test / Validierung


1. Einleitung


Wir: Nils K. Windisch
• Stellv. Leitung Gruppe WWW, Portale
• Web Project Manager / Senior Web Developer
• M.A. Medien- und Kommunikationswissenschaften,
Soziologie & MA. Library and Informations Science
• SUB (seit 2006): Forschungsprojekte, Web Development
• Web (seit ~2002): (X)HTML, PHP, MySQL, JavaScript,
jQuery, CSS, XML, JSON, WordPress, TYPO3, Flickr,
de.icio.us, Bibsonomy usw.


Wir: Ralf Stockmann

• Dipl. Sozw., Schwerpunkt Medienwissenschaften
• Stellv. Leitung Forschung & Entwicklung der SUB
Göttingen


http://ﬂickr.com/stockmann

Meistens läuft es so...
• „Irgendeiner muss sich um das Design kümmern, wer
erbarmt sich?“
• „Unsere Sekretärin macht alle Printsachen, die kann
das auch erledigen.“
• „Wir haben 500 € im Antrag dafür, wem geben wir
die jetzt?“
• „Ich kenne da jemanden, der hat schon die Seite zu
seinem Fußballverein gebaut.“ (Schwager-eines-
Freundes-Phänomen)

Spannungsfelder

• Sachlich vs. Emotional
• Künstlerisch vs. Formalisiert
• Professionell vs. Selbstgemacht
• Individualität vs. Standardisierung
• Gut gemeint vs. Gut gekonnt

Ist gutes Design
basisdemokratisch?


Debian OS (Linux)

Microsoft Windows 7

Apple OS X

Gutes Design kommt nicht aus der Mode

• Dieter Rams
(Braun, 1950er)
• Apple, 2000er


10 Prinzipien (Dieter Rams)
Gutes Design...
• ist innovativ.
• macht ein Produkt brauchbar.
• ist ästhetisches Design.
• macht ein Produkt verständlich.
• ist ehrlich.
• ist unaufdringlich.
• ist langlebig.
• ist konsequent bis ins letzte Detail.
• ist umweltfreundlich.
• ist so wenig Design wie möglich.

Schlüsselbegriff: Konsistenz
• „wie aus einem Guss“
• durchdacht
• stimmig
• konsequent
• Liebe zum Detail
• gewissenhaft
• gründlich
• Ausnahmen sind gewollt
und bestätigen die Regel

Ohne Konsistenz ist jedes
Design schlecht.


Details beachten!

Konsistenz einfach Konsistenz schwer
herzustellen herzustellen

Design ist (auch) Handwerk
• Ausbildungsberufe
• Geschick
• Erfahrung
• Technikverstand
• Daher: gutes Design kostet
• Zeit
• Geld
• Nerven

Man muss es nicht selbst
besser machen können, um zu
sagen, dass etwas schlecht ist.


Design ist sehr privat
• Wir verraten viel über unser Kunstverständnis
• Vergleiche: was hängen wir uns an die Wand
• Familienbilder
• Röhrender Hirsch
• Bildende Kunst
• Zeitgenössische Kunst
• Eigene Fotograﬁen
• „Das soll so, das ist Kunst!“
• Um die Regeln brechen zu
können, muss ich sie kennen

Gutes Design
ist eine Frage der Haltung.
(der Personen und des Projektes)


Was ist unsere Haltung?

• Welche Werte wollen wir vermitteln:
• Innovation, Tradition,Verlässlichkeit, Schnelligkeit,
Beharrlichkeit, Wissenschaftlichkeit, Seriosität,
Jugend, Erfahrung, Flexibilität, Originalität, ...


Ziel des Workshops
• Wenn möglich: es den Proﬁs überlassen. Dann aber:
• klare Anweisungen geben können
• deren Ergebnisse beurteilen können
• Wenn man es selbst machen (muss):
• die gröbsten Fehler vermeiden
• gut geklaut ist bei Design immer besser als
schlecht selbst gemacht

Wo sollte ich „klauen“?
Eher hier: Weniger hier:

• Museen • Bibliotheken
(sonst wären wir nicht
• Autohersteller hier)
• Banken • (Tages-) Zeitungen
r • (Design) Möbelhersteller • Versandhandel
• Fernsehsender


pearl.de


Museum Ludwig


Gestaltung: Analogie zu
digitalem Büro
• Viele Menschen müssen mittlerweile
Sekretariatsaufgaben übernehmen weil
es die Technik „so einfach“ macht.
• Früher: Diktiergeräte. Heute:
Textverarbeitung.
• Aber: wir schreiben dadurch nicht
bessere Briefe, sondern werden von der
Arbeit abgelenkt.
• Die Demokratisierung der Möglichkeit,
Design zu erstellen, geht nicht einher
mit einem Zuwachs an Wissen über die
Grundregeln des Designs.

Was uns fehlt:
die Rechtschrbkontrolle
für Designfragen


Die Checkliste
• Fasst die wesentlichen Felder
zusammen
• Kann bei jedem Projekt
durchgegangen werden
• Kann mit Prioritäten
versehen / ignoriert /
erweitert werden
• EXCEL, PDF
• Download: http://
wwwuser.gwdg.de/~rstockm/
download/mediengestaltung/


Checkliste: Gestaltung
Grundlagen der digitalen Mediengestaltung / Ralf Stockmann - Nils K. Windisch
Beschreibung der Punkte: http://wwwuser.gwdg.de/~rstockm/download/mediengestaltung/
Stand: 31.3.2010

Projekt:

Ansprechpartner: Datum:

1. Einleitung Ja Nein nicht zutreffend

Sind die Verantwortlichkeiten für die Gestaltungsaufgaben geklärt? O O O
Ist ein Budget definiert worden? O O O
Habe ich definiert, welche Haltung ich kommunizieren möchte? O O O
Habe ich eine "Geschichte", die ich erzählen möchte (Storyboard, Dramaturgie)? O O O

2. Medien Ja Nein nicht zutreffend

Sind sämtliche benötigten Medien mitgedacht? O O O
Ist der Einsatz jeder Form schlüssig begründet? O O O
Der Style-Guide berücksicht sämtliche (relevanten) Medienformen und umfassend? O O O
Ich setze verschiedene Webseiten Formen (Blog, Forum, Wiki) zweck-/sinngemäß ein? O O O

Elemente
Der Header ist erkennbar und der Nutzwert klar ersichtlich? O O O
Das Menü ist nutzbar und ermöglicht die Erreichbarkeit aller relevanten Inhalte? O O O
Der Footer bietet sinnvollen Mehrwert und ermutigt zum Einstieg in nicht offensichtliche Inhalte? O O O
Der Content ist sauber strukturiert und einzelne Inhaltselemente klar erkennbar? O O O
Die Domain ist aus Nutzersicht schlüssig und die Systematik zugänglich (erratbar)? O O O

Rezeption
Relevante Nutzungszenarien sind erörtert und technisch entsprechend berücksichtigt? O O O
Ich weiß, ob und wie ich mobile Anzeigegeräte unterstützen möchte? O O O
Ich habe die Nutzungsszenarien "im Büro", "auf dem Sofa" und "an der Bushaltestelle" selbst ausprobiert? O O O
Habe ich die Obeflächen auf schlecht eingestellten / alten Präsentationsgeräten (Monitore, Beamer) getestet? O O O

3. Farben Ja Nein nicht zutreffend

Verfügen alle informationstragenden Elemente über ausreichenden Kontrast zum Hintergrund? O O O
Wurde die Farbpalette mit einem Generator erzeugt / evaluiert? O O O
Werden alle Farbverläufe ohne Treppenstufen / Artefakte / Fehlfarben dargestellt? O O O

Links
Heben sich Textlinks klar vom umgebenden Fließtext ab? O O O
Sind Links überall auf der Seite konsistent formatiert? O O O
Ist die Linkfarbe abgestimmt auf die Farbpalette? O O O
Sind Schaltflächen/Buttons mit ausreichenden Trefferzonen (ganzes Objekt) ausgestattet? O O O
Sind klickbare Elemente mit Hover-Effekten versehen? O O O

4. Typographie Ja Nein nicht zutreffend

Schriften werden universal definiert (Fallback bei fehlender Schrift)? O O O
Überschriften sind als solche erkennbar und hierarchisch voneinander abgehoben? O O O
Schriftgrößen und Zeilenabstände werden als harmonisch wahrgenommen? O O O
Es werden nicht mehr als drei Schriften bzw. Schriftgrößen verwendet, falls doch, ist dies sinnvoll begründet? O O O
Ich weiß, warum serif- und sans-serig-Schriften gemischt verwendet werden und welchen Effekt ich damit erziele? O O O
E-Mails schreibe ich in Plain-Text (vs. HTML), weil ich möglichst viel Menschen erreichen möchte? O O O
Text wurde in gut lesbaren Spalten gesetzt und zieht sich nicht über die gesamte Breite der Seite? O O O
Lange Textpassagen werden durch genügend Absätze gegliedert? O O O
Ist der Zeilenabstand bei Fließtexten etwas erweitert (1.2 statt 1)? O O O

5. Logodesign Ja Nein nicht zutreffend

Repräsentiert das Logo das Projekt / die Einrichtung? O O O
Ist das Design an die erwartete Nutzungszeit angepasst (kurzlebiges Projekt, langlebige Einrichtung)? O O O
Ist es in allen Medien nutzbar (Druck, Visitenkarte, s/w, ...) O O O
Setzt es sich gegen andere Logos in einer logo-Farm angemessen durch? O O O
Wurde geprüft ob eine Logo-Wettbewerb zielführend seien könnte? O O O

6. Bildelemente Ja Nein nicht zutreffend

Sind die ausgesuchten Bildelemente in Form, Stil, Farbe, Einstellung konsistent? O O O
Ist die technische Qualität ausreichend (Schärfe, Auflösung, Farbtiefe)? O O O
Entsprechen die Proportionen sämtlicher Bildelemente der Vorlage? O O O
Sind die Bildrechte geklärt? O O O

Kombination von Text über Bild
Heben sich alle Schriftbereiche ausreichend vom Hintergrund ab? O O O
Haben nicht verbundene Seitenelemente ausreichend Abstand (ca. 5 Pixel) voneinander (Text zu Tabellenrand etc.) O O O

7. Iconsets Ja Nein nicht zutreffend

Sämtliche Icons stammmen aus dem gleichen Icon-Set? O O O
Alle Icons sind selbsterklärend? O O O
Die Bedeutung von symbolhaften Icons ist mit bewusst und interkulturell funktional? O O O
Das Farbschema der Icons ist stimmig zu den CD-Farben? O O O
Ich habe die Optionen noch nicht existente Funktionen mit Icons /abzudecken/? O O O
Ich setze so wenig Icons wie möglich ein? O O O

8. Animationen, Flash und AJAX Ja Nein nicht zutreffend

Der Einsatz von Animationen ist gut begründet (Beiwerk, Schmuckelement etc. zählt nicht)? O O O
Flash-Inhalte sind zugänglich gestaltet, via (1) AJAX und (2) nur-HTML? O O O
Ich weiß, warum ich ein (Flash-)Intro anzeige und das dies evtl. Nutzer abschreckt? O O O

9. Barrierefreiheit Ja Nein nicht zutreffend

BITV ist zu erfüllen da öffentliche Einrichtung? O O O
Bild-, Ton- und Videodokumente sind alternativ zugänglich? O O O
Der Nutzer weiß immer wo er ist, wie er dort hingekommen ist und wo es weitergeht? O O O
Technische Mittel sind dokumentiert? O O O
Ich habe eine Strategie bisherige Webseiten BITV-konform zu gestalten? O O O
Der Nutzer muss nicht unangebracht viel denken? ("Don't make me think!"-Credo) O O O

10. Usability Ja Nein nicht zutreffend

Inhalte wahrnehmbar? O O O
Inhalte sind nutzbar? O O O
Inhalte sind verständlich? O O O
Technische Voraussetzungen sind robust? O O O
Ich biete alternative Navigationsstrukturen? O O O
Ich habe assistive Technologien mitgedacht? O O O
Ich weiß, was Nutzer sehen, wenn sie eine nicht existente Seite aufrufen? O O O

11. Performance Ja Nein nicht zutreffend

Dateien sind so klein wie möglich (ohne das Kompressionsartefakte sichtbar werden)? O O O
Die Anzahl der Dateien ist so gering wie möglich? O O O
Ich habe an den Server und die Anbindung gedacht? O O O
Die Datenbank(struktur) ist von einem Experten geprüft worden? O O O
Ich habe eine Ahnung, was meine Nutzer benutzen? O O O
Ich weiss, welche Browser ist unterstützen möchte? O O O
Ich habe drei oder mehr Browser ausprobiert? O O O

12. Testing / Validierung Ja Nein nicht zutreffend

Ich habe gestestet? O O O
Ich habe validiert? O O O

Checkliste:
Haltung

Habe ich geklärt, welche Haltung meine nicht
1 Ja Nein
Homepage vermitteln soll? zutreffend

Habe ich eine „Geschichte“, die ich erzählen nicht
2 Ja Nein
möchte? (Storyboard, Dramaturgie) zutreffend


2. Medien


Formen
• Briefpapier
• E-Mail
• Flyer
• Micro-Blogging
• PDF
• Präsentation
• Video
• Visitenkarte
• Webseite

Unterschiedliche Formen

• CI/CD: Corporate Identity/Corporate Design
• Wiedererkennungsmerkmale über alle Formen
hinweg
• Farbe, Proportion, Whitespace, etc.
• Finden sie eine! Agentur, die für Sie arbeitet
• Halten Sie einen Style-Guide bereit

"The site ﬂows too much. It needs to be more
‘boxy’ so people know it’s a website and not a
paper ﬂyer or poster."

(Clients from Hell)


Style Guide -
Bundesregierung I
• Basiselemente (Print)
• Bildwortmarke
• Platzierung mehrerer Bildwortmarken
• Platzierung von Logos
• Schriften
• Farben
• Raster
• Layoutprinzip

Style Guide -
Bundesregierung II
• Basiselemente (Online)
• Bildwortmarke
• Schriften
• Farben
• Gestaltungsﬂäche
• Raster
• Screenaufteilung und Frames
• Bild- und Formensprache

Style Guide -
Bundesregierung III
• Geschäftsausstattung (Print, Standard)
• Briefbogen
• Kurzmitteilung
• Faxmitteilung
• Visitenkarte
• Briefumschlag
• Adressetikett
• Papier
• E-Mail-Signatur

Webseite - Formen
• Blog - Sie reden mit ihren Nutzern
• Forum - Sie lassen Nutzer miteinander reden
• Wiki - Nutzer arbeiten zusammen
• Suchmaschine - Nutzer ﬁnden etwas
• Shop - Sie verkaufen etwas
• Portfolio - Sie präsentieren sich
• Portal, Galerie, LMS, etc.

Checkliste:
Medien

nicht
3 Sind sämtliche relevanten Medien mitgedacht? Ja Nein
zutreffend

Ist der Einsatz jedes Mediums schlüssig nicht
4 Ja Nein
begründet? zutreffend


Webseite - Elemente

• Header, Menu, Content, Footer, Featured, Ads,
News, Sitemap
• Domain
• Optimierung, Tracking, Testing
• Develop, Stage, Live

Elemente: Header
• Denken Sie an Briefköpfe auf Speed
• Funktion
• Home Button
• RSS, Twitter, etc.
• (Menu)
• Formen
• Nur Text, Text + Logo, Bild, Animation
• Was immer auch Sie im Header nutzen, diese Elemente
ﬁnden sich auch auf Visitenkarten, Präsentationsfolien, etc.

Header

Elemente: Menu
• Trennung von Menüs
• Hauptmenü (meist links vertikal)
• Tools (meist oben rechts horizontal)
• Kontextsensitiv (bei Amazon: Hauptmenü oben,
speziﬁsche Links links plaziert)
• Mehr als 8 Punkte?
• Aufklappen; Ja oder Nein?
• in <5 Sekunden erfassbar

Elemente: Footer

• Abschluss der Seite
• Funktionen anbieten
• Selected Sitemap
• Featured Content
• RSS, Twitter, etc.

Footer

Elemente: Content
• strukturiert, erkennbar, lesbar
• Verschiedene Inhaltselemente
• Überschriften!
• Text (Absätze)
• Bild
• Tabelle
• etc.

Client:

"What is the adress of the website?"
Me:

"It’s www.*****.com"
Client:

"You must be mistaken, where is the ‘@’ ?!"

(Clients from Hell)


Elemente: Domain I

• URL: www.example.com
• subdomain.domain.tld
• "com" - TLD (Top Level Domain)
• "example" - Domain (das kaufen Sie)
• "www" - Subdomain (das richten sie ein
[optional])


Elemente: Domain II

• URLs sind Funktion
• /contact, /sitemap, /help
• URLs sind für Menschen (Pretty/Clean URLs)
• example.com/archives/2010/03
• example.com/products/
• apple.com/iphone/gallery/ vs. apple.com?id=1234

Elemente: Domain III
• don't: http://en.wikipedia.org/wiki
• don't: http://example.com/page/main.html
• don't: http://example.com/menu/info.html
• example.com? = RFC2606: ".example" is
recommended for use in documentation or as
examples


Checkliste: Elemente
Der Header ist erkennnar und der Nutzwert klar nicht
5 Ja Nein
ersichtlich? zutreffend

Das Menü ist nutzbar und ermöglicht die nicht
6 Ja Nein
Erreichbarkeit aller relevanten Inhalte? zutreffend

Der Footer bietet sinnvollen Mehrwert und
nicht
7 ermutigt zum Einstieg in nicht offensichtliche Ja Nein
zutreffend
Inhalte?

Der Content ist sauber strukturiert und einzelne nicht
8 Ja Nein
Inhaltselemente klar erkennbar? zutreffend

Die Domain aus Nutzersicht schlüssig und die nicht
9 Ja Nein
Systematik zugänglich (erratbar)? zutreffend


Rezeption


Rezeption - Technik

• Beamer, Browser, E-Mail, haptisch, Mobiltelefon
• Unterschiede:
• Anzeigengröße
• Hardwareleistung
• Dateisystem

Rezeption - Verhalten

• Aufmerksamkeitsspanne variiert stark
• Bedürfnisse stark unterschiedlich
• Beispiel:
1. Zuhause
2. vor Ort
3. unterwegs


1. vor Ort

• Ich habe keine Zeit
• Ich will wissen, ob es da ist
• Ich will wissen, wo ich es bekomme


2. Zuhause

• Ich habe Zeit
• Ich will mir merken, was ich gefunden (und gesucht)
habe
• Ich bin bereit Neues zu entdecken

3. unterwegs

• Ich habe (keine) Zeit
• Ich will wissen, ob sich der Weg lohnt
• Jemandem zeigen, was ich gefunden habe


iPhone

• Will ich für mobile Geräte
optimieren?

• iPhone = Internet

• Nutzer die Wahl lassen

• Gewohnte Nutzung
unterstützen


iPhone


iPhone (Bad vs. Good)


iPhone (Web vs. Mobile)


Checkliste:
Rezeption

Relevante Nutzungsszenarien sind erörtert und nicht
10 Ja Nein
technisch entspr. berücksichtigt? zutreffend


Dein Feind,
der Beamer


Schwarzwert
Ein Beamer kann nur aufhellen: der dunkelste Punkt auf der Leinwand
entspricht dem maximalen Schwarz


So soll es sein


So wird es sein


Lichtstärke hilft


und eine Leinwand


vor allem aber: Abdunkeln


Dein Feind, der Beamer
• Auﬂösung
• Farbechtheit
• Kontrast
• Browser
• Power Point-Versionen
• Animationen
• Schatten
• Videos
• Eigenes Notebook anschließen

3. Farben


Farbenlehre

• Das Primat der
Lesbarkeit:
• alle relevanten
Informationen
müssen gut lesbar
sein


Farbkontraste
L=100
• Wie ein Schwarz-Weiß
Verlauf haben auch
Farben eine Helligkeit
• Diese kann L=50
subjektivem Empﬁnden
unterliegen
• Grün wirkt für viele
dunkler als rot
L=0

Farbkontraste
• Der L (Luminanz)
Abstand sollte
zwischen Schrift und
Hintergrund
mindestens 30
betragen
• Zu große Abstände
(90, 100) wirken
schnell banal, kleinere
wertiger

Problembeispiel
zwei von drei Texten haben zu wenig Kontrast


Schriftfarben für Fließtext
• 20% Grau unleserlich
• 40% Grau kritisch
• 60% Grau
• 80% Grau optimal

• 90% Grau
• 100% Schwarz banal


Checkliste:
Farben

Verfügen alle verwendeten Schriftfarben über nicht
11 Ja Nein
ausreichend Kontrast zum Hintergrund? zutreffend


Feine Unterschiede

ICH BIN ANSTRENGEND

ICH BIN INTERESSANT


Farbkombinationen
bitte nichts erﬁnden, es gibt genug Angebote

http://colorschemedesigner.com/

Beispiel: heute.de


Checkliste:
Farben

Wurde die Farbpalette mit einem Generator nicht
12 Ja Nein
erzeugt / getestet? zutreffend


Gängige Probleme beim
Umgang mit Farben
• Kontrast
• stellen wir uns Farben als Graustufen vor: haben wir mehr als 50% Kontrastunterschied?
• 100% Kontrastunterschied wirkt gewöhnlich
• Stimmige Farben
• an Paletten orientieren
• von gelungenen Seiten übernehmen
• Rot/Grün-Blindheit
• Internationale Unterschiede kennen - Beispiel Wertigkeit:
• Europa: Blau
• Amerika: Rot
• Modefarben können schnell wieder anstrengend wirken. Beispiel: Cyan (die Web 2.0 Farbe)


Hintergründe

• Farben
• Verläufe
• Bilder
• don‘t: ﬁxierter Bildhintergrund (Performance)


Verläufe
Anzahl der Farbstufen, Kompressionsartefakte


Checkliste:
Farben

nicht
13 Werden Farbverläufe ohne Stufen abgebildet? Ja Nein
zutreffend


Streitthema Linkfarben
• dies ist ein klassischer Link
ich bin traditionell, achte auf Standards, ignoriere
Modetrends und bin ein wenig stur

• dies ist ein moderner Link
mir ist Anmutung wichtiger als Funktion, Nutzer
können sich schon eingewöhnen, ich weiß was gut ist

• und dies ist ein Kompromiss aus beidem

...aber bitte: konsistent!


Checkliste:
Links

Sind die Links klar genug von anderen nicht
14 Ja Nein
Textbereichen abgesetzt? zutreffend

nicht
15 Sind Links konsistent formatiert? Ja Nein
zutreffend


Schaltﬂächen
• Reiterleisten
• Buttons
• Schalter
• Hover-Effekte
• Konsistenz
• Trefferzonen
immer über die
ganze Fläche
legen

Problem: klickbarer Bereich
Reine Textlinks sind bei dichten Navigationsbereichen schwer zu treffen.

Besser: mit einer Box versehen und Hover-Effekt.


Checkliste:
Links

Sind alle Schaltﬂächen und Buttons mit nicht
16 Ja Nein
ausreichenden Trefferﬂächen versehen? zutreffend


4. Typographie


Typographie

• ..ist Anmutung
• ..beeinﬂusst die Nutzbarkeit
• ..ist Gestaltungselement


"I hate this new font. Use the ﬁrst one I showed you.
This one makes the site look cheap instead of elegant."

The ‘cheap’ font was Georgia, the ‘elegant’ font was Georgia Italic.

(Clients from Hell)


Top 100 (Quelle)

1. Helvetica (1957)
2. Garamond (1530)
3. Frutiger (1977)
4. Bodoni (1790)
5. Futura (1927)
6. Times (1931)
7. Akzidenz Grotesk (1966)
8. Ofﬁcina (1990)
9. Gill Sans (1930)
10.Univers (1954)
11.Optima (1954) (Universität Göttingen und SUB)


Schriftgröße: klein oder groß
• Überschriften sind immer größer als der Fließtext
• Klein = konzentriertes Lesen, aber auf Dauer
anstrengend
• Groß = leicht zu überﬂiegen
• Letztendlich: es gibt kein "oder" der harmonische
Mix ist entscheidend, aber insg. nicht mehr als X
unterschiedliche Größen einsetzen.

So wenig unterschiedliche
Typen und Schriftgrößen
wie möglich!


Zählen Sie...


Fonts in Web I

• "serif", "sans-serif" und
"monospace"... jep, das ist alles!

• { font-family: Times, serif }

• { font-family: Arial, sans-serif }

• { font-family: Courier,
monospace }


Fonts in Web II

• Safe: serif, sans-serif, monospace
• Safe-ish: Arial (sans-serif), "Times New
Roman" (serif), "Courier New" (monospace),
• Alternativen: z. B. sIFR
• Schlechte Alternative: Font als Image
• Zukunft: @font-face

serif vs. sans-serif


Typographie und E-Mails

• Stark eingeschränkten Einﬂuss auf die Darstellung
beim Empfänger
• Ja, HTML geht, aber Sie verkaufen etwas und Haben
Hochglanzprodukte?
• HTML-E-Mail immer auch mit Nur-Text-Version


Absätze
Das Web ist eher Zeitung/Magazin als Buch
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam labore et dolore magna aliquyam erat,
erat, sed diam voluptua. At vero eos sed diam voluptua. At vero eos et
et accusam et justo duo dolores et ea accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum
sea takimata sanctus est Lorem
dolor sit amet.
ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing Lorem ipsum dolor sit amet,
elitr, sed diam nonumy eirmod consetetur sadipscing elitr, sed diam
tempor invidunt ut labore et dolore nonumy eirmod tempor invidunt ut
magna aliquyam erat, sed diam labore et dolore magna aliquyam erat,
voluptua. At vero eos et accusam et sed diam voluptua. At vero eos et
justo duo dolores et ea rebum. Stet accusam et justo duo dolores et ea
clita kasd gubergren, no sea takimata rebum. Stet clita kasd gubergren, no
sanctus est Lorem ipsum dolor sit sea takimata sanctus est Lorem ipsum
amet. Lorem ipsum dolor sit amet, dolor sit amet. Lorem ipsum dolor sit
consetetur sadipscing elitr, sed diam amet, consetetur sadipscing elitr, sed
nonumy eirmod tempor invidunt ut diam nonumy eirmod tempor invidunt
labore et dolore magna aliquyam ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos erat, sed diam voluptua.
et accusam et justo duo dolores et ea
At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd
sea takimata sanctus est Lorem gubergren, no sea takimata sanctus
ipsum dolor sit amet. est Lorem ipsum dolor sit amet.

Setzen Sie viele Absätze (alle 8 bis 20 Zeilen)

Zeilenlänge
Niemand mag Viewport-breite Zeilenlängen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit
amet.

• Praktische Richtwerte:
• Spalten: 550px für Fließtext, 220px für Menüs

Zeilenabstand
leicht erweiterter Zeilenabstand: schnell umgesetzt, große Wirkung
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos labore et dolore magna aliquyam
et accusam et justo duo dolores et ea erat, sed diam voluptua. At vero eos
rebum. Stet clita kasd gubergren, no et accusam et justo duo dolores et ea
sea takimata sanctus est Lorem rebum. Stet clita kasd gubergren, no
ipsum dolor sit amet. Lorem ipsum
sea takimata sanctus est Lorem
dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod ipsum dolor sit amet. Lorem ipsum
tempor invidunt ut labore et dolore dolor sit amet, consetetur sadipscing
magna aliquyam erat, sed diam elitr, sed diam nonumy eirmod
voluptua. At vero eos et accusam et tempor invidunt ut labore et dolore
justo duo dolores et ea rebum. Stet
magna aliquyam erat, sed diam
clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit voluptua. At vero eos et accusam et
amet. Lorem ipsum dolor sit amet, justo duo dolores et ea rebum. Stet
consetetur sadipscing elitr, sed diam clita kasd gubergren, no sea takimata
nonumy eirmod tempor invidunt ut sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
erat, sed diam voluptua.
consetetur sadipscing elitr, sed diam
erat, sed diam voluptua.

Abstand: 1 Abstand: 1,2

Achten Sie auf Waisen!

Checkliste:
Typographie
Schriften werden universal deﬁniert (Fallback bei nicht
17 Ja Nein
fehlender Schrift)? zutreffend

Überschriften sind als solche erkennbar und nicht
18 Ja Nein
hierarchisch voneinander abgehoben? zutreffend

Schriftgrößen und Zeilenabstände werden als nicht
19 Ja Nein
harmonisch zueinander wahrgenommen? zutreffend

Es werden nicht mehr als drei Schriften und nicht
20 Ja Nein
Schriftgrößen verwendet? zutreffend


5. Logodesign


Logodesign

• Die Marke auf wenige Pixel komprimieren
• Wiedererkennbarkeit
• Unverwechselbar / Abgrenzung zu Mitbewerbern
• Schnell zu erfassen
• Multifunktional

Typen von Logos

• Nur Text
• Modiﬁzierter Text
• Text/Bild
• Nur Bild
• Abstrakt / Gegenständlich

Textmarken
Farbe, Schrifttype, Modiﬁkationen


Erweiterte Textmarken Modiﬁkationen, Hintergrundformen, Effekte


Text-Bildmarken


Reine Bildmarken


Internetmarken


Eine Variante:
Online-Logowettbewerb

http://99designs.com/

Checkliste:
Logogestaltung
Repräsentiert das Logo das Projekt / die nicht
21 Ja Nein
Einrichtung? zutreffend

Ist das Design an die erwartete Nutzungszeit nicht
22 Ja Nein
angepasst? (zeitlos, modisch) zutreffend

nicht
23 Ist es in allen Medien nutzbar? Ja Nein
zutreffend

nicht
24 Setzt es sich gegen andere Logos durch? Ja Nein
zutreffend


6. Bildelemente


Bildelemente
• Kategorien
• Fotograﬁen
• Verfremdungen
• Sättigung
• Effekte
• Zeichnungen
• Montagen
• Formen (Verläufe, Muster)

Problemfelder bei
Bildelementen

• Konsistenz ist teuer
• Selber anfertigen
• Sets kaufen (Getty etc.)
• Atmosphäre vs. Information
• Großzügige Verwendung oder Verschwendung?

Konsistenz bei Bildelementen

• Tiefenschärfe
• Freistellen
• Perspektive
• Farbgebung
• Motiv
• Menschen, Dinge, Räume, Natur...

Tiefenschärfe

Blende 5,6 Blende 1,8


Freistellen


Perspektive / Einstellung


Färbung


unpassende Kombinationen


passende Kombinationen


Qualitätskriterien bei
Bildelementen

• Kompressionsartefakte
• Schärfe
• Auﬂösung (sieht man Pixel?)
• Farbsäume
• Verläufe (sieht man Treppenstufen?)

Qualitätsunterschiede Schriftkanten, RSS Icon


Beispiel: RSS Icon

geringe mittlere gute
Auflösung Auflösung, Auflösung,
Pixelstruktur keine Pixel

Kompressionsartefakte worst case: um Logo-Schrift


Beispiel: Museum Ludwig


Internet-Bandbreite ist 2010
kein relevantes Thema mehr.

Es gibt keine Entschuldigung
für sichtbare Artefakte.


Absolut unverzeihlich:
Proportionen ändern
Vorlage

gestaucht

gestreckt

Checkliste:
Bildelemente

Sind Bildelemente in Stil, Farbe, Ausschnitt, Motiv nicht
25 Ja Nein
konsistent? zutreffend

Ist die technische Qualität ausreichend nicht
26 Ja Nein
(Auﬂösung, Kompression, Schärfe)? zutreffend

Entsprechen die Proportionen sämtlicher Bilder nicht
27 Ja Nein
der Vorlage? zutreffend

nicht
28 Habe ich die Bildrechte? Ja Nein
zutreffend


Kombination von
Text und Bild


Verfahren zum Freistellen

Hier steht Ihr Logo
Hier steht Ihr Logo
Hier steht Ihr Logo
Hier steht Ihr Logo


Harter Schlagschatten

Hier steht Ihr Logo
Hier steht Ihr Logo
Hier steht Ihr Logo
Hier steht Ihr Logo


Umrandungen


Einbettung


Kombination


Beispielseite: MoMA


Abstände
5 Pixel Abstand sind nie ein Fehler!


Feine Unterschiede

DAS IST KUNST
DAS IST SCHLAMPIG


Checkliste:
Text-/Bild Kombination

Heben sich Schriften ausreichend vom nicht
29 Ja Nein
Hintergrund ab? zutreffend

Haben nicht verbundene Elemente ausreichende nicht
30 Ja Nein
Abstände (mind. 5 Pixel) zueinander? zutreffend


Suchfelder und Ergebnislisten
• Suche vs. Browsing
• Wo ist die Suche platziert?
• Erkenne ich sie als Suche?
• Ist sie auf jeder Seite?
• Wird der Suchraum (gesamte Website, nur diese Seite,
Katalog, ...) klar kommuniziert?
• Nice to have: Echtzeitsuchen-Vorschläge
• aber nur, wenn man sinnvolle Ergebnisse liefern kann

Trefferlisten
• Einzelne Treffer weit genug voneinander absetzen
• Welche Informationen werden in der Trefferliste gegeben? Welche
sind notwendig, welche hilfreich?
• Vorschaubilder
• wohin gelange ich, wenn ich auf einen Treffer klicke, wie komme
ich zur Liste zurück?
• Ist die Liste persistent und/oder speicherbar?
• Kann ich die Trefferliste weiter einschränken (Drill down,
Facettierung)
• Expertensuche vs. Operatoren erklären

7. Iconsets


Icons: Bedeutungen

• Icons haben Symbolscharakter

• Die Bedeutung von Symbolen
ist mitzudenken


Icons: Beispiel Swastika

http://www.ﬂickr.com/photos/djwudi/13009987/ http://www.ﬂickr.com/photos/
30691679@N07/3010930372/

Icons: Neue Aufgaben

• Aufgabe:Visualisieren Sie die
Nutzung eines Touchscreen-
Device

• Lösung: dezidierte Ikonographie

• Beispiel: gesturecons.com


Icons: zu viel!

Icons: inkonsistent

Icons: Problemfelder

• Gute Icons sind teuer.
• Modulare Software = inkonstistente Ikonographie
• Jedes Iconset, was wir ﬁnden enthält immer nur ca.
80% der Icons, die wir brauchen


(Gute) Icons: Unbezahlbar


Checkliste:
Iconsets
Sämtliche Icons stammen aus dem selben Icon- nicht
31 Ja Nein
Set? zutreffend

nicht
32 Alle Icons sind selbsterkärend? Ja Nein
zutreffend

Das Farbschema der Icons ist stimmig zur den nicht
33 Ja Nein
CD-Farben? zutreffend


8. Animationen, Flash
und AJAX


"I dont care if it loses 90% of visitors, we can't
have a skip on the website intro, we paid a lot
of money for that and everybody has to see it."

(Clients from Hell)


argh!

Warum

• Ermöglichung von Nutzerinteraktion (Stichwort:
Interaktion)
• Schlüssigere/Flüssigere Nutzererfahrung
• Hochglanz Selbstdarstellung


Animationen

• Das Web ist nicht mehr nur Text
• Was genau will ich erreichen


Flash

• In Webseiten eingebettete Datei, die mittels einer
Browsererweiterung abgespielt werden
• Bild, Datenbank, Graﬁk, Ton,Video, Interaktion
• Erstellt in einem Editor mit Scriptsprache
• seit 1996; erst Macromedia, nun Adobe

Flash Szenarien

• Begrüßungsanimation (jep, this is oh so last year)
• Browser Spiele (z. B. Moorhuhn anyone?)
• RIA (Rich Internet Application)
• Schrift ersetzen/darstellen (z. B. sIFR)
• Widgets/Badges (z. B. Flickr)

Warum Flash böse ist

• Adblocker stolpern
• überdurchschnittliche CPU/GPU-Nutzung
• SEO unfreundlich
• Der Zwang Alternativen mitzudenken
• Bruch mit Nutzungsstandards (Rechtsklick, Text
markieren, etc.)


Warum Flash gut ist

• Cross-Browser-Kompatibel
• volle Kontrolle über die Darstellung beim Nutzer
• Alternative zu AJAX


AJAX

• AJAX = Asyncronous JavaScript and XML
• Verschiedene Techniken gruppiert
• Manipulation von CSS, DOM ([X]HTML)
• XML (extensible Markup Language), JSON
(JavaScript Object Notation)
• XMLHttpRequest, REST

AJAX - Nutzen
• Nutzerinteraktion ohne erneutes Laden der Seite
• dynamische Informationsanzeige (besser: -aktualisierung)
• Anzeige sehr komplexer Daten/Informationen
• Beispiele:
• Selbstlaufende Bilderschau
• sich selbst aktualisierender Newsticker
• Zeitleiste mit sehr viel Informationen
• Dateiupload im Hintergrund

AJAX - Nachteile
• (basiert auf bzw.) abhängig von JavaScript
• immer Fall-back-Lösung anbieten
• Passiert immer was der Nutzer erwartet? (Links öffnen
nicht einfach nur eine Webseite, sondern können selbige
manipulieren)
• Komplexität (Was passiert, wenn externe Daten
nachgeladen werden sollen, aber nicht verfügbar sind?)
• JavaScript = Clientseitig, erhöhte Hardware-
Anforderungen beim Nutzer

Flash vs. AJAX

1. Erst erstelle ich alles in Flash, dann
2. programmiere ich ein AJAX-Fallback, dann
3. eine (X)HTML-Alternative


Checkliste:
Animationen
Der Einsatz von Animationen ist gut begründet? nicht
34 Ja Nein
(Beiwerk, Schmuckelement, etc. zählt nicht) zutreffend

Flash-Inhalte sind alternativ zugänglich via (1) nicht
35 Ja Nein
AJAX und (2) nur-HTML? zutreffend


9. Barrierefreiheit


BITV
• Barrierefreie Informationstechnik Verordnung
• Resultiert aus dem Gleichstellungsgesetz
• Bund seit 2002
• (amerikanischen Gegenstück: Section 508)
• Grundlage: WCAG 1.0 (Web Accessibility
Guidelines) der WAI (Web Accessibility Initiative)
des W3C (World Wide Web Consortium)


BITV - Bund

Gemäß BITV müssen ab 31.12.2005 alle öffentlich
zugänglichen Internetauftritte und -angebote sowie
Intranetauftritte und -angebote der Behörden der
Bundesverwaltung barrierefrei umgesetzt werden.


BITV in den Ländern

• Berlin: WBIT (23.06.2005) - Verwaltungsvorschrift
zur Schaffung Barrierefreier Infpramtionstechnik
(Berlin)
• Berlin: Grundlage: §3 Brandenburgische Barrierefreie
Informationstechnik Verordnung, 24.05.2005
• Niedersachsen: 27.11.2007 NBGG §9

BITV - NBGG (25.11.2007)
§9 Informationstechnik (jep, das sind nur 106 Wörter)
Die öffentlichen Stellen gestalten ihre Internetauftritte und -angebote sowie die
von ihnen zur Verfügung gestellten grafischen Programmoberflächen, die mit
Mitteln der Informationstechnik dargestellt werden, technisch so, dass sie von
Menschen mit Behinderungen grundsätzlich uneingeschränkt
genutzt werden können.Vorhandene Internetauftritte und -angebote sowie
zur Verfügung gestellte grafische Programmoberflächen sind im Sinne des Satzes 1
schrittweise umzugestalten. Sollte eine solche schrittweise Umgestaltung
aus technischen Gründen nicht oder nur mit einem unverhältnismäßigen
Aufwand möglich sein, so sind die Internetauftritte und -angebote sowie die
zur Verfügung gestellten grafischen Programmoberflächen spätestens bei einer
Neugestaltung des bestehenden Auftritts, des Angebots oder der bestehenden
grafischen Programmoberfläche im Sinne des Satzes 1 zu gestalten.


WCAG (BITV)
• Wahrnehmbar: Alternative Textversion, Untertitel,
Medienersatz, assistive Technologien, Kontraste
• Nutzbar: Keyboardnavigation, dezent/zurückhaltend,
Suche
• Verständlich: Lesbarkeit, komplexe Navigation
vermeiden, alternative Nutzungsstrategien
• Robust: Kompatibilität, techn. Hilfsmittel
unterstützen

BITV - Technikkriterien
• Browser-Kompatibilität
• HTML/CSS-Code-Errors
• JavaScript
• Multilingual
• WCAG 1.0-konform
• XHTML
• RSS-Feed
• sauberes HTML
• HTML-Tags (frame, iframe, from, label)
• Layout-Tabellen
• Broken Links


BITV - Hilfe
• Linkhervorhebung
• Nicht gefundene Seite
• Tastaturnavigation
• Externe Links
• HTML-Attribute (abbr, title, alt, description)
• Print-View
• 800px-View
• Kontaktangaben
• Farbwahl
• Breadcrumb/Browninghistory

BITV - Inhalte

• Happy Talk
• Zielgruppenspeziﬁscher Einstieg
• Neuste Dokumente
• Featured Content
• Meldungen

Don not read "Understanding WCAG 2.0"
In fact, do not read WCAG 2.0
Web Accessibility is about people, not about guidelines"
(Shawn Henry, W3C WAI)


BITV - zusammenfassend
• Verstehen Sie diese als Anregung, nicht als Pﬂicht
• Vage Formulierungen in Gesetze/verordnungen
stehen konkreten Anforderungen in Basistexten
gegenüber
• Sie sind mit dem Standpunkt "Der Aufwand ist
unverhältnismäßig" auf der sicheren Seite... aber: Wo
wir sind, ist vorn?!
• Die BITV kennt keine Sanktionen

Was noch mal

• Graustufen
• kein JavaScript
• keine Graﬁken
• kein CSS
• 600px width

Don't make me think!

Checkliste

• Öffentliche Einrichtung? BITV = Pﬂicht
• Texte lesbar?
• Der Nutzer weiss immer wo er ist?


Checkliste:
Barrierefreiheit
nicht
36 BITV ist zu erfüllen, da öffentliche Einrichtung? Ja Nein
zutreffend

Bild-,Video- und Tondokumente sind alternativ nicht
37 Ja Nein
zugänglich? zutreffend

Der Nutzer weiss auf jeder Seite wo er ist, wie er nicht
38 Ja Nein
dort hingekommen ist und wo es weitergeht? zutreffend

nicht
39 Techn. Mittel sind dokumentiert? Ja Nein
zutreffend


10. Usability


Usability vs. Accessibility
• Nutzbarkeit vs. Nutzbarkeit
• Ein Mobiltelefon/Toaster ist grundsätzlich usable und
accessible.
• Fällt es/er herunter kann er:
• A: noch funktionieren (usable), hat aber evtl. scharfe
Kanten (accessible)
• B: nicht mehr funktionieren (usable), aber äußerlich
unversehrt sein (accessible)

Rechtschreibung
• Das Web ist Text; Text folgt Regeln.
• Fehler sind Stoppschilder. Fehler lenken ab.
• "Any time I go to a web page with misspellings and
bad grammar, I usually leave within 30
seconds." (Quelle)
• Lösung: Redaktionelle Texte immer gegenlesen
lassen.


Above the Fold I

• Page Fold: Konzept, dass wichtige Inhalte auf der
oberen Hälfte der Darstellung zu ﬁnden sein
müssen.
• Hintergrund: Zeitungen am Kiosk liegen gefaltet
aus. Gekauft wird, was auffällt.
• Aber: Im Web wird gescrollt, ja, das machen die
Menschen wirklich


Beispiel

Pagefold

FAZ: analog digital

Above the Fold II

• Artikel von Paddy Donnely:
Life, below 600px

• Erkenntnis: Menschen scrollen!

• Konzept: Interesse wecken,
Interesse wecken... etwas
verkaufen vs. Hier ist er Preis,
alles anderes interessiert nicht?


Apple iPad

Grundlagen Digitaler Mediengestaltung

Grundlagen Digitaler Mediengestaltung

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Grundlagen Digitaler Mediengestaltung

Ähnlich wie Grundlagen Digitaler Mediengestaltung (20)

Mehr von Ralf Stockmann

Mehr von Ralf Stockmann (20)

Grundlagen Digitaler Mediengestaltung