Share
Webdesign er egentlig bare en utvikling av prinsippene og teoriene som er opprettet under utviklingen av utskrift. Designbransjen brakte mange teknikker til nettet, men noen tok lengre tid å mestre i et virtuelt miljø. Dessverre har vi ikke en eneste plattform for at innholdet vårt skal vises på; vi må kjempe med flere nettlesere, operativsystemer og skjermstørrelser.
Som Internett har utviklet, så har designprinsippene vi observerer. Grid-basert design har økt de siste årene, hvor designere kan legge ut sin side i henhold til et kolonnefelt. Gittersystemer har vært en veldig populær måte å organisere og justere elementer, og legge til generell rekkefølge på en side, ved å bruke proporsjon og balanse.
Basere vår kunnskap om å bruke proporsjon og balanse, kan man benytte et annet prinsipp for utskrift design: grunnlinjen.
Grunnlinjen er en teknikk som brukes til å forbedre din webbaserte typografi. I det vesentlige justerer den hele teksten til et vertikalt rutenett hvor bunnen av hvert brev er plassert på rutenettet, akkurat som å skrive på lined papir. Sluttresultatet er en tekststruktur som er perfekt organisert, med en underbevisst anerkjennelse av balanse og kongruitet.
Som jeg sa før, er utskrift et statisk medium. Ved å designe for et utskriftsformat kan du spesifisere hva alle seerne dine vil se. På grunn av de alternative plattformene kan ditt design tolkes av på nettet, men CSS vil uunngåelig gjengi linjens høyde og andre typografiske verdier, forskjellig for forskjellige brukere. For mange designere, viser dette seg å bare være gjetning og forutsi hva sluttbrukeren vil se.
Mange printdesignere bruker grunnlinjer i forbindelse med deres designpakke, det være seg InDesign eller andre. Gitter i trykk har blitt sporet tilbake til begynnelsen av 1200-tallet og er ikke begrenset bare til webdesign. Faktisk deles alt fra nett til det gyldne forholdet (dvs. de fleste mattebaserte teorier) i andre aspekter av livet, særlig arkitektur.
Gitteret gjør det mulig å bringe alle elementene i designtypenes tegn, fotografi, tegning og farge inn i et formelt forhold til hverandre; Det vil si at rutenettet er et middel til å introdusere orden til et design. En bevisst sammensatt design har en klarere, mer pent arrangert og mer vellykket effekt enn en annonse satt sammen tilfeldig. - Josef Mørler Brockmann
La oss nå se på hvordan vi faktisk lager vår grunnlinje.
For det første må vi definere en linjehøyde for grunnlinjen basert på et forhold med fontstørrelsen vår; For dette eksempelet er 1: 1.5 en fin mengde som gir oss en sjenerøs 50% ledende. Hvis vi hadde en tekststørrelse på 12px, ville linjens høyde (ved hjelp av dette forholdet 1: 1,5) være 18px. 150% er en fin mengde som gir oss et design som blir lett å lese, men denne verdien kan være forskjellig. Du bør imidlertid prøve å holde seg til omtrent et område på 130% -160% når du vurderer linjehøyde.
Før vi går videre, bør du vite nøyaktig hvordan CSS linjehøydeegenskapen egentlig virker. Linjens høyde er den samlede kollektive høyden på tekstlinjen, ikke selve teksten. Det fungerer ved å legge til polstring over og under teksten for å plassere den ut. Hvis vi faktisk tar litt tekst og legger den på en rullet bakgrunn, ser vi teksten plassert mellom linjene, ikke nødvendigvis på dem.
For å gjøre det enkelt, la oss anta at teksten vår har en basisstørrelse på 10px. Ved å holde fast på vårt grove forhold betyr det at linjens høyde blir 15px, selv om vi kan variere dette. (For å lage en side notat er 10px ganske liten, og jeg vil ikke nødvendigvis anbefale det i de fleste tilfeller, men jeg bruker det her bare for å gjøre det lettere i matteavdelingen). For å få ulike elementer til å passe inn i vårt grunnlinjesystem, må vi sette dem opp i vårt CSS.
Før vi fortsetter, antar disse eksemplene at du bruker en slags CSS reset. Hvis du ikke er det, kan standardmarginer forstyrre det arbeidet vi gjør i dag.
For å sparke ting, når vi har satt opp linjehøyden, må vi passe til en konsistent margin under hver overskrift og avsnitt. Siden vi jobber med et 15px rutenett her, slår vi av ved å overskrive standard bunnmargin på en avsnittetikett (som standard er dette 1em som i dette tilfellet vil være 10px) for å være det samme som vår linjehøyde innenfor tekst. Dette skaper en proporsjonal tom linje under hvert avsnitt som er lik høyden hvis teksten bor der.
p margin-bunn: 15px;
På samme måte, for overskrifter, må vi bare fortsette å adlyde trinnene på 15 piksler. Ved å bare merke på marginen til side 150% linjehøyde, oppretter vi en lignende, konsistent pause.
h1 skriftstørrelse: 20px; linjehøyde: 30px; margin-bunn: 15px;
Før jeg går videre, vil jeg legge merke til at teksten din kanskje ikke alltid sitter på linjen, hvis du har brukt en til din bakgrunn. Ikke bekymre deg, så lenge linjens høyde forblir den samme. Hvis teksten flyter midt i linjene dine, kan du enkelt spille om med dine marginer, men det er ikke nødvendig.
Neste opp, hvordan håndterer vi lister? For det første ønsker vi å bruke standardmarginen på samme måte som i våre avsnitt. Dette gir pausene et konsistensnivå med innholdet.
ul, ol margin-bunn: 15px;
Dette begynner å bli enkelt nå! Hvis du fremdeles har en linjehøyde på 15 px som er definert andre steder, vil lister passe pent sammen med resten av innholdet.
Bilder er der det begynner å bli litt vanskeligere. Fortrinnsvis vil vi ha samme konsistens i våre marginer, så bildet blir behandlet på samme måte som om det var en blokk med tekst. Det betyr at bildene dine må dimensjoneres i multipler av linjehøydeverdien, som i dette tilfellet er 15.
I mitt eksempel har jeg bildet floated til høyre, så jeg har en 15px-margin som brukes på venstre side og bunn. Sammen med vår eksisterende margin under avsnittet ga dette oss en konsekvent margin som tilsvarer resten av grunnlinjen.
img.left float: left; margin: 0 0 15px 15px;
Selvfølgelig er disse ikke de eneste elementene som vi må endre for å overholde vårt nye grunnlinje. Nøkkelen er å sørge for at du arbeider innenfor en konsekvent inkrement, så alt er begrenset til det samme rutenettet. Dette kan resultere i at harmonien og balansen blir tydelig gjennom hele nettsiden din når den brukes sammen med store tekstkropper.
Her er vårt ferdige eksempel, en enkel nettside med avsnitt, titler, et bilde og en liste. Hvis du vil komme ut linjalen din, kan du, men jeg kan forsikre deg om at alt følger det konsistente rutenettet som er basert på vår typografi.
Vi har nettopp ødelagt overflaten av å bruke grunnlinjen. Det kan bli mye vanskeligere når du begynner å prøve å søke dem på mer komplekse motiver, noe som til slutt ikke blir brukt på nettet. Det er imidlertid mulig og kan resultere i et balansert, proporsjonalt design som kan bidra til en bedre sluttbrukeropplevelse.
Grunnlinjen er en fin måte å legge til litt balanse og forhold til typografien din. Det er en av de subtile implementasjonene som kan legge til litt naturlig følelse i designene dine. I tilfelle av grunnlinjen blir vår typografi konsistent med standardisert avstand som gir den den harmoniske følelsen.
Dessverre må vi likevel bekjempe trusselen om nettleserens uforlikeligheter som kan gjøre CSS gjengjeld annerledes for ulike brukere når de surfer på alternative nettlesere, operativsystemer eller enheter. Dette er en oppgave som ikke ser ut til at den er på vei ut, selv om det legges til en grunnlinje gir andre fordeler. For eksempel kan denne typen gridsystem bidra enormt ved skalering og derfor tvinge en nettleser til å gjengjøre det CSS. Grunnlinjer gir litt mer fleksibilitet og oppmuntring for nettleseren til å gjøre ting riktig.
Dette har vært en kortere artikkel enn vanlig, men det er fordi grunnlinjener egentlig ikke har så mye å forklare eller vise hvordan man bruker. Den virkelige magien kommer når designeren tweaks og tester for å sikre at hans grunnlinje fungerer, og fremfor alt gjør designen visuelt tiltalende (noe mer). For et alternativt snurr på ting, les A List Aparts artikkel om dette emnet. Inntil neste gang, glad design!
Accentsconagua