7 Tipps für besser ansprechende Fotogalerien
Wir alle wissen und verstehen, wie wichtig es ist, Websites auf einer reaktionsschnellen Plattform zu gestalten, oder? 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 richtig einrasten oder groß sind. Man denkt fast, der Designer hätte etwas vergessen oder einen Schritt verpasst.
Heute werden wir uns sieben Dinge ansehen, die Sie im Designprozess tun können, um reaktionsschnellere Fotogalerien zu erstellen. (Wir sprechen hier nicht von Code. Dies sind Entwurfsprozesse, die Ihnen und dem Entwickler helfen können, unabhängig davon, ob sie ein und dasselbe sind oder nicht.)
Entdecken Sie Envato-Elemente
1. Betrachten Sie Seitenverhältnisse
Das Desktop-Anzeigeerlebnis kann sich erheblich von dem auf einem mobilen Gerät unterscheiden. Bei den meisten Websites sind die Bildplatzierungen jedoch gleich. Ihre Aufgabe ist es, sicherzustellen, dass in beiden Umgebungen dieselbe Nachricht übermittelt wird und dass das Bild nicht auf verschiedenen Bildschirmgrößen verloren geht.
Hier kommt das Nachdenken über das Seitenverhältnis - die Beziehung zwischen der horizontalen und der vertikalen Ebene des Bildes - ins Spiel.
Zurück zu dieser Desktop-Website kann ein cooles, superdünnes, horizontales Foto oben auf Ihrem Website-Design fantastisch aussehen. Aber was passiert mit diesem 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 ins Spiel. Durch Auswahl einer horizontal-vertikalen Beziehung für ähnliche Fotogrößen geht beim Wechseln der Geräte weniger Bildinhalt verloren. Dies erleichtert Ihnen auch die Arbeit mit Bildplatzierungen und Sie müssen sich nicht so viele Gedanken über das Hochladen mehrerer Größen für verschiedene Haltepunkte machen.
2. Größe und Skalierung konsistent
Die Sorgfalt beim Zuschneiden, Ändern der Größe und Hochladen von Fotos kann sich erheblich auf Ihren Workflow auswirken.
Wie viele von Ihnen laden gerade Fotos in das CMS hoch und hoffen auf das Beste? Ja ist die falsche Antwort.
Jedes Foto sollte für die Platzierung im Website-Design zugeschnitten und in der Größe angepasst werden. Dies stellt sicher, dass Fotos so aussehen, wie sie beabsichtigt sind, und dass Sie keine fehlenden Köpfe oben auf Fotos oder Elementen haben, die von einer (oder beiden) Seiten weggelassen werden.
Am hinteren Ende des Projekts dauert es etwas länger, aber die Mühe lohnt sich. (Besonders wenn Sie mit Schiebereglern oder Galerien arbeiten.)
3. Verwenden Sie einen Schieberegler oder eine Galerie
Durch die Verwendung eines Containers für Bilder wie einen Schieberegler oder eine Galerie können Sie reaktionsschnelle Bilder in Ihrem Website-Design besser verwalten. Insbesondere wenn Sie ein bekanntes und etabliertes Werkzeug von Drittanbietern verwenden, wird der größte Teil des schweren Hebens für Sie ausgeführt, um sicherzustellen, dass diese Elemente wie beabsichtigt funktionieren.
Zwei der vorherigen Tipps bleiben auch bei Verwendung von Schiebereglern oder Galerieelementen von entscheidender Bedeutung. Es gelten weiterhin Seitenverhältnisse sowie Größen- und Skalierungskonzepte.
Sie sind sich nicht sicher, welche Option Sie verwenden sollen? Entscheiden Sie sich für einen Schieberegler, wenn Sie eine Handvoll großartiger Bilder haben, die bei größeren Größen funktionieren. Dies ist eine beliebte Option für den oberen oder "Helden" -Bereich einer Webseite. Entscheiden Sie sich für eine Galerie, wenn Sie viele Bilder haben, die ohne Lesbarkeitsprobleme klein gerendert werden können. Dies funktioniert gut für Portfolios oder Websites mit vielen Bildern, die präsentiert werden sollen.
4. Halten Sie sich nach Möglichkeit von Bildunterschriften fern
Bildunterschriften können ein großartiges 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 finden können, die nicht in Form einer herkömmlichen Beschriftung vorliegt.
Große Textblöcke, wie z. B. Beschriftungen, können auf großen Bildschirmen wunderbar gerendert werden, stellen jedoch in kleineren Umgebungen große Probleme dar. Der daraus resultierende Effekt kann erschütternd sein und möglicherweise dazu führen, dass Benutzer Ihre Website verlassen. (Und da für die meisten Websites so viel Datenverkehr vom Handy kommt, könnte dies katastrophal sein.)
5. Seien Sie vorsichtig beim Mischen von Videos und Bildern
Lassen Sie uns klar sein: Es ist durchaus akzeptabel, Video- und Bildelemente auf Ihrer Website zu haben. Es ist wahrscheinlich etwas, was Sie tun sollten.
Mischen Sie jedoch nicht Video und Bilder in denselben Elementen des Designs, z. B. Video- und Bildelemente in demselben Schieberegler. Manchmal hat man Glück und es funktioniert wie ein Zauber. In anderen Fällen werden auf bestimmten Geräten leere Kästchen angezeigt, die nur seltsam aussehen.
Die beste Option ist, jedem Elementtyp einen eigenen Raum im Design zu geben. Dies gilt für so ziemlich jedes Designelement, insbesondere aber für Bilder und Videos.
6. Schneiden Sie unnötige Elemente
Eines der größten Probleme bei Schiebereglern und Galerien ist, dass der Designer zu oft zu viel Müll in den Container schüttet. Es gibt Navigationspfeile, Navigationsschaltflächen, Text, Handlungsaufforderungen und die Liste geht weiter.
Im Allgemeinen verstehen Benutzer, wie sie mit einem Schieberegler interagieren. Wenn Sie nichts völlig abseits der Wand tun, benötigen Sie keine zwei Navigationsebenen, die den Benutzern zeigen, was zu tun ist. Eine einzelne Reihe von Knöpfen oder Pfeilen ist ausreichend (wenn Sie sie überhaupt benötigen).
Schließen Sie nur Elemente ein, mit denen Benutzer interagieren müssen. Wenn der Zweck einer Bildergalerie oder eines Schiebereglers darin besteht, den Benutzer zum Klicken / Tippen auf einen Aufruf zum Handeln zu bewegen, sollte dies die einzige Option auf dem Foto sein. Halte es einfach. Geben Sie nicht zu viele Optionen an. Es kann tatsächlich Ihren Conversion-Raten helfen.
7. Verwenden Sie nur qualitativ hochwertige Bilder
Es ist fast selbstverständlich, aber es kommt immer noch viel zu oft vor. Wenn Sie kein Sternbild haben, verwenden Sie überhaupt kein Bild. Hochwertige Bilder mit hoher Auflösung sind wichtiger denn je. Benutzer werden keine Zeit damit verschwenden, eine Website mit pixeligen oder schlechten Bildern zu betrachten (und sie werden Ihnen wahrscheinlich nicht vertrauen, wenn die Qualität unterdurchschnittlich ist).
Eine große Anzahl von Benutzern betrachtet das Design Ihrer Website mithilfe von Geräten mit hochauflösenden Bildschirmen. Sie erwarten erstklassige Grafik. Sie müssen liefern.
Einige Bildformate ändern sich, um diesen hochauflösenden Anforderungen gerecht zu werden und gleichzeitig mehr komprimierte Bilder zu liefern. Versen Sie sich in Formaten - Google Developers ist ein guter Ausgangspunkt - wissen Sie, welche Bildschirmauflösungen am häufigsten verwendet werden, und gewöhnen Sie sich an, Dateien so zu speichern, dass sie den Nutzern am besten zur Verfügung gestellt werden können.
Fazit
Wir alle möchten Websites erstellen, mit denen Benutzer interagieren müssen. Starke Bilder sind ein wesentlicher Bestandteil dieser Gleichung. Ebenso wichtig ist es, dass sie unabhängig vom Gerät gut gerendert werden.
Planen Sie Bildbereiche ein, die auf einer Vielzahl von Gerätegrößen funktionieren, wenn Sie sich in der Wireframing-Phase eines Website-Design-Projekts befinden. Sie werden vielleicht feststellen, dass es ein Geben und Nehmen gibt, insbesondere in Bezug auf die Bildform, aber auf lange Sicht wird es Ihrem Website-Design auf lange Sicht zugute kommen, wenn Sie diese Entscheidungen frühzeitig treffen und diese Konsistenz schaffen.
