Van de Graaf Canon, et harmonisk gitresystem, der blev brugt af typografer i middelalderen

Harmonisk typografi og gitre

Hvilken størrelse skal dine skrifttyper have? Skal du bruge et gitter? Og hvad med lodret rytme?

Jeg vil skitsere en proces til besvarelse af alle disse spørgsmål, fremskynde den tid det tager at nå frem til en ensartet typografi, der matcher dit gittersystem og minimerer spændingen.

Et harmonisk gitter- og typografisk system er et, der er internt konsistent. Systemer som dette hjælper dig med at sikre, at alle layouts og komponenter passer sammen - ligesom den måde, hvorpå enhver Lego-mursten er kompatibel med enhver anden Lego-mursten.

Hvorfor det er vigtigt

Når du designer et nyt produkt eller brugergrænseflade fra bunden, er der en masse indbyrdes afhængige beslutninger, du skal tage. Hver designbeslutning påvirker hver tidligere designbeslutning, og nogle er mere forstyrrende end andre.

En analogi: forestil dig, at du bygger et hus, og du afbryder malerprocessen for at flytte nogle vægge rundt. Hvad der ville have været en relativt let ting at gøre i den indledende planlægningsfase bliver uoverkommeligt dyrt. At følge en sekvens vil hjælpe dig med at eliminere denne type thrashing.

Disclaimer:
Dette indlæg er skrevet til folk, der er relativt nye inden for visuel design, som måske er mystificeret om, hvordan man implementerer lodret rytme, og hvilken type gittersystem der skal bruges. Dette er kun en sekvens, som jeg har fundet, der fungerer for mig, og jeg har slået denne proces igennem flere års praksis som en visual-, UX- og produktdesigner og i de sidste 2 år underviser design på Tradecraft i samarbejde med min kollega Jake Fleming. Dette er på ingen måde den eneste måde at etablere et internt konsistent typografisk og gitteret system, og hvis du har tip til at forbedre processen, så lad dem ligge i kommentarerne herunder. Skærmbilleder er fra Sketch-app, men principperne er generelle nok til at du kan følge med i enhver design-app.

Sekvensen

Her er et cheatsheet, der skitserer hele 9-trinssekvensen for at give dig et godt typografisk + gitterbaseret fundament. Jeg går nærmere ind på hvert trin nedenfor.

1. Definer dine mål

Selvom det kan virke indlysende, er det vigtigt at begynde med at etablere dine mål og designprincipper. Designprincipper er abstrakte koncepter, der beskriver udseendet og følelsen af ​​det endelige produkt. Fordi det er svært at tale om design, kan en håndfuld adjektiver være nyttige til at forestille sig, hvordan mærket kan se ud.

For eksempel skal typografi, der er “ren og moderne”, se betydeligt anderledes ud end typografi, der er “ung og frisk” eller “stabil og pålidelig.” En god tommelfingerregel er at indsnævre dine principper ned til 3-5 adjektiver eller adjektiv udsagn. Adjektive udsagn hjælper med at definere brandgrænser, f.eks. “Minimalistisk, men ikke moderne.”

Bevæbnet med din liste over designprincipper, kan du samle design og typografisk inspiration, som du mener eksemplificerer dine designprincipper. At se faktisk designarbejde kan hjælpe med at opbygge en delt vision på dit designteam eller i dit eget hoved, hvis du designer solo. Søg på sider som pinterest, dribler og opfør med dine brand adjektiver for at finde passende inspiration.

Husk, at du ikke leder efter design, der skal kopieres, når du leder efter inspiration. Bortset fra at være etisk usædvanlig, er det også dårligt for dit brand at være afledt. Inspiration er beregnet til at inspirere dig til at skabe noget unikt og bedre end det, du har fundet.

For at demonstrere den harmoniske typografiske proces vil jeg bruge teksten til Alice in Wonderland, og den visuelle inspiration, jeg vælger, vil følge det tema.

Et par inspirationstykker (fra talentfulde illustratører, bogstaver og designere på Dribbble), parret med nogle brand adjektiver.

2. Indholdshierarki

Når du har defineret dine mål, er det næste trin at forstå det indhold, du designer til (eller skrive, hvis det også er dit job). Dette trin er primært forbeholdt forståelse af indholdets prioritering og hierarki og til at gøre dette indhold så læsbart som muligt. Læsbarheden strækker sig ud over læsbarheden og taler til, hvorvidt et stykke indhold er ønskeligt at se på og læse.

Du kan tænke på at designe til indhold, som arkitekter tænker på at designe til mennesker. I teorien skal en bygning designes omkring dens indbyggere - og alle deres daglige vaner og aktiviteter. Du er nødt til at forstå disse indbyggere og deres aktiviteter for at skabe en god løsning for dem.

Undgå Lorem Ipsum, hvis du kan hjælpe det

På samme måde skal du faktisk læse indholdet for at forstå, hvordan det skal fastlægges og prioriteres. Undgå at designe omkring lorem ipsum og påfyldningstekst, som er som at prøve at arkitektere en bolig for mannequiner.

Hvis du er nødt til at designe og ikke vide, hvad det rigtige indhold er endnu, skal du i det mindste bruge tekst på det rigtige sprog, der støder op til det brand, du designer til. Eksempelteksten, jeg har valgt, Alice i Eventyrland, er et tilstrækkeligt valg til et mærke til børn, men ville sandsynligvis føre mig på afveje, hvis jeg indstiller type til et advokatkontor.

Læg alle indholdstyper ud

I løbet af dette trin skal du gennemgå kopien og sørge for, at du har mindst én forekomst af enhver unik type indhold. Opret det, hvis det ikke er repræsenteret i den kopi, du har. Tilføj også undertekster, træk citater og andre ting, der forbedrer læsbarheden.

Selvom den ikke er helt omfattende, vil denne liste dække de fleste brugssager:

  • Titel (H1)
  • Undertekster (H2 - H6, dog i praksis er H2 og H3 sandsynligvis alt hvad du behøver at bekymre dig om)
  • Hovedafsnit kopi
  • Blockquotes og pull citater
  • Lister (bestilt og ikke sorteret)
  • Links (standardtilstand, hovertilstand, aktiv / presset tilstand)
  • Form indtastningsetiketter
  • Billedtekster, lille tekst og dæmpet tekst
Jeg foretrækker at indstille denne indledende liste i noget uhyggeligt, ligesom Monaco eller Courier, som tvinger mig til at tage forsætlige beslutninger i stedet for at læne mig til standarder. Få mere eksempeltekst at sætte fra Gutenberg-projektet: https://www.gutenberg.org/

Når du har lagt alt indhold, du skal bruge til, er det tid til at vælge dine skrifttyper.

3. Vælg skrifttyper

Der er en kunst at vælge skrifttyper, der tager lang tid at mestre. Dette er enkle instruktioner for at komme i gang. Hvis du allerede ved meget om typografi, vil denne overforenkling sandsynligvis irritere dig, så spring til trin 4.

Når du vælger typografi, er der et par indledende spørgsmål, der skal besvares:

Hvad er dit budget?

Med typografi som med de fleste ting i verden får du det, du betaler for. Der er nogle undtagelser fra denne regel, men start med at tænke over, hvor meget du er i stand til at bruge. Hvis du har et budget, skal du starte med at se på professionelle støberier som House Industries og Hoefler & Co. eller kataloger af professionel type som Typekit (en god mulighed, hvis du allerede betaler for Adobe CC) og MyFonts.

Hvis du ikke har et budget - skal du ikke bekymre dig! Du kan finde mange fantastiske skrifttyper på Google-skrifttyper, både til download og brug på nettet. Undgå at bruge gigantiske gratis skrifttypeopslag, medmindre du finder et bestemt skrifttype designet af en professionel typedesigner. Amatør skrifttyper kan se interessante ud på overfladen, men mangler mange funktioner og finesse i et professionelt ansigt.

Hvor vil dette blive brugt?

Indstiller du type til internettet, en indbygget app eller til udskrivning eller alt det ovenstående? Sørg for, at ethvert skrifttype (r), du ser på, har en licens, der fungerer til dit tilsigtede outputmedium. Det kan være frustrerende at vælge et skrifttype, kun for at finde ud af, at du kun kan bruge det ansigt på nettet, men ikke din computer, eller omvendt.

Vælg en stil til dine overskrifter

Kan du huske de designprincipper, du har fastlagt i trin 1? De kommer virkelig godt med på dette trin. Ser du på både dine principper og designinspiration, skal du kigge efter mønstre, som du kan anvende.

I dit inspirationsbibliotek bemærker du for eksempel, at overskrifter ofte bruger dramatiske serier? Måske bruger de alle dristige, kondenseret sans-serif? Udvikle en fornemmelse af, hvordan visse typer mærker bruger typografi til at kommunikere deres værdier. Hvis ordene "kondenseret" og "serif" ikke betyder noget for dig, skal du læse en hurtig grunde om typen anatomi.

Brug disse mønstre til at guide dig, men ikke begrænse dig. Det er ikke altid den rigtige beslutning at følge, hvad lignende mærker gør - nogle gange er det mere fornuftigt at gøre det nøjagtige modsat for at skille sig ud. Den vigtige del er, at du træffer en forsætlig beslutning.

Gå igennem det valgte typekatalog, og skriv skrifttyper, der springer ud mod dig. Husk dit adjektiver til dit brand, og husk, at typografi til overskrifter kan være lidt mere stiliseret, end du måske vil have til kropskopi.

Begræns din liste ned til 3-5 valg, og indstil din titel i hvert af disse ansigter, før du går videre til næste trin. Du vil gemme disse, og par dem sammen med de kropstype, du vælger i næste trin.

Ordre fra toppen: Kabel, Raleway, Source Serif, Abril Titling

Vælg en parring til din kropskopi

Når du har valgt 3-5 skrifttyper til dine overskrifter, er det tid til at vælge en god skrifttype, der skal parres med til din kropskopi.

Selvom typografi til overskrifter skal være interessant, skal typografi til kropskopi være læselig og læsbar (dvs. ret kedelig).

Kontrast skal vejlede din beslutningstagning her. Hvis du har valgt en dramatisk serif til din overskrift, kan du prøve en geometrisk sans-serif til din krop. Hvis du valgte en tynd, moderne sans-serif, kan du prøve at parre den med en klassisk serif. Webstedet fontpair.co kan hjælpe dig med at tage en beslutning med tilstrækkelig kontrast. Du kan også bruge et enkelt skrifttype til dine overskrifter og kropskopi og opnå kontrast ved at ændre dine skrifttyngde, f.eks. Fed til overskrifter og almindelig til kropskopi.

Jeg kan også godt lide at google "fontparring" + navnet på min valgte tjeneste (f.eks. "Fontparring google font"). Der er mange gode inspirationssider derude, der viser dig, hvordan et par type parringer ser ud. Dette er et par favoritter.

Jeg kan godt lide at indsnævre krops skrifttyper til højst 2-3 samlede valg (ikke 2–3 pr. Overskrift skrifttype).

For fra toppen: Source Serif, Open Sans, Abril Text

Test det ud med en artboard-matrix

Når du har 3-5 valg til både din overskrift og 2 til 3 valg til din kropskopi, er det tid til at teste dem ud. Opret en artboard-matrix, der viser dig, hvordan hver mulig kombination ser ud, når du er parret. Indtil du har masser af øvelser, er det næsten umuligt at tage gode beslutninger om skrifttyper uden at se dem sat med faktisk tekst. Denne artboard-matrix viser dig, hvordan karakteren på hvert skrifttype indgår i hinanden.

Beslutte

Husk: Det er svært at vælge typografi. Du vil ikke altid være sikker på, at du tager den rigtige beslutning, og det er okay. Tag den bedste beslutning, du har til rådighed for dig på det tidspunkt, og cirkel rundt senere.

Se på dine brandprincipper, og start eliminering af indstillinger, indtil du har indsnævret det til en enkelt mulighed. Spørg dig selv, om det, du ser på, er tættere eller længere væk fra dine brandprincipper end dens naboer. Relative beslutninger (hvilket betyder at sammenligne en ting med sin nabo) vil altid være lettere end at prøve at finde ud af, om et stykke typografi repræsenterer dit brand-adjektiv på egen hånd.

Denne proces kan muligvis føre til yderligere inspiration, som du bør forfølge. Du kan også opleve, at intet føles helt rigtigt. Bliv ikke modløs - dette er stadig fremskridt. I begge tilfælde skal du tage backup af et trin og prøve at finde bedre valg til både din overskrift og kropsskrifttyper, matrix dem ud og se, om du er kommet nærmere.

Til vores Alice in Wonderland-eksempel sluttede jeg med at vælge en lille variation:

Overskrift: Abril Titling Narrow; Body: Source Serif Regular

4. Base fontstørrelse og linjehøjde (forhold)

Det er her processen begynder at blive lettere. Din basefontstørrelse og basislinjens højde er 2 tal, som du kan bruge til at basere alle andre målestørrelser og afstandsmålinger på. Dette vil ikke kun gøre dit job lettere og eliminere en række beslutninger senere i processen. At være streng med disse numre hjælper også med at sikre, at dit endelige design får god rytme.

Rytme i design, ligesom i musik, giver en følelse af orden (eller uorden) til en komposition. Rytme kan opnås i enten de vandrette eller lodrette akser, og når begge retninger er i overensstemmelse med hinanden, opretter du layout, der føles ekstremt velordnet. Dette er den hemmelige sauce til at udvikle et harmonisk typografisk og gitteret system.

Valg af en basisskriftstørrelse

Det er en god ide at starte med standardindstillingerne for den enhed, du designer til, og justere derfra. Hvis du designer til internettet, er standardindstillingen 16 px. iOS er 17pt, og Android 13sp.

Teknisk afledning: Selvom alle måleenheder forekommer forskellige - og de er forskellige på subtile måder - er forskellene ikke meget vigtige på dette tidspunkt. Sketch måler skrifttyper i punktstørrelser (pt), og det vil oversættes til de enheder, der bruges til internettet og Android. Når du har brug for hjælp med at falde i søvn engang, skal du google forskellene mellem punkter, pixels og referencepixel på nettet og sp / dp på Android.

Når du kender standardstørrelsen, skal du justere den op eller ned i henhold til dine behov. Det er en god ide at bruge en udvidelse som font face ninja for at lære, hvilke størrelser andre websteder bruger. NY Times bruger for eksempel 13px kropskopi, mens Medium bruger 21 px. Disse målinger tjener meget godt som nedre og øvre grænser.

Tænk på mængden af ​​indhold, som grænsefladen skal indeholde, læserne af indholdet, og den kontekst, det sandsynligvis vil blive vist i. For eksempel, hvis jeg designer en blog til læsere over 50 år (vores syn er sløret og dæmpet over tid), og min antagelse er, at de læser i øjeblikke med kedsomhed på deres mobile enheder, jeg ville vælge en større kropsstørrelse - muligvis tættere på Medium's 21px.

Omvendt, hvis jeg designede en grænseflade til professionelle sociale mediekoordinatorer, som sandsynligvis vil bruge produktet på arbejdet på større enheder, kan jeg gøre standardskriftsstørrelsen mindre.

I sidste ende kan dette ikke erstatte god brugerundersøgelse, der hjælper dig med at forstå dine brugere dybere, men disse tre faktorer vil hjælpe dig med at tage en anstændig beslutning. Når du er i tvivl, er det mere sikkert at fejle på siden for at gøre din type for stor end for lille. I det mindste er det den aktuelle tendens.

På dette tidspunkt behøver du kun at bekymre dig om basisstørrelsen til din hovedkropskopi - vi skal bekymre dig om størrelser til resten af ​​din typografi i trin 5.

Inden du lander på en endelig størrelse, skal du oprette et par muligheder på tegnebræt på størrelse med din mobile enhed og teste dem ud. Du kan bruge Sketch Mirror til dette eller eksportere disse testartikler som PNG'er og se dem på din enhed.

Venstre: 20px kropskopi; Til højre: 18px kropskopi

Valg af en basislinjehøjde

Når du er kommet på din basestørrelsesstørrelse, er det næste trin at tænke på din liniehøjde. Det er nemmest at tænke på din liniehøjde som en andel af din basefontstørrelse.

Tommelfingerregel: vælg en linjehøjde, der er et sted mellem 120% - 150% af din kropsstørrelse. Det er okay at bryde denne regel, hvis du har en god grund til det.

Jo løsere, førende (svarende til større forhold tættere på 1,5), jo mere hvidafstand har du mellem linjer. Det kan gøre det lettere for øjet at finde den næste tekstlinie. Stilistisk føles større liniehøjdeforhold også mere luksuriøse, stabile og fredelige.

Strammere føringer (svarende til forhold, der er tættere på 1,2 og undertiden endnu mindre), vil smøre tekstlinier tættere sammen. Den tæthed, dette skaber, kan være en god ting, afhængigt af de designprincipper, du etablerede tidligt. Stram føring har evnen til at øge læsehastigheden, men du skal være forsigtig med, at dine linjelængder ikke er for lange, eller det vil have negativ indflydelse på læsehastigheden. Vi diskuterer linjelængde i trin 6.

Hvis du har brug for hjælp til at bestemme, giver værktøjer som typen skala dig en nem måde at visualisere, hvordan forskellige skrifttype / liniehøjde-kombinationer ser ud. Forholdene svarer til musikalske akkorder, hvilket er en vilkårlig, men interessant måde at beslutte et forhold på.

Uanset hvilket forhold du vælger, bruger du de samme numre i efterfølgende trin til at bestemme din typeskala og layoutniveau for at opnå vandret og lodret rytme. Men bekymre dig ikke om at indstille dine linjehøjder til overskrifter endnu - hold fokus på din kropskopi i øjeblikket, og vi vil bekymre dig om dem i det næste trin.

Brug hele tal

En sidste note om at vælge din linjehøjde. Det er en god ide at holde sig med hele, lige tal. Du vil til sidst bruge din liniehøjde til at bestemme din afstand, og jo lettere det er at dele op, jo renere bliver dit layout. Dette giver mere mening, når du begynder at lægge tingene ud.

Her er et par kombinationer af skriftstørrelse / linjehøjde, som jeg ofte bruger.

  • 16/24 (forhold: 1,5 eller en perfekt femte akkord)
  • 18/26 (forhold: 1,44 eller tæt på en udvidet fjerde akkord)
  • 20/30 (forhold: 1,5)

For vores eksempel har jeg besluttet at gå med en standardkropstørrelse på 18px, som er stor, men ikke for stor, og et ledende forhold på 1.333 (eller svarende til en perfekt fjerde). Dette giver en liniehøjde på 23.994, som jeg vil runde op til en jævn 24px. Det er en god ide på dette tidspunkt at ændre det originale tegnebræt for at vise de skrifttyper, størrelser og fører, du har valgt. Du skal ikke bekymre dig om afstand lige nu.

Det ser stadig ikke godt ud, men det er bestemt bedre end hvad vi havde, da vi startede.

5. Typografisk skala

En typografisk skala vil hjælpe os med at tage gode beslutninger om, hvor meget større overskrifter, underoverskrifter og titler skal være.

En typografisk skala er intet andet end en række fontstørrelser, der deler den samme interne logik, der ligner en musikalsk skala. Den klassiske skala skrider frem fra 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 osv. Vi vil oprette vores egen typografiske skala baseret på forholdet, vi valgte i trin 4 .

Skalaen for webstedstype er praktisk til dette trin. Indtast din basefontstørrelse, vælg det forhold, du brugte, og typeskalaen viser dig, hvordan den progression af størrelser ser ud. Type skala viser størrelserne i ems, og den nemmeste måde at tænke på en em, hvis du er ny til dem, er at 1em er lig med din basefontstørrelse. Så hvis min basestørrelse er 18 px, så er 2em = 36 px (18 * 2). Hvis du vil oversætte det til Sketch, skal du bare tage den em-værdi, der er anført på typeskalaen, og multiplicere den med din basefontstørrelse.

Pro tip: Sketch giver dig også mulighed for at lave matematik direkte i appen, en funktion du bør drage fordel af. Lad os sige, at din basisstørrelse og linjehøjde er 16px / 24px (forhold: 1,5). For at få det næste trin op i din typeskala, kan du skrive “16 * 1,5”. For at gå 2 trin op skal du skrive “16 * 1,5 * 1,5”. Og så videre…

Kort din typeskala til dit indholdshierarki

Når du har bestemt "trinnene" i din typeskala, er det tid til at kortlægge disse trin til dit indholdshierarki, som du oprettede i trin 2. Din afsnitstekst skal være lig med din basefontstørrelse eller 1em. Dine H2 / undertekster skal være et trin over det, og din H1 / titel skal være et trin over det. På den anden side skal dine billedtekster og den lille tekst være et trin under din standardskriftsstørrelse.

Især når du beskæftiger dig med større forhold, eller når du har brug for mere end 2 niveauer af undertekster, kan du muligvis have halve trin for at holde dine størrelser rimelige. Halvtrin kan opnås ved at opdele afstanden mellem 1,0 og dit forhold. Hvis din basestørrelse er 16 px, og dit forhold er 1,5, ville et fuldt trin være 24 px. Et halvt trin (med et forhold på 1,25) ville være 20 px.

6. Vandret afstand (typografisk mål)

Når du har angivet de korrekte størrelser for alle de elementer, du designer til, er det næste trin, at du skal sikre dig, at din linjelængde (eller måling) er den rigtige størrelse. En ordentlig linjelængde vil forbedre læsbarheden og reducere sporingsfejl.

Tommelfingerregel: Bevar en linjelængde på 65–85 tegn til din kropskopi, eller cirka 2 1/2 alfabeter lang. Den nemmeste måde at gøre dette på er at søge på Google efter et gratis værktøj til tælling af tegn.

I skitse skal du reducere bredden på dit tekstfelt, indtil det passer til det rigtige antal tegn. Du skal ikke bekymre dig om at gøre det for præcist, da vi passer det til nettet i trin 8.

Du behøver kun at bekymre dig om den rigtige foranstaltning til din kropskopi. Dine større titler og undertekster passer ikke til det samme antal tegn på en enkelt linje, og det er fint.

7. Lodret afstand (lodret rytme)

Derefter skal du sørge for, at dine liniehøjder alt sammen er internt. Det første trin er at sikre dig, at linjehøjderne for alle dine stykker i din kropskopi er indstillet til din basislinjehøjde.

For efterfølgende niveauer i dit indholdshierarki skal din liniehøjde være enten en hel eller halv multipel af din basislinjehøjde. Ved at holde dine liniehøjder baseret på det samme nummer, vil du sikre dig, at flere kolonner med tekst altid er på linje med hinanden. Dette giver design en følelse af orden og struktur.

Når du har indstillet din liniehøjde på hver enkelt tekstblok, vil du opdage, at afgrænsningsfeltet i hver tekstblok justeres til layoutrækkerækkene. Dette gør justeringen meget lettere, da Sketch knipser din tekst til gitteret. Hvis du dog ikke definerer en linjehøjde, definerer Sketch en for dig (den vil læse som "auto" og vil sandsynligvis ikke være det, du vil).

Her er et eksempel. Hvis din skriftstørrelse er 20 px og dit forhold er 1,5 - hvilket giver dig en basislinjehøjde på 30 px - så er det her, dit typografiske hierarki kan se ud:

Basisskriftsstørrelse: 20px
Basislinjehøjde: 30px (forhold = 1,5)

  • Lille tekst - skriftstørrelse: 15px, linjehøjde: 15px
  • Kropstekst - skriftstørrelse: 20px, linjehøjde: 30px
  • H3-tekst - skriftstørrelse: 30px, linjehøjde: 45px
  • H2-tekst - skriftstørrelse: 45px, linjehøjde: 60px
  • H1-tekst - skriftstørrelse: 60px, linjehøjde: 75px

For Alice i Eventyrland-eksemplet vil vi bruge multipler på 12 til at bestemme vores liniehøjder, da vores basislinjehøjde er 24 (24/2 = 12). Jeg har sørget for, at mine overskrifter vikles til mere end en linje, så jeg tydeligt kan se den effekt, som min liniehøjde har på teksten.

Traditionel typografs notation viser skrifttypestørrelsen i tællerpositionen og liniehøjden i nævnerpositionen (med fed skrift i eksemplet ovenfor)

8. Horisontalt gittersystem

Hvis du begynder at bruge dit smarte nye typografiske system uden et gitter, ender du hurtigt med et rod på dine hænder. Den sande kraft i denne sekvens af trin er, når du opretter dine layoutgitter ved hjælp af de samme numre, som du brugte til at etablere dit typografiske system. Når de arbejder sammen på koncert, vil dine layouts se renere og mere organiserede ud med langt mindre indsats.

Det første trin er at definere dit horisontale gitter, kaldet et layoutgitter i Sketch. Gridbaseret design er et kæmpe emne, som jeg kun vil kort berøre, så hvis du vil lære mere google "gitterbaseret design."

Sketchs standardlayout til desktop er normalt temmelig tæt på perfekt. For dem af jer med webudviklingserfaring er det baseret på det gitresystem, der bruges i bootstrap, som var baseret på det klassiske 960 gidsystem.

Der er to primære overvejelser, når man tænker på det vandrette layoutnet. Åbn layoutindstillingerne i menuen Vis> Lærred for at følge med.

  1. Samlet layoutbredde - Din samlede bredde afhænger af dine mål. For enkelhedens skyld vil jeg antage et fluidbredde-design (eller 100% så bredt som tegnebrættet). Sørg for, at "tagrend på ydersiden" ikke er markeret, og gør den samlede layoutbredde lidt mindre end tegnebrættets bredde. Jeg trækker typisk min basislinjehøjde eller 2x min baselinjehøjde fra den samlede layoutbredde og genindlæser derefter layoutet.
  2. Tagrendebredde - Din tagrendebredde skal være det samme antal som din basislinjehøjde for tablet- og skrivebordsartikler eller halvdelen af ​​din liniehøjde for mobile tegnebræt. Dette vil gøre det lettere at opnå ens afstand mellem elementer, både vandret og lodret.

Sådan ser mine layoutindstillinger ud på skrivebordets artboard. Jeg vælger typisk gitter med fast bredde på skærmstørrelser, der er større end 1024px brede, da det er lettere at kontrollere det horisontale mål.

Mobil layout-gitter

For det mobile artboard er der en lille variation. Da vi har at gøre med mindre skærme, skal dit gitter være hele bredden på dit tegnebræt. Du skal dog vælge “tagrend på ydersiden” for at give dig en halv tagrendemargin på hver side af dit layoutnet.

Start ikke med at lægge dit indhold BARE endnu. Vi skal først etablere vores lodrette net.

9. Lodret ridsystem

Du er næsten færdig! Det sidste trin er at etablere gitterrækker, så du kan måle det lodrette rum mellem elementerne.

Åbn dine layoutindstillinger igen, og marker "Rækker" til. Din taghøjde skal være halvdelen af ​​din tagrendebredde, og "Rækkehøjde" skal indstilles til 1. Indstillingerne skal være de samme for både desktop og mobile tegnebræt.

Din taghøjde kan valgfrit være den samme som din tagrendebredde (24 px i dette eksempel), men det vil begrænse den finkornede kontrol, du har ved at halvere dette antal.

Layout

Nu, hvor dit gitresystem er færdigt, er det sidste trin at redigere dine elementer og typografi. For dit horisontale layout skal du sørge for at begynde og slutte elementer på søjler i stedet for tagrender.

Af forskellige tekniske grunde, der er for komplekse til omfanget af dette indlæg, skal du vide, at dit design ikke altid oversættes som pænt til kode. Undlad at stresse med dette; Brug rutenettet til at tage beslutninger lettere og hurtigere, men lad det ikke begrænse dig kreativt, hvis du har en god grund til at bryde rutenettet.

Lov om nærhed

Den primære overvejelse, når man beslutter, hvordan man rummer elementer, er et begreb fra Gestalt Psychology kaldet nærhedsloven. Denne lov hedder, at genstande, der er i nærheden af ​​hinanden, vil blive opfattet som en enkelt gruppe. Du kan bruge dette trick til perception til din fordel ved at flytte nogle elementer tættere eller længere fra hinanden for at antyde forhold.

For eksempel har jeg i eksemplet nedenfor brugt 2 "blokke" til at adskille de fleste elementer. Jeg har dog fordoblet det mellem elementer, der skal adskilles; for eksempel over mine H2-overskrifter og over og under blokkvoten. Jeg bruger også kun en enkelt blok mellem blokquote og billedtekst, da teksten er lille, og jeg vil gerne gøre det meget klart, at citatet og billedtekst er relateret til hinanden.

Brug tekstens afgrænsningsfelt til at justere snarere end tekstens basislinje. Hvis du er i illustrator snarere end skitse, kan det være lettere at justere din type baseline til gitteret, men i skitse er det langt lettere at bruge afgrænsningsbokse til justering. Din metode betyder ikke noget for meget, så længe du er konsekvent.

Jeg trak røde felter over tekstblokkene for at demonstrere nærhedsrelationer

Afslutter

Den endelige version er nedenfor, med alle guider skjult.

Selvom det kan virke som en masse arbejde for en lille mængde tekst, skal du huske, at du nu har et fundament at bygge videre på. Du kan bruge din basefontstørrelse og linjehøjde til at udforme et brugergrænseflade. Her er en enkel wireframe, som jeg sammensatte ved hjælp af alle samme afstand og målinger. Selvom jeg var alt for forenklet, behøvede jeg ikke at tænke for hårdt over layoutet.

En enkel wireframe, der er baseret på 18px / 24px-ridsystemet, vi oprettede tidligere

Kan du gøre det bedre?

Har du yderligere tip, der muligvis gør denne proces bedre eller hurtigere? Husk, at dette er en forenkling og ikke er beregnet til at arbejde i enhver situation. Men hvis du har tanker om, hvordan du justerer denne proces, så den bliver glattere, så fortæl mig det.

Ønsker mere?

Hvis du vil have mere som dette, samarbejder jeg med Learn Python the Hard Way-forfatteren Zed Shaw for at udvikle et komplet kursus i visuel design. Tilmeld dig for at blive underrettet om udgivelsen her: Lær Design den hårde måde