Vortrag auf dem 6. Arbeitstreffen des Netzwerks "Internetlexikografie" zum Thema "Fragen der Darstellung und Gestaltung von Internetwörterbüchern" (20.-22. November 2013, Institut für Deutsche Sprache, Mannheim) - multimedia.ids-mannheim.de/mediawiki/web/index.php/6._Arbeitstreffen

1. THINKING MADE VISUAL
Design in den Digitalen Geisteswissenschaften
Aline Deicke
(Aline.Deicke@adwmainz.de)
Akademie der Wissenschaften und der Literatur | Mainz
www.digitale-akademie.de

2. “Design is thinking made visual.“
— Saul Bass
“Form follows function.“
— nach Louis Sullivan

3. Herausforderungen der Digital Humanities
●
●
●
●
●
Oft große, komplex strukturierte Textmengen
Komplexe, oft neuartige Applikationen
Lange, intensive Beschäftigung mit Seiten gewünscht
Langer Lebenszyklus
Gemischtes Zielpublikum (Laien und Experten)
Vorteile
●
●
Einzigartige, vielfältige Inhalte
Aufmerksamkeitswilliges Publikum

4. Alles ist Design
●
●
●
●
●
●
Usability
Accessibility/Barrierefreiheit
Contentstrategie und Informationsarchitektur
Funktionsweise
Nutzerverhalten (Frontend und Backend)
...

5. „Good design, when it's done well, becomes invisible.
It's only when it's done poorly that we notice it.“
– Jared Spool

6. LAYOUT

7. Eyetrack-Studien
http://www.poynter.org/extra/eyetrack2004/main.htm
http://www.designforconversion.net/layout/strategic-positioning-of-elements-based-on-the-gutenberg-rule/

8. Weißraum
Makro-Weißraum:
●
●
Gruppierung
von Elementen
Erstellung
visueller
Hierarchien
http://alistapart.com/

9. Grids
„Design is just
making things line
up.“
– John Hicks
http://960.gs/

10. Out of the box
→ Regeln erst
kennen, dann
brechen
http://www.smashingmagazine.com/2013/02/26/creating-visual-hierarchies-typography/

11. Statische / Dynamische Elemente
Statisch:
Header, Footer,
Anordnung
Navigation
● Rahmen für
Inhalt
(Konsistenz)
●
Dynamisch:
●
Veränderliche
Inhalte
http://www.gluck-gesamtausgabe.de/

12. UI/Design patterns
Erwartung,
gewisse Elemente
an bestimmten
Stellen zu finden
→ hilft dem
Nutzer, sich zu
orientieren und
Seite erfolgreich
zu navigieren
http://ui-patterns.com/

13. TYPOGRAPHIE

14. 5 Types of Reading
●
Scanning
●
Skimming
●
Word by word
●
Reading to study
●
Light reading
http://www.readcwbooks.com/

15. Sakkaden
http://de.wikipedia.org/wiki/Augenbewegung

16. Welche Schriftart?
http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/

17. Body fonts und Display fonts
http://www.typetester.org/

18. Serif oder Sans-Serif?
Größere Bildschirme,
steigende Auflösung
→ Geschmackssache
http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/

19. Anforderungen an Fonts
●
●
●
●
Charactersets (utf-8 latinextended, griechisch,
kyrillisch, …)
Schriftschnitte (Fett, kursiv,
extra fett, …)
Echte Kursive/Kapitälchen?
Optimiert für Print oder
Web/beides bzw. auch für
Print benötigt?
http://www.smashingmagazine.com/2013/02/18/designing-reading-experience/

20. Webfonts - Browserkompatibilität
Chrome on OS X:
IE7 on Windows XP:
https://typekit.com

21. Webfonts - Performance!
http://www.google.com/fonts

22. Weißraum
Mikro-Weißraum:
●
●
Organisiert
Komposition
und strukturiert
Informationen
Reguliert
Textblock als
Einheit
http://alistapart.com/

23. Typographische Skala
http://lamb.cc/typograph/
http://lamb.cc/typograph/

24. Schriftgröße
Größere Bildschirme → größere Schrift
http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/

25. Satzbreite / Zeilenlänge
45—75 Zeichen, optimal: 66 Zeichen
http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/

26. Typographische Feinheiten im Web
Oft schwierig, da
●
●
keine SubpixelAnpassungen
möglich
einiges (noch)
nicht in CSSSpezifikationen
integriert
http://www.typetester.org/

27. FARBEN

28. Farbtheorie
Z. B.:
●
●
●
Farbkreise,
Farbenlehre
Farbton,
Sättigung,
Helligkeit
RGB vs. CMYK
Farbenkreis, aquarellierte Federzeichnung von Goethe, 1809 (de.wikipedia.org)

29. Farbschemata
http://colorschemedesigner.com/

30. Farben im Kontext
http://www.behance.net/

31. Farben im Kontext
http://cognition.happycog.com

32. Kontrast
http://contrastrebellion.com/

33. ADAPTIVE /
RESPONSIVE / MOBILE
DESIGN

34. (Zukünftige) Herausforderungen
Darstellung von Webseiten
auch jetzt schon abhängig
von
●
Farbkalibrierung und
Größe Monitor
●
Browser
●
Betriebs-system
●
…
→ Problematik in Zukunft
verstärkt zu erwarten
http://de.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-smashing-conference

35. Lösungen
ContentStrategie
(welche
Inhalte
eignen sich
eventuell
nur für den
Desktop,
welche
besonders
für
mobile?)
http://de.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-smashing-conference

36. Alles ist Design II
http://de.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-smashing-conference

37. EIN KLEINES BISSCHEN
TECHNIK

39. Heute …
http://css3test.com/

40. … und morgen
Patterns
● Animations
● Laufweite
● Initiale
● Hyphenation
● Ligaturen
● CSS-columns
● …
●
http://lea.verou.me/css3patterns/

41. Bis dahin:
●
Graceful Degradation
Progressive Enhancement
●
Cross Browser Testing
●

42. Vielen Dank für ihre Aufmerksamkeit!
Basics
Tools und Inspiration
w3.org
awwwards.com
caniuse.com
checkmycolours.com
alistapart.com – abookapart.com
chrispederick.com/work/webdeveloper
smashingmagazine.com –
shop.smashingmagazine.com
Blogs
bradfrostweb.com
css-tricks.com
lea.verou.me
piccsy.com/everything-design
typoface.blogspot.de/2009/12/typef
ace-or-font-readability-which.html
webdevchecklist.com