Thinking made visual - Design in den Digitalen Geisteswissenschaften

869 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

×