6 tips for utforming med linjer
I dag skal vi se på et av de enkleste designelementene: en linje. Vi lærer hvordan du kan bruke linjer ordentlig, så vel som hva du må unngå når du implementerer dem.
Å legge noen få enkle linjer til et design kan bringe struktur og grafisk stil til en ellers kjedelig design. Det er et dødt enkelt triks som når det brukes effektivt, har effekten av å legge til et lag med ferdig design.
Utforsk Envato Elements
# 1: Bruk en understrek
Vi begynner med det mest grunnleggende trikset i typografispelen: en understreking. En understreket overskrift føles tyngre og gir en mer klar skille mellom overskriften og kroppen. Husk at dette nødvendigvis er positive eller negative attributter, men er mer nøytrale; du må bestemme når tilstedeværelsen deres er god eller dårlig, basert på utseendet du ønsker.
Legg merke til hvordan linjen ikke bare fungerer som en separator mellom de to elementene, men også er med på å definere bredden på kolonnen.
En ting som plager meg med understrekinger er det visuelle rotet som opprettes når du har bokstaver som inneholder en nedstigning som krasjer i streken. Det er ingen offisiell regel mot dette, men jeg synes bare det er litt for distraherende og guider seerens interesse til alle gale steder.
Så hvordan tar vi opp dette problemet? Det enkleste alternativet er åpenbart å bare unngå å bruke etterkommere og understrekinger sammen, men det er litt for begrensende for min smak. I stedet er det jeg vanligvis gjør å lage understrekingen manuelt ved å tegne en linje (i motsetning til bare å klikke på understrekningsknappen), og deretter maskere ut delene av linjen som krasjer i etterkommerne mine.
Som du ser i eksemplet ovenfor, er dette mye hyggeligere enn det forrige eksemplet og inneholder mye mindre visuell kompleksitet. Hvis du ikke liker den lille biten av en strandet strek etter den siste "g", kan du ganske enkelt stoppe understrekingen på den siste nedstigeren (gjelder bare der den endelige bokstaven inneholder en synkende).
Utvid den
Husk at en understrek ikke trenger å tilpasse seg bredden på teksten. Noen ganger gir det en interessant uttalelse å utvide understrekingen hele veien eller til og med utenfor siden.
Hvis du utvider understrekingen, kan du tenke på måter du kan ha det moro med linjen ute i det negative rommet. Du kan gi den litt turbulens, bøye den til en form, hva du enn vil!
Designeren nedenfor avsluttet den utvidede understrekingen med og avsluttet med en prikk. Dette får den til å føle seg koblet til noe innhold på høyre side, og tilfører litt fin, men subtil interesse for den vanlige linjen.
# 2: Break Up the Line
Ikke fall i fellen av å alltid tegne en solid strek. Du kan bruke streker, prikker, trekanter, stjerner og alt annet du kan tenke på for å lage linjen du ønsker, og den oppnår fremdeles det samme målet.
Sjekk hvordan denne designeren brukte et stiplet lin som stemmer overens med midten av en overskrift for å lage en oversiktlig seksjon. Selv om teksten er midtlinjet her, føles designen berettiget fordi linjene funksjonelt utvider de visuelle grensene til overskriften til venstre og høyre kant av kolonnen.
# 3: Flank typen
Hvis du planlegger et formelt tema, kan det å gjenta understrekningen øverst på overskriften skape en gammel følelse av en gammel stil. Jeg tenker alltid på en avisoverskrift når jeg ser denne stilen.
Hvis du vil redusere følelsen av formalitet, kan du forskyve linjene på forskjellige måter slik at den ser mindre strukturert ut. Dette er også en praktisk effekt for å skape en følelse av bevegelse på en statisk side.
# 4: Gå vertikalt
Så langt har vi fokusert på horisontale linjer, men vertikale linjer kan brukes til å sette noen virkelig kreative grafiske interesser i et design. Designeren nedenfor overdrev de vertikale linjene i skrifttypen uten noen reell grunn annet enn at det ser ganske kult ut og skaper et fint, sammenhengende tema å bygge videre på resten av siden.
Selvfølgelig vil en litt mer tradisjonell bruk av en vertikal linje være å bare skille to kolonner med innhold. Dette kan brukes sammen med enten type eller bilder, og lar deg plassere mye plass mellom kolonnene dine uten å ha et vanskelig gap.
# 5: Gå diagonal
Hvis du virkelig vil at siden din skal se gal ut, vipp innholdet diagonalt. Dette gir vanligvis inntrykk av ung, spennende design som bryter regler og skyver grenser.
Å vippe innholdet ditt kan se litt tilfeldig ut, men å utvide linjene i kunstverket hjelper det å se forsettlig og virkelig skubber effekten. Ikke vær sjenert, støtt rotasjonen, og strekk linjene langt nok til å komme med en uttalelse.
Den diagonale effekten er spesielt flott for retroinspirerte design som den ovenfor.
# 6: Go Nuts
Det er her jeg burde fortelle deg å ta det med ro. En eller to enkle linjer kan tilføre designen din mye, og hvis du går for langt med effekten, kan du absolutt drepe din estetiske appell. Imidlertid, i høyre hender, kan en kombinasjon av tipsene over resultere i et skarpt sluttprodukt.
Designet nedenfor fra David Fooks bruker massevis av linjearbeid. Han kombinerer stiplede linjer, solide linjer, rette linjer, buede linjer, grenser og jevn linjer med en diamant på enden alt i dette ene lille området. Den samlede effekten er ikke rotete eller stygg, men er i stedet ganske stilig og vakker!
Mitt råd er å bare være forsiktig. Som ethvert designelement, kan linjer brukes til godt eller vondt. Bruk selvbeherskelse når det er nødvendig, og se alltid på designet ditt med og uten de linjene som er lagt til for å sikre at du faktisk tilfører verdien til designet.
Inspirasjon
Ta en titt på disse fantastiske bruksområdene av linjekunstverk i webdesign for å få noen ideer for hvordan du kan innlemme noen i din neste design.
CarbonAds
For ordens skyld
Evan Eckard
Kult og guiden
Ananasstyven
DesignSwap
Campingvogn
Konklusjon
Hensikten med denne diskusjonen var å oppmuntre deg til å ta en ny titt på vår gamle venn linjen og nøye vurdere hvor du kan bruke linjer for å styrke designene dine enten estetisk, strukturelt eller begge deler.
Hvis du har et design som bruker sterke linjer sterkt, legg igjen en kommentar under med en lenke, så kan vi sjekke det ut! La oss også vite hva du synes om eksemplene ovenfor.
