Wenn Sie es noch nicht zur Kenntnis genommen haben, wird das Web auf Hochtouren gestellt. Von Bildern über Hintergründe bis hin zu Elementen der Benutzeroberfläche ist High Definition die neue Normalität.
Es begann mit einigen Retina-Bildschirmen und hochauflösenden Bildschirmen. Der Zugang zu schnelleren Verbindungen hat dieses Phänomen jedoch noch verstärkt, da von jedem Gerät aus ein besserer Zugriff auf HD-Websites möglich ist. Denken Sie darüber nach und entwerfen Sie in High Definition? Hier sind ein paar Dinge zu beachten.
Was ist HD wirklich?
Der häufigste Hinweis für HD ist der Begriff Retina-Display. Der Begriff wurde von Apple-Geräten populär und steht für hochauflösende Bildschirme. Dies bezieht sich auf eine ziemlich spezifische Technologie für Geräte.
Paula Borowska für Designmodo hat eine der am leichtesten verständlichen Beschreibungen:
- Gerätepixel ist die kleinste angezeigte physikalische Einheit.
- Die Pixeldichte ist die Anzahl der Pixel, die in einem bestimmten Raum angezeigt werden.
- Auflösung ist die Anzahl der Pixel über die gesamte Breite oder Höhe des sichtbaren Bereichs.
- Pixel pro Zoll (ppi oder dpi) bezieht sich auf die Anzahl der Pixel, die Sie erhalten, wenn Sie die physische Breite der Anzeige durch die Anzahl der angezeigten horizontalen Pixel teilen.
- High DPI ist eine Anzeigedichte von 200 Pixel pro Zoll oder mehr.
Die meisten Geräte, die Sie heute kaufen, von Mobiltelefonen über Tablets bis hin zu Laptops, verfügen wahrscheinlich über ein hochauflösendes Display. (Und die Realität ist, dass selbst wenn Sie ein Gerät ohne HD-Display haben, eine hochauflösende Website nicht schaden kann.)
Bilder
Der Ort, an dem Sie zuerst über High Definition nachdenken möchten, ist der Bereich der Bilder. Die Tage, an denen jedes Bild mit einer Breite von 600 Pixeln bei 72 ppi gespeichert wurde, sind vorbei. Das wird es auf heutigen Bildschirmen einfach nicht schneiden.
Der Basisstandard für HD beträgt 200 ppi. Das ist mehr als doppelt so viel wie zuvor. Hinzu kommt, dass die Bildschirme mit 1920 um 1080 immer schneller werden. Laut W3Schools.com sind die häufigsten Bildschirme mindestens 1024 x 768 Pixel, wobei mehr als 30 Prozent der Benutzer auf einem hochauflösenden Bildschirm arbeiten.
Dasselbe gilt auch für kleine Bildschirme. Beliebte Geräte wie das iPhone 6 (401 ppi) und das Samsung Galaxy S5 (577 ppi) sind ebenfalls mit HD ausgestattet.
Wenn es um Bilder geht, müssen sie scharf sein. Mit verschwommenen oder pixelierten Bildern kommen Sie nicht durch. Speichern bei der alten? Standardauflösung? So bleibt Ihr Design flach, während hochauflösende Bilder polierter erscheinen. Der Nachteil dieser Art von Bild ist die Geschwindigkeit. Höhere Qualität bedeutet längere Ladezeiten. Speichern Sie so nah wie möglich an Ihren Spezifikationen und laden Sie Bilddateien nicht zu hoch.
Spaß Trick: Nutzen Sie den unscharfen Bildtrend zu Ihrem Vorteil, wenn Sie sich Sorgen über die Ladezeiten machen. Es sind weniger Daten zu lesen und Sie können etwas kleiner sparen und dennoch die gewünschte Schärfe von anderen kleineren hochauflösenden Elementen erhalten.
Video
Video ist der visuelle Trend des Jahres 2016. Es scheint, dass überall, wo Sie sich wenden, auf den Homepages der Website bewegt wird. Genau wie bei Bildern muss es von hoher Qualität sein.
Für die meisten Designer und Websites bedeutet dies, dass Sie sich an ein kurzes Loop-Video halten, um Probleme beim Laden zu vermeiden. Andere entscheiden sich für längere Videos und lenken Benutzer mit einer Animation zum Laden ab. Qualitativ hochwertige Videos erfordern Aufnahme, Komprimierung und Speicherung in hoher Qualität.
Es erfordert auch viel Planung, wenn es darum geht, wie das Video im Website-Design abgespielt wird und wie es aussieht. Ein Heldenvideo im Vollbildmodus muss beispielsweise horizontal aufgenommen werden, damit es auf den Bildschirm passt. Zur Vereinfachung der Verwendung können Sie mit einfachen Video-Editoren die Frames nach Seitenverhältnis anpassen. Wählen Sie 16: 9 für ein Breitbild oder 4: 3 für ein quadratischeres Bild.
Spaß Trick: Verwenden Sie? Noch Video? für einen hohen Drama-Effekt. Hier ist die Idee: Filmen Sie etwas, das größtenteils statisch ist, mit nur ein wenig Bewegung im Hintergrund. Sie erhalten eine coole Benutzererfahrung, ohne Ihr Design zu beschweren.
Illustrationen und Hintergründe
Wenn es um Illustrationen und Hintergründe geht, ist HD auch hier wichtig. Denken Sie daran, dass jedes Detail (oder dessen Fehlen) im hochauflösenden Raum sichtbar ist. Sie sollten also sicherstellen, dass jeder Teil des Designs zur Gesamtästhetik beiträgt.
Wenn es um Illustrationen oder Hintergründe geht, sind Details wichtig. Konzentrieren Sie sich darauf, ein Design zu erstellen, das praktisch pixelgenau ist, zum Design passt und beim Skalieren nicht auseinander fällt. Am einfachsten ist es, sich auf Einfachheit zu konzentrieren.
Die Erstellung einer komplizierten Illustration oder eines strukturierten Hintergrunds ist zwar einfach, aber einfach ist wahrscheinlich die bessere Option. Wenn Sie mehr Interesse hinzufügen möchten, ziehen Sie in Betracht, ein kleines animiertes Element als Teil des Designs zu gestalten oder mit kräftigeren Farboptionen aufzuwerten, als Sie dies normalerweise tun.
Und dann noch die technische Komponente: Sie müssen ein skalierbares Bildformat verwenden, damit tatsächlich alles wie beabsichtigt skaliert werden kann und bis zu seinem vollen HD-Potenzial.
Spaß Trick: Fügen Sie dem Hintergrund in einer langen Schleife eine Animation hinzu. Besucher, die schnell surfen, werden dies vielleicht vermissen, aber die kleine Belohnung wird wiederkehrende Benutzer und diejenigen, die sich für längere Zeit aufhalten, begeistern.
Icons und Elemente
Bei allen Symbolen und Elementen der Benutzeroberfläche Ihrer Website gibt es sechs Buchstaben, die Sie kennen müssen: SVG und CSS. Alle diese Elemente werden wahrscheinlich als eine dieser beiden Arten klassifiziert.
SVG oder skalierbare Vektorgrafiken ist ein wesentlicher Vektor für das Web. Sie können SVG verwenden, um Formen, Symbole und viele andere Elemente der Benutzeroberfläche zu speichern. Bilder werden von modernen Browsern gelesen - es gibt einige ältere, die nicht funktionieren (wir sprechen mit den wenigen von Ihnen, die mit Internet Explorer arbeiten) - als Text und als HTML-Text.Scott Murray hat eine ziemlich großartige Grundierung auf seinem Blog, wenn Sie in das Nötigste von SVG einsteigen möchten.
CSS-Elemente sind reiner Code und werden mit dem Design skaliert und gestaltet. (In Photoshop müssen Sie wahrscheinlich keine Schaltflächen zeichnen und in Ihre Website einfügen.) W3Schools.com enthält ein grundlegendes Tutorial zum Erstellen und Verwenden von CSS-Elementen.
Hier ist die Sache über SVG und CSS: Die Elemente werden mit Ihrer Website verschoben. Das ist es, was Sie in einem responsiven Rahmen brauchen. Nichts wird Ihr High-Definition-Website-Design schneller töten als ein paar pixelige Schaltflächen.
Spaß Trick: Sie müssen das Rad nicht neu erfinden, um ein paar nette SVG- oder CSS-Elemente zu finden. Schauen Sie sich diese SVG-Buttons von Tympanus oder dem CSS Button Generator an.
Fazit
High Definition unterscheidet Ihre Website von allen, die dies nicht tun. Die Benutzer erwarten langsam ein HD-Erlebnis auf jedem ihrer Bildschirme, vom Fernseher über Computer bis zum Telefon. Ihre Website muss diese Erwartungen erfüllen.
Die gute Nachricht ist, dass Sie kleine Änderungen auf dem Weg dorthin vornehmen können. Achten Sie auf Ihre Bilder, Videos und andere Elemente der Benutzeroberfläche, um sicherzustellen, dass Pixel angezeigt werden und jedes Bild nahtlos und von hoher Qualität ist.