3 viktige designtrender, desember 2017
Alle tre av denne måneds viktige designtrender har å gjøre med typografi. Og trendene viser noen ganske flotte måter å bruke vakker type på for å skape brukerengasjement og gjøre et godt førsteinntrykk.
Et vanlig tema blant disse designene er at alle typografi stilene er svært lesbare. Hvis du planlegger å jobbe med et mer trendy eller funky tekstelement, velger du et skrifttype som brukerne ikke vil kjempe for å lese. Den trendy teknikken er trikset med disse designene, ikke selve tegnet.
Her er det som trender i design denne måneden:
1. Skriv bare over boksen
Selv om et godt bilde kan bidra til å tegne brukere inn i et design, er de riktige ordene og plassen noen ganger billetten.
Nøkkelen til å få mest mulig ut av denne designtrenden er å forfine meldingen. Ordene må være enkle, si noe meningsfylt og skape verdi for brukeren.
Så hvordan gjør du det?
- Begynn med en nøkkel setning. Det kan være ditt oppdrag eller en verdi proposisjon for brukere. Fortell brukere hva du tar med bordet og hvorfor nettstedet ditt vil være viktig for dem.
- Velg en enkel skrifttype som har samme stemning som meldingen for lengre kopieringsblokker.
- Hvis tekstblokken er kort, for eksempel med Typer Type , vurder et funkier type alternativ for å tegne brukere inn.
- Få mest mulig ut av rommet. Merk at i hvert av eksemplene nedenfor har teksten god plass til å puste, noe som gjør det enklere å lese med et øyeblikk. Plassen kan også bidra til å trekke øye med tekst, og kan balansere tekstelementer hvis du ikke vil sentrere dem på skjermen, for eksempel Design Ups .
- Bruk farge for å legge til visuell interesse. Lyse, trendy fargetoner kan bidra til å trekke brukere inn i designet. Farge kan også bidra til å sette et humør som korrelerer med meldinger.
Når du arbeider med en type tung design, ikke tvinge den. Noen ganger vil du ikke ha nok tekst til å fylle en full "skjerm". Mindre + More og Type Type bruk fargeblokkering for å opprette flere paneler som er perfekt tilpasset tekstinnholdet.
2. Tekst i hvite bokser
Med så mange dristige visuelle elementer i webdesignprosjekter, og så mange responsive brytepunkter for å håndtere hvite bokser, oppstår igjen som et beholderelement for tekst. Hvite bokser med mørk tekst inni kan sikre lesbarhet når det gjelder meldinger på toppen av bilder, video eller illustrasjon der det er fargevarianse.
Og mens denne trenden kan høres litt, vel ... slurvet eller lat, ser det faktisk bra ut når det gjøres bra.
Du kan ikke bare slå en boks hvor som helst på et bilde og håper det beste. Hvite bokser må plasseres strategisk slik at de ikke dekker viktige deler av bildet og slik at brukerne flytter til dem i løpet av å se på designet.
Hvite bokser må være store nok til å inneholde en rimelig mengde tekst, og du bør ha en plan for dette elementet på mindre skjermer, for eksempel å la alt i tekstboksen slippe under hovedbildet. Ikke prøv å sette en tekstboks over et bilde på mindre skjermer fordi du ender med en tekstboks som er for liten til å lese, eller boksen vil dekke det meste av bildet selv.
Hvis du gryter for den hvite boksbehandlingen, ha det gøy. Hvert av eksemplene nedenfor bruker hvite bokser på helt forskjellige måter.
Gjør plass kutter en hvit boks i nederste hjørne av bildet slik at det meste av bildet er synlig. Den hvite boksen bløder inn i det hvite rommet under, slik at det nesten ser ut som det kommer opp av panelet under. Denne teknikken hjelper til med å koble hovedskyven til innholdet under (og kan til og med oppmuntre til å bla).
Hvordan det bruker sirkulære blokker slik at de hvite tekstboksene bedre samsvarer med tonen i bakgrunnsillustrasjonen. Denne subtile forskyvningen i form, slik at boksene vises mer væske, hjelper til med å koble elementene slik at boksene og bakgrunnen har en konsekvent følelse. Du vil ikke ha hvite bokser for at teksten skal føles som de er tilfeldig plassert på bakgrunnen. (Det virker ikke og vil ikke bidra til å skape en sammenhengende følelse for brukerne.)
Macaulay Sinclair har mer tekst enn de andre eksemplene ved å bruke en del av et bildepanelnett for å holde tekstelementet. Her ser bildet bak den hvite boksen ingen informasjonsverdi. Den har en farge- og bevegelsesskjema som ligner på andre bilder, og fungerer hovedsakelig for å skape sammenheng mellom tekstelementet og resten av designet.
3. Typografi Cutouts
Ingen sa noen gang at teksten må være en serie med fulle bokstaver. Flere designere velger typografiutklipp som har en fargeblokk over et bilde slik at bildet kommer gjennom tydelig bokstaver.
Denne teknikken kan fungere med stillbilder eller bevegelige bilder og med fullskjerm overlegg, slik at kun en liten mengde informasjon kommer gjennom bokstaver (nesten for å lage en tekstur) eller med mer av en blokk over bildestil med mer av bakgrunnsbildet synlig.
Trikset for å gjøre dette arbeidet er riktig skrifttype. Bokstaver må ha tykke nok slag slik at bildet eller tekstur i bakgrunnen er synlig. Du kan ikke gjøre dette med en tynn eller kondensert skrift med konsekvent suksess.
Denne teknikken fungerer også best hvis antall ord og bokstaver er ganske begrenset. Hold deg til ett til tre ord med 10 eller færre bokstaver eller bruk svært vanlige ord som brukerne vil kjenne ved et øyeblikk.
Danbury bruker en lys tekstutklipp som tegning for å oppmuntre brukerne til å engasjere seg med videoanropet til handling. Hele oransje boksen er bare en gigantisk knapp.
Fusion Winery bruker en bakgrunnsvideo av en vingård i bokstaven. Det som er bra med dette designet er tredoblings-effekten: Video bakgrunn under hvit tekstutskæring under et produktbilde.
Kaneko bruker et uidentifiserbart bilde som fyll på bokstaver. Hvis du velger denne stilen, behold denne bakgrunnen enkel som ferdig med dette designet. Det er bare et snev av farger og tekstur som trekker øye til teksten på det sterke lerretet.
Konklusjon
Samlingen gir inspirasjon for de prosjektene som kanskje ikke har et flott bilde eller en video, slik at du fortsatt kan finne en måte å skape noe som brukere vil svare på. Ikke vær redd for å bruke tekst som et visuelt og informasjonselement i dette designet.
Hvilke trender elsker du (eller hater) akkurat nå? Jeg vil gjerne se noen av nettstedene du er fascinert med. Slett meg en lenke på Twitter ; Jeg vil gjerne høre fra deg.