Loading...
Devices & Displays
Work in Progress

Devices & Displays

Von der physischen Beschaffenheit von Pixel über die Farbdarstellung bis zu den Interaktionsmöglichkeiten von Mensch zur Maschine.

Bits & Bytes

010101

Computer arbeiten Binary. Sie verstehen entweder «On» oder «Off». Null (Off)oder Eins (On) sind ein Bit. Ein Byte ist ein 8-stelliges Bit.

Für das Design spielt die Umwandlung von digitalen Inputs zu elektrischen Impulsen und wieder zurück keine essenzielle Rolle mehr, die Power aller Devices ist so gewachsen, dass sie alles Darstellen können, was wir gestalten wollen. Millionen von Farben, unendliche Texte, Videos in 4K und mehr.

Pixel

Die kleinste Einheit

Jedes Pixel auf unseren Screens ist mit drei Subpixel (RGB-Dioden) ausgestattet. Jedes Pixel erzeugt mit seinen drei RGB-Dioden, Licht in unterschiedlichen Werten.

Leuchten alle drei Dioden mit voller Intensität ergibt dies Weiss. Da ein Pixel sehr klein ist kann das Auge die drei einzelnen Dioden nicht erkennen und kombiniert ihre Farbinformation.

Zoom auf die 3-Dioden eines Pixels in 4 Bildschritten raus zu einem Facebook Icon.
© Reddit.com #pitlast
Zoom auf die 3-Dioden eines Pixels in 4 Bildschritten raus zu einem Facebook Icon.

Bildschirmauflösung

Screendensitiy

Bildschirmauflösungen ändern mit ihren physischen Geräten und neuen Technologien.

Gestalte mit 72dpi.

Es ist einfacher, den Export x2 oder x3 zu machen, als umgekehrt x0.5 und x0.3333333333. Heutige Smartphones besitzen eine Auflösung über 300dpi, also detaillierter als ein klassischer Druck. 

Gestalte mit Vektoren

Da wir immer andere Bildschirmauflösungen pro Gerät haben, sind Vektor basierte Designs sehr zu empfehlen, da sie unendlich skalieren können.

Standardisierung?

Google Android arbeitet mit Dips (Density independent Pixels - dp) die 160 dp per inch sind.

Apple arbeitet mit Points. 1 Point gleich 1 Pixel bei 72dpi.

Beide versuchen mit den Faktoren zwischen physischer Grösse und Bildschirmauflösung einen Weg zu finden.

© Peter Nowell
2

Links

Artikel zum Video - Peter Nowell

Google Dips (dp) - Bildschirmauflösung-unabhängige Pixel

Apple Points - Designing for iPhone X (view in Safari only)

RGB

Webfarben

RGB sind Lichtfarben. Also additive Farben. Alle Farben zusammen ergeben Weiss. Kein Licht zeigt keine Farbe, also Schwarz.

Webfarben sind RGB-Farben

Jeder Pixel erzeugt mit seinen drei RGB-Dioden Licht in unterschiedlichen Farb-Werten. R = Red, G=Green, B=Blue diese Werte sind zwischen 0 und 255 abgestuft. Es sind also 256 Farben pro Diode. 256 Farbeinheiten pro Farbe-Diode = 256x256x256 = 16’777’216 Farben. Also ca. 16.7 Millionen Farben. ‍

256 Farbeinheiten entsprechen 8 Bit (2 hoch 8) Was einem 24 Bit Bildschirm entspricht. Neuere Bildschirme haben 10 Bit (2 hoch 10) was 1024 Farbeinheiten pro Diode bedeutet und somit 1'073'741'824 Farben (1 Milliarde).

Die RGB Farbwelt wird erklärt. 3 Farbkreise (Red, Green, Blue) die zusammengemischt Weiss ergeben. Sowie ein Verlauf der RGB Farbwerte von 0 auf 255.
© Webdesign Essentials
Die RGB Farbwelt wird erklärt. 3 Farbkreise (Red, Green, Blue) die zusammengemischt Weiss ergeben. Sowie ein Verlauf der RGB Farbwerte von 0 auf 255.

HEX

Eine andere Darstellung von RGB

Hexadezimal Farbwerte (Hexa = 6 + Deci = 10) sind RGB Werte. Der HEX-Color Code wird gerne verwendet, da er lesbarer und kopierbarer ist.

Ein HEX Farbwert besteht aus 3 Paaren. Jedes Paar zeigt alle 256 Farbwerte pro Diode. Jedes Paar ist die Summe seiner beiden Werte. 

Ein typischer HEX-Wert: #4c59c8;

Red: 4c = (4 × 16 + 12 = 76)

Green: 59 = (5 × 16 + 9 = 89)

Blue: c8 = (12 * 16 + 8 = 200)

Die 16 HEX «Zahlen» werden gezeigt. Dabei wird verdeutlicht das für 10-15 statt Zahlen, die Buchstaben A-F genommen werden.
© Webdesign Essentials
Die 16 HEX «Zahlen» werden gezeigt. Dabei wird verdeutlicht das für 10-15 statt Zahlen, die Buchstaben A-F genommen werden.

RGBa

Der Alphawert

(a) Alpha steht für Transparenz/Opazität und wird in Prozent ausgegeben. 100 = volle Farbe 0 = transparent.

Bei Transparenz wird der HEX-Wert in RGB-Alpha umgerechnet oder die RGB-Farbe mit dem Alphakanal ergänzt.

Es gibt Methoden einen RGBa Wert, als HEX-Wert auszugeben, aber er wird von den Designprogrammen nicht unterstützt.

Weiss mit 50 % Transparenz

rgba: (255, 255, 255, 0.5) - 

aHEX: #7FFFFFFF;

Der Alpha-Wert von 0 bis 100 in einem Verlauf sowie 4 Anwendungsbeispiele auf eine RGBa Farbe.
© Webdesign Essentials
Der Alpha-Wert von 0 bis 100 in einem Verlauf sowie 4 Anwendungsbeispiele auf eine RGBa Farbe.

Device-Vielfalt

Tausend und Ein Screen

Grundsätzlich gilt, kleine Bildschirme werden aus der Nähe angeschaut, grosse Bildschirme aus der Ferne.

Pixelauflösungen für kleine Screens sind höher als für grosse Screens. 

Bildschirmgrössen (Screenresolutions) ändern ständig. Sie werden grösser (TV-Screens von 55" und mehr) und kleiner (Smartwatches). Um mit dieser Entwicklung Schritt zu halten dürfen wir uns nicht auf fixe Grössen festlegen. Es gibt kein DIN-A4 Standard im Netz.

Wireframes von unzähligen Screen-Sizes um die Vielfalt der Formate zu illustrieren.
© Webdesign Essentials
Wireframes von unzähligen Screen-Sizes um die Vielfalt der Formate zu illustrieren.
6

Links

Screen Resolution List - Device Metrics by Google Material Design

Bildschirmgrössen Statistik

Device Layouts

Umgang mit der Unendlichkeit

Folgende Tipps helfen im Umgang mit der Device-Grössenvielfalt.

Tipps

  • ‍Gestalte mit Vektoren
  • ‍Bilder sollten sich für die Device optimieren lassen. Ergo genug gross sein.
  • ‍In klassischen Layout-Programmen mind. Ein Desktop Screen und ein Mobile Screen gestalten.
  • Möglichst viel über Responsive Design und Webdesign lernen.
  • z.B. im Kapitel Variable Gestaltung
Ein Button bei dem noch der Vektor-Rahmen des Illustrators noch zu sehen ist. Symbolisch für die Nutzung von Vektoren statt Pixel im Webdesign.
Ein Button bei dem noch der Vektor-Rahmen des Illustrators noch zu sehen ist. Symbolisch für die Nutzung von Vektoren statt Pixel im Webdesign.

Interaktion-Optionen

Interaktion mit dem Device

Als User*innen gehen wir intuitiv an die unterschiedliche Benutzung von elektronischen Geräten heran.

In der Gestaltung vernachlässigen wir jedoch viel zu oft die unterschiedlichen Bedienungsarten. Die Konsequenzen daraus sind grösser als man denkt.

Liste mit den 5 Sinnen (Vision, Touch, Sound, Taste und Smell) daneben markiert was ein Mensch hat und was ein normaler Computer hat. Geschmack und Geruchssinn haben Computer noch nicht.
Liste mit den 5 Sinnen (Vision, Touch, Sound, Taste und Smell) daneben markiert was ein Mensch hat und was ein normaler Computer hat. Geschmack und Geruchssinn haben Computer noch nicht.
8

Keyboard

Fast and Precise

Die häufigste Interaktion-Art mit einem Device ist via Tastatur. Wir sind schnell, präzise und können klare Befehle geben.

Mit dem Keyboard kann man in Theorie alles tun, was man mit der Maus auch machen kann. Sofern man weiss wie. Viele Webseiten und Programme richten sich nach den standardisierten Keyboard-Shortcuts um möglichst intuitiv bedienbar zu sein.

© Grunmomedia
9

Maus & Cursor

Old-school

Seit wir Computer Bildschirme haben, verwenden wir die Maus mit ihrem Cursor um auf dem Bildschirm Inhalte anzusteuern.

Unser Blick auf einem Desktop-Screen ist meistens dort, wo der Cursor ist. Der Cursor lässt uns rasch Dinge ansteuern und leitet uns durch den digitalen Alltag. Der Klick oder Rechts-Klick mit der Maus lässt uns Dinge ansteuern, die hinter Interaktionsmöglichkeiten sind.

Um Interaktionsmöglichkeiten zu verdeutlichen, nutzt man Hover-Effekte. Eine Änderung der Darstellung von Elementen, wenn der Cursor über dem Element ist. So weiss die Userin das via Klick etwas passiert.

© Computer Clan on Youtube
10

Trackpad

Extra Gestures

Das Trackpad ersetzt auf Laptops die Maus. Mit dem Trackpad lässt sich ebenfalls der Cursor bedienen.

Doch das integrierte Trackpad hat Nachteile gegenüber dem externen Trackpad oder der Maus. 

Durch die fixe Position unter- oder innerhalb der Tastatur, blockiert die eine Hand teile der Tastatur während man das Trackpad bedient. Insbesondere für effizientes Arbeiten mit vielen Shortcuts oder beim zocken merkt man dies.

Die Maus oder das externe Trackpad kann anatomisch besser platziert werden um effizienter den Bildschirm und die Tastatur nutzen zu können.

Grafische Darstellung eines Laptops. Dabei wird markiert, wo die Trackpad-Hand am Laptop die Tastatur-Hand stört. Zudem ein externes Trackpad als Empfehlung.
© Webdesign Essentials
Grafische Darstellung eines Laptops. Dabei wird markiert, wo die Trackpad-Hand am Laptop die Tastatur-Hand stört. Zudem ein externes Trackpad als Empfehlung.
11

Touch

Daumen & Finger

Mobiles und Tablets und auch gewisse Laptops haben einen Touchscreen. Sie sind mit den Fingern bedienbar.

Der Cursor fällt dabei weg und der Device weiss erst mit der Berührung des Fingers was die Userin will. Es gibt kein Hover oder Rechtsklick.

Das Daumenbereichs-Problem

Da Mobiles und Tablets meist in der Hand gehalten werden, wird die Bedienbarkeit eingeschränkt. Dies zeigt sich besonders stark bei der sogenannten «Thumbzone» der Bereich wo der Daumen bei der einhändigen Bedienung des Devices hinkommt.

Wer sein Design auf diese Nutzung hin anpasst, optimiert die Bedienbarkeit.

Die Thumbzone wird schematisch gezeigt. Wohin der Daumen gut kommt und wohin er nicht kommt.
© footsteps-design.co.uk
Die Thumbzone wird schematisch gezeigt. Wohin der Daumen gut kommt und wohin er nicht kommt.

Audio

Siri, Alexa & Co.

Immer mehr kommt die Möglichkeit Sprachassistenten zum Internet Browsing zu nutzen. Die gesprochene Sprache hat viele Vorteile gegenüber anderen Eingabe-Möglichkeiten.

Sie ist schnell und flexibel. Zurzeit findet aber die Debatte statt, inwieweit Sprach-Assistenten mithören sollen bis  sie gebeten werden etwas zu tun.

In China nutzen die Leute WeChat. Die chinesische Antwort auf WhatsApp. Da wird seit 2012 die Audio-Nachricht statt SMS genutzt.

Camera

Video

Die Nutzung von Bild-Erkennungs-Software und Video ermöglicht neue Interaktionsmöglichkeiten mit einem Device.

Face-ID ist ein Beispiel, wie Interaktionen mit verschiedenen Kameras gemacht werden können. In Zukunft wird bestimmt noch einiges mehr auf uns zu kommen.

© Apple / CNET
14

Orientierung & Bewegung

Nutzung des physikalischen Raums

Immer mehr Devices können ihre «Orientation» oder deine Bewegung feststellen und sich diese als Interaktionsmöglichkeit zunutze machen.

Noch sind viele Bewegungssensoren vor allem in Spielen oder spezifischen Apps zu finden. Doch können sich solche Interaktionsmöglichkeiten durchaus auch für alltägliche Anwendungen eignen.

Augmented Reality & Virtual Reality sind Begriffe, rund um dieses Thema.

© Oculus
15

Links

Oculus Rift

Birdly - Fliegen wie ein Vogel

Tedx Talk - Augemented Reality

Gerät zu Gerät

Near Field Communication

Immer häufiger sind auch Interaktionen erst möglich, wenn zwei Geräte in unmittelbarer Nähe sind.

Chip-Karten

Die wohl bekannteste Gerät zu Gerät-Kommunikation ist die Kreditkarte. Am Bankomat kann man nur mit seiner Karte als Identifikations-Schlüssel das Gerät bedienen, um an sein Geld zu kommen.

NFC

NFC =Near Field Communication. Ist ein Übertragungsstandard der RFID Technologie. So wie Wi-Fi ein Standard von WLAN ist. Es ermöglicht eine kontaktlose Übertragung von Daten in unmittelbarer Nähe. Meistens ist der NFC passiv und benötigt keine Energiezufuhr. Mit dieser Technologie lässt sich kontaktlos bezahlen (per Kreditkarte oder Smartphone), öffnet Türen und Autos, Smarthome Anwendungen sowie allgemeine «Internet of Things» (IoT) Nutzungen.

Bluetooth

Bluetooth ist ein entwickelter Industriestandard für die Datenübertragung zwischen Geräten über kurze Distanz per Funktechnik (WPAN). Es gibt verschiedene Bluetooth Standards und Anwendungen. Im Alltag wird Bluetooth für längere Datenübertragungen in unmittelbarer Nähe genutzt. Maus und Tastatur mit dem Computer verbinden. Musik über Boxen oder im Auto vom Smartphone aus hören etc.

© Turn On
16

Die physischen und digitalen Beschaffenheiten zu kennen hilft bessere Entscheidungen zu treffen.

Technik und Struktur

Nebst den physischen Elementen wie Pixel und Bildschirme sind Webseiten aus Code in Programmier- und Auszeichnungssprachen geschrieben. Diese Codezeilen sind die Bausteine der Webseiten-Anatomie. Die Anatomien von Webseiten sind oft sehr ähnlich. Die Begrifflichkeiten rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.

Scroll Snap
On
Off