Thinking made visual - Design in den Digitalen Geisteswissenschaften

  • 588 views
Uploaded 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 …

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
588
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 38. Heute … http://css3test.com/
  • 39. … und morgen Patterns ● Animations ● Laufweite ● Initiale ● Hyphenation ● Ligaturen ● CSS-columns ● … ● http://lea.verou.me/css3patterns/
  • 40. Bis dahin: ● Graceful Degradation Progressive Enhancement ● Cross Browser Testing ●
  • 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