Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Meetup #23: Besser als Print – Lesetypografie für das Web (Martin Hallmann und Timo Dinkler, Accenture Interactive)

UX Meetup #23: Besser als Print – Lesetypografie für das Web (Martin Hallmann und Timo Dinkler, Accenture Interactive)

Design ist sexy, und das Web bietet enorme Möglichkeiten, damit das so ist und bleibt. Im Fokus steht das Nutzungserlebnis, das sich auch durch Makro- und Mikrotypografie für eine Vielzahl von Geräten feingranular gestalten lässt.

Martin Hallmann und Timo Dinkler, UX/UI Designer bzw. UX Manager bei Accenture Interactive, laden ein auf eine Exkursion zu Grundlinienrastern und gerätespezifischer Lesetypografie und zeigen, wie freie Designkonzepte jenseits der geläufigen 12-Spalten-Layouts gelingen. Sie verbinden mit ihrem Vortrag Design und Frontend und reden dabei auch über CSS und Schriftgestaltung.

UX Metropole Ruhr

May 07, 2020
Tweet

More Decks by UX Metropole Ruhr

Other Decks in Design

Transcript

  1. @mostlypainless

  2. @mostlypainless Lesetypografie für das Web Martin Hallmann · Timo Dinkler

  3. @mostlypainless Martin @mostlypainless Timo @timoken

  4. @mostlypainless Die Gestalt des Webs

  5. @mostlypainless

  6. @mostlypainless Ag 7 H C

  7. @mostlypainless Layout Hacks: HTML Tables

  8. @mostlypainless Layout Hacks: Float

  9. @mostlypainless Layout Hacks: Float

  10. @mostlypainless 12 Column Grid 1024px 960 px 12 × 60px

    + 20px 16 × 45px + 20px
  11. @mostlypainless Spaltenlayout- Konstruktoren Flex Grid

  12. @mostlypainless CSS Flexbox 1 2 3 1 2 3 1

    2 3 1 2 3 1 2 3 1 2 3 https://marina-ferreira.github.io/tutorials/css/flexbox/
  13. @mostlypainless CSS Flexbox https://marina-ferreira.github.io/tutorials/css/flexbox/ 1 222 33333 1 2 3

    1 2 3 1 2 3 1 2 3 1 2 3
  14. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3 4 5 6

    7
  15. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  16. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  17. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  18. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  19. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  20. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  21. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  22. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  23. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

  24. @mostlypainless Deine Experience wird nie so erlebt, wie Du erwartet

    hattest
  25. @mostlypainless Magisches Papier

  26. @mostlypainless Magisches Papier

  27. @mostlypainless Magisches Papier

  28. @mostlypainless Magisches Papier

  29. @mostlypainless Magisches Papier

  30. @mostlypainless Magisches Papier

  31. @mostlypainless Magisches Papier

  32. @mostlypainless Magisches Papier

  33. @mostlypainless 10 Minuten Break-Out

  34. @mostlypainless Möglichkeiten

  35. @mostlypainless Globale Verteilung: Endgeräte Desktop vs Mobile vs Tablet Market

    Share Worldwide - April 2020 Mobile 53.81% Desktop 43.27% Tablet 2.92%
  36. @mostlypainless 360 375 414 640 667 896 800 768 601

    962 1024 1280 1366 1536 1920 360 375 414 601 640 667 864 962 1080 1280 800 896 1024
  37. @mostlypainless 24px Grid Oleg Popov

  38. @mostlypainless 24px Grid 1 ÷ 1.5 24 6 × 4

    16 4 × 4 Oleg Po
  39. @mostlypainless 24px Grid 1 (24 ÷ 6 ÷ 2) 2

    (24 ÷ 6 ÷ 4) 4 (24 ÷ 6) 16 (24 ÷ 1.5) 24 12 (24 ÷ 2) 8 (24 ÷ 3) 1 ÷ 1.5 24 6 × 4 16 4 × 4 Ole
  40. @mostlypainless Ole 16 4 × 4 24 6 × 4

    1 ÷ 1.5 24px Grid 1 (24 ÷ 6 ÷ 2) 2 (24 ÷ 6 ÷ 4) 4 (24 ÷ 6) 16 (24 ÷ 1.5) 24 12 (24 ÷ 2) 8 (24 ÷ 3) 48 (24 × 2) 72 (24 × 3)
  41. @mostlypainless 1 × baseline Außenabstand n × baseline Inhalt Begrenzungsrahmen

    1 × baseline Außenabstand Jede Dimension ist ein Vielfaches des Grundlinien- abstands
  42. @mostlypainless 1.5 × baseline Außenabstand 4 × baseline Inhalt 1.5

    × baseline Außenabstand Gebrochene Vielfache werden aufaddiert 6 × baseline Begrenzungsrahmen 0.5 × baseline Innenabstand 0.5 × baseline Innenabnstand
  43. @mostlypainless

  44. @mostlypainless

  45. @mostlypainless Wenn Du heute morgen schon sechs unmöglic Dinge getan

    hast, warum dann nicht als sieben zum Frühstück ins Milliways, das Restaurant am des Universums? York, wars and so on—whilst all the dolphins ha done was muck about in the water having a go time. But conversely, the dolphins had always believed that they were far more intelligent tha man—for precisely the same reasons. I'd far rather be happy than right any day. 6 I'd far rather be happy than right any day. I'd far rather be happy than right any day. × 1.618 × 1.618
  46. @mostlypainless

  47. @mostlypainless

  48. @mostlypainless

  49. @mostlypainless

  50. @mostlypainless

  51. @mostlypainless I'd far rather be happy than right any day.

    I'd far rather be happy than right any day. I'd far rather be happy than right I'd far rather be happy I'd far rather be happy Absatz-/Fließtext 16/24px H4 Überschrift 4. Ordnung 20/24px H3 Überschrift 3. Ordnung 32/48px H2 Überschrift 2. Ordnung 56/72px H1 Überschrift 1. Ordnung 68/72px
  52. @mostlypainless 1 ÷

  53. @mostlypainless

  54. @mostlypainless 100% Spaltenbreite

  55. @mostlypainless

  56. @mostlypainless n × baseline

  57. @mostlypainless n × baseline 100% Spaltenbreite

  58. @mostlypainless Don‘t panic

  59. @mostlypainless Don‘t panic

  60. @mostlypainless Don‘t panic

  61. @mostlypainless Don‘t panic

  62. @mostlypainless Don‘t panic

  63. @mostlypainless Don‘t panic

  64. @mostlypainless Don‘t panic

  65. @mostlypainless Select Input

  66. @mostlypainless Select Input Label Label Warnung, Fehlermeldung Infotext

  67. @mostlypainless Select Input Label Warnung, Fehlermeldung Infotext

  68. @mostlypainless Responsive Typography Aj Aj Aj

  69. @mostlypainless Aj Aj Aj Lorem XL Lorem LG Lorem MD

    Lorem SM Lorem XS
  70. @mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem

    XS
  71. @mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem

    XS
  72. @mostlypainless Fluid Typography

  73. @mostlypainless cm, mm, Q Zentimeter, Millimeter, Quarter-Millimeter 1cm = 96px

    ÷ 2.54 (96DPI) Einheit Name CSS Maßeinheiten Übersicht in, pc, pt, px Inch, Picas, Points, Pixels 1in = 2.54cm = 96px 1pc = 1/6 of 1in, 1pt = 1/72 of 1in, 1px = 1/96 of 1in em, rem em = Schriftgrösse des übergeordneten Objekts rem = Schriftgrösse des Ursprungs-Objekts ex, ch, lh x-Höhe, Breite des Glyph „0“ (Null), Zeilenhöhe vw, vh, vmin, vmax 1% der Viewport-Breite/-Höhe 1% der kleineren/grösseren Viewport-Dimension
  74. @mostlypainless Aj Aj Responsive Typography Fluid Typography

  75. @mostlypainless Aj Aj

  76. @mostlypainless Aj Aj

  77. @mostlypainless Aj Aj

  78. @mostlypainless Aj Aj

  79. @mostlypainless Aj Aj

  80. @mostlypainless Aj Aj

  81. @mostlypainless Aj Aj

  82. @mostlypainless Aj Aj

  83. @mostlypainless Aj Aj

  84. @mostlypainless Aj Aj

  85. @mostlypainless Aj Aj

  86. @mostlypainless Aj Aj

  87. @mostlypainless Aj Aj

  88. @mostlypainless Aj Aj

  89. @mostlypainless Fluides Grid bit.ly/baseline-grid

  90. @mostlypainless Fluides Layout Nils Binder, @supremebeing09 https://opentitan.org/

  91. @mostlypainless Proportions- Systeme 1÷1.618 Fluid Grid justfeelsrighttm Bento Box

  92. @mostlypainless Besser als Print?

  93. @mostlypainless Ralf de Jong & Friedrich Forssman Detailtypografie Nachschlagewerk für

    alle Fragen zu Schrift und Satz ISBN 978-3-87439-642-4 Friedrich Forssman & Hans Peter Willberg Lesetypografie Das Standardwerk für Dozentinnen und Studierende und Praktikerinnen ISBN 978-3-87439-800-8 Antonia M. Cornelius Buchstaben im Kopf Was Kreative über das Lesen wissen sollten, um Leselust zu gestalten ISBN 978-3-87439-895-4
  94. @mostlypainless https://www.figma.com/blog/ announcing-auto-layout/ https://help.figma.com/hc/en-us/ articles/360040450513-Create- Layout-Grids-with-Grids-Columns- and-Rows https://medium.com/sketch-app-sources/ auto-layout-introducing-stacks-flexbox- for-sketch-c8a11422c7b5

    https://medium.com/sketch-app-sources/ css-grid-einf%C3%BChrung-in-5-minuten- verstehen-und-in-sketch-umsetzen- 9e9e8a16b07e
  95. @mostlypainless Vielen Dank Martin Hallmann @mostlypainless