Computer arbeiten Binary. Sie verstehen entweder «On» oder «Off». Null oder Eins. On oder Off 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.
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.
Bildschirmauflösungen ändern mit ihren physischen Geräten und neuen Technologien.
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.
Da wir immer andere Bildschirmauflösungen pro Gerät haben, sind Vektor basierte Designs sehr zu empfehlen, da sie unendlich skalieren können.
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.
Artikel zum Video - Peter Nowell
Google Dips (dp) - Bildschirmauflösung-unabhängige Pixel
Apple Points - Designing for iPhone X (view in Safari only)
RGB sind Lichtfarben. Also additive Farben. Alle Farben zusammen ergeben Weiss. Kein Licht zeigt keine Farbe, also Schwarz.
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).
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.
Red: 4c = (4 × 16 + 12 = 76)
Green: 59 = (5 × 16 + 9 = 89)
Blue: c8 = (12 × 16 + 8 = 200)
(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.
rgba: (255, 255, 255, 0.5) -
aHEX: #7FFFFFFF;
Grundsätzlich gilt, kleine Bildschirme werden aus der Nähe angeschaut, grosse Bildschirme aus der Ferne.
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.
Vertiefe dich mit diesem Video in eine gute Einführung in die unterschiedlichen Farbräume.
Folgende Tipps helfen im Umgang mit der Device-Grössenvielfalt.
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.
Die häufigste Interaktionsart mit einem Device ist die 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.
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.
Das Trackpad ersetzt auf Laptops die Maus. Mit dem Trackpad lässt sich ebenfalls den 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 Bereiche 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.
Mobiles und Tablets und auch gewisse Laptops haben einen Touchscreen. Sie sind mit den Fingern bedienbar.
Der Cursor fällt dabei weg und das Device weiss erst mit der Berührung des Fingers was die Userin will. Es gibt kein Hover oder Rechtsklick.
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 der Devices hinkommt.
Wer sein Design auf diese Nutzung hin anpasst, optimiert die Bedienbarkeit.
Immer häufiger werden Sprachassistenten zum Internet-Browsing benutzt. Die gesprochene Sprache hat viele Vorteile gegenüber anderen Eingabemö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.
Die Nutzung von Bilderkennungs-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.
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 auch für alltägliche Anwendungen eignen.
Augmented Reality & Virtual Reality sind Begriffe, rund um dieses Thema.
Gewisse Interaktionen sind erst möglich, wenn zwei Geräte in unmittelbarer Nähe sind.
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 =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 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.
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 fast identisch. Die Begriffe rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.
Möchtest du Google Analytics mit anonymisierter IP-Adresse zulassen?
