THINKING MADE VISUAL
Design in den Digitalen Geisteswissenschaften

Aline Deicke
(Aline.Deicke@adwmainz.de)
Akademie der W...
“Design is thinking made visual.“
 
— Saul Bass

“Form follows function.“ 
— nach Louis Sullivan
Herausforderungen der Digital Humanities
●
●
●
●
●

Oft große, komplex strukturierte Textmengen
Komplexe, oft neuartige Ap...
Alles ist Design
●
●
●
●
●
●

Usability
Accessibility/Barrierefreiheit
Contentstrategie und Informationsarchitektur
Funkti...
„Good design, when it's done well, becomes invisible.
It's only when it's done poorly that we notice it.“
– Jared Spool
LAYOUT
Eyetrack-Studien

http://www.poynter.org/extra/eyetrack2004/main.htm
http://www.designforconversion.net/layout/strategic-p...
Weißraum
Makro-Weißraum:
●

●

Gruppierung
von Elementen
Erstellung
visueller
Hierarchien

http://alistapart.com/
Grids
„Design is just
making things line
up.“
– John Hicks

http://960.gs/
Out of the box
→ Regeln erst
kennen, dann
brechen

http://www.smashingmagazine.com/2013/02/26/creating-visual-hierarchies-...
Statische / Dynamische Elemente
Statisch:
Header, Footer,
Anordnung
Navigation
● Rahmen für
Inhalt
(Konsistenz)
●

Dynamis...
UI/Design patterns
Erwartung,
gewisse Elemente
an bestimmten
Stellen zu finden
→ hilft dem
Nutzer, sich zu
orientieren und...
TYPOGRAPHIE
5 Types of Reading

●

Scanning

●

Skimming

●

Word by word

●

Reading to study

●

Light reading

http://www.readcwboo...
Sakkaden

http://de.wikipedia.org/wiki/Augenbewegung
Welche Schriftart?

http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/
Body fonts und Display fonts

http://www.typetester.org/
Serif oder Sans-Serif?
Größere Bildschirme,
steigende Auflösung
→ Geschmackssache

http://www.smashingmagazine.com/2013/05...
Anforderungen an Fonts
●

●

●

●

Charactersets (utf-8 latinextended, griechisch,
kyrillisch, …)
Schriftschnitte (Fett, k...
Webfonts - Browserkompatibilität
Chrome on OS X:

IE7 on Windows XP:

https://typekit.com
Webfonts - Performance!

http://www.google.com/fonts
Weißraum
Mikro-Weißraum:
●

●

Organisiert
Komposition
und strukturiert
Informationen
Reguliert
Textblock als
Einheit

htt...
Typographische Skala

http://lamb.cc/typograph/
http://lamb.cc/typograph/
Schriftgröße

Größere Bildschirme → größere Schrift
http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns...
Satzbreite / Zeilenlänge

45—75 Zeichen, optimal: 66 Zeichen

http://www.smashingmagazine.com/2013/05/17/typographic-desig...
Typographische Feinheiten im Web
Oft schwierig, da
●

●

keine SubpixelAnpassungen
möglich
einiges (noch)
nicht in CSSSpez...
FARBEN
Farbtheorie
Z. B.:
●

●

●

Farbkreise,
Farbenlehre
Farbton,
Sättigung,
Helligkeit
RGB vs. CMYK

Farbenkreis, aquarelliert...
Farbschemata

http://colorschemedesigner.com/
Farben im Kontext

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

http://cognition.happycog.com
Kontrast

http://contrastrebellion.com/
ADAPTIVE /
RESPONSIVE / MOBILE
DESIGN
(Zukünftige) Herausforderungen
Darstellung von Webseiten
auch jetzt schon abhängig
von
●

Farbkalibrierung und
Größe Monit...
Lösungen
ContentStrategie
(welche
Inhalte
eignen sich
eventuell
nur für den
Desktop,
welche
besonders
für
mobile?)
http://...
Alles ist Design II

http://de.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-sm...
EIN KLEINES BISSCHEN
TECHNIK
Heute …

http://css3test.com/
… und morgen
Patterns
● Animations
● Laufweite
● Initiale
● Hyphenation
● Ligaturen
● CSS-columns
● …
●

http://lea.verou....
Bis dahin:

●

Graceful Degradation
Progressive Enhancement

●

Cross Browser Testing

●
Vielen Dank für ihre Aufmerksamkeit!
Basics

Tools und Inspiration

w3.org

awwwards.com

caniuse.com

checkmycolours.com
...
Thinking made visual - Design in den Digitalen Geisteswissenschaften
Nächste SlideShare
Wird geladen in …5
×

Thinking made visual - Design in den Digitalen Geisteswissenschaften

824 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
824
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
13
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Thinking made visual - Design in den Digitalen Geisteswissenschaften

  1. 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. 2. “Design is thinking made visual.“   — Saul Bass “Form follows function.“  — nach Louis Sullivan
  3. 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. 4. Alles ist Design ● ● ● ● ● ● Usability Accessibility/Barrierefreiheit Contentstrategie und Informationsarchitektur Funktionsweise Nutzerverhalten (Frontend und Backend) ...
  5. 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. 6. LAYOUT
  7. 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. 8. Weißraum Makro-Weißraum: ● ● Gruppierung von Elementen Erstellung visueller Hierarchien http://alistapart.com/
  9. 9. Grids „Design is just making things line up.“ – John Hicks http://960.gs/
  10. 10. Out of the box → Regeln erst kennen, dann brechen http://www.smashingmagazine.com/2013/02/26/creating-visual-hierarchies-typography/
  11. 11. Statische / Dynamische Elemente Statisch: Header, Footer, Anordnung Navigation ● Rahmen für Inhalt (Konsistenz) ● Dynamisch: ● Veränderliche Inhalte http://www.gluck-gesamtausgabe.de/
  12. 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. 13. TYPOGRAPHIE
  14. 14. 5 Types of Reading ● Scanning ● Skimming ● Word by word ● Reading to study ● Light reading http://www.readcwbooks.com/
  15. 15. Sakkaden http://de.wikipedia.org/wiki/Augenbewegung
  16. 16. Welche Schriftart? http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/
  17. 17. Body fonts und Display fonts http://www.typetester.org/
  18. 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. 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. 20. Webfonts - Browserkompatibilität Chrome on OS X: IE7 on Windows XP: https://typekit.com
  21. 21. Webfonts - Performance! http://www.google.com/fonts
  22. 22. Weißraum Mikro-Weißraum: ● ● Organisiert Komposition und strukturiert Informationen Reguliert Textblock als Einheit http://alistapart.com/
  23. 23. Typographische Skala http://lamb.cc/typograph/ http://lamb.cc/typograph/
  24. 24. Schriftgröße Größere Bildschirme → größere Schrift http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/
  25. 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. 26. Typographische Feinheiten im Web Oft schwierig, da ● ● keine SubpixelAnpassungen möglich einiges (noch) nicht in CSSSpezifikationen integriert http://www.typetester.org/
  27. 27. FARBEN
  28. 28. Farbtheorie Z. B.: ● ● ● Farbkreise, Farbenlehre Farbton, Sättigung, Helligkeit RGB vs. CMYK Farbenkreis, aquarellierte Federzeichnung von Goethe, 1809 (de.wikipedia.org)
  29. 29. Farbschemata http://colorschemedesigner.com/
  30. 30. Farben im Kontext http://www.behance.net/
  31. 31. Farben im Kontext http://cognition.happycog.com
  32. 32. Kontrast http://contrastrebellion.com/
  33. 33. ADAPTIVE / RESPONSIVE / MOBILE DESIGN
  34. 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. 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. 36. Alles ist Design II http://de.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-smashing-conference
  37. 37. EIN KLEINES BISSCHEN TECHNIK
  38. 38. Heute … http://css3test.com/
  39. 39. … und morgen Patterns ● Animations ● Laufweite ● Initiale ● Hyphenation ● Ligaturen ● CSS-columns ● … ● http://lea.verou.me/css3patterns/
  40. 40. Bis dahin: ● Graceful Degradation Progressive Enhancement ● Cross Browser Testing ●
  41. 41. 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

×