3 væsentlige designtendenser, december 2017
Alle tre af denne måneds væsentlige designtendenser har at gøre med typografi. Og trendene viser nogle flotte metoder til at bruge smuk type til at skabe brugerengagement og lave et godt første indtryk.
Et fælles tema blandt disse designs er, at alle typografi stilarter er meget læsbare. Hvis du planlægger at arbejde med et mere trendy eller funky tekstelement, skal du vælge et skrifttype, som brugerne ikke vil kæmpe for at læse. Den trendy teknik er tricket med disse designs, ikke selve skrifttypen.
Her er hvad der trender i design denne måned:
1. Skriv bare oven over rullen
Mens et godt billede kan hjælpe med at tegne brugere ind i et design, er de rigtige ord og rum undertiden billet.
Nøglen til at få mest muligt ud af denne design tendens er at forfine din besked. Ordene skal være enkle, sige noget meningsfuldt og skabe værdi for brugeren.
Så hvordan gør du det?
- Start med en nøgle sætning. Det kan være din mission eller en værdi proposition for brugere. Fortæl brugere, hvad du bringer til bordet, og hvorfor dit websted vil være vigtigt for dem.
- Vælg et simpelt skrifttype, der har det samme humør som meddelelsen til længere kopieringsblokke.
- Hvis tekstblokken er kort, f.eks. Med Typer af Type , overvej en funkier type mulighed for at tegne brugere i.
- Få det bedste ud af rummet. Bemærk, at teksten i hvert af nedenstående eksempler har masser af plads til at trække vejret, hvilket gør det nemmere at læse et øjeblik. Rummet kan også hjælpe med at gøre øjnene for tekst og kan balancere tekstelementer, hvis du ikke vil centrere dem på skærmen, f.eks Design Ups .
- Brug farve for at hjælpe med at tilføre visuel interesse. Lyse, trendy nuancer kan hjælpe med at trække brugere ind i designet. Farve kan også hjælpe med at indstille et humør, der korrelerer med messaging.
Når du arbejder med et type-tungt design, må du ikke tvinge det. Nogle gange har du ikke nok tekst til at fylde en fuld "skærm". Mindre + mere og Type Type bruger farveblokerende til at oprette flere paneler, der er perfekt tilpasset tekstindholdet deri.
2. Tekst i hvide bokse
Med så mange dristige visuelle elementer i website design projekter - og så mange responsive breakpoints at håndtere hvide bokse genvinder sig som et beholderelement til tekst. Hvide kasser med mørk tekst inde kan sikre læsbarhed, når det kommer til messaging oven på billeder, video eller illustration, hvor der er farvevariation.
Og mens denne trend måske lyder lidt, godt ... sjusket eller doven, ser det faktisk godt ud, når det gøres godt.
Du kan ikke bare slå en boks overalt på et billede og håber på det bedste. Hvide kasser skal placeres strategisk, så de ikke dækker vigtige dele af billedet, og så brugerne flytter til dem under kigger på designet.
Hvide bokse skal være store nok til at indeholde en rimelig mængde tekst, og du skal have en plan for dette element på mindre skærme, som f.eks. At lade alt i tekstboksen falde under hovedbilledet. Forsøg ikke at sætte en tekstboks over et billede på mindre skærme, fordi du ender med en tekstfelt, der er for lille til at læse, eller boksen dækker det meste af selve billedet.
Hvis du potter til den hvide boksbehandling, så sjov. Hvert af eksemplerne nedenfor bruger hvide bokse på helt forskellige måder.
Gøre plads skærer en hvid kasse ind i nederste hjørne af billedet, så det meste af billedet er synligt. Den hvide boks bløder ind i det hvide rum nedenfor, så det næsten ser ud som om det kommer op af panelet nedenfor. Denne teknik hjælper til med at forbinde hovedskyderen til nedenstående indhold (og kan endda tilskynde til at rulle).
Hvordan det bruger cirkulære blobs, så de hvide tekstbokse bedre matcher tonen i baggrundsbilledet. Denne subtile skift i form, så boksene vises mere flydende hjælper med at forbinde elementerne, så boksene og baggrunden har en ensartet følelse. Du vil ikke have hvide bokse for at tekst skal føle, at de tilfældigt placeres på baggrunden. (Det virker ikke og hjælper ikke med at skabe en sammenhængende følelse for brugerne.)
Macaulay Sinclair har mere tekst end de andre eksempler ved at bruge en del af et billedpanelgitter til at holde tekstelementet. Her tjener billedet bag den hvide boks ingen informationsværdi. Det har en farve- og bevægelsesplan, der ligner andre billeder og tjener for det meste til at skabe sammenhæng mellem tekstelementet og resten af designet.
3. Typografi Cutouts
Ingen sagde nogensinde, at teksten skal være en serie af fyldte bogstaver. Flere designere vælger typografiudskæringer, der har en farveblok over et billede, så billedet kommer gennem tydeligt bogstaver.
Denne teknik kan arbejde med stillbilleder eller bevægelige billeder og med fuldskærm overlejringer, så kun en lille mængde information kommer gennem bogstaver (næsten for at skabe en tekstur) eller med mere af en blok-over-billedstil med mere af baggrundsbilledet synlig.
Tricket til at gøre dette arbejde er den rigtige skrifttype. Bogstaver skal have tykke nok slagtilfælde, så billedet eller teksturerne i baggrunden er synlige. Du kan ikke gøre dette med en tynd eller kondenseret skrifttype med nogen ensartet succes.
Denne teknik virker også bedst, hvis antallet af ord og bogstaver er ret begrænset. Hold dig til et til tre ord med 10 eller færre bogstaver eller brug meget almindelige ord, som brugerne ved et øjeblik kan kende.
Danbury bruger en lyst tekst cutout som tegning for at opfordre brugerne til at engagere sig i videoopkaldet til handling. Hele orange boksen er kun en kæmpe knap.
Fusion Winery bruger en baggrundsfilm af en vingård i bogstaverne. Hvad der er godt med dette design er triple layer-effekten: Video baggrund under hvid tekstudskæring under et produktbillede.
Kaneko bruger et uidentificerbart billede som fyld for bogstaver. Hvis du vælger denne stil, skal du holde denne baggrund enkel som færdig med dette design. Der er bare et strejf af farve og tekstur, der trækker øjet for teksten på det skarpe lærred.
Konklusion
Samlingen giver inspiration til de projekter, der muligvis ikke har et godt billede eller en video, så du stadig kan finde en måde at oprette noget, som brugerne vil reagere på. Vær ikke bange for at bruge tekst som et visuelt og informativt element i dette design.
Hvilke tendenser elsker du (eller hater) lige nu? Jeg vil gerne se nogle af de websteder, du er fascineret af. Drop mig et link på Twitter ; Jeg vil gerne høre fra dig.