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

1. WILLKOMMEN BEIM
LUNCH N‘ LEARN
Masseinheiten auf Screens.

2. Abstand
Rand
Body
Screen
Devices
Touch
Prozent
Bildschirm
Schrift
Smartwatch
Anzeige
Digital
Anzeige
Smartphone
Verhältnis
Handy
Root
Pixel
GRÖSSE.

3. © evoq labs AG, 27.10.2016

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. FACTS & FIGURES
Geräte & Screens

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. MIT DEN
RICHTIGEN
MASSEINHEITEN
ARBEITEN
Masseinheiten

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 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. KEINE PIXELS
MEHR
Pixel oder nicht?

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. 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