7 tips voor beter reagerende fotogalerijen
We kennen en begrijpen allemaal het belang van het ontwerpen van websites op een responsief platform, toch? Dat geldt ook voor afbeeldingen en fotogalerijen.
Er is niets erger dan naar een prachtige website te navigeren en afbeeldingen te zien die gewoon niet goed op hun plaats of grootte worden vergrendeld. Het laat je bijna denken dat de ontwerper iets is vergeten of een stap heeft gemist.
Vandaag gaan we kijken naar zeven dingen die u kunt doen in het ontwerpproces om beter reagerende fotogalerijen te maken. (We hebben het hier niet over code, dit zijn ontwerpprocessen die u en de ontwikkelaar kunnen helpen, of ze nu hetzelfde zijn of niet.)
Verken Envato Elements
1. Overweeg aspectverhouding
De desktop-kijkervaring kan behoorlijk verschillen van die op een mobiel apparaat. Maar voor de meeste websites zijn de afbeeldingsplaatsingen hetzelfde. Het is jouw taak ervoor te zorgen dat hetzelfde bericht in beide omgevingen wordt gecommuniceerd en dat de afbeelding niet verloren gaat op verschillende schermformaten.
Dat is waar het nadenken over de aspectverhouding - de relatie tussen de horizontale en verticale vlakken van het beeld - binnenkomt.
Terug naar die desktopwebsite, een coole superdunne horizontale foto ziet er misschien geweldig uit aan de bovenkant van uw websiteontwerp. Maar wat gebeurt er met dat beeld op het kleinere scherm in een meer vierkante omgeving? Verkleint de foto tot een formaat dat moeilijk te zien is? Of verdwijnt de helft van de foto?
Dat is waar de aspectverhouding binnenkomt. Door een horizontaal-verticale relatie te kiezen voor vergelijkbare fotoformaten, gaat er minder beeldinhoud verloren bij het wisselen van apparaat. Het maakt het ook gemakkelijker voor u om met beeldplaatsingen te werken en u hoeft zich minder zorgen te maken over het uploaden van meerdere formaten voor verschillende breekpunten.
2. Consistent formaat en schaal
De zorg die u besteedt aan het bijsnijden, vergroten of verkleinen en uploaden van foto's kan uw workflow behoorlijk dramatisch beïnvloeden.
Hoevelen van jullie uploaden gewoon foto's naar het CMS en hopen het beste? Ja is het verkeerde antwoord.
Elke foto moet worden bijgesneden en op maat worden gemaakt voor plaatsing in het websiteontwerp. Dit zorgt ervoor dat foto's er uitzien zoals ze bedoeld zijn en dat je niet zult eindigen met ontbrekende hoofden in de bovenkant van foto's of dat elementen aan één (of beide) zijden worden weggelaten.
Aan de achterkant van het project kost het wat meer tijd, maar het is de moeite waard. (Vooral als u met schuifregelaars of galerijen werkt.)
3. Gebruik een schuifregelaar of galerij
Door een container voor afbeeldingen zoals een schuifregelaar of galerij te gebruiken, kunt u responsieve afbeeldingen in uw website-ontwerp beter beheren. Vooral als u een bekende en gevestigde tool van derden gebruikt, wordt het meeste zware werk voor u gedaan om ervoor te zorgen dat deze elementen werken zoals bedoeld.
Twee van de vorige tips blijven van vitaal belang, zelfs bij gebruik van schuif- of galerij-elementen; beeldverhoudingen en maat- en schaalconcepten zijn nog steeds van toepassing.
Weet u niet zeker welke optie u moet gebruiken? Kies voor een schuifregelaar als je een handvol geweldige afbeeldingen hebt die op grotere formaten werken. Het is een populaire optie voor het bovenste of 'heldengedeelte' van een webpagina. Kies voor een galerij als je genoeg afbeeldingen hebt die klein kunnen worden weergegeven zonder leesbaarheidsproblemen. Dit werkt goed voor portfolio's of websites met veel afbeeldingen om te laten zien.
4. Blijf indien mogelijk uit de buurt van onderschriften
Bijschriften kunnen een geweldig hulpmiddel zijn om waarde toe te voegen aan de informatie in een afbeelding, maar kunnen de werking van de website echt in de weg staan. Vermijd ze als je kunt of komt met een alternatieve oplossing die niet de vorm heeft van een traditioneel bijschrift.
Grote tekstblokken, zoals bijschriften, kunnen prachtig worden weergegeven op grote schermen, maar leveren grote problemen op in kleinere omgevingen. Het resulterende effect kan schokkend zijn en ertoe leiden dat gebruikers uw site verlaten. (En met zoveel verkeer afkomstig van mobiel voor de meeste websites, kan dat rampzalig zijn.)
5. Wees voorzichtig bij het mixen van video en afbeeldingen
Laten we duidelijk zijn: het is volkomen acceptabel om video- en afbeeldingselementen op uw website te hebben. Het is waarschijnlijk iets dat je moet doen.
Maar meng video en afbeeldingen niet in dezelfde elementen van het ontwerp, zoals video- en afbeeldingselementen in dezelfde schuifregelaar plaatsen. Soms heb je geluk en werkt het als een charme. Andere keren krijg je lege vakken op bepaalde apparaten die er gewoon raar uitzien.
De beste optie is om elk verschillend type element een eigen ruimte te geven in het ontwerp. Dit geldt voor vrijwel elk ontwerpelement, maar vooral voor afbeeldingen en video.
6. Knip onnodige elementen
Een van de grootste problemen met schuifregelaars en galerijen is dat de ontwerper te vaak teveel rommel in de container doet. Er zijn navigatiepijlen, navigatieknoppen, tekst, oproepen tot actie en de lijst gaat maar door.
Over het algemeen begrijpen gebruikers hoe ze met een schuifregelaar moeten omgaan. Tenzij u iets totaal anders doet, heeft u geen twee lagen navigatie nodig die gebruikers laten zien wat ze moeten doen. Een enkele rij knoppen of pijlen is voldoende (als je ze al nodig hebt).
Neem alleen elementen op waarmee gebruikers interactie moeten hebben. Als het doel van een fotogalerij of schuifregelaar is om de gebruiker te laten klikken / tikken op een call-to-action, zou dat de enige optie op de foto moeten zijn. Hou het simpel. Geef niet te veel opties op. Het kan uw conversiepercentages helpen.
7. Gebruik alleen afbeeldingen van hoge kwaliteit
Het spreekt bijna vanzelf, maar het gebeurt nog steeds veel te vaak. Als je geen stellaire afbeelding hebt, gebruik dan helemaal geen afbeelding. Hoogwaardige afbeeldingen met een hoge resolutie zijn belangrijker dan ooit. Gebruikers zullen geen tijd verspillen aan het kijken naar een website met korrelige of slechte afbeeldingen (en ze zullen je waarschijnlijk niet vertrouwen als de kwaliteit onvoldoende is).
Een groot aantal gebruikers bekijkt het ontwerp van uw website met apparaten met schermen met een hoge resolutie; ze verwachten eersteklas visuals. Je moet leveren.
Sommige afbeeldingsindelingen veranderen om aan deze hoge resolutiebehoeften te voldoen terwijl ze meer gecomprimeerde afbeeldingen opleveren. Verras jezelf in formaten - Google Developers is een geweldige plek om te beginnen - weet welke schermresoluties het meest worden gebruikt en maak er een gewoonte van om bestanden op te slaan op een manier die het beste aan gebruikers kan worden geleverd.
Gevolgtrekking
We willen allemaal websites maken waar gebruikers behoefte aan hebben om mee te communiceren. Sterke afbeeldingen vormen een belangrijk onderdeel van die vergelijking. Even belangrijk is dat ze goed worden weergegeven, ongeacht het apparaat.
Plan afbeeldingenruimten die op verschillende apparaatgroottes werken wanneer u zich in de wireframing-fasen van een websiteontwerpproject bevindt. U zult misschien merken dat er wat wordt gegeven en genomen, met name wat betreft de vorm van de afbeelding, maar op de lange termijn zal het nemen van die beslissingen vroegtijdig en het creëren van die consistentie op de lange termijn uw site-ontwerp ten goede komen.
