Creëer het perfecte heldenbeeld met behulp van Contrast
Wil je een goede eerste indruk maken? Het begint met de header van uw website. De afbeelding die een gebruiker ziet, laat een goede of slechte indruk achter en bepaalt of die gebruiker klikt en doorgaat of de site helemaal verlaat.
Dat is een grote bestelling voor een enkele afbeelding.
Het belangrijkste element voor het maken van een hero-afbeelding die gebruikers naar zich toetrekt en deze in het ontwerp laat bewegen, is contrast. (Serieus! Het gaat allemaal terug op ontwerptheorie 101.) Een hoofd met contrasterende elementen in grootte, kleur en schaal biedt de juiste mix van visuele interesse en vertelt gebruikers hoe ze moeten reageren op het ontwerp. Hier zijn een paar manieren om het contrast op het pad naar het maken van een perfecte hero-afbeelding te maximaliseren.
Snijd strategisch
De heldafbeelding hoeft niet het "eerste" scherm op apparaten te vullen. Raak niet gevangen in die val.
Snijd de afbeelding bij voor impact op basis van de inhoud. Overweeg de andere elementen die belangrijk zijn voor gebruikers wanneer ze op de pagina terechtkomen en maak daar ook accommodaties voor. Afhankelijk van dit raamwerk kan dat betekenen dat de afbeelding van de held wordt geschaald om groter of kleiner te zijn dan het browservenster (laten we alleen meer standaardresoluties overwegen omwille van het argument).
Voordat je het idee schendt, moet je er even over nadenken.
- Een ondiepe afbeelding helpt bij het bekijken van andere inhoud.
- Een ongewoon diepe afbeelding zal gebruikers aanmoedigen om naar meer te scrollen.
- Elke ongebruikelijke vorm zal de aandacht trekken.
Overweeg Animatie
Je hoeft geen volledige filmervaring te creëren om bewegende beelden toe te voegen aan de heldenkop. De kleinste bewegingen maken precies genoeg contrast om het oog te vangen.
Subtiele bewegingen, zoals het vliegtuig dat over het beeld vliegt voor Bar Z Winery, zorgen voor dat contrast zonder overweldigend te zijn. Het is een eenvoudig alternatief voor enkele van de meer opzichtige videokoppen die populair zijn geworden. Het contrastelement is tweeledig: het ontwerp is anders dan dat van de anderen waaraan gebruikers worden blootgesteld en de subtiele beweging is heerlijk en nogal onverwacht.
Aan de andere kant kun je all-in gaan met animatie of video voor een hero-afbeelding. Beweging kan bijzonder boeiend zijn en is een populaire optie. Gebruik het op dezelfde manier als een stilstaand beeld als het gaat om het toevoegen van effecten zoals typografie en calls-to-action.
Denk aan vette typografie
Typografie in de heldafbeelding zou de gebruiker moeten verbazen. Het moet vet, indrukwekkend en gedenkwaardig zijn.
U kunt dit maken met zowel letterbeeldselectie als de woorden op het scherm. (Geen Arial-headers die hier 'Hallo' zeggen.)
De combinatie van belettering en berichten moet een directe impact hebben en aantrekkelijk zijn voor de gebruiker. Je hebt gehoord dat mensen kortere aandachtsspanne hebben dan goudvissen; het is jouw taak om ze te vangen met prachtige letters en taal.
Als het gaat om vetgedrukte letters, zijn de belangrijkste elementen van contrast kleur en grootte.
- Het type moet een kleur zijn die opvalt ten opzichte van de achtergrond. Licht op donker of donker op licht zijn de beste opties als het gaat om leesbaarheid.
- Vet is een uitweiding van de norm. Overweeg overmatige of ondermaatse typografie op de hero-header voor impact.
- Kies woorden met betekenis. Tenzij het de sleutel tot uw bericht is, hebt u geen alinea in de kop nodig. Kies een paar sleutelwoorden die gebruikers aansporen om meer te leren. (Het aantal woorden is van invloed op hoe groot of klein letters kunnen zijn.)
Kies Kleur voorzichtig
Een hero-afbeelding is misschien helemaal geen afbeelding. Het kan een kleurenblok of een koele textuur zijn.
Kies zorgvuldig een kleur die de exacte betekenis weergeeft die u van plan bent. Een kopbal met een gedurfde kleurenheld kan indruk maken op gebruikers, maar de verkeerde kleur kan een uitschakeling zijn.
Heldere, trendy opties zijn een goed alternatief. Het leuke van deze optie is dat je het van tijd tot tijd kunt mixen door de achtergrondkleur te veranderen. Een grote kleurenachtergrond kan ook helpen de merkidentiteit te versterken, vooral als deze een sterke kleurassociatie heeft, en leent zich voor leesbaarheid vanwege de eenvoudige aard van het ontwerp.
Kleur is ook een belangrijke overweging bij gebruik met een andere afbeelding of video. Van gekleurde typografie tot gekleurde gebruikersinterface-elementen, het is belangrijk om ervoor te zorgen dat de kleurkeuzes in de afbeelding overeenkomen met de rest van het ontwerp. Veel hiervan gaat terug op de kleurentheorie en een goed begrip van het kleurenwiel, zodat de beeld- en kleurkeuzes in het ontwerp samenwerken.
Maar wat als de heldenafbeelding en merkkleuren niet in elkaar passen? Denk creatief na over hoe u de onderdelen in de afbeelding van de held samen gebruikt. Probeer een kleuroverlay op de foto; overweeg zwart en wit voor de afbeelding of tekst. Verplaats hooggekleurde elementen naar een navigatiebalk die wit of zwart is om ze van de werkelijke afbeelding af te houden. Wanneer de afbeelding en de verplichte kleuren niet goed spelen, is de beste optie om de kleur te verwijderen of te scheiden.
Denk aan lichte en donkere ruimtes
Het berekenen van donkere en lichte spaties in een afbeelding kan de moeilijkste taak zijn bij het toevoegen van elementen om contrast te creëren in een hero-afbeelding. Vooral bij responsieve indelingen en onderbrekingspunten kan de plaatsing van tekst of knoppen op een afbeelding veranderen en kunt u niet altijd een geweldige locatie vinden.
Wat moet een ontwerper doen?
- Kies een andere afbeelding;
- kies voor een ander type gezin, maat of kleur;
- voeg een kleuroverlay toe;
- het beste ervan maken.
Elk van bovenstaande is een haalbare optie. De beste optie kan per project verschillen.
The Society Inc. De oplossing in de schuifregelaar voor heldafbeeldingen - met veel variantie tussen lichte en donkere ruimten - moest een logo-overlay bevatten met witte tekst in een zwarte vorm. Het doet niets af aan de afbeeldingen en is veel minder opdringerig dan je zou denken als je het idee hoort. Het logo in het centrum helpt ook bij het vaststellen van het merk en de visuele identiteit.
Voeg een duidelijke oproep tot actie toe
Vergeet de CTA niet!
Wat wilt u dat gebruikers doen nadat ze naar uw coole heldafbeelding hebben gekeken? Vertel het ze.
De call-to-action moet duidelijk zijn, of het nu gaat om het invullen van een formulier, scrollen naar meer inhoud of klikken op een link naar een andere pagina. Het moet voldoende definitie en contrast bevatten, zodat het gemakkelijk te zien is tegen de achtergrond van de afbeelding. (Wat is het nut van een CTA als niemand het ziet?)
Kleur en maat zijn hier van bijzonder belang. De kleur van de knop (een algemene CTA-cue) moet afwijken van de rest van de afbeelding. De woorden die gebruikers vertellen wat ze moeten doen, moeten uitzonderlijk leesbaar, eenvoudig en duidelijk zijn.
Conclusie
Contrast is een van de belangrijkste technieken voor een goed ontwerp. Het creëert scheiding tussen elementen en helpt gebruikers de gewenste actie te ondernemen.
Pas goed op genoeg contrast te creëren bij het ontwerpen van een hero-afbeelding, zodat gebruikers precies weten welke acties moeten worden ondernomen op de pagina. Kijk naar uw statistieken en als die conversies niet plaatsvinden, heroverweeg dan de hoeveelheid contrast in het ontwerp. Het is misschien tijd om het nog meer op te schroeven.