Wir alle kennen und verstehen die Bedeutung der Gestaltung von Websites auf einer responsiven Plattform, richtig? Das gilt auch für Bilder und Fotogalerien.
Es gibt nichts Schlimmeres, als zu einer schönen Website zu navigieren und Bilder zu sehen, die einfach nicht gesperrt werden. in Position oder Größe richtig. Sie glauben fast, dass der Designer etwas vergessen hat oder einen Schritt verpasst hat.
Heute werden wir uns sieben Dinge ansehen, die Sie im Entwurfsprozess tun können, um besser reagierende Fotogalerien zu erstellen. (Wir sprechen hier nicht über Code. Dies sind Designprozesse, die Ihnen und dem Entwickler dabei helfen können, ob sie identisch sind oder nicht.)
1. Betrachten Sie die Seitenverhältnisse
Die Anzeige auf dem Desktop kann sich erheblich von der eines mobilen Geräts unterscheiden. Bei den meisten Websites sind die Image-Platzierungen jedoch gleich. Ihre Aufgabe ist es sicherzustellen, dass dieselbe Nachricht in beiden Umgebungen übermittelt wird und dass das Bild bei verschiedenen Bildschirmgrößen nicht verloren geht.
Hier kommt das Nachdenken über das Seitenverhältnis - die Beziehung zwischen der horizontalen und der vertikalen Ebene des Bildes - zum Tragen.
Zurück zu dieser Desktop-Website könnte ein kühles, superdünnes, horizontales Foto ganz oben in Ihrem Website-Design erstaunlich aussehen. Aber was passiert mit dem Bild auf dem kleineren Bildschirm in einer quadratischeren Umgebung? Schrumpft das Foto auf eine Größe, die schwer zu erkennen ist? Oder verschwindet die Hälfte des Fotos?
Hier kommt das Seitenverhältnis zum Tragen. Durch Auswählen einer horizontal-vertikalen Beziehung für ähnliche Fotogrößen geht beim Wechseln von Geräten weniger Bildinhalt verloren. Dies erleichtert Ihnen auch die Arbeit mit Image-Platzierungen und Sie müssen sich nicht mehr so viele Gedanken darüber machen, ob Sie mehrere Größen für verschiedene Haltepunkte hochladen möchten.
2. Größe und Maßstab konsistent
Die Sorgfalt, die Sie beim Zuschneiden, Skalieren und Hochladen von Fotos verwenden, kann Ihren Workflow erheblich beeinträchtigen.
Wie viele von Ihnen laden gerade Fotos in das CMS ein und hoffen auf das Beste? Ja ist die falsche Antwort.
Jedes Foto sollte zugeschnitten und für die Platzierung im Website-Design angepasst werden. Dadurch wird sichergestellt, dass Fotos so aussehen, wie sie beabsichtigt sind, und Sie werden nicht mit fehlenden Köpfen in der Oberseite von Fotos oder Elementen enden, die auf einer (oder beiden) Seiten liegen.
Es dauert etwas mehr Zeit am Ende des Projekts, ist aber die Mühe wert. (Insbesondere wenn Sie mit Schiebereglern oder Galerien arbeiten.)
3. Verwenden Sie einen Slider oder eine Galerie
Wenn Sie einen Container für Bilder wie einen Schieberegler oder eine Galerie verwenden, können Sie responsive Bilder in Ihrem Website-Design besser verwalten. Insbesondere wenn Sie ein bekanntes und etabliertes Werkzeug von Drittanbietern verwenden, wird das meiste schwere Anheben für Sie durchgeführt, um sicherzustellen, dass diese Elemente wie beabsichtigt funktionieren.
Zwei der vorherigen Tipps sind auch bei der Verwendung von Schiebereglern oder Galerieelementen von entscheidender Bedeutung. Seitenverhältnisse, Größen- und Skalierungskonzepte gelten weiterhin.
Nicht sicher, welche Option verwendet werden soll? Entscheiden Sie sich für einen Schieberegler, wenn Sie eine Handvoll großartiger Bilder haben, die bei größeren Größen funktionieren. Es ist eine beliebte Option für die Spitze oder? Helden? Abschnitt einer Webseite. Entscheiden Sie sich für eine Galerie, wenn Sie viele Bilder haben, die ohne Lesbarkeitsprobleme klein dargestellt werden können. Dies funktioniert gut für Portfolios oder Websites mit vielen Bildern.
4. Bleiben Sie möglichst von Bildunterschriften fern
Bildunterschriften können ein hervorragendes Werkzeug sein, um den Informationen in einem Bild einen Mehrwert zu verleihen, können jedoch die Funktionsweise der Website erheblich beeinträchtigen. Vermeiden Sie sie, wenn Sie eine alternative Lösung haben können, die nicht in der Form traditioneller Untertitel ist.
Große Textblöcke, wie z. B. Bildunterschriften, können auf großen Bildschirmen hervorragend dargestellt werden, stellen jedoch in kleineren Umgebungen große Probleme dar. Der resultierende Effekt kann heftig sein und dazu führen, dass Benutzer Ihre Site verlassen. (Und bei so viel Datenverkehr von mobilen Geräten für die meisten Websites könnte dies katastrophal sein.)
5. Seien Sie vorsichtig beim Mischen von Videos und Bildern
Um es klar zu sagen: Es ist absolut akzeptabel, Video- und Bildelemente auf Ihrer Website zu haben. Wahrscheinlich sollten Sie etwas tun.
Mischen Sie Video und Bilder jedoch nicht in denselben Elementen des Designs, z. B. indem Sie Video- und Bildelemente im gleichen Schieberegler einfügen. Manchmal haben Sie Glück und es funktioniert wie ein Zauber. Bei anderen Geräten bleiben andere Felder leer, die einfach nur seltsam aussehen.
Die beste Option ist, jedem Elementtyp im Design einen eigenen Platz zu geben. Dies gilt für fast alle Gestaltungselemente, besonders aber für Bilder und Videos.
6. Schneiden Sie nicht benötigte Elemente
Eines der größten Probleme bei Schiebereglern und Galerien ist, dass der Designer allzu oft zu viel Müll in den Container steckt. Es gibt Navigationspfeile, Navigationsschaltflächen, Text, Handlungsaufforderungen und die Liste wird fortgesetzt.
Im Allgemeinen verstehen Benutzer, wie sie mit einem Schieberegler interagieren. Wenn Sie nichts völlig anderes tun, benötigen Sie keine zwei Navigationsebenen, die den Benutzern zeigen, was zu tun ist. Eine einzelne Reihe von Knöpfen oder Pfeilen ist reichlich (wenn Sie sie überhaupt brauchen).
Fügen Sie nur Elemente hinzu, mit denen Benutzer interagieren müssen. Wenn der Zweck einer Bildergalerie oder eines Schiebereglers darin besteht, den Benutzer dazu zu bewegen, auf einen Aufruf zu klicken, tippen Sie auf diese Option, und dies sollte die einzige Option auf dem Foto sein. Halte es einfach. Bieten Sie nicht zu viele Optionen an. Es kann tatsächlich Ihre Conversion-Raten verbessern.
7. Verwenden Sie nur qualitativ hochwertige Bilder
Es ist fast selbstverständlich, aber es passiert immer noch viel zu oft. Wenn Sie kein Sternbild haben, verwenden Sie überhaupt kein Bild. Qualitativ hochwertige und hochauflösende Bilder sind wichtiger denn je. Benutzer werden keine Zeit damit verschwenden, eine Website mit pixelierten oder schlechten Bildern zu betrachten (und sie werden Ihnen wahrscheinlich nicht trauen, wenn die Qualität unterdurchschnittlich ist).
Viele Benutzer betrachten das Design Ihrer Website mit Geräten mit hochauflösenden Bildschirmen. Sie erwarten erstklassige Visuals. Du musst liefern.
Einige Bildformate ändern sich, um diese hochauflösenden Anforderungen zu erfüllen und komprimierte Bilder zu liefern. Machen Sie sich mit den Formaten vertraut - Google Developers ist ein hervorragender Ausgangspunkt, um zu wissen, welche Bildschirmauflösungen am häufigsten verwendet werden, und gewöhnen Sie sich daran, Dateien auf eine Weise zu speichern, die den Benutzern am besten zur Verfügung gestellt werden kann.
Fazit
Wir alle möchten Websites erstellen, mit denen die Nutzer das Bedürfnis haben, mit ihnen zu interagieren. Starke Bilder sind ein Schlüsselbestandteil dieser Gleichung. Ebenso wichtig ist, dass sie unabhängig vom Gerät gut gerendert werden.
Planen Sie Bildbereiche, die für verschiedene Gerätegrößen geeignet sind, wenn Sie sich in der Wireframing-Phase eines Website-Designprojekts befinden. Möglicherweise gibt es einiges Geben und Nehmen, insbesondere in Bezug auf die Bildform, aber auf lange Sicht können Sie diese Entscheidungen frühzeitig treffen und diese Konsistenz erzeugen, was langfristig Ihrem Site-Design zugute kommt.