Van de Graaf Canon, skladan sustav mreža koji su tipografi koristili tijekom srednjeg vijeka

Harmonična tipografija i mreže

Koje bi veličine trebao biti vaš font? Trebate li koristiti rešetku? A što je s vertikalnim ritmom?

Izradit ću postupak za odgovore na sva ta pitanja, ubrzati vrijeme potrebno za dosljednu tipografiju koja odgovara vašem mrežnom sustavu i minimizirati pucanje.

Harmoničan sustav i tipografski sustav je onaj koji je interno dosljedan. Sustavi poput ovog pomažu vam da osigurate da će se svi izgled i dijelovi uklopiti - poput načina na koji je jedna Lego cigla kompatibilna s bilo kojom drugom Lego opekom.

Zašto je to važno

Kada dizajnirate novi proizvod ili korisničko sučelje ispočetka, morate donijeti puno međusobno ovisnih odluka. Svaka dizajnerska odluka utječe na svaku prethodnu dizajnersku odluku, a neke su i više remetljive od drugih.

Analogija: zamislite da gradite kuću i prekidate postupak slikanja kako biste pomicali neke zidove. Ono što bi bilo relativno jednostavno učiniti tijekom početne faze planiranja postaje neizmjerno skupo. Slijedeći redoslijed pomoći će vam da eliminirate ovu vrstu bacanja.

Odricanje:
Ovaj je post napisan za ljude relativno nove u vizualnom dizajnu, koji bi mogli biti mistificirani o tome kako implementirati vertikalni ritam i koju vrstu mrežnog sustava koristiti. Ovo je samo jedan slijed za koji sam utvrdio da djeluje za mene, a taj postupak sam usavršavao tijekom godina prakse kao dizajner vizažista, UX-a i proizvoda, a u zadnje dvije godine podučavajući dizajn u Tradecraft-u u suradnji s kolegom Jake Fleming. Ovo ni na koji način nije jedini način uspostavljanja interno konzistentnog tipografskog i mrežnog sustava, a ako imate savjete za poboljšanje postupka, ostavite ih u komentarima u nastavku. Snimke zaslona iz aplikacije Sketch, ali principi su dovoljno općeniti da ih možete slijediti u bilo kojoj aplikaciji za dizajn.

Slijed

Ovdje je varalica koja prikazuje cijeli niz od 9 koraka kako bi vam dao dobru tipografsku + rešetku temeljenu na mreži. Detaljnije ću istražiti svaki od koraka u nastavku.

1. Definirajte svoje ciljeve

Iako se može činiti očitim, ključno je za početak uspostaviti ciljeve i načela dizajna. Principi dizajna su apstraktni koncepti koji opisuju izgled i osjećaj konačnog proizvoda. Budući da je teško razgovarati o dizajnu, pregršt pridjeva može biti od koristi kako bi se zamislilo kako bi marka mogla izgledati.

Na primjer, tipografija koja je „čista i moderna“ trebala bi izgledati bitno drugačije od tipografije koja je „mlada i svježa“ ili „stabilna i pouzdana“. Dobro pravilo palca je suziti vaše principe na 3–5 pridjeva ili pridjeva izjave. Izjave pridjeva pomažu u definiranju granica robne marke, npr. "Minimalistički, ali ne i moderno."

Naoružani svojim popisom načela dizajna možete prikupiti dizajnerske i tipografske nadahnuće za koje vjerujete da predstavljaju primjere vaših dizajnerskih principa. Gledanje stvarnih dizajnerskih radova može vam pomoći izgraditi zajedničku viziju vašeg dizajnerskog tima ili u vašoj glavi ako samostalno dizajnirate. Pretražite web lokacije poput pinteresa, driblinga i ponašajte se s pridjevima marke kako biste pronašli odgovarajuću inspiraciju.

Kad tražite inspiraciju, imajte na umu da ne tražite dizajnerske radove za kopiranje. Osim što je etično nepristojan, loše je i da je vaša marka izvedenica. Inspiracija treba nadahnuti vas da stvorite nešto jedinstveno i bolje od onoga što ste pronašli.

Kako bih demonstrirao skladan tipografski postupak, upotrijebit ću tekst Alice u zemlji čudesa, a vizualna inspiracija koju odaberem slijedi tu temu.

Nekoliko komada inspiracije (od talentiranih ilustratora, pisaca pisma i dizajnera na Dribbbleu) uparenih s pridjevima marke.

2. Hijerarhija sadržaja

Nakon što definirate svoje ciljeve, sljedeći je korak razumjeti sadržaj koji dizajnirate (ili napisati, ako je i to vaš posao). U prvom redu, ovaj korak rezerviran je za razumijevanje prioriteta i hijerarhije sadržaja te za postizanje što čitljivijeg sadržaja. Čitljivost se proteže iznad čitljivosti i govori o tome je li dio sadržaja poželjno pogledati i pročitati.

Možete razmišljati o dizajniranju za sadržaj onako kako arhitekti razmišljaju o dizajniranju za ljude. Teoretski, zgrada bi trebala biti dizajnirana oko njezinih stanovnika - i svih njihovih svakodnevnih navika i aktivnosti. Morate razumjeti te stanovnike i njihove aktivnosti da biste stvorili dobro rješenje za njih.

Izbjegavajte Lorem Ipsum ako vam može pomoći

Na isti način morate zapravo pročitati sadržaj da biste shvatili kako ga treba postaviti i odrediti prioritet. Izbjegavajte dizajniranje oko lorem ipsuma i teksta za punjenje, što je poput pokušaja arhitektiranja stana za manekenke.

Ako morate dizajnirati i ne znate koji je pravi sadržaj, barem upotrijebite tekst na pravom jeziku koji je uz marku koju dizajnirate. Primjer teksta koji sam odabrala Alice u zemlji čudesa dovoljan je izbor marke za djecu, ali vjerojatno bi me zalutao ako odredim vrstu odvjetničkog ureda.

Izložite sve vrste sadržaja

Tijekom ove faze prođite kroz kopiju i provjerite imate li barem jedan primjerak svake jedinstvene vrste sadržaja. Stvorite ga ako nije predstavljen u kopiji koju imate. Također dodajte titlove, povlačite citate i druge stvari koje poboljšavaju čitljivost.

Iako nije posve sveobuhvatan, ovaj će popis obuhvatiti većinu slučajeva upotrebe:

  • Naslov (H1)
  • Titlovi (H2 - H6, iako su u praksi H2 i H3 vjerojatno sve što trebate brinuti)
  • Kopija glavnog stavka
  • Blokovi i citati
  • Popisi (naručeni i neuređeni)
  • Veze (zadano stanje, lebdeće stanje, aktivno / prešano stanje)
  • Obrazac za unos naljepnica
  • Podnaslovi, mali tekst i isključeni tekst
Radije bih postavio ovaj početni popis na nešto grozno, poput Monaka ili Kurira, što me prisiljava na donošenje namjernih odluka, a ne na oslanjanje na zadane vrijednosti. Nabavite više primjera teksta za postavljanje iz Gutenbergovog projekta: https://www.gutenberg.org/

Jednom kada postavite sav sadržaj koji ćete trebati dizajnirati, vrijeme je da odaberete tipove znakova.

3. Odaberite tipkovnice

Postoji umjetnost odabira tipova koji treba dugo vremena da se savladaju. Ovo su jednostavne upute za početak. Ako već znate puno o tipografiji, ovo previše pojednostavljenje vjerojatno će vas iznervirati, pa prijeđite na korak 4.

Prilikom odabira tipografije treba odgovoriti na nekoliko početnih pitanja:

Kakav je vaš proračun?

Uz tipografiju, poput većine stvari na svijetu, dobivate ono što plaćate. Postoje neke iznimke od ovog pravila, ali započnite s razmišljanjem koliko možete potrošiti. Ako imate proračun, započnite s proučavanjem ljevaonica profesionalnih vrsta poput House Industries i Hoefler & Co., ili kataloga profesionalnog tipa poput Typekita (dobra opcija ako već plaćate za Adobe CC) i MyFonts.

Ako nemate proračun - ne brinite! Na Googleovim fontovima možete pronaći mnogo sjajnih tipova, kako za preuzimanje tako i za upotrebu na webu. Izbjegavajte uporabu velikih besplatnih spremišta fonta, osim ako ne pronađete određeni font koji je dizajnirao profesionalni dizajner tipa. Amaterski slojevi mogu izgledati zanimljivo na površini, ali nedostaju im mnoge osobine i profinjenost profesionalnog lica.

Gdje će se to koristiti?

Postavljate li vrstu interneta, nativne aplikacije ili ispisa ili svega navedenog? Obavezno osigurajte da svaki tip (tip) tipa koji gledate ima licencu koja djeluje na željenom izlaznom mediju. Može biti frustrirajuće odabrati vrstu teksta, samo da biste saznali da to lice možete koristiti samo na webu, ali ne i na računalu ili obrnuto.

Odaberite stil zaglavlja

Sjećate se onih načela dizajna koje ste uspostavili u koraku 1? Oni su zaista korisni za ovu fazu. Promatrajući i vaša načela i inspiraciju za dizajn, potražite uzorke koje možete usvojiti.

Primjerice, u svojoj biblioteci inspiracije primjećujete da u naslovima često koristite dramatične serife? Možda svi koriste podebljani, kondenzirani sans-serif? Razvijte osjećaj kako određene vrste marki koriste tipografiju kako bi prenijele svoje vrijednosti. Ako riječi "kondenzirano" i "serif" za vas ništa ne znače, pročitajte kratki primer o anatomiji tipa.

Koristite ove obrasce da vas usmjeravaju, ali ne ograničavaju. Nije uvijek ispravna odluka slijediti ono što rade slične marke - ponekad je više smisla raditi upravo suprotno kako bi se istakli. Važan dio je taj da donesete namjernu odluku.

Prođite kroz svoj odabrani katalog vrsta i zapišite slovo koji će vam iskočiti. Imajte na umu pridjeve branda i imajte na umu da tipografija zaglavlja može biti malo više stilizirana nego što biste možda željeli za kopiju tijela.

Smanjite popis do 3–5 izbora i postavite naslov na svakom od tih lica prije prelaska na sljedeći korak. Spremite ih i uparite sa tipima tijela koje ćete odabrati u sljedećem koraku.

U redu s vrha: Kabel, Raleway, Source Serif, Abril Titling

Odaberite uparivanje za kopiju tijela

Jednom kada odaberete 3–5 znakovnih znakova za svoje zaglavlje, vrijeme je da odaberete dobar slovo za uparivanje s kopijom tijela.

Iako bi tipografija zaglavlja trebala biti zanimljiva, tipografija za kopiju tijela trebala bi biti čitljiva i čitljiva (tj. Prilično dosadna).

Kontrast bi trebao voditi vašu odluku ovdje. Ako ste za svoj naslov odabrali dramatičan serif, pokušajte s geometrijskim sans-serifom za svoje tijelo. Ako ste odabrali tanki, moderni sans-serif, pokušajte ga upariti s klasičnim serifom. Web lokacija fontpair.co može vam pomoći da donesete odluku s dovoljno kontrasta. Također možete koristiti jedan font za zaglavlje i kopiju tijela, a postižete kontrast promjenom težine fonta, poput podebljanih zaglavlja i redovitih za kopiranje tijela.

Također volim google "uparivanje fontova" + naziv moje odabrane usluge (npr. "Uparivanje google fontova fontova"). Postoje mnoga sjajna mjesta za inspiraciju koja pokazuju kako izgledaju par vrsta parova. Ovo su nekoliko favorita.

Volim suziti tipove tijela na najviše 2-3 zajedničke odluke (ne 2–3 po vrsti slova).

Da bi se s vrha nalazilo: Source Serif, Open Sans, Abril Text

Ispitajte ga s matricom s umetničkom pločom

Jednom kada budete imali 3–5 izbora za svoj naslov i 2–3 izbora za kopiju tijela, vrijeme je da ih isprobate. Napravite matricu s umetničkom pločom koja će vam pokazati kako svaka moguća kombinacija izgleda kada je uparena. Dok ne budete imali puno i puno prakse, slijedeće je nemoguće donositi dobre odluke o tipovima znakova a da ih ne postavite sa stvarnim tekstom. Ova matrica ploča će vam pokazati kako se znakovi međusobno umrežavaju.

Odlučiti

Zapamtite: teško je odabrati tipografiju. Nećete uvijek biti sigurni da donosite ispravnu odluku i to je u redu. Donesite najbolju odluku koja vam je tada dostupna, i krenite okolo kasnije.

Pogledajte načela svoje robne marke i počnite uklanjati opcije dok je ne smanjite na jednu opciju. Zapitajte se da li je ono što gledate bliže ili udaljenije od načela vaše marke od njezinih susjeda. Relativne odluke (znači uspoređivanje jedne stvari sa susjedom) uvijek će biti lakše nego pokušati shvatiti da li dio tipografije samostalno predstavlja pridjeve vašeg branda.

Ovaj postupak može dovesti do daljnjeg nadahnuća, koje biste trebali slijediti. Također možete otkriti da se ništa ne osjeća sasvim u redu. Nemojte se obeshrabriti - ovo je i dalje napredak. U oba slučaja napravite sigurnosnu kopiju i pokušajte pronaći bolje izbore i za zaglavlje i vrstu tijela, matrirajte ih i provjerite jeste li se približili.

Za naš primjer Alice in Wonderland, na kraju sam odabrao malu varijaciju:

Naslov: Abril Titling Uzak; Tijelo: Izvor Serif Regular

4. Osnovna veličina fonta i visina linije (omjer)

Ovo je mjesto gdje postupak postaje lakši. Vaša osnovna veličina fonta i visina osnovne linije su 2 broja na kojima možete temeljiti sva ostala mjerenja veličine i razmaka. To ne samo da će vam olakšati posao i eliminirati mnogo odluka kasnije u tom procesu, a stroga briga o tim brojevima također će osigurati da vaš konačni dizajn ima dobar ritam.

Ritam dizajna, poput glazbe, daje kompoziciju (ili poremećaj) kompoziciji. Ritam se može postići bilo u vodoravnoj ili okomitoj osi, a kada su oba smjera međusobno usklađena, stvorit ćete raspored koji se osjeća vrlo dobro uređenim. Ovo je tajni umak za razvoj skladnog tipografskog i rešetkastog sustava.

Odabir osnovne veličine fonta

Dobro je započeti sa zadanim postavkama za uređaj koji dizajnirate i prilagoditi se od tamo. Ako dizajnirate za web, zadana vrijednost je 16 piksela. iOS je 17pt, a Android 13sp.

Tehnička diverzija: Iako se sve mjerne jedinice čine različitim - a razlikuju se na suptilan način - razlike nisu izuzetno važne u ovoj fazi. Sketch mjeri fontove u veličinama točaka (pt), a to će prevesti u jedinice koje se koriste za web i android. Kad vam treba pomoć da zaspite, google razlikuje točke, piksele i referentne piksele na webu i sp / dp na androidu.

Kad spoznate zadanu veličinu, prilagodite je prema gore ili prema dolje prema vašim potrebama. Dobra je ideja upotrijebiti proširenje poput nindže fonta lica kako biste naučili koje veličine koriste druge web lokacije. NY Times, na primjer, koristi kopiju tijela 13 px, dok Medium koristi 21px. Ta mjerenja dobro služe donjim i gornjim granicama.

Razmislite o količini sadržaja koju će sučelje trebati sadržavati, čitaocima sadržaja i kontekstu u kojem će se vjerojatno gledati. Na primjer, ako dizajniram blog za čitatelje starije od 50 godina (vid nam se zamagljuje i slabovidi s vremenom), a moja pretpostavka je da će ih čitati u trenucima dosade na svojim mobilnim uređajima, odabrao bih veću veličinu fonta tijela - možda bliže 21px medija.

Suprotno tome, ako sam dizajnirao sučelje za profesionalne koordinatore društvenih medija, koji će vjerojatno proizvod koristiti na većim uređajima, tada mogu zadati veličinu fonta manje.

U konačnici ovo nije zamjena za dobro korisničko istraživanje koje vam pomaže da dublje razumijete svoje korisnike, ali ta 3 faktora pomoći će vam da donesete dostojnu odluku. Kada ste u nedoumici, sigurnije je pogriješiti što je vaš tip previše velik nego premalen. Barem, to je trenutni trend.

U ovoj fazi trebate se brinuti samo o osnovnoj veličini kopije vašeg glavnog tijela - mi ćemo se brinuti o veličinama ostatka vaše tipografije u koraku 5.

Prije nego što sletiš na konačnu veličinu, stvori nekoliko opcija na ploči s veličinama mobilnog uređaja i testiraj ih. Za to možete koristiti Sketch Mirror ili izvesti te test ploče u obliku PNG-ova i pregledati ih na svom uređaju.

Lijevo: 20px kopija tijela; Desno: 18px kopija tijela

Odabir visine osnovne linije

Nakon što se spustite na osnovnu veličinu fonta, sljedeći korak je razmišljanje o visini vaše linije. Najlakše je misliti na visinu retka srazmjerno vašoj osnovnoj veličini fonta.

Pravilo palca: odaberite visinu crte koja je negdje između 120% - 150% vaše veličine teksta. U redu je prekršiti to pravilo ako imate dobar razlog.

Što je vodeći slabiji (što odgovara većim omjerima 1,5), više će im mjesta biti razmaka između redaka. To može oku olakšati pronalazak sljedećeg retka teksta. Stilski se veći omjeri visine crta također osjećaju luksuznijim, stabilnijim i mirnijim.

Čvršći vodiči (koji odgovaraju omjerima koji su bliži 1,2, a ponekad i manje) izglađuju redove teksta. Gustoća koju stvara može biti dobra stvar, ovisno o principima dizajna koji ste postavili rano. Čvrsto vođenje ima mogućnost povećanja brzine čitanja, ali morate biti oprezni da duljine vaših linija nisu preduge ili će se to negativno odraziti na brzinu čitanja. Raspravljat ćemo o duljini retka u koraku 6.

Ako vam je potrebna pomoć u odlučivanju, alati poput ljestvice tipa omogućuju vam jednostavan način vizualizacije kako izgledaju različite kombinacije veličine fonta / visine linije. Omjer odgovara glazbenim akordima, što je proizvoljan, ali zanimljiv način odlučivanja o omjeru.

Bez obzira na omjer koji odaberete, upotrijebit ćete iste brojeve u sljedećim koracima za određivanje ljestvice i rasporeda vrste kako biste postigli horizontalni i okomiti ritam. Ali ne brinite o tome da postavite visinu linija za naslove - zasad ostanite fokusirani na kopiji tijela i o njima ćemo brinuti u sljedećem koraku.

Koristite cijele brojeve

Posljednja napomena o odabiru visine vaše linije. Dobro je držati se cijelih, parnih brojeva. S vremenom ćete koristiti visinu svoje linije za određivanje razmaka, a što je lakše dijeliti, to će vaš izgled biti čistiji. Ovo će imati više smisla nakon što počnete postavljati stvari.

Evo nekoliko kombinacija fonta veličine / linije visine koje često koristim.

  • 16/24 (omjer: 1,5, ili savršeni peti akord)
  • 18/26 (omjer: 1,44, ili blizu pojačanog četvrtog akorda)
  • 20/30 (omjer: 1,5)

Za naš primjer, odlučio sam koristiti zadanu kopiju tijela 18 px, koja je velika, ali ne prevelika i vodeći omjer 1,333 (ili ekvivalent savršenoj četvrtini). Dobije se visina linije od 23.994, koju ću zaokružiti na čak 24 px. U ovom je trenutku dobra izmjena izvorne ploče umjetničkih ploča da bi se prikazale slova, veličine i vodeće linije koje ste odabrali. Još se ne brini oko razmaka.

Još uvijek ne izgleda sjajno, ali je definitivno bolje od onoga što smo imali kad smo započeli.

5. Tipografska ljestvica

Tipografska skala pomoći će nam da donesemo dobre odluke o tome koliko trebaju biti veći naslovi, podnaslovi i naslovi.

Tipografska ljestvica nije ništa drugo nego niz veličina fonta koji dijele istu unutarnju logiku, sličnu glazbenoj ljestvici. Klasična ljestvica napreduje od 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 itd. Stvorit ćemo vlastitu tipografsku skalu na temelju omjera koji smo odabrali u koraku 4 ,

Ljestvica web mjesta bit će korisna za ovaj korak. Unesite svoju osnovnu veličinu fonta, odaberite omjer koji ste koristili i ljestvica tipa pokazat će vam kako izgleda ta progresija veličina. Skala vrste prikazuje veličine u emsima, a najlakši način razmišljanja o em-u ako ste im novi, jest da je 1em jednak vašoj osnovnoj veličini fonta. Dakle, ako je moja osnovna veličina 18px, tada je 2em = 36px (18 * 2). Da biste to preveli u Sketch, samo uzmite em vrijednost navedenu na skali razmjera i pomnožite je s vašom osnovnom veličinom fonta.

Savjet stručnjaka: Sketch vam također omogućuje da izravno radite matematiku u aplikaciji, što biste trebali iskoristiti. Recimo da su vaša osnovna veličina i visina crte 16px / 24px (omjer: 1,5). Da biste postigli sljedeći korak na ljestvici svojeg tipa, možete upisati "16 * 1.5". Za 2 koraka gore upišite "16 * 1,5 * 1,5". I tako dalje…

Preslikajte ljestvicu vrste na hijerarhiju sadržaja

Jednom kada odredite „korake“ na ljestvici svoje vrste, vrijeme je da te korake preslikate na hijerarhiju sadržaja koju ste uspostavili u koraku 2. Tekst stavka mora biti jednak osnovnoj veličini fonta ili 1em. H2 / titlovi trebaju biti korak iznad toga, a H1 / naslov trebao bi biti korak iznad toga. S druge strane, vaši natpisi i mali tekst trebaju biti korak ispod zadane veličine fonta.

Osobito kada imate posla s većim omjerima ili kada vam je potrebno više od dvije razine titlova, možda će vam trebati pola koraka da bi vaše veličine bile razumne. Pola koraka možete postići dijeljenjem udaljenosti između 1,0 i vašeg omjera. Ako je vaša osnovna veličina 16px, a vaš omjer 1,5, jedan bi puni korak bio 24px. Jedan pola koraka (s omjerom 1,25) bio bi 20 px.

6. Vodoravni razmak (tipografska mjera)

Nakon što postavite ispravne veličine za sve elemente koje dizajnirate, sljedeći korak je provjerite je li dužina linije (ili mjera) prave veličine. Pravilna duljina linije poboljšat će čitljivost i smanjiti pogreške u praćenju.

Pravilo palca: zadržite dužinu retka od 65–85 znakova za kopiju tijela, ili oko 2 1/2 abecede. Najlakši način za to je pretraživanje Googlea za besplatnim alatom za brojanje znakova.

U skici smanjite širinu tekstualnog okvira sve dok ne odgovara pravom broju znakova. Ne brinite što ćemo to učiniti previše preciznim, jer ćemo ga uklopiti u mrežu u koraku 8.

Morate se brinuti samo o pravilnoj mjeri za kopiju tijela. Veći naslovi i titlovi neće odgovarati istom broju znakova u jednom retku i to je u redu.

7. Vertikalni razmak (vertikalni ritam)

Zatim trebate osigurati da su visine linija unutarnje konzistentne. Prvi korak je osigurati da su visine crta za sve stavke kopiranja tijela postavljene na vašu osnovnu visinu.

Za sljedeće razine u vašoj hijerarhiji sadržaja, visina vaše linije trebala bi biti ili cijela ili pola više od vaše visine osnovne linije. Držanjem visina retka na temelju istog broja osiguravat ćete da će se više stupaca teksta uvijek uskladiti jedan s drugim. Ovo daje osjećaju reda i strukture dizajnu.

Kada postavite visinu retka na svaki pojedinačni tekstni blok, ustanovit ćete da se okvir za ograničavanje svakog tekstnog bloka poravnava s redovima rešetke izgleda. To znatno olakšava poravnanje, jer će Sketch tekst staviti na mrežu. Međutim, ako ne definirate visinu linije, Sketch će definirati jedan za vas (čitat će se kao "automatski" i vjerojatno neće biti ono što želite).

Evo primjera. Ako je vaša veličina fonta 20px, a omjer 1,5 - što vam daje visinu osnovne linije od 30px -, evo kako bi vaša tipografska hijerarhija mogla izgledati:

Osnovna veličina fonta: 20px
Visina osnovne linije: 30 px (omjer = 1,5)

  • Mali tekst - veličina fonta: 15px, visina retka: 15px
  • Tekst tijela - veličina fonta: 20px, visina linije: 30px
  • H3 tekst - veličina fonta: 30px, visina retka: 45px
  • H2 tekst - veličina fonta: 45px, visina retka: 60px
  • H1 tekst - veličina fonta: 60px, visina retka: 75px

Za primjer Alice u zemlji čudesa koristit ćemo množine 12 za određivanje visine naše linije jer je naša osnovna visina 24 (24/2 = 12). Pobrinuo sam se da se zaglavlja umotaju u više redaka, tako da jasno vidim učinak koji visina moje linije ima na tekst.

Oznaka tradicionalnog tipografa prikazuje veličinu fonta u položaju brojnika, a visinu crta na položaju nazivnika (podebljano u gornjem primjeru)

8. vodoravni sustav mreže

Ako počnete koristiti svoj otmjeni novi tipografski sustav bez rešetke, brzo ćete završiti nered na rukama. Prava snaga ovog slijeda koraka je kada kreirate rešetke izgleda koristeći iste brojeve koje ste koristili za uspostavljanje svog tipografskog sustava. Kad zajedno rade zajedno, vaši će izgledati čišći i organiziraniji sa mnogo manje napora.

Prvi korak je definiranje horizontalne mreže koja se u Sketchu naziva mrežom izgleda. Grid temeljen dizajn ogromna je tema koju ću se samo ukratko dotaknuti, tako da ako želite naučiti više googlea "dizajn zasnovan na mreži".

Sketch je zadani izgled za radnu površinu obično prilično savršen. Za one od vas koji imaju iskustva s web razvojem, on se temelji na mrežnom sustavu koji se koristi u bootstrapu, a koji se temeljio na klasičnom 960 grid sistemu.

Pri razmišljanju o vodoravnom rasporedu rešetki postoje 2 glavna razloga. Otvorite postavke izgleda iz izbornika View> Canvas da slijedite dalje.

  1. Ukupna širina izgleda - vaša ukupna širina ovisi o vašim ciljevima. Radi jednostavnosti, pretpostavit ću dizajn širine fluida (ili 100% širok kao ploča s umetcima). Provjerite je li označena "Oluk izvan" i ukupna širina izgleda nešto manja od širine ploče. Obično oduzmem visinu osnovne linije ili 2x visinu osnovne linije od ukupne širine izgleda, a zatim recenziram izgled.
  2. Širina oluka - Vaša širina oluka trebala bi biti jednaka broju vaše osnovne visine za ploče ploča tableta i radne površine, ili polovina visine linije za mobilne ploče. To će olakšati postizanje jednakog razmaka između elemenata, vodoravno i okomito.

Evo kako izgledaju moje postavke izgleda za grafičku ploču radne površine. Obično se odlučujem za rešetke fiksne širine na veličinama zaslona većim od 1024px jer je lakše kontrolirati horizontalnu mjeru.

Mrežni izgled rešetke

Za ploču s mobilnim uređajima mala je varijacija. Budući da imamo posla s manjim ekranima, vaša rešetka trebala bi biti puna širina vaše ploče umjetnina. Međutim, trebali biste odabrati "Oluk na vanjskoj strani" kako biste dobili poluprazni rub s obje strane vašeg izgleda rešetke.

Ne počnite još uvijek polagati svoj sadržaj. Prvo moramo uspostaviti našu vertikalnu mrežu.

9. Vertikalni mrežni sustav

Skoro si gotov! Završni korak je uspostavljanje redova rešetke koji će vam pomoći u izmjeri vertikalnog prostora između elemenata.

Ponovno otvorite postavke izgleda i potvrdite "Redovi". Visina oluka trebala bi biti upola manja od vaše širine oluka, a "Visina reda" treba biti postavljena na 1. Postavke trebaju biti iste i za desktop i za mobilne ploče.

Vaša visina oluka može biti jednaka vašoj širini oluka (24px u ovom primjeru), ali to će ograničiti sitnozrnu kontrolu koju prepolovite.

raspored

Sada kada je vaš mrežni sustav gotov, posljednji korak je postavljanje vaših elemenata i tipografije. Za svoj vodoravni izgled pobrinite se da započnete i završite elemente na stupovima, a ne na olucima.

Iz različitih tehničkih razloga koji su previše složeni za opseg ovog posta, imajte na umu da vaš dizajn neće uvijek prevesti tako uredno u kod. Ne stresi se zbog toga; koristite mrežu da biste lakše i brže donosili odluke, ali nemojte dopustiti da vas kreativno ograničavaju ako imate dobar razlog za prekid mreže.

Zakon blizine

Primarno razmatranje prilikom odlučivanja o svemirskim elementima je koncept iz Gestalt psihologije nazvan zakonom blizine. Ovaj zakon kaže da će se predmeti koji su blizu jedan drugi shvatiti kao jedna skupina. Možete upotrijebiti ovaj trik percepcije u svoju korist tako da neke elemente pomaknete bliže ili dalje, kako biste nagovijestili odnose.

Na primjer, u primjeru u nastavku, koristio sam 2 "bloka" da bih odvojio većinu elemenata. Međutim, udvostručio sam to između elemenata koje treba razdvojiti; na primjer, iznad mojih H2 naslova, te iznad i ispod blokatora. Također koristim samo jedan blok između blok-citata i teksta opisa, budući da je tekst malen i želim da bude vrlo jasno da su citat i opis povezani jedno s drugim.

Upotrijebite okvir za ograničavanje teksta za poravnavanje, a ne osnovnu crtu teksta. Ako ste umjesto ilustratora, a ne skice, možda je lakše uskladiti osnovnu liniju s mrežom, ali u skici je mnogo lakše koristiti ograničavajuće okvire za poravnavanje. Vaša metoda nije previše važna sve dok ste dosljedni.

Crtao sam crvene okvire preko tekstnih blokova kako bih demonstrirao odnose u blizini

Završavati

Konačna verzija nalazi se ispod, sa svim vodičima skrivenim.

Iako vam se može činiti puno posla za malu količinu teksta, imajte na umu da sada imate na čemu temeljiti. Za izradu korisničkog sučelja možete koristiti svoju osnovnu veličinu fonta i visinu linije. Evo jednostavnog žičanog okvira koji sam sastavio koristeći sve iste razmake i mjerenja. Iako sam bio previše pojednostavljen, nisam trebao previše razmišljati o izgledu.

Jednostavan žični okvir, temeljen na mreži mreže 18px / 24px koji smo uspostavili ranije

Možete li ovo poboljšati?

Imate li dodatne savjete koji bi mogli poboljšati ili ubrzati ovaj postupak? Imajte na umu da je ovo previše pojednostavljenje i nije namijenjeno funkcioniranju u svakoj situaciji. Ali ako imate razmišljanja o tome kako prilagoditi taj postupak kako bi on bio uglađeniji, obavijestite me.

Želite više?

Ako želite još ovakvog, surađujem s Learn Python the Hard Way, autorom Zedom Shawom, kako bih razvio cjelovit tečaj vizualnog dizajna. Prijavite se kako biste bili obaviješteni o njegovom objavljivanju ovdje: Naučite dizajnirati na težak način