Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Thinking made visual - Design in den Digitalen Geisteswissenschaften

945 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
  • Als Erste(r) kommentieren

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

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

×