3 Essential Design Trends, december 2017
Alle drie de belangrijkste designtrends van deze maand hebben te maken met typografie. En de trends laten een aantal mooie manieren zien om een mooi type te gebruiken om gebruikersbetrokkenheid te creëren en een geweldige eerste indruk te maken.
Een gemeenschappelijk thema bij deze ontwerpen is dat alle typografiestijlen zeer leesbaar zijn. Als u van plan bent om met een meer trendy of funky tekstelement te werken, kiest u een lettertype dat gebruikers niet moeilijk kunnen lezen. De trendy techniek is de truc met deze ontwerpen, niet het lettertype zelf.
Dit is de trend in het ontwerp van deze maand:
1. Typ gewoon boven de schuif
Hoewel een geweldige afbeelding gebruikers kan helpen een ontwerp te maken, zijn soms de juiste woorden en ruimte het ticket.
De sleutel om deze designtrend maximaal te benutten, is om je boodschap te verfijnen. De woorden moeten eenvoudig zijn, iets zinvols zeggen en waarde creëren voor de gebruiker.
Dus hoe doe je het?
- Begin met een sleutelzin. Het kan uw missie zijn of een waardevoorstel voor gebruikers. Vertel gebruikers wat u naar de tafel brengt en waarom uw website belangrijk voor hen zal zijn.
- Kies een eenvoudig lettertype met dezelfde sfeer als het bericht voor langere kopieerblokken.
- Als het tekstblok kort is, zoals met Typen soorten , overweeg een funkier type optie om gebruikers te tekenen.
- Profiteer optimaal van de ruimte. Houd er rekening mee dat tekst in elk van de onderstaande voorbeelden voldoende ruimte heeft om te ademen, waardoor het in één oogopslag gemakkelijker te lezen is. Ruimte kan ook helpen om de aandacht op tekst te vestigen en tekstelementen in balans te brengen als u ze niet op het scherm wilt centreren, zoals Design Ups .
- Gebruik kleur om visuele interesse toe te voegen. Heldere, trendy tinten kunnen gebruikers helpen bij het ontwerp. Kleur kan ook helpen om een stemming in te stellen die overeenkomt met berichten.
Bij het werken met een type zwaar ontwerp, forceer het niet. Soms heb je niet genoeg tekst om een volledig "scherm" te vullen. Minder + More en Type Type gebruiken kleurblokkering om meerdere panelen te maken die perfect zijn afgestemd op de tekstinhoud daarin.
2. Tekst in witte vakken
Met zoveel opvallende visuele elementen in ontwerpprojecten voor websites - en zo veel responsieve breekpunten om om te gaan met witte vakken komen opnieuw naar voren als een containerelement voor tekst. Witte kaders met donkere tekst aan de binnenzijde zorgen voor leesbaarheid als het gaat om berichten op foto's, video's of illustraties met kleurenafwijkingen.
En hoewel deze trend misschien een beetje klinkt, nou ... slordig of lui, ziet het er echt geweldig uit als het goed is gedaan.
Je kunt niet zomaar ergens een doos op een afbeelding slaan en hopen op het beste. Witte vakken moeten strategisch worden geplaatst zodat ze geen belangrijke delen van de afbeelding bedekken en zodat gebruikers er tijdens het bekijken van het ontwerp naartoe gaan.
Witte vakken moeten groot genoeg zijn om een redelijke hoeveelheid tekst te bevatten en je zou op kleinere schermen een plan voor dit element moeten hebben, zoals het toestaan dat alles in het tekstvak onder de hoofdafbeelding valt. Probeer op kleine schermen niet een tekstvak boven een afbeelding te plaatsen, omdat u een tekstvak krijgt dat te klein is om te lezen of het vak het grootste gedeelte van de afbeelding zelf zal bedekken.
Als je kiest voor de behandeling met de witte doos, veel plezier. Elk van de onderstaande voorbeelden gebruikt witte vakken op volledig verschillende manieren.
Doe ruimte snijdt een witte doos in de onderste hoek van de afbeelding zodat het grootste deel van de afbeelding zichtbaar is. De witte doos loopt over in de witte ruimte eronder zodat het bijna lijkt alsof het uit het onderstaande paneel omhoog komt. Deze techniek helpt om de hoofdschuifregelaar aan te sluiten op de onderstaande inhoud (en kan zelfs scrollen aanmoedigen).
HowIt maakt gebruik van cirkelvormige vlekken zodat de witte tekstvakken beter overeenkomen met de toon van de achtergrondillustratie. Deze subtiele vormverandering, zodat de vakken er vloeiender uitzien, helpt de elementen te verbinden, zodat de vakken en achtergrond een consistent gevoel hebben. Je wilt niet dat witte vakjes voor tekst het gevoel krijgen dat ze lukraak op de achtergrond zijn geplaatst. (Dat werkt niet en zal niet bijdragen aan het creëren van een samenhangend gevoel voor gebruikers.)
Macaulay Sinclair heeft meer tekst dan de andere voorbeelden waarbij een deel van een beeldpaneelraster wordt gebruikt om het tekstelement vast te houden. Hier heeft de afbeelding achter het witte vak geen informatiewaarde. Het heeft een kleur- en bewegingsschema dat lijkt op andere afbeeldingen en meestal dient om samenhang te creëren tussen het tekstelement en de rest van het ontwerp.
3. Typografieknipsels
Niemand heeft ooit gezegd dat de tekst een reeks solide gevulde brieven moet zijn. Meer ontwerpers kiezen voor uitsneden van typografie met een kleurblok boven een afbeelding, zodat het beeld door duidelijke belettering komt.
Deze techniek kan werken met stilstaande of bewegende beelden en met overlays op volledig scherm, zodat slechts een kleine hoeveelheid informatie door letters komt (bijna om een textuur te creëren) of met meer van een block-over-image-stijl met meer van de achtergrondafbeelding zichtbaar.
De truc om dit werk te maken is het juiste lettertype. Letters moeten voldoende dik zijn zodat de afbeelding of textuur op de achtergrond zichtbaar is. Je kunt dit niet doen met een dun of gecondenseerd lettertype met een consistent succes.
Deze techniek werkt ook het beste als het aantal woorden en letters vrij beperkt is. Blijf bij één tot drie woorden met tien of minder letters of gebruik heel veel woorden die gebruikers in één oogopslag weten.
Danbury maakt gebruik van een knipsel met heldere tekst als teken, om gebruikers aan te moedigen om deel te nemen aan de videovraag tot actie. De hele oranje doos is slechts een gigantische knop.
Fusion Winery gebruikt een achtergrondvideo van een wijngaard in de letters. Wat geweldig is aan dit ontwerp is het drielaagse effect: video-achtergrond onder witte tekstuitsnede onder een productafbeelding.
De Kaneko gebruikt een niet-identificeerbare afbeelding als opvulling voor letters. Als je voor deze stijl kiest, houd deze achtergrond dan eenvoudig zoals gedaan met dit ontwerp. Er is slechts een vleugje kleur en textuur die het oog op de tekst op het strakke doek trekt.
Conclusie
De verzameling biedt inspiratie voor projecten die mogelijk geen geweldige afbeelding of video bevatten, zodat u nog steeds een manier kunt vinden om iets te maken waarop gebruikers reageren. Wees niet bang om tekst te gebruiken als een visueel en informatie element in dit ontwerp.
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.