SlideShare ist ein Scribd-Unternehmen logo
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

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


Grundlagen der digitalen Mediengestaltung                   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
http://flickr.com/stockmann
Grundlagen der digitalen Mediengestaltung                                Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Ist gutes Design
             basisdemokratisch?

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Debian OS (Linux)
Grundlagen der digitalen Mediengestaltung    Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Microsoft Windows 7
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Apple OS X
Grundlagen der digitalen Mediengestaltung                Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Ohne Konsistenz ist jedes
              Design schlecht.


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




                 Konsistenz einfach         Konsistenz schwer
                   herzustellen               herzustellen
Grundlagen der digitalen Mediengestaltung              Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Gutes Design
  ist eine Frage der Haltung.
                                   (der Personen und des Projektes)




Grundlagen der digitalen Mediengestaltung                      Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
pearl.de




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




Grundlagen der digitalen Mediengestaltung          Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Was uns fehlt:
 die Rechtschrbkontrolle
     für Designfragen

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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




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


Grundlagen der digitalen Mediengestaltung               Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
"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
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
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
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
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
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
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
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
Header
Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Header
Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Footer
Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Footer
Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
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
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
Rezeption


Grundlagen der digitalen Mediengestaltung               Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
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
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
iPhone




Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
iPhone (Bad vs. Good)




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
iPhone (Web vs. Mobile)




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Dein Feind,
                                            der Beamer

Grundlagen der digitalen Mediengestaltung             Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
So soll es sein




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




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




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




Grundlagen der digitalen Mediengestaltung    Ralf Stockmann, Nils K. Windisch - SUB Göttingen
vor allem aber: Abdunkeln




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
3. Farben


Grundlagen der digitalen Mediengestaltung               Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Problembeispiel
                                             zwei von drei Texten haben zu wenig Kontrast




Grundlagen der digitalen Mediengestaltung                                                   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Feine Unterschiede


                                            ICH BIN ANSTRENGEND


                                            ICH BIN INTERESSANT




Grundlagen der digitalen Mediengestaltung                         Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Farbkombinationen
                                            bitte nichts erfinden, es gibt genug Angebote




                                       http://colorschemedesigner.com/
Grundlagen der digitalen Mediengestaltung                                                  Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Beispiel: heute.de




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




Grundlagen der digitalen Mediengestaltung           Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Hintergründe

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

Grundlagen der digitalen Mediengestaltung                  Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Verläufe
                                            Anzahl der Farbstufen, Kompressionsartefakte




Grundlagen der digitalen Mediengestaltung                                                  Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
...aber bitte: konsistent!




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
4. Typographie


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


     • ..ist Anmutung
     • ..beeinflusst die Nutzbarkeit
     • ..ist Gestaltungselement

Grundlagen der digitalen Mediengestaltung                 Ralf Stockmann, Nils K. Windisch - SUB Göttingen
"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
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
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
So wenig unterschiedliche
        Typen und Schriftgrößen
             wie möglich!

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




Grundlagen der digitalen Mediengestaltung                   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
serif vs. sans-serif




Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
Achten Sie auf Waisen!
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
5. Logodesign


Grundlagen der digitalen Mediengestaltung               Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Textmarken
                                            Farbe, Schrifttype, Modifikationen




Grundlagen der digitalen Mediengestaltung                                       Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Erweiterte Textmarken      Modifikationen, Hintergrundformen, Effekte




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




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




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




Grundlagen der digitalen Mediengestaltung                Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Eine Variante:
                Online-Logowettbewerb




                                            http://99designs.com/
Grundlagen der digitalen Mediengestaltung                           Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
6. Bildelemente


Grundlagen der digitalen Mediengestaltung          Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Tiefenschärfe




                            Blende 5,6                Blende 1,8


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




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




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




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




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




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




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




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




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Qualitätsunterschiede   Schriftkanten, RSS Icon




Grundlagen der digitalen Mediengestaltung                             Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Kompressionsartefakte      worst case: um Logo-Schrift




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




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Absolut unverzeihlich:
                        Proportionen ändern
                                                       Vorlage



                                                   gestaucht


                                                    gestreckt
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Kombination von
                         Text und Bild

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Umrandungen




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




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




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




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Abstände
                                            5 Pixel Abstand sind nie ein Fehler!




Grundlagen der digitalen Mediengestaltung                                          Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Abstände
                                            5 Pixel Abstand sind nie ein Fehler!




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


                                 DAS IST KUNST
                                  DAS IST SCHLAMPIG



Grundlagen der digitalen Mediengestaltung             Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
7. Iconsets


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


     •       Icons haben Symbolscharakter

     •       Die Bedeutung von Symbolen
             ist mitzudenken




Grundlagen der digitalen Mediengestaltung    Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Icons: zu viel!
Grundlagen der digitalen Mediengestaltung                     Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Icons: inkonsistent
Grundlagen der digitalen Mediengestaltung        Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
(Gute) Icons: Unbezahlbar




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
8. Animationen, Flash
               und AJAX

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
"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
argh!
Grundlagen der digitalen Mediengestaltung           Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
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
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
9. Barrierefreiheit


Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
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
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
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
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
BITV - Inhalte

     • Happy Talk
     • Zielgruppenspezifischer Einstieg
     • Neuste Dokumente
     • Featured Content
     • Meldungen
Grundlagen der digitalen Mediengestaltung                Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
Was noch mal

     • Graustufen
     • kein JavaScript
     • keine Grafiken
     • kein CSS
     • 600px width
Grundlagen der digitalen Mediengestaltung              Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Don't make me think!
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
10. Usability


Grundlagen der digitalen Mediengestaltung               Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
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
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
Beispiel

                                                 Pagefold




                   FAZ: analog                                                   digital
Grundlagen der digitalen Mediengestaltung                   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
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
Apple iPad
Grundlagen der digitalen Mediengestaltung                Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung
Grundlagen Digitaler Mediengestaltung

Weitere ähnliche Inhalte

Was ist angesagt?

Film titles
Film titlesFilm titles
Film titles
EttyHope
 
Focal length
Focal lengthFocal length
Focal length
MarcusWarren8
 
Sketching To Communicate, Share Stories And Solve Problems
Sketching To Communicate, Share Stories And Solve ProblemsSketching To Communicate, Share Stories And Solve Problems
Sketching To Communicate, Share Stories And Solve Problems
Kelsey Ruger
 
Historia de la fotografía
Historia de la fotografíaHistoria de la fotografía
Historia de la fotografía
Gustavo Adolfo Vassallo
 
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
Seattle Interactive Conference
 
UX Leadership
UX LeadershipUX Leadership
UX Leadership
cxpartners
 
Sung Woo Kim: Citizen Engagement in policy design
Sung Woo Kim: Citizen Engagement in policy designSung Woo Kim: Citizen Engagement in policy design
Sung Woo Kim: Citizen Engagement in policy design
Service Design Network
 
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
Eva-Lotta Lamm
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Erin 'Folletto' Casali
 
Modernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo GiannascaModernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo Giannasca
FrostSydney
 
Bruno Munari - Design e Comunicação Visual
Bruno Munari   - Design e Comunicação VisualBruno Munari   - Design e Comunicação Visual
Bruno Munari - Design e Comunicação Visual
Charles Franklin
 
Presentazioni efficaci #1 - la preparazione
Presentazioni efficaci #1 - la preparazionePresentazioni efficaci #1 - la preparazione
Presentazioni efficaci #1 - la preparazione
Alessandra Farabegoli
 
14 Inspiring Paul Rand Quotes!
14 Inspiring Paul Rand Quotes!14 Inspiring Paul Rand Quotes!
14 Inspiring Paul Rand Quotes!
DesignMantic
 
7 consigli per una buona presentazione
7 consigli per una buona presentazione7 consigli per una buona presentazione
7 consigli per una buona presentazione
Monica Stefanelli
 
Emosido engañado - La gran mentira del diseño de UX y el User Centered Design
Emosido engañado - La gran mentira del diseño de UX y el User Centered DesignEmosido engañado - La gran mentira del diseño de UX y el User Centered Design
Emosido engañado - La gran mentira del diseño de UX y el User Centered Design
Sergio de la Casa
 
Ecologia di Powerpoint e dei suoi simili
Ecologia di Powerpoint e dei suoi similiEcologia di Powerpoint e dei suoi simili
Ecologia di Powerpoint e dei suoi simili
Sergio Gridelli
 
What is design
What is design What is design
What is design
Sean Durham
 
Oficina Design para quem não é Designer
Oficina Design para quem não é DesignerOficina Design para quem não é Designer
Oficina Design para quem não é Designer
Andreza Jackson
 
History of cameras and photography for record
History of cameras and photography for recordHistory of cameras and photography for record
History of cameras and photography for record
wifeysarg
 
Using Design thinking to create great customer experiences
Using Design thinking to create great customer experiencesUsing Design thinking to create great customer experiences
Using Design thinking to create great customer experiences
Wendy Castleman
 

Was ist angesagt? (20)

Film titles
Film titlesFilm titles
Film titles
 
Focal length
Focal lengthFocal length
Focal length
 
Sketching To Communicate, Share Stories And Solve Problems
Sketching To Communicate, Share Stories And Solve ProblemsSketching To Communicate, Share Stories And Solve Problems
Sketching To Communicate, Share Stories And Solve Problems
 
Historia de la fotografía
Historia de la fotografíaHistoria de la fotografía
Historia de la fotografía
 
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
Writing for Doing, Not Reading: The UX Writer’s Role | Seattle Interactive 2017
 
UX Leadership
UX LeadershipUX Leadership
UX Leadership
 
Sung Woo Kim: Citizen Engagement in policy design
Sung Woo Kim: Citizen Engagement in policy designSung Woo Kim: Citizen Engagement in policy design
Sung Woo Kim: Citizen Engagement in policy design
 
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
Sketchnotes / Visual Note Taking @ WebExpo Prague 2010
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
 
Modernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo GiannascaModernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo Giannasca
 
Bruno Munari - Design e Comunicação Visual
Bruno Munari   - Design e Comunicação VisualBruno Munari   - Design e Comunicação Visual
Bruno Munari - Design e Comunicação Visual
 
Presentazioni efficaci #1 - la preparazione
Presentazioni efficaci #1 - la preparazionePresentazioni efficaci #1 - la preparazione
Presentazioni efficaci #1 - la preparazione
 
14 Inspiring Paul Rand Quotes!
14 Inspiring Paul Rand Quotes!14 Inspiring Paul Rand Quotes!
14 Inspiring Paul Rand Quotes!
 
7 consigli per una buona presentazione
7 consigli per una buona presentazione7 consigli per una buona presentazione
7 consigli per una buona presentazione
 
Emosido engañado - La gran mentira del diseño de UX y el User Centered Design
Emosido engañado - La gran mentira del diseño de UX y el User Centered DesignEmosido engañado - La gran mentira del diseño de UX y el User Centered Design
Emosido engañado - La gran mentira del diseño de UX y el User Centered Design
 
Ecologia di Powerpoint e dei suoi simili
Ecologia di Powerpoint e dei suoi similiEcologia di Powerpoint e dei suoi simili
Ecologia di Powerpoint e dei suoi simili
 
What is design
What is design What is design
What is design
 
Oficina Design para quem não é Designer
Oficina Design para quem não é DesignerOficina Design para quem não é Designer
Oficina Design para quem não é Designer
 
History of cameras and photography for record
History of cameras and photography for recordHistory of cameras and photography for record
History of cameras and photography for record
 
Using Design thinking to create great customer experiences
Using Design thinking to create great customer experiencesUsing Design thinking to create great customer experiences
Using Design thinking to create great customer experiences
 

Andere mochten auch

Lemon pie
Lemon pieLemon pie
Lemon pie
PerlaSarubbi
 
Violeta en flor
Violeta en florVioleta en flor
Violeta en flor
mer58vio94
 
Cuestionario de Enfermedades de Maternidad
Cuestionario de Enfermedades de MaternidadCuestionario de Enfermedades de Maternidad
Cuestionario de Enfermedades de Maternidad
Rozzi Cabrera
 
Zukunft der E Books
Zukunft der E BooksZukunft der E Books
Zukunft der E Books
Ralf Stockmann
 
01 al 05 de junio
01 al 05 de junio01 al 05 de junio
01 al 05 de junio
colegiommc
 
Video 2 curso_gratis_052013
Video 2 curso_gratis_052013Video 2 curso_gratis_052013
Video 2 curso_gratis_052013
AcademiadeExpertos
 
Instalacion del servidor proxy para conectar una red lan a una pc con salid...
Instalacion del  servidor  proxy para conectar una red lan a una pc con salid...Instalacion del  servidor  proxy para conectar una red lan a una pc con salid...
Instalacion del servidor proxy para conectar una red lan a una pc con salid...
ChanCHIMAL
 
Centro educativo de remolino
Centro educativo de remolinoCentro educativo de remolino
Centro educativo de remolino
08457778
 
Revista
RevistaRevista
Ley indigena2010t
Ley indigena2010tLey indigena2010t
Ley indigena2010t
KimunMapu
 
2015 domingo xxxiii t.o.
2015 domingo xxxiii t.o.2015 domingo xxxiii t.o.
2015 domingo xxxiii t.o.
Voluntariado A IC
 
Tarea1
Tarea1Tarea1
Protesis dental power
Protesis dental powerProtesis dental power
Protesis dental power
5221490
 
TAM-Anlagestrategie
TAM-AnlagestrategieTAM-Anlagestrategie
TAM-AnlagestrategieDino Toniolo
 
Bericht zur Bundeskonferenz der Roverstufe 2014
Bericht zur Bundeskonferenz der Roverstufe 2014Bericht zur Bundeskonferenz der Roverstufe 2014
Bericht zur Bundeskonferenz der Roverstufe 2014
Deutsche Pfadfinderschaft Sankt Georg
 
2014 Sexto Domingo de Pascua
2014 Sexto Domingo de Pascua2014 Sexto Domingo de Pascua
2014 Sexto Domingo de Pascua
Voluntariado A IC
 
E bussiness
E bussinessE bussiness
Kiss
KissKiss
2015 cuaresma lll
2015 cuaresma lll2015 cuaresma lll
2015 cuaresma lll
Voluntariado A IC
 
Redes luis arrufat
Redes luis arrufatRedes luis arrufat
Redes luis arrufat
luistafurra1997
 

Andere mochten auch (20)

Lemon pie
Lemon pieLemon pie
Lemon pie
 
Violeta en flor
Violeta en florVioleta en flor
Violeta en flor
 
Cuestionario de Enfermedades de Maternidad
Cuestionario de Enfermedades de MaternidadCuestionario de Enfermedades de Maternidad
Cuestionario de Enfermedades de Maternidad
 
Zukunft der E Books
Zukunft der E BooksZukunft der E Books
Zukunft der E Books
 
01 al 05 de junio
01 al 05 de junio01 al 05 de junio
01 al 05 de junio
 
Video 2 curso_gratis_052013
Video 2 curso_gratis_052013Video 2 curso_gratis_052013
Video 2 curso_gratis_052013
 
Instalacion del servidor proxy para conectar una red lan a una pc con salid...
Instalacion del  servidor  proxy para conectar una red lan a una pc con salid...Instalacion del  servidor  proxy para conectar una red lan a una pc con salid...
Instalacion del servidor proxy para conectar una red lan a una pc con salid...
 
Centro educativo de remolino
Centro educativo de remolinoCentro educativo de remolino
Centro educativo de remolino
 
Revista
RevistaRevista
Revista
 
Ley indigena2010t
Ley indigena2010tLey indigena2010t
Ley indigena2010t
 
2015 domingo xxxiii t.o.
2015 domingo xxxiii t.o.2015 domingo xxxiii t.o.
2015 domingo xxxiii t.o.
 
Tarea1
Tarea1Tarea1
Tarea1
 
Protesis dental power
Protesis dental powerProtesis dental power
Protesis dental power
 
TAM-Anlagestrategie
TAM-AnlagestrategieTAM-Anlagestrategie
TAM-Anlagestrategie
 
Bericht zur Bundeskonferenz der Roverstufe 2014
Bericht zur Bundeskonferenz der Roverstufe 2014Bericht zur Bundeskonferenz der Roverstufe 2014
Bericht zur Bundeskonferenz der Roverstufe 2014
 
2014 Sexto Domingo de Pascua
2014 Sexto Domingo de Pascua2014 Sexto Domingo de Pascua
2014 Sexto Domingo de Pascua
 
E bussiness
E bussinessE bussiness
E bussiness
 
Kiss
KissKiss
Kiss
 
2015 cuaresma lll
2015 cuaresma lll2015 cuaresma lll
2015 cuaresma lll
 
Redes luis arrufat
Redes luis arrufatRedes luis arrufat
Redes luis arrufat
 

Ähnlich wie Grundlagen Digitaler Mediengestaltung

Selbermachen!
Selbermachen! Selbermachen!
Unternehmertreff am Mediencampus
Unternehmertreff am MediencampusUnternehmertreff am Mediencampus
UE PR und Social Media 3 - Monitoring
UE PR und Social Media 3 - MonitoringUE PR und Social Media 3 - Monitoring
UE PR und Social Media 3 - MonitoringYussi Pick
 
Ibrahim Evsan HOTSPOT Vortrag
Ibrahim Evsan HOTSPOT VortragIbrahim Evsan HOTSPOT Vortrag
Ibrahim Evsan HOTSPOT Vortrag
kambeckfilm
 
CHECKPOINT 2009: Agenturpräsentation von dimap communications
CHECKPOINT 2009: Agenturpräsentation von dimap communicationsCHECKPOINT 2009: Agenturpräsentation von dimap communications
CHECKPOINT 2009: Agenturpräsentation von dimap communications
polisphere
 
Schritt für Schritt zur Digitalen Kommune
Schritt für Schritt zur Digitalen KommuneSchritt für Schritt zur Digitalen Kommune
Schritt für Schritt zur Digitalen Kommune
Kommunale Gemeinschaftsstelle für Verwaltungsmanagement (KGSt)
 
DigiMediaL - Crowdfunding für Musiker
DigiMediaL - Crowdfunding für MusikerDigiMediaL - Crowdfunding für Musiker
DigiMediaL - Crowdfunding für MusikerDigiMediaL_musik
 
Die Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
Die Rolle eines modernen Publishers am Beispiel der Ravensburger DigitalDie Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
Die Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
Daniel Volk
 
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
Joachim Kemper
 
Digitalbiographie barcamp bonn2018
Digitalbiographie barcamp bonn2018Digitalbiographie barcamp bonn2018
Digitalbiographie barcamp bonn2018
Kai Heddergott
 
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
wirjetzthier (wjh-kommunikation)
 
Social Media Monitoring für den öffentlichen Sektor
Social Media Monitoring für den öffentlichen SektorSocial Media Monitoring für den öffentlichen Sektor
Social Media Monitoring für den öffentlichen Sektor
Stefan Evertz
 
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
City & Bits GmbH
 
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
Roman Kessler
 
Social Business JamCamp Bustour
Social Business JamCamp BustourSocial Business JamCamp Bustour
Social Business JamCamp Bustour
Frank Hamm
 
NGO Marketing fürs schmale Budget
NGO Marketing fürs schmale BudgetNGO Marketing fürs schmale Budget
NGO Marketing fürs schmale Budget
Roger L. Basler de Roca
 
Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16
Kai Heddergott
 
IKuM: Forschung und Entwicklung am Mediencampus
IKuM: Forschung und Entwicklung am MediencampusIKuM: Forschung und Entwicklung am Mediencampus
IKuM: Forschung und Entwicklung am Mediencampus
mediencampus (h_da Darmstadt University of Applied Sciences)
 
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
Stefan Pfeiffer
 
Namics - digital branding experience
Namics - digital branding experienceNamics - digital branding experience
Namics - digital branding experience
Felix Widmaier
 

Ähnlich wie Grundlagen Digitaler Mediengestaltung (20)

Selbermachen!
Selbermachen! Selbermachen!
Selbermachen!
 
Unternehmertreff am Mediencampus
Unternehmertreff am MediencampusUnternehmertreff am Mediencampus
Unternehmertreff am Mediencampus
 
UE PR und Social Media 3 - Monitoring
UE PR und Social Media 3 - MonitoringUE PR und Social Media 3 - Monitoring
UE PR und Social Media 3 - Monitoring
 
Ibrahim Evsan HOTSPOT Vortrag
Ibrahim Evsan HOTSPOT VortragIbrahim Evsan HOTSPOT Vortrag
Ibrahim Evsan HOTSPOT Vortrag
 
CHECKPOINT 2009: Agenturpräsentation von dimap communications
CHECKPOINT 2009: Agenturpräsentation von dimap communicationsCHECKPOINT 2009: Agenturpräsentation von dimap communications
CHECKPOINT 2009: Agenturpräsentation von dimap communications
 
Schritt für Schritt zur Digitalen Kommune
Schritt für Schritt zur Digitalen KommuneSchritt für Schritt zur Digitalen Kommune
Schritt für Schritt zur Digitalen Kommune
 
DigiMediaL - Crowdfunding für Musiker
DigiMediaL - Crowdfunding für MusikerDigiMediaL - Crowdfunding für Musiker
DigiMediaL - Crowdfunding für Musiker
 
Die Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
Die Rolle eines modernen Publishers am Beispiel der Ravensburger DigitalDie Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
Die Rolle eines modernen Publishers am Beispiel der Ravensburger Digital
 
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
Hacken Sie schon - oder archivieren Sie noch? Der Kultur-Hackathon "Coding da...
 
Digitalbiographie barcamp bonn2018
Digitalbiographie barcamp bonn2018Digitalbiographie barcamp bonn2018
Digitalbiographie barcamp bonn2018
 
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
Social Media & KMU – Vortrag vom 10.11.2011 (BVMW)
 
Social Media Monitoring für den öffentlichen Sektor
Social Media Monitoring für den öffentlichen SektorSocial Media Monitoring für den öffentlichen Sektor
Social Media Monitoring für den öffentlichen Sektor
 
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
Stadt und Netz - Stadtportal Wiesbaden - Hanne Graf - 16.11.2011
 
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
Das große Programm der ://webweek 2019 vom 4.-10. November #WWRM19
 
Social Business JamCamp Bustour
Social Business JamCamp BustourSocial Business JamCamp Bustour
Social Business JamCamp Bustour
 
NGO Marketing fürs schmale Budget
NGO Marketing fürs schmale BudgetNGO Marketing fürs schmale Budget
NGO Marketing fürs schmale Budget
 
Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16
 
IKuM: Forschung und Entwicklung am Mediencampus
IKuM: Forschung und Entwicklung am MediencampusIKuM: Forschung und Entwicklung am Mediencampus
IKuM: Forschung und Entwicklung am Mediencampus
 
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
re:publica 2015 - E-Mail-Wahnsinn: Zeit für eine neue Art zu arbeiten #IBMDes...
 
Namics - digital branding experience
Namics - digital branding experienceNamics - digital branding experience
Namics - digital branding experience
 

Mehr von Ralf Stockmann

Freiräume schaffen - im Social Intranet
Freiräume schaffen - im Social IntranetFreiräume schaffen - im Social Intranet
Freiräume schaffen - im Social Intranet
Ralf Stockmann
 
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
Ralf Stockmann
 
Wie man vom Intranet aus die Welt verbessern kann
Wie man vom Intranet aus die Welt verbessern kannWie man vom Intranet aus die Welt verbessern kann
Wie man vom Intranet aus die Welt verbessern kann
Ralf Stockmann
 
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
Ralf Stockmann
 
Der Zauberlehrling 
war nicht als
 Anleitung gemeint
Der Zauberlehrling 
war nicht als
 Anleitung gemeintDer Zauberlehrling 
war nicht als
 Anleitung gemeint
Der Zauberlehrling 
war nicht als
 Anleitung gemeint
Ralf Stockmann
 
BibliothekarInnen gestalten digitale Wissensräume
BibliothekarInnen gestalten digitale WissensräumeBibliothekarInnen gestalten digitale Wissensräume
BibliothekarInnen gestalten digitale Wissensräume
Ralf Stockmann
 
Was Bibliotheken von der Zukunft lernen können
Was Bibliotheken von der Zukunft lernen könnenWas Bibliotheken von der Zukunft lernen können
Was Bibliotheken von der Zukunft lernen können
Ralf Stockmann
 
Visualisierung bibliographischer Daten
Visualisierung bibliographischer DatenVisualisierung bibliographischer Daten
Visualisierung bibliographischer Daten
Ralf Stockmann
 
DFG Expertenworkshop - Workflow Volltextgenerierung über OCR
DFG Expertenworkshop - Workflow Volltextgenerierung über OCRDFG Expertenworkshop - Workflow Volltextgenerierung über OCR
DFG Expertenworkshop - Workflow Volltextgenerierung über OCR
Ralf Stockmann
 
Das materielle Objekt in der digitalen Welt
Das materielle Objekt in der digitalen WeltDas materielle Objekt in der digitalen Welt
Das materielle Objekt in der digitalen Welt
Ralf Stockmann
 
Die DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
Die DDB als offene Plattform - Weiterentwicklungen und AnknüpfungspunkteDie DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
Die DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
Ralf Stockmann
 
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008Deutsche Digitale Bibliothek - Vorstellung CeBit 2008
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008Ralf Stockmann
 
Central Registry for Digitized Objects: Linking Production and Bibliographic ...
Central Registry for Digitized Objects: Linking Production and Bibliographic ...Central Registry for Digitized Objects: Linking Production and Bibliographic ...
Central Registry for Digitized Objects: Linking Production and Bibliographic ...
Ralf Stockmann
 
Europeana4D - Exploring data in Space and Time (2011)
Europeana4D - Exploring data in Space and Time (2011)Europeana4D - Exploring data in Space and Time (2011)
Europeana4D - Exploring data in Space and Time (2011)
Ralf Stockmann
 
Fit für die digitale Bibliothek? (2007)
Fit für die digitale Bibliothek? (2007)Fit für die digitale Bibliothek? (2007)
Fit für die digitale Bibliothek? (2007)Ralf Stockmann
 
Mets opening day - web based mets creation (2007)
Mets opening day - web based mets creation (2007)Mets opening day - web based mets creation (2007)
Mets opening day - web based mets creation (2007)
Ralf Stockmann
 
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008Ralf Stockmann
 
eAqua und europeana4D - 2009
eAqua und europeana4D - 2009eAqua und europeana4D - 2009
eAqua und europeana4D - 2009Ralf Stockmann
 
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
Ralf Stockmann
 
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
Ralf Stockmann
 

Mehr von Ralf Stockmann (20)

Freiräume schaffen - im Social Intranet
Freiräume schaffen - im Social IntranetFreiräume schaffen - im Social Intranet
Freiräume schaffen - im Social Intranet
 
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
Die Bibliothek als Wolkenfabrik - Cloud-Dienste als Plattformen für digitale ...
 
Wie man vom Intranet aus die Welt verbessern kann
Wie man vom Intranet aus die Welt verbessern kannWie man vom Intranet aus die Welt verbessern kann
Wie man vom Intranet aus die Welt verbessern kann
 
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
Die Revolution vergisst ihre Kinder - Drei Szenarien, wie Bibliotheken in 15 ...
 
Der Zauberlehrling 
war nicht als
 Anleitung gemeint
Der Zauberlehrling 
war nicht als
 Anleitung gemeintDer Zauberlehrling 
war nicht als
 Anleitung gemeint
Der Zauberlehrling 
war nicht als
 Anleitung gemeint
 
BibliothekarInnen gestalten digitale Wissensräume
BibliothekarInnen gestalten digitale WissensräumeBibliothekarInnen gestalten digitale Wissensräume
BibliothekarInnen gestalten digitale Wissensräume
 
Was Bibliotheken von der Zukunft lernen können
Was Bibliotheken von der Zukunft lernen könnenWas Bibliotheken von der Zukunft lernen können
Was Bibliotheken von der Zukunft lernen können
 
Visualisierung bibliographischer Daten
Visualisierung bibliographischer DatenVisualisierung bibliographischer Daten
Visualisierung bibliographischer Daten
 
DFG Expertenworkshop - Workflow Volltextgenerierung über OCR
DFG Expertenworkshop - Workflow Volltextgenerierung über OCRDFG Expertenworkshop - Workflow Volltextgenerierung über OCR
DFG Expertenworkshop - Workflow Volltextgenerierung über OCR
 
Das materielle Objekt in der digitalen Welt
Das materielle Objekt in der digitalen WeltDas materielle Objekt in der digitalen Welt
Das materielle Objekt in der digitalen Welt
 
Die DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
Die DDB als offene Plattform - Weiterentwicklungen und AnknüpfungspunkteDie DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
Die DDB als offene Plattform - Weiterentwicklungen und Anknüpfungspunkte
 
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008Deutsche Digitale Bibliothek - Vorstellung CeBit 2008
Deutsche Digitale Bibliothek - Vorstellung CeBit 2008
 
Central Registry for Digitized Objects: Linking Production and Bibliographic ...
Central Registry for Digitized Objects: Linking Production and Bibliographic ...Central Registry for Digitized Objects: Linking Production and Bibliographic ...
Central Registry for Digitized Objects: Linking Production and Bibliographic ...
 
Europeana4D - Exploring data in Space and Time (2011)
Europeana4D - Exploring data in Space and Time (2011)Europeana4D - Exploring data in Space and Time (2011)
Europeana4D - Exploring data in Space and Time (2011)
 
Fit für die digitale Bibliothek? (2007)
Fit für die digitale Bibliothek? (2007)Fit für die digitale Bibliothek? (2007)
Fit für die digitale Bibliothek? (2007)
 
Mets opening day - web based mets creation (2007)
Mets opening day - web based mets creation (2007)Mets opening day - web based mets creation (2007)
Mets opening day - web based mets creation (2007)
 
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008
Ist Langzeitarchivierung finanzierbar? Präsentation Akademie Sankelmark 2008
 
eAqua und europeana4D - 2009
eAqua und europeana4D - 2009eAqua und europeana4D - 2009
eAqua und europeana4D - 2009
 
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen
 
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
Controlled Vocabularies and Text Mining - Use Cases at the Goettingen State a...
 

Grundlagen Digitaler Mediengestaltung

  • 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