Essentiële ontwerptrends, mei 2017
Het maken van een goede eerste indruk is een essentieel onderdeel van het ontwerpen van websites. De startpagina is vaak de eerste ervaring die een gebruiker heeft met een bedrijf of organisatie en een opvallend ontwerp kan helpen bij het creëren van interesse. De trends van deze maand zijn allemaal gericht op ontwerpelementen voor startpagina's die net iets anders zijn dan wat gebruikers gewoon zijn te zien.
Van een puur esthetische trend in ondiepe hero headers en diagonale hoeklay-outs tot een trend in gebruikersinteractie in deze of die oproepen tot actie, er zijn tal van interessante manieren om de aandacht van gebruikers te trekken.
Dit is de trend in het ontwerp van deze maand:
1. Shallow Hero Headers
De trend met hero-afbeeldingen bestond al een tijdje uit grote, gewaagde afbeeldingen en video's die het scherm vullen, vaak van de bovenkant van de startpagina tot rechts waar de schuif begint. Meer ontwerpen beginnen zich terug te trekken van deze overmaatse beeldtrend voor minder heldenbeelden.
Veel van het ontwerp is nog steeds hetzelfde. Hero headers bevatten nog steeds mooie afbeeldingen of tekst met een configuratie die is gemaakt om te worden bekeken. Maar de beelden zijn ongeveer half zo diep.
Het leuke aan dit concept is dat het helpt andere informatie op het scherm te verplaatsen. Tekstkopie en calls-to-action die niet in de afbeelding van de held staan, verschijnen hoger in het ontwerp, waardoor gebruikers iets te doen hebben of meteen kunnen klikken. Het kan helpen om rommel in de afbeelding zelf te voorkomen, wat erg belangrijk kan zijn als de afbeelding bezet is of moeilijk te combineren met tekst.
Dit ontwerppatroon kan ook meer witruimte toevoegen aan het algehele ontwerp, waardoor het lichter aanvoelt en gemakkelijker te navigeren is. Met meer minimale stijlen nog steeds populair, kan dit concept een van de factoren zijn die aan deze ontwerpbeslissing ten grondslag liggen.
Het moeilijkste deel van het gebruik van een ondieper hero-afbeelding is bijsnijden. Het is een van die dingen waar je al in het ontwerpproces over wilt nadenken, helemaal terug naar wanneer je met de fotograaf over beelden praat. Omdat de vorm niet standaard is, moet u misschien uitleggen hoe u de afbeelding wilt gebruiken om een foto of video te krijgen die er goed uitziet met die beeldverhouding.
2. Diagonale hoeklay-outs
Sommige trends zijn gewoon te leuk om te negeren. Diagonale hoeklay-outs zijn een van die concepten.
Deze ontwerpen worden geïllustreerd door elementen die in een hoek van het scherm worden geclusterd - vaak rechtsonder - en uitwaaieren op de rest van het canvas. Elementen zijn vaak zo gepositioneerd dat ze eruitzien alsof ze in het ontwerp springen.
Diagonale hoeklay-outs bieden een ander oogvolgpatroon voor gebruikers door een focuspunt te maken in de benedenhoek van een ontwerp in plaats van de linkerbovenhoek of het midden en enige diepte te creëren met het idee van elementen die over het scherm lijken te 'exploderen'. (Voor een extra kick op het ontwerp, overweeg dan om elementen te animeren om dat explosie-effect met beweging te verbeteren wanneer de gebruiker scrollt of zweeft over specifieke elementen.)
Om het meeste uit deze elementen te halen, "verbergen" veel ontwerpen meer elementen onder de schuif om dat extra element van de werkelijkheid toe te voegen, zodat delen van het ontwerp die je niet ziet voelbaar aanvoelen en op de scroll voorkomen.
Hoewel dit type ontwerppatroon niet werkt met elk type inhoud, kan het een goed idee zijn voor ontwerpen die niet veel andere kunst hebben en veel elementen van de gebruikersinterface gebruiken om de aandacht te trekken. Het kan ook werken voor ontwerpen in portefeuillestijl of dienen als een manier om veel kleinere visuele elementen in een enkele eenheid te ordenen.
3. Deze of Die oproepen tot actie
Bijna elk website-ontwerp bevat een soort van call-to-action. Of het een formulier is om in te vullen, een link naar klik of richting om te blijven scrollen naar meer inhoud, de gebruiker wordt gevraagd iets te doen. (En zij ontvangen vaak iets anders als een beloning voor die inspanning.)
Meer ontwerpen beginnen te verschijnen met een mirroring-oproep voor acties, waarmee gebruikers een keuze kunnen maken vanaf de startpagina wanneer ze beslissen wat ze vervolgens moeten doen. Het ontwerp ziet er op een aantal manieren uit, zoals het directe woord waar je vals speelt of waar je geen vragen over hebt Woorden doen pijn naar de optie met twee panelen uit Stoli naar de klikoptie-navigatie voor de Hallo Pointe Drive In .
Deze ontwerpstijl geeft gebruikers controle over wat ze willen doen en zien, wat aantrekkelijk kan zijn met de juiste mix van inhoud en keuzes. Alle drie onderstaande voorbeelden doen goed werk om te bepalen wat de gebruiker kan doen en wat er zal gebeuren. (Er zijn ook outs als de gebruiker een verkeerde keuze maakt en moet teruggaan.)
De uitdaging hier is dat je precies de juiste inhoud nodig hebt om dit ontwerppatroon te laten werken. Sommige gebruikers kunnen overweldigd raken door meerdere keuzes en willen slechts één call-to-action met één keuze: vul de actie in of niet. Hier hebben gebruikers twee keer zoveel opties om te overwegen. Om de keuzes optimaal te benutten, moet de inhoud volledig boeiend zijn.
Conclusie
In tegenstelling tot sommige van de andere trends die we onlangs hebben verkend, zijn de trends van deze maand pure visuele elementen die je tijdens de vlucht kunt toevoegen aan een bestaand ontwerp. (Hoewel je misschien in de buurt komt als je geluk hebt.)
Deze ontwerpschema's zijn iets meer afhankelijk van het afstemmen van inhoud en ontwerp, wetende dat u een bepaald concept voor ogen hebt. Het duurt van tevoren en vereist in sommige gevallen zelfs een beetje HTML- of CSS-magie om alles samen te voegen.
Van welke trends hou je nu (of haat)? Ik zou graag enkele van de websites willen zien waar je gefascineerd mee bent. Stuur me een link op Twitter ; Ik hoor graag van je.