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

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

880 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

×