Designtrend: Skivet tekst og typografi

Purister sier at du aldri bør endre typografi. Bokstaver skal vises som beregnet av typedesigneren, eller du bør velge en annen skrift helt. Selv om dette stort sett er sant, er unntaket i den skiver teksttrenden.

Den nifty effekten får typeelementer til å se ut som de har blitt klippet ut med et presisjonsverktøy og kan gi visuell interesse for logotyper, overskrifter og enkle tekstblokker. Skiver teksteffekter kan variere fra super subtile (for eksempel en liten bokstav som mangler) til hoveddeler av ord som mangler helt.

Det du må huske på når du bruker skivet tekst er at ord alltid må være lesbare - hvilket poeng er det ellers? - og du bør følge nøye med slik at utilsiktede bokstavkombinasjoner eller ord ikke vises på grunn av snitt. Her er en titt på hvordan du får det til å fungere for deg med noen eksempler på design som gjør det godt.

Utforsk Envato Elements

“Tradisjonell” skive

Skivet tekst inneholder et nesten lagvis utseende med ett tekstelement, for eksempel et ord eller en liten gruppe ord, som er klippet og overlappet på to plan. Denne effekten skaper dybde og kan gjøre et enkelt sett med tegn visuelt interessant.

Resoluut bruker denne effekten i kombinasjon med en ampersand for å trekke brukere inn i sentrum av designen. Den skiver teksten speiler meldingene nedenfor som selskapet fokuserer på "digital design med holdning", fordi skivet tekst formidler en viss edgier stemning som direkte på bokstaver.

Denne teknikken fungerer best når tegnsettene er enkle (tenk sans serif-skrifter først) og ord har et naturlig knekkpunkt der de kan kuttes og opprettholde lesbarhet.

Skive tekst og bilder

Lagdelingseffekten er ikke begrenset til en kombinasjon av font og mellomrom. Designere kan også bruke bilder og tekst for å skape en kul skivereffekt også, for eksempel eksemplet over fra The Shift.

De skrå skivekombinasjonene av et enkelt bilde (også skiver) med bokstaver trekker brukeren inn i designet.

Mens noen av ordene er litt tøffere å skille ut med det første, er det nok tid mellom animasjoner til å finne frem meldingen med letthet.

Denne trenden fungerer bra for digitale byråer og porteføljesider som en måte å vise frem et moderne utseende og preg på samt fremheve kreative koteletter.

Skive med animasjon

Den skiver teksteffekten kan også kombineres med andre trendy designelementer. Å blande skiver med animasjon kan resultere i et fint visuelt element.

I eksemplet over er hvert av de skiver tekstelementene faktisk navigasjon. Brukere kan klikke på hvert av elementene, men det som er mer imponerende er sveveaksjonen, som setter den skiver teksten sammen.

For logotyper

Skivet tekst kan være en morsom måte å lage en logo når de eneste elementene du må jobbe med er tekst. En morsom logotype kan være mer enn et merke for merkevare anerkjennelse; det kan også være et meget grafisk element for flere bruksområder, for eksempel skjortedesignet, ovenfor.

Når du jobber med skivet tekst, må du se etter en naturlig form og en helning for å skive slik at det er interessant å se på mens du beholder leservennligheten.

Vær oppmerksom på hvordan skiver skaper hvitt rom. Utformingen over bruker et bredt stykke tilleggsinformasjon inni den. Den vanligste bruken av skiver er ofte en tynn linje, men tilnærminger (som du kan se av eksemplene i dette innlegget) kan variere ganske dramatisk.

Lag interaktivitet

Tillat brukere å skive sin egen tekst med en interaktiv tekst- og penselkombinasjon, som eksempelet ovenfor. Mens teksten ikke akkurat er skiver i seg selv, skapes effekten i kunstprosessen.

Alle verktøy som tillater brukere å endre designen, kan føre til lengre tid på stedet på grunn av den interaktive komponenten.

Skiver loddrette slag

Vertikale skiver har en tendens til å være kortere fordi hvert kutt er en del av en enkelt bokstav.

Mens de fleste designere ser ut til å bruke trenden på samme måte med en mer horisontalt orientert skive, kan kutt også være vertikale.

Vertikale skiver har en tendens til å være kortere fordi hvert kutt er en del av en enkelt bokstav. Trikset for å få vertikale skiver til å fungere er konsistens. Måten kutt blir gjort på skal etterligne hverandre slik at bokstaver ser ut som om de går sammen. Denne skjæremetoden skal se ut som om den nesten er en beregnet del av skrifttypen. (Ikke i eksemplet over at skiver har samme bredde fra bokstav til bokstav og de samme bokstavene har samme skiver.)

Etablere Visual Flow

Kuttene skaper nesten en følelse av å lese haster slik at du glir over bokstavene og over til hovedvisjonen på skjermen.

En konsekvens av skivet tekst - ment eller ikke - er at den skaper visuell flyt. Et brukerøye vil følge retningen på skiven og det hvite rommet som omgir den.

Se på logotypen i eksemplet over. Med skiver i R og o-ene i Robocath (pluss den vanlige delen av c-en) mangler det et tydelig retningstrekk over skjermen fra venstre mot høyre.

Trekket er sterkere enn det du forbinder med normal lesing (også fra venstre til høyre) fordi skivene skyver deg gjennom karakterene raskt. Kuttene skaper nesten en følelse av å lese haster slik at du glir over bokstavene og over til hovedvisjonen på skjermen.

Legg vekt på bokstaver

Den siste - og muligens mest overbevisende - grunnen til å bruke den skiver tekstdesigntrenden er å legge vekt på bokstaver eller meldingen. Skivering kan være omtrent hvilken som helst endring av bokstaver der en del av et tegn mangler i designet.

MJND, over, bruker mer av en lagdelingseffekt for å skjule eller skive bokstavformer for å bidra til å legge vekt på meldingen. Bildet kan lett gjøre alt det som kommuniseres her, men denne effekten bidrar til å bringe brukeren tilbake til hovedmeldingen. Kombinasjonen er enkel, effektiv og visuelt interessant.

Læringsressurser

Det er noen måter å lage skiver teksteffekter på prosjekter, avhengig av nøyaktig hva du prøver å lage. De mest populære alternativene inkluderer å lage teksteffekten for hånd ved å bruke redigeringsprogramvare eller bruke CSS for å skape effekten for nettprosjekter.

Her er opplæringsprogrammer for hvert av disse alternativene, slik at du kan prøve å lage en trendy skiver teksteffekt:

• Video: Hvordan lage skivet tekst i Adobe Illustrator
• Klipp teksteffektutdrag med CSS

Konklusjon

Det kan være litt vanskelig å bruke den skiver teksttrenden fordi det innebærer å endre elementelementer. Det er viktig at lesbarheten ikke går tapt, eller at du kan miste brukere med denne effekten.

Skiver teksteffekter kan imidlertid være en morsom løsning og bidra til å generere et samlingspunkt. Hvis du legger til et snev av animasjon, kan du også ta det til neste nivå. (Mange av eksemplene som er inkludert i dette innlegget gjør nettopp det; sørg for å besøke disse nettstedene og klikke deg rundt.)