Hochgeladen vonRaoul René Melcer
Masseinheiten auf Screens
Das Dokument behandelt die Herausforderungen und Grundlagen von Maßeinheiten im Screendesign vor dem Hintergrund der zunehmenden Fragmentierung der Geräte und Displays. Es werden physische und relative Maßeinheiten vorgestellt, die für ein flexibles Design auf verschiedenen Bildschirmgrößen entscheidend sind. Zudem wird betont, wie wichtig es ist, Inhalte auf unterschiedlichen Screens lesbar und optisch ansprechend zu gestalten.
Masseinheiten auf Screens
- 1. WILLKOMMEN BEIM LUNCH N‘LEARN Masseinheiten auf Screens.
- 2.
- 3. © evoq labsAG, 27.10.2016
- 4. © evoq labsAG, 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. FACTS & FIGURES Geräte& Screens
- 6. Aufgabe SREENS Welche Sprache und Einheitenverwenden 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.
- 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. Lorem Ipsum Lorem ipsumdolor 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.
- 11. Einheiten richtig verwenden Obman 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. BESTEN DANK! Das war‘s. evoqlabs AG Ottikerstrasse 59 8006 Zürich T +41 44 262 99 33 F +41 44 262 99 22