Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Grundlagen der digitalen Mediengestaltung
Ralf Stockmann, Nils K. WindischNiedersächsische Staats- und Universitätsbibliothek Göttingen
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Gliederung1. 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 gewolltund 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 einfachherzustellen
Konsistenz schwerherzustellen
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 Designist 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:
• Museen
• Autohersteller
• Banken
• (Design) Möbelhersteller
• Fernsehsender
Eher hier:
• Museen
• Autohersteller
• Banken
• (Design) Möbelhersteller
• Fernsehsender
Weniger hier:
• Bibliotheken(sonst wären wir nicht hier)
• (Tages-) Zeitungen
• Versandhandel
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/
Checkliste: GestaltungGrundlagen der digitalen Mediengestaltung / Ralf Stockmann - Nils K. WindischBeschreibung 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 OIst ein Budget definiert worden? O O OHabe ich definiert, welche Haltung ich kommunizieren möchte? O O OHabe 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 OIst der Einsatz jeder Form schlüssig begründet? O O ODer Style-Guide berücksicht sämtliche (relevanten) Medienformen und umfassend? O O OIch setze verschiedene Webseiten Formen (Blog, Forum, Wiki) zweck-/sinngemäß ein? O O O
ElementeDer Header ist erkennbar und der Nutzwert klar ersichtlich? O O ODas Menü ist nutzbar und ermöglicht die Erreichbarkeit aller relevanten Inhalte? O O ODer Footer bietet sinnvollen Mehrwert und ermutigt zum Einstieg in nicht offensichtliche Inhalte? O O ODer Content ist sauber strukturiert und einzelne Inhaltselemente klar erkennbar? O O ODie Domain ist aus Nutzersicht schlüssig und die Systematik zugänglich (erratbar)? O O O
RezeptionRelevante Nutzungszenarien sind erörtert und technisch entsprechend berücksichtigt? O O OIch weiß, ob und wie ich mobile Anzeigegeräte unterstützen möchte? O O OIch habe die Nutzungsszenarien "im Büro", "auf dem Sofa" und "an der Bushaltestelle" selbst ausprobiert? O O OHabe 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 OWurde die Farbpalette mit einem Generator erzeugt / evaluiert? O O OWerden alle Farbverläufe ohne Treppenstufen / Artefakte / Fehlfarben dargestellt? O O O
LinksHeben sich Textlinks klar vom umgebenden Fließtext ab? O O OSind Links überall auf der Seite konsistent formatiert? O O OIst die Linkfarbe abgestimmt auf die Farbpalette? O O OSind Schaltflächen/Buttons mit ausreichenden Trefferzonen (ganzes Objekt) ausgestattet? O O OSind 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 OSchriftgrößen und Zeilenabstände werden als harmonisch wahrgenommen? O O OEs werden nicht mehr als drei Schriften bzw. Schriftgrößen verwendet, falls doch, ist dies sinnvoll begründet? O O OIch weiß, warum serif- und sans-serig-Schriften gemischt verwendet werden und welchen Effekt ich damit erziele? O O OE-Mails schreibe ich in Plain-Text (vs. HTML), weil ich möglichst viel Menschen erreichen möchte? O O OText wurde in gut lesbaren Spalten gesetzt und zieht sich nicht über die gesamte Breite der Seite? O O OLange Textpassagen werden durch genügend Absätze gegliedert? O O OIst 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 OIst das Design an die erwartete Nutzungszeit angepasst (kurzlebiges Projekt, langlebige Einrichtung)? O O OIst es in allen Medien nutzbar (Druck, Visitenkarte, s/w, ...) O O OSetzt es sich gegen andere Logos in einer logo-Farm angemessen durch? O O OWurde 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 OIst die technische Qualität ausreichend (Schärfe, Auflösung, Farbtiefe)? O O OEntsprechen die Proportionen sämtlicher Bildelemente der Vorlage? O O OSind die Bildrechte geklärt? O O O
Kombination von Text über BildHeben sich alle Schriftbereiche ausreichend vom Hintergrund ab? O O OHaben 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 OAlle Icons sind selbsterklärend? O O ODie Bedeutung von symbolhaften Icons ist mit bewusst und interkulturell funktional? O O ODas Farbschema der Icons ist stimmig zu den CD-Farben? O O OIch habe die Optionen noch nicht existente Funktionen mit Icons /abzudecken/? O O OIch 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 OFlash-Inhalte sind zugänglich gestaltet, via (1) AJAX und (2) nur-HTML? O O OIch 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 OBild-, Ton- und Videodokumente sind alternativ zugänglich? O O ODer Nutzer weiß immer wo er ist, wie er dort hingekommen ist und wo es weitergeht? O O OTechnische Mittel sind dokumentiert? O O OIch habe eine Strategie bisherige Webseiten BITV-konform zu gestalten? O O ODer 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 OInhalte sind nutzbar? O O OInhalte sind verständlich? O O OTechnische Voraussetzungen sind robust? O O OIch biete alternative Navigationsstrukturen? O O OIch habe assistive Technologien mitgedacht? O O OIch 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 ODie Anzahl der Dateien ist so gering wie möglich? O O OIch habe an den Server und die Anbindung gedacht? O O ODie Datenbank(struktur) ist von einem Experten geprüft worden? O O OIch habe eine Ahnung, was meine Nutzer benutzen? O O OIch weiss, welche Browser ist unterstützen möchte? O O OIch habe drei oder mehr Browser ausprobiert? O O O
12. Testing / Validierung Ja Nein nicht zutreffend
Ich habe gestestet? O O OIch habe validiert? O O O
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Haltung
1Habe ich geklärt, welche Haltung meine
Homepage vermitteln soll?Ja Nein
nichtzutreffend
2Habe ich eine „Geschichte“, die ich erzählen
möchte? (Storyboard, Dramaturgie)Ja Nein
nichtzutreffend
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
• Flyer
• Micro-Blogging
• 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
3 Sind sämtliche relevanten Medien mitgedacht? Ja Neinnicht
zutreffend
4Ist der Einsatz jedes Mediums schlüssig
begründet?Ja Nein
nichtzutreffend
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: Elemente5
Der Header ist erkennnar und der Nutzwert klar ersichtlich?
Ja Neinnicht
zutreffend
6Das Menü ist nutzbar und ermöglicht die Erreichbarkeit aller relevanten Inhalte?
Ja Neinnicht
zutreffend
7Der Footer bietet sinnvollen Mehrwert und ermutigt zum Einstieg in nicht offensichtliche
Inhalte?Ja Nein
nichtzutreffend
8Der Content ist sauber strukturiert und einzelne
Inhaltselemente klar erkennbar?Ja Nein
nichtzutreffend
9Die Domain aus Nutzersicht schlüssig und die
Systematik zugänglich (erratbar)?Ja Nein
nichtzutreffend
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
10Relevante Nutzungsszenarien sind erörtert und
technisch entspr. berücksichtigt?Ja Nein
nichtzutreffend
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
SchwarzwertEin 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
• Wie ein Schwarz-Weiß Verlauf haben auch Farben eine Helligkeit
• Diese kann subjektivem Empfinden unterliegen
• Grün wirkt für viele dunkler als rot
L=50
L=0
L=100
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
Problembeispielzwei von drei Texten haben zu wenig Kontrast
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
• 20% Grau
• 40% Grau
• 60% Grau
• 80% Grau
• 90% Grau
• 100% Schwarz
Schriftfarben für Fließtext
unleserlich
kritisch
optimal
banal
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Farben
11Verfügen alle verwendeten Schriftfarben über
ausreichend Kontrast zum Hintergrund?Ja Nein
nichtzutreffend
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Feine Unterschiede
ICH BIN INTERESSANT
ICH BIN ANSTRENGEND
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Farbkombinationenbitte 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
12Wurde die Farbpalette mit einem Generator
erzeugt / getestet?Ja Nein
nichtzutreffend
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äufeAnzahl der Farbstufen, Kompressionsartefakte
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Farben
13 Werden Farbverläufe ohne Stufen abgebildet? Ja Neinnicht
zutreffend
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Streitthema Linkfarben
• dies ist ein klassischer Linkich bin traditionell, achte auf Standards, ignoriere Modetrends und bin ein wenig stur
• dies ist ein moderner Linkmir 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
14Sind die Links klar genug von anderen
Textbereichen abgesetzt?Ja Nein
nichtzutreffend
15 Sind Links konsistent formatiert? Ja Neinnicht
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
16Sind alle Schaltflächen und Buttons mit ausreichenden Trefferflächen versehen?
Ja Neinnicht
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ätzeDas Web ist eher Zeitung/Magazin als Buch
Setzen Sie viele Absätze (alle 8 bis 20 Zeilen)
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. 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. 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. 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. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
ZeilenlängeNiemand mag Viewport-breite Zeilenlängen
• Praktische Richtwerte:
• Spalten: 550px für Fließtext, 220px für Menüs
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.
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Zeilenabstandleicht erweiterter Zeilenabstand: schnell umgesetzt, große Wirkung
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. 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.
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. 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.
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
17Schriften werden universal definiert (Fallback bei
fehlender Schrift)?Ja Nein
nichtzutreffend
18Überschriften sind als solche erkennbar und
hierarchisch voneinander abgehoben?Ja Nein
nichtzutreffend
19Schriftgrößen und Zeilenabstände werden als
harmonisch zueinander wahrgenommen?Ja Nein
nichtzutreffend
20Es werden nicht mehr als drei Schriften und
Schriftgrößen verwendet?Ja Nein
nichtzutreffend
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
TextmarkenFarbe, Schrifttype, Modifikationen
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Erweiterte TextmarkenModifikationen, 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
21Repräsentiert das Logo das Projekt / die
Einrichtung? Ja Nein
nichtzutreffend
22Ist das Design an die erwartete Nutzungszeit
angepasst? (zeitlos, modisch)Ja Nein
nichtzutreffend
23 Ist es in allen Medien nutzbar? Ja Neinnicht
zutreffend
24 Setzt es sich gegen andere Logos durch? Ja Neinnicht
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 1,8Blende 5,6
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ätsunterschiedeSchriftkanten, RSS Icon
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Beispiel: RSS Icon
geringeAuflösung
mittlereAuflösung,
Pixelstruktur
guteAuflösung,keine Pixel
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Kompressionsartefakteworst 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 2010kein relevantes Thema mehr.
Es gibt keine Entschuldigungfü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
25Sind Bildelemente in Stil, Farbe, Ausschnitt, Motiv
konsistent?Ja Nein
nichtzutreffend
26Ist die technische Qualität ausreichend
(Auflösung, Kompression, Schärfe)?Ja Nein
nichtzutreffend
27Entsprechen die Proportionen sämtlicher Bilder
der Vorlage?Ja Nein
nichtzutreffend
28 Habe ich die Bildrechte? Ja Neinnicht
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 LogoHier steht Ihr Logo
Hier steht Ihr Logo
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Harter Schlagschatten
Hier steht Ihr LogoHier steht Ihr Logo
Hier steht Ihr LogoHier steht Ihr LogoHier steht Ihr LogoHier steht Ihr Logo
Hier steht Ihr LogoHier 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ände5 Pixel Abstand sind nie ein Fehler!
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Abstände5 Pixel Abstand sind nie ein Fehler!
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Feine Unterschiede
DAS IST KUNSTDAS IST SCHLAMPIG
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Text-/Bild Kombination
29Heben sich Schriften ausreichend vom
Hintergrund ab?Ja Nein
nichtzutreffend
30Haben nicht verbundene Elemente ausreichende
Abstände (mind. 5 Pixel) zueinander?Ja Nein
nichtzutreffend
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/30691679@N07/3010930372/
http://www.flickr.com/photos/djwudi/13009987/
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
31Sämtliche Icons stammen aus dem selben Icon-
Set?Ja Nein
nichtzutreffend
32 Alle Icons sind selbsterkärend? Ja Neinnicht
zutreffend
33Das Farbschema der Icons ist stimmig zur den
CD-Farben?Ja Nein
nichtzutreffend
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
34Der Einsatz von Animationen ist gut begründet?
(Beiwerk, Schmuckelement, etc. zählt nicht)Ja Nein
nichtzutreffend
35Flash-Inhalte sind alternativ zugänglich via (1)
AJAX und (2) nur-HTML?Ja Nein
nichtzutreffend
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
36 BITV ist zu erfüllen, da öffentliche Einrichtung? Ja Neinnicht
zutreffend
37Bild-, Video- und Tondokumente sind alternativ
zugänglich?Ja Nein
nichtzutreffend
38Der Nutzer weiss auf jeder Seite wo er ist, wie er
dort hingekommen ist und wo es weitergeht?Ja Nein
nichtzutreffend
39 Techn. Mittel sind dokumentiert? Ja Neinnicht
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
FAZ: analog
Pagefold
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
iPad Application Design
• Was sind die Kernfunktionen? Wie kann ich einige davon entfernen?
• Wie kann ich es auf einem Touchscreen Device nutzbar machen?
• Wie ermögliche ich eine emotionale Verbindung?
• Stichworte:
• Bedienung ausblenden wenn nicht gebraucht
• Bearbeitung an Ort und Stelle
• Psychology of touch
• Artikel: Matt Legend Gemmell: iPad Application Design
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Fehlerseiten
• Entstehung
• Der Nutzer vertippt sich
• Ihr Redakteur hat eine Seite gelöscht/verschoben
• Der Link in der E-Mail wurde abgeschnitten
• Ergebnis
• Geh weg!
• Oh, das tut uns leid, wie können wir helfen?
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Geh weg!
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Oh, wie können wir helfen?
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
lustig, aber hilfreich
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
...
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Usability
40 Ich habe assistive Technologien mitgedacht? Ja Neinnicht
zutreffend
41Ich weiß, was Nutzer sehen, wenn sie eine nicht
existente Seite aufrufen?Ja Nein
nichtzutreffend
42 Ich biete alternative Navigationsstrukturen? Ja Neinnicht
zutreffend
43 Inhalte wahrnehmbar? Ja Neinnicht
zutreffend
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Performance als Qualitätsmerkmal
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Warum Performance
• Performance bestimmt Nutzererfahrung
• "Jede Suche, die nicht innerhalb von 2 Sekunden Treffer liefert, ist kaputt"
• Performance unterscheidet sie von Konkurrenten
• "Diese Seite ist viel schneller, als jene dort."
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Wo ist Performance?• Client-Seitig
• Bandbreite (Download, paralelle Aufrufe, etc.)
• Browser
• JavaScript, Java
• Plugins (Flash: CPU/GPU)
• Server-seitig
• Scriptsprache
• Datenbank
• Standort
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Was ist Performance?
• Technisch: die schnellstmögliche Bereitstellung von Informationen
• Nutzer: der kürzeste Weg zur gesuchten Information
• Weitere Stichworte: zuverlässige Verfüg- und Erreichbarkeit
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Little things
• je weniger externe Dateien umso besser
• CSS/JS-Compression hilft
• CSS: @import() ist langsam
• Bilder optimieren (z. B. Adobe Fireworks)
• JavaScript am Ende des HTML-Code einbinden
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
AJAX loadersignalisiert: „es lohnt sich zu warten, ich arbeite“
Quelle: http://www.deviant-blog.de/ajax-loader-icons/
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Tools - Firefox
• Firefox nutze ich nur zum Testen...
• YSlow (Wie lange braucht was zum laden)
• Firebug (Wie ist was aufgebaut)
• Web Developer Tools (Zeige was wie konstruiert ist)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Performance
44Dateien sind so klein wie möglich? Aber: bei
Bildern ohne sichtbare Artefakte!Ja Nein
nichtzutreffend
45Ich habe an den Server und die Anbindung
gedacht?Ja Nein
nichtzutreffend
46Ich habe eine Ahnung, was meine Nutzer
benutzen?Ja Nein
nichtzutreffend
47Ich weiss, welche Browser ist unterstützen
möchte?Ja Nein
nichtzutreffend
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
12 Testing/Validierung
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Was und warum testen
• Verschiedene Anzeigegeräte
• Wie wirkt mein Design auf einem Beamer/iPhone/alten Browser?
• Nutzererfahrung
• Finden Nutzer, was sie suchen?
• Eigene Ziele
• Wird meine Botschaft optimal transportiert?
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Classic client answer to any question involving two options:
“Well, let’s try it both ways and see how it looks.”
(Clients from hell)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Browser Viewport
• Tatsächlich verfügbare Anzeigefläche
• nicht gleich Größe des Browserfensters
• Toolbars, Rahmen, Scrollbars etc, rauben Viewport
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Google Browsersize
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Browser Viewport
• 800px Breite zwingend, >800px Breite optional
• Netbooks, Internetcafe
• auch geräteabhängig (Smartphones, iPhone, Handy)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
mit 800px nach Hause
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Variabler Viewport/Content
• Width
• max. 960px
• min. 800px
• min. 600px (Content)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Browser
• Interpretieren HTML
• Nutzen Plug-Ins (Flash, Java)
• Führen JavaScript aus
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
MS Internet Explorer 6
• vor 4 Jahren haben wir noch über den IE 5.x und Netscape 4.x geredet
• Browser sind vergänglich
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Brower und JS
• Vergleich der standardkonformen Javascript-Implementierung (via Sputnik)
• n = 5000, min: ~80, max ~500
• Mitte = gut, Rand = schlecht
• Entfernung untereinander = Ähnlichkeit
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Nutzertests
• Nutzerstudien kosten Geld, viel Geld
• Automatisches Testen ist nicht erschöpfend
• Nehmen sie fünf Menschen und schauen sie ihnen zu!
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
"Can you call Google and ask them when the website will show up in the search results?"
(Clients from Hell)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Werde ich gefunden?
• Erfassung meiner Inhalte von Google & Co.
• Google Webmaster Tools
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Warum validieren
• Weil die BITV vorgibt, dass Technik standardkonform umgesetzt werden muss
• Weil sich jeder Programmierer über sauberen Code (seines Vorgängers) freut
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Wie validieren
• Maschinell - Code/Funktionen
• Code ist standardkonform
• Eine Funktion erfüllt ihre Aufgabe (Anforderung)
• Persönlich - Style Guide/Funktionen
• Elemente folgen dem Style Guide
• Eine Funktion funktioniert wie erwartet
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
XHTML strict validation is a tool, not a way of life.
1.Designer = strict XHTML
2.CMS = fail
3.Backend developer = fail
4.Editors = fail
(CeQuelle)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
"A nice design.. Can you add some pop-ups to the website? That would make it more dynamic."
(Clients from Hell)
"I hear there’s a lot of new web technology since we last spoke.. Can you put all that technology in our website?"
(Clients from Hell)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Christmas Tree Approach
• Webseite überarbeiten: komplett oder Christmas Tree Approach
• Ich benötige Funktionalität, also füge ich sie einfach hinzu.
• RSS, Twitter, E-Mail, Print
• Jede Funktion bringt Code mit sich; unterschiedlichen Code
• Im Zweifel neue Bedien- und Nutzungskonzepte
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Checkliste:Testverfahren
49 Ich habe gestestet? Ja Neinnicht
zutreffend
50 Ich habe validiert? Ja Neinnicht
zutreffend
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
13. Abschluss
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Nicht erwähnt
• SEO (Search Engine Optimization)
• Werbung/Ads
• Print (CMYK, dpi, etc.)
• (Social Media) Marketing/Kommunikation
• Schnittstellen/Webservices
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
how to
• Erste Reaktion notieren
• Beobachtungen anbringen, wenn gefragt (und nur wenn gefragt)
• Auf den Punkt formulieren = keine allgemeinen Aussagen
• Kontext und Zielgruppe beachten
• Das wichtigste Kriterium ist, inwieweit Erwartungen erfüllt werden
• Subjektive Aussagen sind OK, solange sie als solche erkennbar sind
• Die Gesamtheit beachten (Design = Design + Content)
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Benutzen Sie!
Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen
Lesen Sie!
• Hunderte Web/Design/Developer-Blogs
• ...
• Smashing Magazine
• aus Deutschland, in englischer Sprache
• Beispielartikel: 100 WordPress Themes, Incredible Free Icon Sets, Web Design Trends, 8 Layout Solutions, 1o Mistakes in Logo Design, 30 Scripts for Galleries, etc...
Top Related