Grundlagen Digitaler Mediengestaltung

  • 5,954 views
Uploaded on

Auf dem Weg zur digitalen Bibliothek wird ein Erfolgsmerkmal häufig …

Auf dem Weg zur digitalen Bibliothek wird ein Erfolgsmerkmal häufig
zu wenig beachtet: Bedienfreundlichkeit und professionelle Anmutung. Die
Gestaltung von digitalen Medien wie Projektwebseiten, Repositorien und
Katalogoberflächen ist kritischer Bestandteil und nimmt eine wesentliche
Rolle ein, schließlich bestimmt sie wie unsere Kunden - die Nutzer - unsere
Angebote wahrnehmen und nutzen.

In ihrer "analogen" Vergangenheit haben gerade Bibliotheken sowohl effiziente
als auch ästhetisch überzeugende Lösungen gefunden: man denke etwa an die
kunstvollen Lesesäle und deren elaborierte Nutzungsszenarien für Gebäude. In
der digitalen Welt hingegen präsentieren sich Bibliotheken den Benutzern
oftmals karg, lustlos, sperrig und lieblos. Darüber hinaus werden häufig die
grundsätzlichen Prinzipien z. B. der Farbenlehre, Typographie und Lesbarkeit
missachtet.

Der Kurs bietet eine klare "Checkliste" anhand derer Sie Ihre eigenen
Entwürfe oder aber auch die Arbeit von externen Dienstleistern einschätzen
können und somit ein Fundament für profunde Entscheidungen und Bewertungen.

Folgende Inhalte werden angesprochen:
Typographie in der digitalen Welt / Grundlagen der Farbenlehre / Verfahren
zur Bestimmung der Lesbarkeit / Barrierefreiheit / Performance als
Qualitätsmerkmal / Umgang mit Suchfeldern und Ergebnislisten / Logodesign /
Einsatz von Bildelementen / Iconsets und die Bedeutung von Konsistenz /
Sprache im Internet / Animationen, Flash & AJAX

Referenten: Ralf Stockmann (SUB Göttingen), Nils K. Windisch (SUB Göttingen)

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Super Präsi
    Danke
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,954
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
136
Comments
1
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 3. 1. Einleitung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 4. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 5. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 6. Wir: Ralf Stockmann • Dipl. Sozw., Schwerpunkt Medienwissenschaften • Stellv. Leitung Forschung & Entwicklung der SUB Göttingen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 7. http://flickr.com/stockmann Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 8. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 9. Spannungsfelder • Sachlich vs. Emotional • Künstlerisch vs. Formalisiert • Professionell vs. Selbstgemacht • Individualität vs. Standardisierung • Gut gemeint vs. Gut gekonnt Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 10. Ist gutes Design basisdemokratisch? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 11. Debian OS (Linux) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 12. Microsoft Windows 7 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 13. Apple OS X Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 14. Gutes Design kommt nicht aus der Mode • Dieter Rams (Braun, 1950er) • Apple, 2000er Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 15. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 16. Schlüsselbegriff: Konsistenz • „wie aus einem Guss“ • durchdacht • stimmig • konsequent • Liebe zum Detail • gewissenhaft • gründlich • Ausnahmen sind gewollt und bestätigen die Regel Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 17. Ohne Konsistenz ist jedes Design schlecht. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 18. Details beachten! Konsistenz einfach Konsistenz schwer herzustellen herzustellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 19. Design ist (auch) Handwerk • Ausbildungsberufe • Geschick • Erfahrung • Technikverstand • Daher: gutes Design kostet • Zeit • Geld • Nerven Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 20. Man muss es nicht selbst besser machen können, um zu sagen, dass etwas schlecht ist. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 21. 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 Fotografien • „Das soll so, das ist Kunst!“ • Um die Regeln brechen zu können, muss ich sie kennen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 22. Gutes Design ist eine Frage der Haltung. (der Personen und des Projektes) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 23. Was ist unsere Haltung? • Welche Werte wollen wir vermitteln: • Innovation, Tradition,Verlässlichkeit, Schnelligkeit, Beharrlichkeit, Wissenschaftlichkeit, Seriosität, Jugend, Erfahrung, Flexibilität, Originalität, ... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 24. Ziel des Workshops • Wenn möglich: es den Profis ü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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 25. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 26. pearl.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 27. Museum Ludwig Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 28. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 29. Was uns fehlt: die Rechtschrbkontrolle für Designfragen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 30. 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/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 31. 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
  • 32. 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
  • 33. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 34. 2. Medien Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 35. Formen • Briefpapier • E-Mail • Flyer • Micro-Blogging • PDF • Präsentation • Video • Visitenkarte • Webseite Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 36. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 37. "The site flows too much. It needs to be more ‘boxy’ so people know it’s a website and not a paper flyer or poster." (Clients from Hell) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 38. Style Guide - Bundesregierung I • Basiselemente (Print) • Bildwortmarke • Platzierung mehrerer Bildwortmarken • Platzierung von Logos • Schriften • Farben • Raster • Layoutprinzip Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 39. Style Guide - Bundesregierung II • Basiselemente (Online) • Bildwortmarke • Schriften • Farben • Gestaltungsfläche • Raster • Screenaufteilung und Frames • Bild- und Formensprache Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 40. Style Guide - Bundesregierung III • Geschäftsausstattung (Print, Standard) • Briefbogen • Kurzmitteilung • Faxmitteilung • Visitenkarte • Briefumschlag • Adressetikett • Papier • E-Mail-Signatur Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 41. Webseite - Formen • Blog - Sie reden mit ihren Nutzern • Forum - Sie lassen Nutzer miteinander reden • Wiki - Nutzer arbeiten zusammen • Suchmaschine - Nutzer finden etwas • Shop - Sie verkaufen etwas • Portfolio - Sie präsentieren sich • Portal, Galerie, LMS, etc. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 42. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 43. Webseite - Elemente • Header, Menu, Content, Footer, Featured, Ads, News, Sitemap • Domain • Optimierung, Tracking, Testing • Develop, Stage, Live Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 44. 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 finden sich auch auf Visitenkarten, Präsentationsfolien, etc. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 45. Header Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 46. Header Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 47. Elemente: Menu • Trennung von Menüs • Hauptmenü (meist links vertikal) • Tools (meist oben rechts horizontal) • Kontextsensitiv (bei Amazon: Hauptmenü oben, spezifische Links links plaziert) • Mehr als 8 Punkte? • Aufklappen; Ja oder Nein? • in <5 Sekunden erfassbar Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 48. Elemente: Footer • Abschluss der Seite • Funktionen anbieten • Selected Sitemap • Featured Content • RSS, Twitter, etc. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 49. Footer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 50. Footer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 51. Elemente: Content • strukturiert, erkennbar, lesbar • Verschiedene Inhaltselemente • Überschriften! • Text (Absätze) • Bild • Tabelle • etc. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 52. Client: "What is the adress of the website?" Me: "It’s www.*****.com" Client: "You must be mistaken, where is the ‘@’ ?!" (Clients from Hell) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 53. 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]) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 54. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 55. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 56. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 57. Rezeption Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 58. Rezeption - Technik • Beamer, Browser, E-Mail, haptisch, Mobiltelefon • Unterschiede: • Anzeigengröße • Hardwareleistung • Dateisystem Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 59. Rezeption - Verhalten • Aufmerksamkeitsspanne variiert stark • Bedürfnisse stark unterschiedlich • Beispiel: 1. Zuhause 2. vor Ort 3. unterwegs Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 60. 1. vor Ort • Ich habe keine Zeit • Ich will wissen, ob es da ist • Ich will wissen, wo ich es bekomme Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 61. 2. Zuhause • Ich habe Zeit • Ich will mir merken, was ich gefunden (und gesucht) habe • Ich bin bereit Neues zu entdecken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 62. 3. unterwegs • Ich habe (keine) Zeit • Ich will wissen, ob sich der Weg lohnt • Jemandem zeigen, was ich gefunden habe Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 63. iPhone • Will ich für mobile Geräte optimieren? • iPhone = Internet • Nutzer die Wahl lassen • Gewohnte Nutzung unterstützen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 64. iPhone Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 65. iPhone (Bad vs. Good) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 66. iPhone (Web vs. Mobile) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 67. Checkliste: Rezeption Relevante Nutzungsszenarien sind erörtert und nicht 10 Ja Nein technisch entspr. berücksichtigt? zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 68. Dein Feind, der Beamer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 69. Schwarzwert Ein Beamer kann nur aufhellen: der dunkelste Punkt auf der Leinwand entspricht dem maximalen Schwarz Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 70. So soll es sein Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 71. So wird es sein Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 72. Lichtstärke hilft Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 73. und eine Leinwand Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 74. vor allem aber: Abdunkeln Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 75. Dein Feind, der Beamer • Auflösung • Farbechtheit • Kontrast • Browser • Power Point-Versionen • Animationen • Schatten • Videos • Eigenes Notebook anschließen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 76. 3. Farben Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 77. Farbenlehre • Das Primat der Lesbarkeit: • alle relevanten Informationen müssen gut lesbar sein Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 78. Farbkontraste L=100 • Wie ein Schwarz-Weiß Verlauf haben auch Farben eine Helligkeit • Diese kann L=50 subjektivem Empfinden unterliegen • Grün wirkt für viele dunkler als rot L=0 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 79. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 80. Problembeispiel zwei von drei Texten haben zu wenig Kontrast Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 81. Schriftfarben für Fließtext • 20% Grau unleserlich • 40% Grau kritisch • 60% Grau • 80% Grau optimal • 90% Grau • 100% Schwarz banal Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 82. Checkliste: Farben Verfügen alle verwendeten Schriftfarben über nicht 11 Ja Nein ausreichend Kontrast zum Hintergrund? zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 83. Feine Unterschiede ICH BIN ANSTRENGEND ICH BIN INTERESSANT Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 84. Farbkombinationen bitte nichts erfinden, es gibt genug Angebote http://colorschemedesigner.com/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 85. Beispiel: heute.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 86. Beispiel: heute.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 87. Checkliste: Farben Wurde die Farbpalette mit einem Generator nicht 12 Ja Nein erzeugt / getestet? zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 88. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 89. Hintergründe • Farben • Verläufe • Bilder • don‘t: fixierter Bildhintergrund (Performance) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 90. Verläufe Anzahl der Farbstufen, Kompressionsartefakte Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 91. Checkliste: Farben nicht 13 Werden Farbverläufe ohne Stufen abgebildet? Ja Nein zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 92. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 93. ...aber bitte: konsistent! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 94. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 95. Schaltflächen • Reiterleisten • Buttons • Schalter • Hover-Effekte • Konsistenz • Trefferzonen immer über die ganze Fläche legen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 96. Problem: klickbarer Bereich Reine Textlinks sind bei dichten Navigationsbereichen schwer zu treffen. Besser: mit einer Box versehen und Hover-Effekt. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 97. Checkliste: Links Sind alle Schaltflächen und Buttons mit nicht 16 Ja Nein ausreichenden Trefferflächen versehen? zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 98. 4. Typographie Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 99. Typographie • ..ist Anmutung • ..beeinflusst die Nutzbarkeit • ..ist Gestaltungselement Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 100. "I hate this new font. Use the first 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 101. 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. Officina (1990) 9. Gill Sans (1930) 10.Univers (1954) 11.Optima (1954) (Universität Göttingen und SUB) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 102. Schriftgröße: klein oder groß • Überschriften sind immer größer als der Fließtext • Klein = konzentriertes Lesen, aber auf Dauer anstrengend • Groß = leicht zu überfliegen • Letztendlich: es gibt kein "oder" der harmonische Mix ist entscheidend, aber insg. nicht mehr als X unterschiedliche Größen einsetzen. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 103. So wenig unterschiedliche Typen und Schriftgrößen wie möglich! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 104. Zählen Sie... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 105. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 106. 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 } Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 107. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 108. serif vs. sans-serif Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 109. Typographie und E-Mails • Stark eingeschränkten Einfluss 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 110. 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 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 rebum. Stet clita kasd gubergren, no 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 111. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 112. 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 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 labore et dolore magna aliquyam amet. Lorem ipsum dolor sit amet, erat, sed diam voluptua. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Abstand: 1 Abstand: 1,2 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 113. Achten Sie auf Waisen! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 114. Checkliste: Typographie Schriften werden universal definiert (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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 115. 5. Logodesign Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 116. Logodesign • Die Marke auf wenige Pixel komprimieren • Wiedererkennbarkeit • Unverwechselbar / Abgrenzung zu Mitbewerbern • Schnell zu erfassen • Multifunktional Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 117. Typen von Logos • Nur Text • Modifizierter Text • Text/Bild • Nur Bild • Abstrakt / Gegenständlich Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 118. Textmarken Farbe, Schrifttype, Modifikationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 119. Erweiterte Textmarken Modifikationen, Hintergrundformen, Effekte Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 120. Text-Bildmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 121. Reine Bildmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 122. Internetmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 123. Eine Variante: Online-Logowettbewerb http://99designs.com/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 124. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 125. 6. Bildelemente Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 126. Bildelemente • Kategorien • Fotografien • Verfremdungen • Sättigung • Effekte • Zeichnungen • Montagen • Formen (Verläufe, Muster) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 127. Problemfelder bei Bildelementen • Konsistenz ist teuer • Selber anfertigen • Sets kaufen (Getty etc.) • Atmosphäre vs. Information • Großzügige Verwendung oder Verschwendung? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 128. Konsistenz bei Bildelementen • Tiefenschärfe • Freistellen • Perspektive • Farbgebung • Motiv • Menschen, Dinge, Räume, Natur... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 129. Tiefenschärfe Blende 5,6 Blende 1,8 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 130. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 131. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 132. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 133. Perspektive / Einstellung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 134. Färbung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 135. unpassende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 136. passende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 137. passende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 138. Qualitätskriterien bei Bildelementen • Kompressionsartefakte • Schärfe • Auflösung (sieht man Pixel?) • Farbsäume • Verläufe (sieht man Treppenstufen?) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 139. Qualitätsunterschiede Schriftkanten, RSS Icon Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 140. Beispiel: RSS Icon geringe mittlere gute Auflösung Auflösung, Auflösung, Pixelstruktur keine Pixel Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 141. Kompressionsartefakte worst case: um Logo-Schrift Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 142. Beispiel: Museum Ludwig Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 143. Internet-Bandbreite ist 2010 kein relevantes Thema mehr. Es gibt keine Entschuldigung für sichtbare Artefakte. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 144. Absolut unverzeihlich: Proportionen ändern Vorlage gestaucht gestreckt Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 145. 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 (Auflö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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 146. Kombination von Text und Bild Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 147. Verfahren zum Freistellen Hier steht Ihr Logo Hier steht Ihr Logo Hier steht Ihr Logo Hier steht Ihr Logo Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 148. Harter Schlagschatten Hier steht Ihr Logo Hier steht Ihr Logo Hier steht Ihr Logo Hier steht Ihr Logo Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 149. Umrandungen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 150. Einbettung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 151. Kombination Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 152. Beispielseite: MoMA Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 153. Abstände 5 Pixel Abstand sind nie ein Fehler! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 154. Abstände 5 Pixel Abstand sind nie ein Fehler! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 155. Feine Unterschiede DAS IST KUNST DAS IST SCHLAMPIG Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 156. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 157. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 158. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 159. 7. Iconsets Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 160. Icons: Bedeutungen • Icons haben Symbolscharakter • Die Bedeutung von Symbolen ist mitzudenken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 161. Icons: Beispiel Swastika http://www.flickr.com/photos/djwudi/13009987/ http://www.flickr.com/photos/ 30691679@N07/3010930372/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 162. Icons: Neue Aufgaben • Aufgabe:Visualisieren Sie die Nutzung eines Touchscreen- Device • Lösung: dezidierte Ikonographie • Beispiel: gesturecons.com Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 163. Icons: zu viel! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 164. Icons: inkonsistent Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 165. Icons: Problemfelder • Gute Icons sind teuer. • Modulare Software = inkonstistente Ikonographie • Jedes Iconset, was wir finden enthält immer nur ca. 80% der Icons, die wir brauchen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 166. (Gute) Icons: Unbezahlbar Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 167. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 168. 8. Animationen, Flash und AJAX Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 169. "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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 170. argh! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 171. Warum • Ermöglichung von Nutzerinteraktion (Stichwort: Interaktion) • Schlüssigere/Flüssigere Nutzererfahrung • Hochglanz Selbstdarstellung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 172. Animationen • Das Web ist nicht mehr nur Text • Was genau will ich erreichen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 173. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 174. Flash • In Webseiten eingebettete Datei, die mittels einer Browsererweiterung abgespielt werden • Bild, Datenbank, Grafik, Ton,Video, Interaktion • Erstellt in einem Editor mit Scriptsprache • seit 1996; erst Macromedia, nun Adobe Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 175. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 176. Warum Flash böse ist • Adblocker stolpern • überdurchschnittliche CPU/GPU-Nutzung • SEO unfreundlich • Der Zwang Alternativen mitzudenken • Bruch mit Nutzungsstandards (Rechtsklick, Text markieren, etc.) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 177. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 178. Warum Flash gut ist • Cross-Browser-Kompatibel • volle Kontrolle über die Darstellung beim Nutzer • Alternative zu AJAX Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 179. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 180. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 181. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 182. Flash vs. AJAX 1. Erst erstelle ich alles in Flash, dann 2. programmiere ich ein AJAX-Fallback, dann 3. eine (X)HTML-Alternative Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 183. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 184. 9. Barrierefreiheit Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 185. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 186. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 187. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 188. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 189. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 190. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 191. BITV - Hilfe • Linkhervorhebung • Nicht gefundene Seite • Tastaturnavigation • Externe Links • HTML-Attribute (abbr, title, alt, description) • Print-View • 800px-View • Kontaktangaben • Farbwahl • Breadcrumb/Browninghistory Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 192. BITV - Inhalte • Happy Talk • Zielgruppenspezifischer Einstieg • Neuste Dokumente • Featured Content • Meldungen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 193. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 194. BITV - zusammenfassend • Verstehen Sie diese als Anregung, nicht als Pflicht • 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 195. Was noch mal • Graustufen • kein JavaScript • keine Grafiken • kein CSS • 600px width Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 196. Don't make me think! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 197. Checkliste • Öffentliche Einrichtung? BITV = Pflicht • Texte lesbar? • Der Nutzer weiss immer wo er ist? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 198. 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 199. 10. Usability Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 200. 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) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 201. 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. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 202. Above the Fold I • Page Fold: Konzept, dass wichtige Inhalte auf der oberen Hälfte der Darstellung zu finden 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 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 203. Beispiel Pagefold FAZ: analog digital Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 204. 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? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 205. Apple iPad Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 206. iPad Application Design • Was sind die Kernfunktionen? Wie kann ich einige davon entfernen? • Wie kann ich es auf einem Touchscreen Device nutzbar machen? • Wie ermögliche ich eine emotionale Verbindung? • Stichworte: • Bedienung ausblenden wenn nicht gebraucht • Bearbeitung an Ort und Stelle • Psychology of touch • Artikel: Matt Legend Gemmell: iPad Application Design Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 207. Fehlerseiten • Entstehung • Der Nutzer vertippt sich • Ihr Redakteur hat eine Seite gelöscht/verschoben • Der Link in der E-Mail wurde abgeschnitten • Ergebnis • Geh weg! • Oh, das tut uns leid, wie können wir helfen? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 208. Geh weg! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 209. Oh, wie können wir helfen? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 210. lustig, aber hilfreich Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 211. ... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 212. Checkliste: Usability nicht 40 Ich habe assistive Technologien mitgedacht? Ja Nein zutreffend Ich weiß, was Nutzer sehen, wenn sie eine nicht nicht 41 Ja Nein existente Seite aufrufen? zutreffend nicht 42 Ich biete alternative Navigationsstrukturen? Ja Nein zutreffend nicht 43 Inhalte wahrnehmbar? Ja Nein zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 213. Performance als Qualitätsmerkmal Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 214. Warum Performance • Performance bestimmt Nutzererfahrung • "Jede Suche, die nicht innerhalb von 2 Sekunden Treffer liefert, ist kaputt" • Performance unterscheidet sie von Konkurrenten • "Diese Seite ist viel schneller, als jene dort." Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 215. Wo ist Performance? • Client-Seitig • Bandbreite (Download, paralelle Aufrufe, etc.) • Browser • JavaScript, Java • Plugins (Flash: CPU/GPU) • Server-seitig • Scriptsprache • Datenbank • Standort Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 216. Was ist Performance? • Technisch: die schnellstmögliche Bereitstellung von Informationen • Nutzer: der kürzeste Weg zur gesuchten Information • Weitere Stichworte: zuverlässige Verfüg- und Erreichbarkeit Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 217. Little things • je weniger externe Dateien umso besser • CSS/JS-Compression hilft • CSS: @import() ist langsam • Bilder optimieren (z. B. Adobe Fireworks) • JavaScript am Ende des HTML-Code einbinden Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 218. AJAX loader signalisiert: „es lohnt sich zu warten, ich arbeite“ Quelle: http://www.deviant-blog.de/ajax-loader-icons/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 219. Tools - Firefox • Firefox nutze ich nur zum Testen... • YSlow (Wie lange braucht was zum laden) • Firebug (Wie ist was aufgebaut) • Web Developer Tools (Zeige was wie konstruiert ist) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 220. Checkliste: Performance Dateien sind so klein wie möglich? Aber: bei nicht 44 Ja Nein Bildern ohne sichtbare Artefakte! zutreffend Ich habe an den Server und die Anbindung nicht 45 Ja Nein gedacht? zutreffend Ich habe eine Ahnung, was meine Nutzer nicht 46 Ja Nein benutzen? zutreffend Ich weiss, welche Browser ist unterstützen nicht 47 Ja Nein möchte? zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 221. 12 Testing/Validierung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 222. Was und warum testen • Verschiedene Anzeigegeräte • Wie wirkt mein Design auf einem Beamer/iPhone/ alten Browser? • Nutzererfahrung • Finden Nutzer, was sie suchen? • Eigene Ziele • Wird meine Botschaft optimal transportiert? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 223. Classic client answer to any question involving two options: “Well, let’s try it both ways and see how it looks.” (Clients from hell) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 224. Browser Viewport • Tatsächlich verfügbare Anzeigefläche • nicht gleich Größe des Browserfensters • Toolbars, Rahmen, Scrollbars etc, rauben Viewport Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 225. Google Browsersize Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 226. Browser Viewport • 800px Breite zwingend, >800px Breite optional • Netbooks, Internetcafe • auch geräteabhängig (Smartphones, iPhone, Handy) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 227. mit 800px nach Hause Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 228. Variabler Viewport/Content • Width • max. 960px • min. 800px • min. 600px (Content) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 229. Browser • Interpretieren HTML • Nutzen Plug-Ins (Flash, Java) • Führen JavaScript aus Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 230. MS Internet Explorer 6 • vor 4 Jahren haben wir noch über den IE 5.x und Netscape 4.x geredet • Browser sind vergänglich Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 231. Brower und JS • Vergleich der standardkonformen Javascript- Implementierung (via Sputnik) • n = 5000, min: ~80, max ~500 • Mitte = gut, Rand = schlecht • Entfernung untereinander = Ähnlichkeit Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 232. Nutzertests • Nutzerstudien kosten Geld, viel Geld • Automatisches Testen ist nicht erschöpfend • Nehmen sie fünf Menschen und schauen sie ihnen zu! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 233. "Can you call Google and ask them when the website will show up in the search results?" (Clients from Hell) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 234. Werde ich gefunden? • Erfassung meiner Inhalte von Google & Co. • Google Webmaster Tools Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 235. Warum validieren • Weil die BITV vorgibt, dass Technik standardkonform umgesetzt werden muss • Weil sich jeder Programmierer über sauberen Code (seines Vorgängers) freut Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 236. Wie validieren • Maschinell - Code/Funktionen • Code ist standardkonform • Eine Funktion erfüllt ihre Aufgabe (Anforderung) • Persönlich - Style Guide/Funktionen • Elemente folgen dem Style Guide • Eine Funktion funktioniert wie erwartet Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 237. XHTML strict validation is a tool, not a way of life. 1. Designer = strict XHTML 2. CMS = fail 3. Backend developer = fail 4. Editors = fail (CeQuelle) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 238. "A nice design.. Can you add some pop-ups to the website? That would make it more dynamic." (Clients from Hell) "I hear there’s a lot of new web technology since we last spoke.. Can you put all that technology in our website?" (Clients from Hell) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 239. Christmas Tree Approach • Webseite überarbeiten: komplett oder Christmas Tree Approach • Ich benötige Funktionalität, also füge ich sie einfach hinzu. • RSS, Twitter, E-Mail, Print • Jede Funktion bringt Code mit sich; unterschiedlichen Code • Im Zweifel neue Bedien- und Nutzungskonzepte Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 240. Checkliste: Testverfahren nicht 49 Ich habe gestestet? Ja Nein zutreffend nicht 50 Ich habe validiert? Ja Nein zutreffend Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 241. 13. Abschluss Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 242. Nicht erwähnt • SEO (Search Engine Optimization) • Werbung/Ads • Print (CMYK, dpi, etc.) • (Social Media) Marketing/Kommunikation • Schnittstellen/Webservices Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 243. how to • Erste Reaktion notieren • Beobachtungen anbringen, wenn gefragt (und nur wenn gefragt) • Auf den Punkt formulieren = keine allgemeinen Aussagen • Kontext und Zielgruppe beachten • Das wichtigste Kriterium ist, inwieweit Erwartungen erfüllt werden • Subjektive Aussagen sind OK, solange sie als solche erkennbar sind • Die Gesamtheit beachten (Design = Design + Content) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 244. Benutzen Sie! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  • 245. Lesen Sie! • Hunderte Web/Design/Developer-Blogs • ... • Smashing Magazine • aus Deutschland, in englischer Sprache • Beispielartikel: 100 WordPress Themes, Incredible Free Icon Sets, Web Design Trends, 8 Layout Solutions, 1o Mistakes in Logo Design, 30 Scripts for Galleries, etc... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen