Grundlagen der digitalen
              Mediengestaltung
                                                Ralf Stockmann, Ni...
Gliederung
                       1. Einleitung
                       2. Medien
                       3. Farben
        ...
1. Einleitung


Grundlagen der digitalen Mediengestaltung                   Ralf Stockmann, Nils K. Windisch - SUB Götting...
Wir: Nils K. Windisch
     • Stellv. Leitung Gruppe WWW, Portale
     • Web Project Manager / Senior Web Developer
     • ...
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Wir: Ralf Stockmann


     • Dipl. Sozw., Schwerpunkt Medienwissenschaften
     • Stellv. Leitung Forschung & Entwicklung ...
http://flickr.com/stockmann
Grundlagen der digitalen Mediengestaltung                                Ralf Stockmann, Nils K...
Meistens läuft es so...
     • „Irgendeiner muss sich um das Design kümmern, wer
            erbarmt sich?“
     • „Unsere...
Spannungsfelder

     • Sachlich vs. Emotional
     • Künstlerisch vs. Formalisiert
     • Professionell vs. Selbstgemacht...
Ist gutes Design
             basisdemokratisch?

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Wind...
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 ...
10 Prinzipien (Dieter Rams)
                             Gutes Design...
     •      ist innovativ.
     •      macht ein ...
Schlüsselbegriff: Konsistenz
     • „wie aus einem Guss“
     • durchdacht
     • stimmig
     • konsequent
     • Liebe z...
Ohne Konsistenz ist jedes
              Design schlecht.


Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nil...
Details beachten!




                 Konsistenz einfach         Konsistenz schwer
                   herzustellen       ...
Design ist (auch) Handwerk
     • Ausbildungsberufe
     • Geschick
     • Erfahrung
     • Technikverstand
     • Daher: ...
Man muss es nicht selbst
 besser machen können, um zu
 sagen, dass etwas schlecht ist.


Grundlagen der digitalen Medienge...
Design ist sehr privat
     • Wir verraten viel über unser Kunstverständnis
     • Vergleiche: was hängen wir uns an die W...
Gutes Design
  ist eine Frage der Haltung.
                                   (der Personen und des Projektes)




Grundla...
Was ist unsere Haltung?


     • Welche Werte wollen wir vermitteln:
       • Innovation, Tradition,Verlässlichkeit, Schne...
Ziel des Workshops
     • Wenn möglich: es den Profis überlassen. Dann aber:
       • klare Anweisungen geben können
      ...
Wo sollte ich „klauen“?
                  Eher hier:                    Weniger hier:


                  • Museen        ...
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
            ...
Was uns fehlt:
 die Rechtschrbkontrolle
     für Designfragen

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann,...
Die Checkliste
     •      Fasst die wesentlichen Felder
            zusammen
     •      Kann bei jedem Projekt
         ...
Checkliste: Gestaltung
Grundlagen der digitalen Mediengestaltung / Ralf Stockmann - Nils K. Windisch
Beschreibung der Punk...
5. Logodesign                                                                                                     Ja   Nei...
Checkliste:
                                              Haltung

                                Habe ich geklärt, welch...
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
   ...
Unterschiedliche Formen

     • CI/CD: Corporate Identity/Corporate Design
     • Wiedererkennungsmerkmale über alle Forme...
"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."

      ...
Style Guide -
                                     Bundesregierung I
     • Basiselemente (Print)
       • Bildwortmarke
 ...
Style Guide -
                                   Bundesregierung II
     • Basiselemente (Online)
       • Bildwortmarke
 ...
Style Guide -
                                 Bundesregierung III
     • Geschäftsausstattung (Print, Standard)
       • ...
Webseite - Formen
     • Blog - Sie reden mit ihren Nutzern
     • Forum - Sie lassen Nutzer miteinander reden
     • Wiki...
Checkliste:
                                              Medien

                                                        ...
Webseite - Elemente

     • Header, Menu, Content, Footer, Featured, Ads,
            News, Sitemap
     • Domain
     • O...
Elemente: Header
     • Denken Sie an Briefköpfe auf Speed
     • Funktion
       • Home Button
       • RSS, Twitter, etc...
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 horiz...
Elemente: Footer

     • Abschluss der Seite
     • Funktionen anbieten
       • Selected Sitemap
       • Featured Conten...
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!
     ...
Client: 	

	

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

 	

 	

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

	

 "You must be mista...
Elemente: Domain I

     • URL: www.example.com
       • subdomain.domain.tld
         • "com" - TLD (Top Level Domain)
  ...
Elemente: Domain II

     • URLs sind Funktion
       • /contact, /sitemap, /help
     • URLs sind für Menschen (Pretty/Cl...
Elemente: Domain III
     • don't: http://en.wikipedia.org/wiki
     • don't: http://example.com/page/main.html
     • don...
Checkliste: Elemente
                       Der Header ist erkennnar und der Nutzwert klar                                ...
Rezeption


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

     • Beamer, Browser, E-Mail, haptisch, Mobiltelefon
     • Unterschiede:
       • Anzeigengröße
  ...
Rezeption - Verhalten

     • Aufmerksamkeitsspanne variiert stark
     • Bedürfnisse stark unterschiedlich
     • Beispie...
1. vor Ort


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

Gr...
2. Zuhause


     • Ich habe Zeit
     • Ich will mir merken, was ich gefunden (und gesucht)
            habe
     • Ich b...
3. unterwegs


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

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

     •       iPhone = Internet

     •       Nut...
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 si...
Dein Feind,
                                            der Beamer

Grundlagen der digitalen Mediengestaltung             ...
Schwarzwert
                            Ein Beamer kann nur aufhellen: der dunkelste Punkt auf der Leinwand
              ...
So soll es sein




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




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




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


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

     • Das Primat der
            Lesbarkeit:
            • alle relevanten
                   Informationen
...
Farbkontraste
                                                                          L=100
     • Wie ein Schwarz-Weiß
...
Farbkontraste
            • Der L (Luminanz)
                   Abstand sollte
                   zwischen Schrift und
   ...
Problembeispiel
                                             zwei von drei Texten haben zu wenig Kontrast




Grundlagen d...
Schriftfarben für Fließtext
                                     • 20% Grau       unleserlich
                            ...
Checkliste:
                                             Farben

                          Verfügen alle verwendeten Schri...
Feine Unterschiede


                                            ICH BIN ANSTRENGEND


                                   ...
Farbkombinationen
                                            bitte nichts erfinden, es gibt genug Angebote




           ...
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 eine...
Gängige Probleme beim
                   Umgang mit Farben
     •      Kontrast
            •      stellen wir uns Farben ...
Hintergründe

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

Grundlag...
Verläufe
                                            Anzahl der Farbstufen, Kompressionsartefakte




Grundlagen der digit...
Checkliste:
                                             Farben

                                                         ...
Streitthema Linkfarben
  • dies ist ein klassischer Link
         ich bin traditionell, achte auf Standards, ignoriere
   ...
...aber bitte: konsistent!




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

                                  Sind die Links klar...
Schaltflächen
     • Reiterleisten
     • Buttons
     • Schalter
     • Hover-Effekte
     • Konsistenz
     • Trefferzone...
Problem: klickbarer Bereich
                              Reine Textlinks sind bei dichten Navigationsbereichen schwer zu ...
Checkliste:
                                               Links

                                Sind alle Schaltflächen u...
4. Typographie


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


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

Grundlagen der di...
"I hate this new font. Use the first one I showed you.
This one makes the site look cheap instead of elegant."

The ‘cheap’...
Top 100   (Quelle)



     1. Helvetica (1957)
     2. Garamond (1530)
     3. Frutiger (1977)
     4. Bodoni (1790)
     ...
Schriftgröße: klein oder groß
     • Überschriften sind immer größer als der Fließtext
     • Klein = konzentriertes Lesen...
So wenig unterschiedliche
        Typen und Schriftgrößen
             wie möglich!

Grundlagen der digitalen Mediengestal...
Zählen Sie...




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

     •       { fon...
Fonts in Web II

     • Safe: serif, sans-serif, monospace
     • Safe-ish: Arial (sans-serif), "Times New
            Rom...
serif vs. sans-serif




Grundlagen der digitalen Mediengestaltung            Ralf Stockmann, Nils K. Windisch - SUB Götti...
Typographie und E-Mails

     • Stark eingeschränkten Einfluss auf die Darstellung
            beim Empfänger
     • Ja, HT...
Absätze
                                                 Das Web ist eher Zeitung/Magazin als Buch
                       ...
Zeilenlänge
                                              Niemand mag Viewport-breite Zeilenlängen


Lorem ipsum dolor sit...
Zeilenabstand
                              leicht erweiterter Zeilenabstand: schnell umgesetzt, große Wirkung
           ...
Achten Sie auf Waisen!
Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:
                                            Typographie
                        Schriften werden universal defi...
5. Logodesign


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

     • Die Marke auf wenige Pixel komprimieren
     • Wiedererkennbarkeit
     • Unverwechselbar / Abgrenzung ...
Typen von Logos

     • Nur Text
     • Modifizierter Text
     • Text/Bild
     • Nur Bild
     • Abstrakt / Gegenständlic...
Textmarken
                                            Farbe, Schrifttype, Modifikationen




Grundlagen der digitalen Medi...
Erweiterte Textmarken      Modifikationen, Hintergrundformen, Effekte




Grundlagen der digitalen Mediengestaltung        ...
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ötting...
Eine Variante:
                Online-Logowettbewerb




                                            http://99designs.com/...
Checkliste:
                                              Logogestaltung
                                Repräsentiert das...
6. Bildelemente


Grundlagen der digitalen Mediengestaltung          Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Bildelemente
     • Kategorien
       • Fotografien
       • Verfremdungen
         • Sättigung
         • Effekte
       •...
Problemfelder bei
                                       Bildelementen

     • Konsistenz ist teuer
       • Selber anfert...
Konsistenz bei Bildelementen

     • Tiefenschärfe
     • Freistellen
     • Perspektive
     • Farbgebung
     • Motiv
  ...
Tiefenschärfe




                            Blende 5,6                Blende 1,8


Grundlagen der digitalen Mediengestal...
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ös...
Qualitätsunterschiede   Schriftkanten, RSS Icon




Grundlagen der digitalen Mediengestaltung                             ...
Beispiel: RSS Icon




              geringe                          mittlere         gute
             Auflösung         ...
Kompressionsartefakte      worst case: um Logo-Schrift




Grundlagen der digitalen Mediengestaltung                      ...
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 En...
Absolut unverzeihlich:
                        Proportionen ändern
                                                       ...
Checkliste:
                                              Bildelemente

                        Sind Bildelemente in Stil,...
Kombination von
                         Text und Bild

Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K...
Verfahren zum Freistellen

                                            Hier steht Ihr Logo
                               ...
Harter Schlagschatten

                                            Hier steht Ihr Logo
                                   ...
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 Med...
Abstände
                                            5 Pixel Abstand sind nie ein Fehler!




Grundlagen der digitalen Med...
Feine Unterschiede


                                 DAS IST KUNST
                                  DAS IST SCHLAMPIG


...
Checkliste:
                     Text-/Bild Kombination

                                  Heben sich Schriften ausreichen...
Suchfelder und Ergebnislisten
     • Suche vs. Browsing
     • Wo ist die Suche platziert?
     • Erkenne ich sie als Such...
Trefferlisten
     • Einzelne Treffer weit genug voneinander absetzen
     • Welche Informationen werden in der Trefferlis...
7. Iconsets


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


     •       Icons haben Symbolscharakter

     •       Die Bedeutung von Symbolen
             ist m...
Icons: Beispiel Swastika




http://www.flickr.com/photos/djwudi/13009987/   http://www.flickr.com/photos/
                 ...
Icons: Neue Aufgaben


     •       Aufgabe:Visualisieren Sie die
             Nutzung eines Touchscreen-
             Dev...
Icons: zu viel!
Grundlagen der digitalen Mediengestaltung                     Ralf Stockmann, Nils K. Windisch - SUB Götti...
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 Ic...
(Gute) Icons: Unbezahlbar




Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:
                                                      Iconsets
                         Sämtliche Icons stamme...
8. Animationen, Flash
               und AJAX

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

     • Ermöglichung von Nutzerinteraktion (Stichwort:
            Interaktion)
     • Schlüssigere/Flüssigere Nutze...
Animationen


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


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

     • In Webseiten eingebettete Datei, die mittels einer
            Browsererweiterung abgespielt werden
     • B...
Flash Szenarien

     • Begrüßungsanimation (jep, this is oh so last year)
     • Browser Spiele (z. B. Moorhuhn anyone?)
...
Warum Flash böse ist

     • Adblocker stolpern
     • überdurchschnittliche CPU/GPU-Nutzung
     • SEO unfreundlich
     ...
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
     • Alter...
AJAX

     • AJAX = Asyncronous JavaScript and XML
     • Verschiedene Techniken gruppiert
       • Manipulation von CSS, ...
AJAX - Nutzen
     • Nutzerinteraktion ohne erneutes Laden der Seite
     • dynamische Informationsanzeige (besser: -aktua...
AJAX - Nachteile
     • (basiert auf bzw.) abhängig von JavaScript
       • immer Fall-back-Lösung anbieten
     • Passier...
Flash vs. AJAX


     1. Erst erstelle ich alles in Flash, dann
     2. programmiere ich ein AJAX-Fallback, dann
     3. e...
Checkliste:
                                            Animationen
                         Der Einsatz von Animationen i...
9. Barrierefreiheit


Grundlagen der digitalen Mediengestaltung   Ralf Stockmann, Nils K. Windisch - SUB Göttingen
BITV
     • Barrierefreie Informationstechnik Verordnung
     • Resultiert aus dem Gleichstellungsgesetz
     • Bund seit ...
BITV - Bund


Gemäß BITV müssen ab 31.12.2005 alle öffentlich
zugänglichen Internetauftritte und -angebote sowie
Intraneta...
BITV in den Ländern

     • Berlin: WBIT (23.06.2005) - Verwaltungsvorschrift
            zur Schaffung Barrierefreier Inf...
BITV - NBGG (25.11.2007)
§9 Informationstechnik (jep, das sind nur 106 Wörter)
Die öffentlichen Stellen gestalten ihre Int...
WCAG (BITV)
     • Wahrnehmbar: Alternative Textversion, Untertitel,
            Medienersatz, assistive Technologien, Kon...
BITV - Technikkriterien
     •      Browser-Kompatibilität
     •      HTML/CSS-Code-Errors
     •      JavaScript
     • ...
BITV - Hilfe
     •      Linkhervorhebung
     •      Nicht gefundene Seite
     •      Tastaturnavigation
     •      Ext...
BITV - Inhalte

     • Happy Talk
     • Zielgruppenspezifischer Einstieg
     • Neuste Dokumente
     • Featured Content
 ...
Don not read "Understanding WCAG 2.0"
In fact, do not read WCAG 2.0
Web Accessibility is about people, not about guideline...
BITV - zusammenfassend
     • Verstehen Sie diese als Anregung, nicht als Pflicht
     • Vage Formulierungen in Gesetze/ver...
Was noch mal

     • Graustufen
     • kein JavaScript
     • keine Grafiken
     • kein CSS
     • 600px width
Grundlagen ...
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?

...
Checkliste:
                                            Barrierefreiheit
                                                 ...
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 un...
Rechtschreibung
     • Das Web ist Text; Text folgt Regeln.
     • Fehler sind Stoppschilder. Fehler lenken ab.
     • "An...
Above the Fold I

     • Page Fold: Konzept, dass wichtige Inhalte auf der
            oberen Hälfte der Darstellung zu fin...
Beispiel

                                                 Pagefold




                   FAZ: analog                    ...
Above the Fold II

     •       Artikel von Paddy Donnely:
             Life, below 600px

     •       Erkenntnis: Mensch...
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
Nächste SlideShare
Wird geladen in …5
×

Grundlagen Digitaler Mediengestaltung

12.735 Aufrufe

Veröffentlicht am

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

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

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

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

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

Veröffentlicht in: Bildung
1 Kommentar
13 Gefällt mir
Statistik
Notizen
  • Super Präsi
    Danke
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
12.735
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
227
Aktionen
Geteilt
0
Downloads
158
Kommentare
1
Gefällt mir
13
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Grundlagen Digitaler Mediengestaltung

  1. 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. 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. 3. 1. Einleitung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  4. 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. 5. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  6. 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. 7. http://flickr.com/stockmann Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  8. 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. 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. 10. Ist gutes Design basisdemokratisch? Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  11. 11. Debian OS (Linux) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  12. 12. Microsoft Windows 7 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  13. 13. Apple OS X Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  14. 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. 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. 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. 17. Ohne Konsistenz ist jedes Design schlecht. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  18. 18. Details beachten! Konsistenz einfach Konsistenz schwer herzustellen herzustellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  19. 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. 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. 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. 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. 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. 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. 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. 26. pearl.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  27. 27. Museum Ludwig Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  28. 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. 29. Was uns fehlt: die Rechtschrbkontrolle für Designfragen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  30. 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. 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. 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. 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. 34. 2. Medien Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 45. Header Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  46. 46. Header Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  47. 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. 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. 49. Footer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  50. 50. Footer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  51. 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. 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. 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. 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. 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. 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. 57. Rezeption Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  58. 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. 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. 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. 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. 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. 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. 64. iPhone Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  65. 65. iPhone (Bad vs. Good) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  66. 66. iPhone (Web vs. Mobile) Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  67. 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. 68. Dein Feind, der Beamer Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  69. 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. 70. So soll es sein Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  71. 71. So wird es sein Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  72. 72. Lichtstärke hilft Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  73. 73. und eine Leinwand Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  74. 74. vor allem aber: Abdunkeln Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  75. 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. 76. 3. Farben Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  77. 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. 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. 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. 80. Problembeispiel zwei von drei Texten haben zu wenig Kontrast Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  81. 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. 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. 83. Feine Unterschiede ICH BIN ANSTRENGEND ICH BIN INTERESSANT Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  84. 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. 85. Beispiel: heute.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  86. 86. Beispiel: heute.de Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  87. 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. 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. 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. 90. Verläufe Anzahl der Farbstufen, Kompressionsartefakte Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  91. 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. 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. 93. ...aber bitte: konsistent! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  94. 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. 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. 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. 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. 98. 4. Typographie Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  99. 99. Typographie • ..ist Anmutung • ..beeinflusst die Nutzbarkeit • ..ist Gestaltungselement Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  100. 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. 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. 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. 103. So wenig unterschiedliche Typen und Schriftgrößen wie möglich! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  104. 104. Zählen Sie... Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  105. 105. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  106. 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. 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. 108. serif vs. sans-serif Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  109. 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. 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. 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. 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. 113. Achten Sie auf Waisen! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  114. 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. 115. 5. Logodesign Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  116. 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. 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. 118. Textmarken Farbe, Schrifttype, Modifikationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  119. 119. Erweiterte Textmarken Modifikationen, Hintergrundformen, Effekte Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  120. 120. Text-Bildmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  121. 121. Reine Bildmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  122. 122. Internetmarken Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  123. 123. Eine Variante: Online-Logowettbewerb http://99designs.com/ Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  124. 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. 125. 6. Bildelemente Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  126. 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. 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. 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. 129. Tiefenschärfe Blende 5,6 Blende 1,8 Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  130. 130. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  131. 131. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  132. 132. Freistellen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  133. 133. Perspektive / Einstellung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  134. 134. Färbung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  135. 135. unpassende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  136. 136. passende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  137. 137. passende Kombinationen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  138. 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. 139. Qualitätsunterschiede Schriftkanten, RSS Icon Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  140. 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. 141. Kompressionsartefakte worst case: um Logo-Schrift Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  142. 142. Beispiel: Museum Ludwig Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  143. 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. 144. Absolut unverzeihlich: Proportionen ändern Vorlage gestaucht gestreckt Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  145. 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. 146. Kombination von Text und Bild Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  147. 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. 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. 149. Umrandungen Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  150. 150. Einbettung Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  151. 151. Kombination Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  152. 152. Beispielseite: MoMA Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  153. 153. Abstände 5 Pixel Abstand sind nie ein Fehler! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  154. 154. Abstände 5 Pixel Abstand sind nie ein Fehler! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  155. 155. Feine Unterschiede DAS IST KUNST DAS IST SCHLAMPIG Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  156. 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. 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. 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. 159. 7. Iconsets Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  160. 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. 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. 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. 163. Icons: zu viel! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  164. 164. Icons: inkonsistent Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  165. 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. 166. (Gute) Icons: Unbezahlbar Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  167. 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. 168. 8. Animationen, Flash und AJAX Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  169. 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. 170. argh! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  171. 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. 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. 173. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  174. 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. 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. 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. 177. Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  178. 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. 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. 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. 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. 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. 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. 184. 9. Barrierefreiheit Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  185. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 196. Don't make me think! Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  197. 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. 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. 199. 10. Usability Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  200. 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. 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. 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. 203. Beispiel Pagefold FAZ: analog digital Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
  204. 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. 205. Apple iPad Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen

×