Masseinheiten auf Screens

251 Aufrufe

Veröffentlicht am

Lunch N' Learn bei evoq labs AG zum Thema modernes Screendesign und deren Masseinheiten.

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
251
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Masseinheiten auf Screens

  1. 1. WILLKOMMEN BEIM LUNCH N‘ LEARN Masseinheiten auf Screens.
  2. 2. Abstand Rand Body Screen Devices Touch Prozent Bildschirm Schrift Smartwatch Anzeige Digital Anzeige Smartphone Verhältnis Handy Root Pixel GRÖSSE.
  3. 3. © evoq labs AG, 27.10.2016
  4. 4. © evoq labs AG, 27.10.2016 Die Fragmentierung der Devices, sprich Geräte, hat auch zu Folge, dass die unterschiedlichsten Abmasse der Screens zunimmt. Durch das omnipräsente Internet und das ersetzten der Plakate durch Screens, ist von einheitlichen Abmasse und Auflösungen von Anzeigegeräten nicht auszugehen. Die Herausforderung besteht darin, dass die selbe Quelle auf allen Screens gut lesbar und beim beibehalten der grafischen Botschaft dargestellt werden kann.
  5. 5. FACTS & FIGURES Geräte & Screens
  6. 6. Aufgabe SREENS Welche Sprache und Einheiten verwenden wir bisher? Welche Einheiten könnten wir sonnst verwenden? EINZELN Welche Geräte besitze und / oder verwende ich täglich die einen Bildschirm haben? Wie gross sind diese Bildschirme, Auflösung und Grösse? GRUPPE Vergleicht eure Ergebnisse mit dem euren Sitznachbarn. Gibt es unterschiede und wenn ja welche? Sind die Unterschiede Frappant? E-MEDIA Was schliessen wir daraus auf die reale Welt? Was kommt noch auf uns zu? 27.04.2016 © evoq labs AG
  7. 7. MIT DEN RICHTIGEN MASSEINHEITEN ARBEITEN Masseinheiten
  8. 8. Einheiten RELATIONEN Das Design wird flexibler, wenn man Grössen, Abstände in relative Masseinheiten angibt. Einfacher auf unterschiedliche Screens adaptierbar. MASSEINHEITEN Viele Masseinheiten im Screendesign kommen aus dem Print oder Handwerk. Es gibt extra Einheiten für das Screendesign, relative Einheiten. PHYSISCHE MASSE • Zentimeter cm • Millimeter mm • Zoll in • Pica pc • Punkt pt RELATIVE MASSE • Schriftgrösse em • Kleinbuchst. xm • Nullbreite ch • Wurzel-Em rem • Viewport Breite vw • Viewport Höhe vh 27.04.2016 © evoq labs AG
  9. 9. Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 0. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 27.04.2016 © evoq labs AG Aufbau der Einheiten Viewport Breite = 100vw ViewportHöhe=100vh Schriftgrösse = 1em Nullbreite = 1ch 2em Kleinbuchstabe = 1xm Root Grösse = 1rem Bild = 150px x 70px
  10. 10. KEINE PIXELS MEHR Pixel oder nicht?
  11. 11. Einheiten richtig verwenden Ob man virtuelle oder physische Einheiten einsetzt und dann noch welche kommt sehr auf den Einsatz und Verwendung des zu dimensionierendem und positionierendem Objekt an. Da Rasterbilder naturgemäss in Pixels angegeben werden kann man diese ganz gut in Pixel im Medium dimensionieren. Schriften, Satz und Abstände lassen sich sehr gut relativ angeben. Bei der proportionalen Skalierung auf die unterschiedlichen Screens werden die Abstände im richtigem Verhältnis übernommen. Damit verhindert man das Abschiessen vom Layout! Linktipp: selfhtml.org Fragen und Diskussionen zum Thema erwünscht. Viel Erfolg beim Umsetzten! 29.03.2016 © evoq labs AG
  12. 12. BESTEN DANK! Das war‘s. evoq labs AG Ottikerstrasse 59 8006 Zürich T +41 44 262 99 33 F +41 44 262 99 22

×