Grundlagen Digitaler Mediengestaltung

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

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

1. Einleitung

Wir: Nils K. Windisch

• Stellv. Leitung Gruppe WWW, Portale

• Web Project Manager / Senior Web Developer

• M.A. Medien- und Kommunikationswissenschaften, Soziologie & MA. Library and Informations Science

• SUB (seit 2006): Forschungsprojekte, Web Development

• Web (seit ~2002): (X)HTML, PHP, MySQL, JavaScript, jQuery, CSS, XML, JSON, WordPress, TYPO3, Flickr, de.icio.us, Bibsonomy usw.

Wir: Ralf Stockmann

• Dipl. Sozw., Schwerpunkt Medienwissenschaften

• Stellv. Leitung Forschung & Entwicklung der SUB Göttingen

http://flickr.com/stockmann

Meistens läuft es so...

• „Irgendeiner muss sich um das Design kümmern, wer erbarmt sich?“

• „Unsere Sekretärin macht alle Printsachen, die kann das auch erledigen.“

• „Wir haben 500 € im Antrag dafür, wem geben wir die jetzt?“

• „Ich kenne da jemanden, der hat schon die Seite zu seinem Fußballverein gebaut.“ (Schwager-eines-Freundes-Phänomen)

Spannungsfelder

• Sachlich vs. Emotional

• Künstlerisch vs. Formalisiert

• Professionell vs. Selbstgemacht

• Individualität vs. Standardisierung

• Gut gemeint vs. Gut gekonnt

Ist gutes Design basisdemokratisch?

Debian OS (Linux)

Microsoft Windows 7

Apple OS X

Gutes Design kommt nicht aus der Mode

• Dieter Rams(Braun, 1950er)

• Apple, 2000er

10 Prinzipien (Dieter Rams)Gutes Design...

• ist innovativ.

• macht ein Produkt brauchbar.

• ist ästhetisches Design.

• macht ein Produkt verständlich.

• ist ehrlich.

• ist unaufdringlich.

• ist langlebig.

• ist konsequent bis ins letzte Detail.

• ist umweltfreundlich.

• ist so wenig Design wie möglich.

Schlüsselbegriff: Konsistenz• „wie aus einem Guss“

• durchdacht

• stimmig

• konsequent

• Liebe zum Detail

• gewissenhaft

• gründlich

• Ausnahmen sind gewolltund bestätigen die Regel

Ohne Konsistenz ist jedes Design schlecht.

Details beachten!

Konsistenz einfachherzustellen

Konsistenz schwerherzustellen

Design ist (auch) Handwerk• Ausbildungsberufe

• Geschick

• Erfahrung

• Technikverstand

• Daher: gutes Design kostet

• Zeit

• Geld

• Nerven

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

Design ist sehr privat• Wir verraten viel über unser Kunstverständnis

• Vergleiche: was hängen wir uns an die Wand

• Familienbilder

• Röhrender Hirsch

• Bildende Kunst

• Zeitgenössische Kunst

• Eigene Fotografien

• „Das soll so, das ist Kunst!“

• Um die Regeln brechen zu können, muss ich sie kennen

Gutes Designist eine Frage der Haltung.

(der Personen und des Projektes)

Was ist unsere Haltung?

• Welche Werte wollen wir vermitteln:

• Innovation, Tradition, Verlässlichkeit, Schnelligkeit, Beharrlichkeit, Wissenschaftlichkeit, Seriosität, Jugend, Erfahrung, Flexibilität, Originalität, ...

Ziel des Workshops

• Wenn möglich: es den 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

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

pearl.de

Museum Ludwig

Gestaltung: Analogie zu digitalem Büro

• Viele Menschen müssen mittlerweile Sekretariatsaufgaben übernehmen weil es die Technik „so einfach“ macht.

• Früher: Diktiergeräte. Heute: Textverarbeitung.

• Aber: wir schreiben dadurch nicht bessere Briefe, sondern werden von der Arbeit abgelenkt.

• Die Demokratisierung der Möglichkeit, Design zu erstellen, geht nicht einher mit einem Zuwachs an Wissen über die Grundregeln des Designs.

Was uns fehlt: die Rechtschrbkontrolle

für Designfragen

Die Checkliste

• Fasst die wesentlichen Felder zusammen

• Kann bei jedem Projekt durchgegangen werden

• Kann mit Prioritäten versehen / ignoriert / erweitert werden

• EXCEL, PDF

• Download: http://wwwuser.gwdg.de/~rstockm/download/mediengestaltung/

Checkliste: 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

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

2. Medien

Formen• Briefpapier

• E-Mail

• Flyer

• Micro-Blogging

• PDF

• Präsentation

• Video

• Visitenkarte

• Webseite

Unterschiedliche Formen

• CI/CD: Corporate Identity/Corporate Design

• Wiedererkennungsmerkmale über alle Formen hinweg

• Farbe, Proportion, Whitespace, etc.

• Finden sie eine! Agentur, die für Sie arbeitet

• Halten Sie einen Style-Guide bereit

"The site 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)

Style Guide -Bundesregierung I

• Basiselemente (Print)

• Bildwortmarke

• Platzierung mehrerer Bildwortmarken

• Platzierung von Logos

• Schriften

• Farben

• Raster

• Layoutprinzip

Style Guide -Bundesregierung II

• Basiselemente (Online)

• Bildwortmarke

• Schriften

• Farben

• Gestaltungsfläche

• Raster

• Screenaufteilung und Frames

• Bild- und Formensprache

Style Guide -Bundesregierung III

• Geschäftsausstattung (Print, Standard)

• Briefbogen

• Kurzmitteilung

• Faxmitteilung

• Visitenkarte

• Briefumschlag

• Adressetikett

• Papier

• E-Mail-Signatur

Webseite - Formen

• Blog - Sie reden mit ihren Nutzern

• Forum - Sie lassen Nutzer miteinander reden

• Wiki - Nutzer arbeiten zusammen

• Suchmaschine - Nutzer finden etwas

• Shop - Sie verkaufen etwas

• Portfolio - Sie präsentieren sich

• Portal, Galerie, LMS, etc.

Checkliste:Medien

3 Sind sämtliche relevanten Medien mitgedacht? Ja Neinnicht

zutreffend

4Ist der Einsatz jedes Mediums schlüssig

begründet?Ja Nein

nichtzutreffend

Webseite - Elemente

• Header, Menu, Content, Footer, Featured, Ads, News, Sitemap

• Domain

• Optimierung, Tracking, Testing

• Develop, Stage, Live

Elemente: Header• Denken Sie an Briefköpfe auf Speed

• Funktion

• Home Button

• RSS, Twitter, etc.

• (Menu)

• Formen

• Nur Text, Text + Logo, Bild, Animation

• Was immer auch Sie im Header nutzen, diese Elemente finden sich auch auf Visitenkarten, Präsentationsfolien, etc.

Header

Elemente: Menu

• Trennung von Menüs

• Hauptmenü (meist links vertikal)

• Tools (meist oben rechts horizontal)

• Kontextsensitiv (bei Amazon: Hauptmenü oben, spezifische Links links plaziert)

• Mehr als 8 Punkte?

• Aufklappen; Ja oder Nein?

• in <5 Sekunden erfassbar

Elemente: Footer

• Abschluss der Seite

• Funktionen anbieten

• Selected Sitemap

• Featured Content

• RSS, Twitter, etc.

Footer

Elemente: Content

• strukturiert, erkennbar, lesbar

• Verschiedene Inhaltselemente

• Überschriften!

• Text (Absätze)

• Bild

• Tabelle

• etc.

Client: "What is the adress of the website?"Me: "It’s www.*****.com"Client: "You must be mistaken, where is the ‘@’ ?!"

(Clients from Hell)

Elemente: Domain I

• URL: www.example.com

• subdomain.domain.tld

• "com" - TLD (Top Level Domain)

• "example" - Domain (das kaufen Sie)

• "www" - Subdomain (das richten sie ein [optional])

Elemente: Domain II

• URLs sind Funktion

• /contact, /sitemap, /help

• URLs sind für Menschen (Pretty/Clean URLs)

• example.com/archives/2010/03

• example.com/products/

• apple.com/iphone/gallery/ vs. apple.com?id=1234

Elemente: Domain III

• don't: http://en.wikipedia.org/wiki

• don't: http://example.com/page/main.html

• don't: http://example.com/menu/info.html

• example.com? = RFC2606: ".example" is recommended for use in documentation or as examples

Checkliste: 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

Rezeption

Rezeption - Technik

• Beamer, Browser, E-Mail, haptisch, Mobiltelefon

• Unterschiede:

• Anzeigengröße

• Hardwareleistung

• Dateisystem

Rezeption - Verhalten

• Aufmerksamkeitsspanne variiert stark

• Bedürfnisse stark unterschiedlich

• Beispiel:

1.Zuhause

2.vor Ort

3.unterwegs

1. vor Ort

• Ich habe keine Zeit

• Ich will wissen, ob es da ist

• Ich will wissen, wo ich es bekomme

2. Zuhause

• Ich habe Zeit

• Ich will mir merken, was ich gefunden (und gesucht) habe

• Ich bin bereit Neues zu entdecken

3. unterwegs

• Ich habe (keine) Zeit

• Ich will wissen, ob sich der Weg lohnt

• Jemandem zeigen, was ich gefunden habe

iPhone

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

• iPhone = Internet

• Nutzer die Wahl lassen

• Gewohnte Nutzung unterstützen

iPhone

iPhone (Bad vs. Good)

iPhone (Web vs. Mobile)

Checkliste:Rezeption

10Relevante Nutzungsszenarien sind erörtert und

technisch entspr. berücksichtigt?Ja Nein

nichtzutreffend

Dein Feind, der Beamer

SchwarzwertEin Beamer kann nur aufhellen: der dunkelste Punkt auf der Leinwand

entspricht dem maximalen Schwarz

So soll es sein

So wird es sein

Lichtstärke hilft

und eine Leinwand

vor allem aber: Abdunkeln

Dein Feind, der Beamer • Auflösung

• Farbechtheit

• Kontrast

• Browser

• Power Point-Versionen

• Animationen

• Schatten

• Videos

• Eigenes Notebook anschließen

3. Farben

Farbenlehre

• Das Primat der Lesbarkeit:

• alle relevanten Informationen müssen gut lesbar sein

Farbkontraste

• Wie ein Schwarz-Weiß Verlauf haben auch Farben eine Helligkeit

• Diese kann subjektivem Empfinden unterliegen

• Grün wirkt für viele dunkler als rot

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

Problembeispielzwei von drei Texten haben zu wenig Kontrast

• 20% Grau

• 40% Grau

• 60% Grau

• 80% Grau

• 90% Grau

• 100% Schwarz

Schriftfarben für Fließtext

unleserlich

kritisch

optimal

Checkliste:Farben

11Verfügen alle verwendeten Schriftfarben über

ausreichend Kontrast zum Hintergrund?Ja Nein

nichtzutreffend

Feine Unterschiede

ICH BIN INTERESSANT

ICH BIN ANSTRENGEND

Farbkombinationenbitte nichts erfinden, es gibt genug Angebote

http://colorschemedesigner.com/

Beispiel: heute.de

Checkliste:Farben

12Wurde die Farbpalette mit einem Generator

erzeugt / getestet?Ja Nein

nichtzutreffend

Gängige Probleme beim Umgang mit Farben

• Kontrast

• stellen wir uns Farben als Graustufen vor: haben wir mehr als 50% Kontrastunterschied?

• 100% Kontrastunterschied wirkt gewöhnlich

• Stimmige Farben

• an Paletten orientieren

• von gelungenen Seiten übernehmen

• Rot/Grün-Blindheit

• Internationale Unterschiede kennen - Beispiel Wertigkeit:

• Europa: Blau

• Amerika: Rot

• Modefarben können schnell wieder anstrengend wirken. Beispiel: Cyan (die Web 2.0 Farbe)

Hintergründe

• Farben

• Verläufe

• Bilder

• don‘t: fixierter Bildhintergrund (Performance)

VerläufeAnzahl der Farbstufen, Kompressionsartefakte

Checkliste:Farben

13 Werden Farbverläufe ohne Stufen abgebildet? Ja Neinnicht

zutreffend

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

...aber bitte: konsistent!

Checkliste:Links

14Sind die Links klar genug von anderen

Textbereichen abgesetzt?Ja Nein

nichtzutreffend

15 Sind Links konsistent formatiert? Ja Neinnicht

zutreffend

Schaltflächen

• Reiterleisten

• Buttons

• Schalter

• Hover-Effekte

• Konsistenz

• Trefferzonen immer über die ganze Fläche legen

Problem: klickbarer Bereich

Reine Textlinks sind bei dichten Navigationsbereichen schwer zu treffen.

Besser: mit einer Box versehen und Hover-Effekt.

Checkliste:Links

16Sind alle Schaltflächen und Buttons mit ausreichenden Trefferflächen versehen?

Ja Neinnicht

zutreffend

4. Typographie

Typographie

• ..ist Anmutung

• ..beeinflusst die Nutzbarkeit

• ..ist Gestaltungselement

"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)

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)

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.

So wenig unterschiedliche Typen und Schriftgrößen

wie möglich!

Zählen Sie...

Fonts in Web I

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

• { font-family: Times, serif }

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

• { font-family: Courier, monospace }

Fonts in Web II

• Safe: serif, sans-serif, monospace

• Safe-ish: Arial (sans-serif), "Times New Roman" (serif), "Courier New" (monospace),

• Alternativen: z. B. sIFR

• Schlechte Alternative: Font als Image

• Zukunft: @font-face

serif vs. sans-serif

Typographie und E-Mails

• Stark eingeschränkten 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

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.

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.

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.

Abstand: 1 Abstand: 1,2

Achten Sie auf Waisen!

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

5. Logodesign

Logodesign

• Die Marke auf wenige Pixel komprimieren

• Wiedererkennbarkeit

• Unverwechselbar / Abgrenzung zu Mitbewerbern

• Schnell zu erfassen

• Multifunktional

Typen von Logos

• Nur Text

• Modifizierter Text

• Text/Bild

• Nur Bild

• Abstrakt / Gegenständlich

TextmarkenFarbe, Schrifttype, Modifikationen

Erweiterte TextmarkenModifikationen, Hintergrundformen, Effekte

Text-Bildmarken

Reine Bildmarken

Internetmarken

Eine Variante: Online-Logowettbewerb

http://99designs.com/

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

6. Bildelemente

Bildelemente• Kategorien

• Fotografien

• Verfremdungen

• Sättigung

• Effekte

• Zeichnungen

• Montagen

• Formen (Verläufe, Muster)

Problemfelder bei Bildelementen

• Konsistenz ist teuer

• Selber anfertigen

• Sets kaufen (Getty etc.)

• Atmosphäre vs. Information

• Großzügige Verwendung oder Verschwendung?

Konsistenz bei Bildelementen

• Tiefenschärfe

• Freistellen

• Perspektive

• Farbgebung

• Motiv

• Menschen, Dinge, Räume, Natur...

Tiefenschärfe

Blende 1,8Blende 5,6

Freistellen

Perspektive / Einstellung

Färbung

unpassende Kombinationen

passende Kombinationen

Qualitätskriterien bei Bildelementen

• Kompressionsartefakte

• Schärfe

• Auflösung (sieht man Pixel?)

• Farbsäume

• Verläufe (sieht man Treppenstufen?)

QualitätsunterschiedeSchriftkanten, RSS Icon

Beispiel: RSS Icon

geringeAuflösung

mittlereAuflösung,

Pixelstruktur

guteAuflösung,keine Pixel

Kompressionsartefakteworst case: um Logo-Schrift

Beispiel: Museum Ludwig

Internet-Bandbreite ist 2010kein relevantes Thema mehr.

Es gibt keine Entschuldigungfür sichtbare Artefakte.

Absolut unverzeihlich:Proportionen ändern

Vorlage

gestaucht

gestreckt

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

Kombination von Text und Bild

Verfahren zum Freistellen

Hier steht Ihr Logo

Hier steht Ihr LogoHier steht Ihr Logo

Hier steht Ihr Logo

Harter Schlagschatten

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

Umrandungen

Einbettung

Kombination

Beispielseite: MoMA

Abstände5 Pixel Abstand sind nie ein Fehler!

Feine Unterschiede

DAS IST KUNSTDAS IST SCHLAMPIG

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

Suchfelder und Ergebnislisten

• Suche vs. Browsing

• Wo ist die Suche platziert?

• Erkenne ich sie als Suche?

• Ist sie auf jeder Seite?

• Wird der Suchraum (gesamte Website, nur diese Seite, Katalog, ...) klar kommuniziert?

• Nice to have: Echtzeitsuchen-Vorschläge

• aber nur, wenn man sinnvolle Ergebnisse liefern kann

Trefferlisten• Einzelne Treffer weit genug voneinander absetzen

• Welche Informationen werden in der Trefferliste gegeben? Welche sind notwendig, welche hilfreich?

• Vorschaubilder

• wohin gelange ich, wenn ich auf einen Treffer klicke, wie komme ich zur Liste zurück?

• Ist die Liste persistent und/oder speicherbar?

• Kann ich die Trefferliste weiter einschränken (Drill down, Facettierung)

• Expertensuche vs. Operatoren erklären

7. Iconsets

Icons: Bedeutungen

• Icons haben Symbolscharakter

• Die Bedeutung von Symbolen ist mitzudenken

Icons: Beispiel Swastika

http://www.flickr.com/photos/30691679@N07/3010930372/

http://www.flickr.com/photos/djwudi/13009987/

Icons: Neue Aufgaben

• Aufgabe: Visualisieren Sie die Nutzung eines Touchscreen-Device

• Lösung: dezidierte Ikonographie

• Beispiel: gesturecons.com

Icons: zu viel!

Icons: inkonsistent

Icons: Problemfelder

• Gute Icons sind teuer.

• Modulare Software = inkonstistente Ikonographie

• Jedes Iconset, was wir finden enthält immer nur ca. 80% der Icons, die wir brauchen

(Gute) Icons: Unbezahlbar

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

8. Animationen, Flash und AJAX

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

(Clients from Hell)

• Ermöglichung von Nutzerinteraktion (Stichwort: Interaktion)

• Schlüssigere/Flüssigere Nutzererfahrung

• Hochglanz Selbstdarstellung

Animationen

• Das Web ist nicht mehr nur Text

• Was genau will ich erreichen

• 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

Flash Szenarien

• Begrüßungsanimation (jep, this is oh so last year)

• Browser Spiele (z. B. Moorhuhn anyone?)

• RIA (Rich Internet Application)

• Schrift ersetzen/darstellen (z. B. sIFR)

• Widgets/Badges (z. B. Flickr)

Warum Flash böse ist

• Adblocker stolpern

• überdurchschnittliche CPU/GPU-Nutzung

• SEO unfreundlich

• Der Zwang Alternativen mitzudenken

• Bruch mit Nutzungsstandards (Rechtsklick, Text markieren, etc.)

Warum Flash gut ist

• Cross-Browser-Kompatibel

• volle Kontrolle über die Darstellung beim Nutzer

• Alternative zu AJAX

• AJAX = Asyncronous JavaScript and XML

• Verschiedene Techniken gruppiert

• Manipulation von CSS, DOM ([X]HTML)

• XML (extensible Markup Language), JSON (JavaScript Object Notation)

• XMLHttpRequest, REST

AJAX - Nutzen• Nutzerinteraktion ohne erneutes Laden der Seite

• dynamische Informationsanzeige (besser: -aktualisierung)

• Anzeige sehr komplexer Daten/Informationen

• Beispiele:

• Selbstlaufende Bilderschau

• sich selbst aktualisierender Newsticker

• Zeitleiste mit sehr viel Informationen

• Dateiupload im Hintergrund

AJAX - Nachteile

• (basiert auf bzw.) abhängig von JavaScript

• immer Fall-back-Lösung anbieten

• Passiert immer was der Nutzer erwartet? (Links öffnen nicht einfach nur eine Webseite, sondern können selbige manipulieren)

• Komplexität (Was passiert, wenn externe Daten nachgeladen werden sollen, aber nicht verfügbar sind?)

• JavaScript = Clientseitig, erhöhte Hardware-Anforderungen beim Nutzer

Flash vs. AJAX

1.Erst erstelle ich alles in Flash, dann

2.programmiere ich ein AJAX-Fallback, dann

3.eine (X)HTML-Alternative

Checkliste:Animationen

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

9. Barrierefreiheit

• Barrierefreie Informationstechnik Verordnung

• Resultiert aus dem Gleichstellungsgesetz

• Bund seit 2002

• (amerikanischen Gegenstück: Section 508)

• Grundlage: WCAG 1.0 (Web Accessibility Guidelines) der WAI (Web Accessibility Initiative) des W3C (World Wide Web Consortium)

BITV - Bund

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

BITV in den Ländern

• Berlin: WBIT (23.06.2005) - Verwaltungsvorschrift zur Schaffung Barrierefreier Infpramtionstechnik (Berlin)

• Berlin: Grundlage: §3 Brandenburgische Barrierefreie Informationstechnik Verordnung, 24.05.2005

• Niedersachsen: 27.11.2007 NBGG §9

BITV - NBGG (25.11.2007)§9 Informationstechnik (jep, das sind nur 106 Wörter)

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

WCAG (BITV)

• Wahrnehmbar: Alternative Textversion, Untertitel, Medienersatz, assistive Technologien, Kontraste

• Nutzbar: Keyboardnavigation, dezent/zurückhaltend, Suche

• Verständlich: Lesbarkeit, komplexe Navigation vermeiden, alternative Nutzungsstrategien

• Robust: Kompatibilität, techn. Hilfsmittel unterstützen

BITV - Technikkriterien• Browser-Kompatibilität

• HTML/CSS-Code-Errors

• JavaScript

• Multilingual

• WCAG 1.0-konform

• XHTML

• RSS-Feed

• sauberes HTML

• HTML-Tags (frame, iframe, from, label)

• Layout-Tabellen

• Broken Links

BITV - Hilfe• Linkhervorhebung

• Nicht gefundene Seite

• Tastaturnavigation

• Externe Links

• HTML-Attribute (abbr, title, alt, description)

• Print-View

• 800px-View

• Kontaktangaben

• Farbwahl

• Breadcrumb/Browninghistory

BITV - Inhalte

• Happy Talk

• Zielgruppenspezifischer Einstieg

• Neuste Dokumente

• Featured Content

• Meldungen

Don not read "Understanding WCAG 2.0"

In fact, do not read WCAG 2.0

Web Accessibility is about people, not about guidelines"

(Shawn Henry, W3C WAI)

BITV - zusammenfassend

• Verstehen Sie diese als Anregung, nicht als 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

Was noch mal

• Graustufen

• kein JavaScript

• keine Grafiken

• kein CSS

• 600px width

Don't make me think!

Checkliste

• Öffentliche Einrichtung? BITV = Pflicht

• Texte lesbar?

• Der Nutzer weiss immer wo er ist?

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

10. Usability

Usability vs. Accessibility

• Nutzbarkeit vs. Nutzbarkeit

• Ein Mobiltelefon/Toaster ist grundsätzlich usable und accessible.

• Fällt es/er herunter kann er:

• A: noch funktionieren (usable), hat aber evtl. scharfe Kanten (accessible)

• B: nicht mehr funktionieren (usable), aber äußerlich unversehrt sein (accessible)

Rechtschreibung

• Das Web ist Text; Text folgt Regeln.

• Fehler sind Stoppschilder. Fehler lenken ab.

• "Any time I go to a web page with misspellings and bad grammar, I usually leave within 30 seconds." (Quelle)

• Lösung: Redaktionelle Texte immer gegenlesen lassen.

Above the Fold I

• Page Fold: Konzept, dass wichtige Inhalte auf der oberen Hälfte der Darstellung zu 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

Beispiel

FAZ: analog

Pagefold

digital

Above the Fold II

• Artikel von Paddy Donnely: Life, below 600px

• Erkenntnis: Menschen scrollen!

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

Apple iPad

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

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?

Geh weg!

Oh, wie können wir helfen?

lustig, aber hilfreich

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

Performance als Qualitätsmerkmal

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."

Wo ist Performance?• Client-Seitig

• Bandbreite (Download, paralelle Aufrufe, etc.)

• Browser

• JavaScript, Java

• Plugins (Flash: CPU/GPU)

• Server-seitig

• Scriptsprache

• Datenbank

• Standort

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

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

AJAX loadersignalisiert: „es lohnt sich zu warten, ich arbeite“

Quelle: http://www.deviant-blog.de/ajax-loader-icons/

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)

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

12 Testing/Validierung

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?

Classic client answer to any question involving two options:

“Well, let’s try it both ways and see how it looks.”

(Clients from hell)

Browser Viewport

• Tatsächlich verfügbare Anzeigefläche

• nicht gleich Größe des Browserfensters

• Toolbars, Rahmen, Scrollbars etc, rauben Viewport

Google Browsersize

Browser Viewport

• 800px Breite zwingend, >800px Breite optional

• Netbooks, Internetcafe

• auch geräteabhängig (Smartphones, iPhone, Handy)

mit 800px nach Hause

Variabler Viewport/Content

• Width

• max. 960px

• min. 800px

• min. 600px (Content)

Browser

• Interpretieren HTML

• Nutzen Plug-Ins (Flash, Java)

• Führen JavaScript aus

MS Internet Explorer 6

• vor 4 Jahren haben wir noch über den IE 5.x und Netscape 4.x geredet

• Browser sind vergänglich

Brower und JS

• Vergleich der standardkonformen Javascript-Implementierung (via Sputnik)

• n = 5000, min: ~80, max ~500

• Mitte = gut, Rand = schlecht

• Entfernung untereinander = Ähnlichkeit

Nutzertests

• Nutzerstudien kosten Geld, viel Geld

• Automatisches Testen ist nicht erschöpfend

• Nehmen sie fünf Menschen und schauen sie ihnen zu!

"Can you call Google and ask them when the website will show up in the search results?"

(Clients from Hell)

Werde ich gefunden?

• Erfassung meiner Inhalte von Google & Co.

• Google Webmaster Tools

Warum validieren

• Weil die BITV vorgibt, dass Technik standardkonform umgesetzt werden muss

• Weil sich jeder Programmierer über sauberen Code (seines Vorgängers) freut

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

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)

"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)

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

Checkliste:Testverfahren

49 Ich habe gestestet? Ja Neinnicht

zutreffend

50 Ich habe validiert? Ja Neinnicht

zutreffend

13. Abschluss

Nicht erwähnt

• SEO (Search Engine Optimization)

• Werbung/Ads

• Print (CMYK, dpi, etc.)

• (Social Media) Marketing/Kommunikation

• Schnittstellen/Webservices

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)

Benutzen Sie!

Lesen Sie!

• Hunderte Web/Design/Developer-Blogs

• ...

• Smashing Magazine

• aus Deutschland, in englischer Sprache

• Beispielartikel: 100 WordPress Themes, Incredible Free Icon Sets, Web Design Trends, 8 Layout Solutions, 1o Mistakes in Logo Design, 30 Scripts for Galleries, etc...

Grundlagen Digitaler Mediengestaltung

Education

Grundlagen der Informatik 2 Grundlagen der … · Grundlagen der Digitaltechnik Grundlagen der Informatik 2 Grundlagen der Digitaltechnik 4. Minimierung digitaler Schaltfunktionen

Markenselbstbild vs. Markenwahrnehmung Google ...publications.hs-neu-ulm.de/1337/1/Markenbrand_Ausgabe7_2018_we… · zum Erlernen digitaler Marketing-Grundlagen 35 Candidate Experience

Grundlagen der Mediengestaltung · Fachbereich Medientechnik Die Wiedergabe vonGebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesemWerk berechtigt auch ohne besondereKennzeichnung

Wasseranalytik - MACHEREY-NAGELftp.mn-net.com/.../Wasseranalytik/Br_Seminarbuch_DE.pdf6 IMPRESSUM: Redaktion: Eva Schneider Grafik / Layout: Abteilung Mediengestaltung MACHEREY-NAGEL

SCHARFSINN-Mediengestaltung - Ausgabe 5 | …...Als ich SCHARFSINN – Mediengestaltung 2003 gegründet habe, gab es noch sehr viele Betriebe ohne eigene Website. Heute ist das undenkbar

Mediengestaltung Grundlagen der Typographie II - lankau.delankau.de/gw_hso/pdf/03b_typographie002.pdf · Prof. M.A. Ralf Lankau Mediengestaltung: Grundlagen der Typographie 2 /25

Digitaler Assistent und K10plus - blog.ub.uni-stuttgart.de · 2 Digitaler Assistent und SWB •Zusammenspiel / Datenfluss Digitaler Assistent (DA) mit der SWB-Verbunddatenbank (seit

Praktikum Mediengestaltung - Medieninformatik

Modellierung und Simulation analoger Systemegst.tu-ilmenau.de/download/=Modellierung_und_Simulation_analoger... · 3 Übungsaufgabe 2: Grundlagen der Modellierung digitaler Schaltungen

GRUNDLAGEN DER MEDIENGESTALTUNG: PRINTGRAFIK UND … · 1 TE Trainingseinheit (50 Minuten) / Vorbehaltlich Änderungen und Druckfehler KURSBERSICHT SEPTEMBER - UNI Grafik Bild Multimedia

Modul: Grundlagen digitaler Medientechnik Die Technik … · Für Netzwerkadministratoren bedeutet dies, dass sie sehr bedacht mit den Adressen umge-hen müssen, dass die Anlage des

Digitaler Stress in Deutschland Digitaler Stress in ... · Digitaler Stress in Deutschland | 2 Digitaler Stress in Deutschland Eine Befragung von Erwerbstätigen zu Belastung und

Technische Grundlagen der Informatik – Kapitel 1...Entwurf digitaler Logikschaltungen Systematische Fehlersuche in digitalen LogikschaltungenSystematische Fehlersuche in digitalen

Grundlagen der Halbleiterbauelemente, Analyse analoger und digitaler Schaltungen Dr. Erich Boeck1 4.1 Grundlagen digitaler Signale 4. Digitale Schaltungstechnik

Überdrucken von weißem Text - und die Folgen in der Mediengestaltung

Unternehmenseinblicke - SCHARFSINN-Mediengestaltung · SCHARFSINN-Mediengestaltung ist ein verlässlicher Partner im Bereich der Wer-bekonzeption und Grafik. Die Leute schaffen es

Modul: Grundlagen digitaler Medientechnik Die Dienste des ... · Modul: Grundlagen ... HTML ist eine statische Beschreibung der Struktur einer Webseite. ... DATA Mit DATA leitet der

Professur Mediengestaltung bei OUTPUT.DD

21. Mai 2004Dr. Bettina Pfleging1 Medienkompetenz Mediengestaltung braucht ist Teil von Medienwirksamkeit bestätigt benötigt Neue Medien Bildung ermöglichen

Mediengestaltung, Medienwirksamkeit, Medienkompetenz - Neue Medien in der Bildung