Dizajn s omjerima

Prije dvije godine objavio sam „Dizajn s namjerom“ u kojem sam pisao o alatima za dizajn koji mogu obuhvatiti namjeru i odnose dizajna, osim pukih svojstava i vrijednosti.

Tada sam koristio metode poput "interpolacije" i koncepte poput "kontrasta" kako bih opisao način razmišljanja i dizajniranja u krajnostima - između minimalnog i maksimalnog stanja.

Umjesto podešavanja desetak različitih veličina fonta za naslove i kopiju tijela, moglo bi se definirati veličina i faktor razmjere fonta koji kontroliraju hijerarhiju između svih njih.

Umjesto podešavanja boje teksta i boje pozadine pojedinačno, moglo bi se definirati željeni kontrast između njih.

Umjesto podešavanja razmaka linija, veličina fonta, težine fonta, razmaka slova itd. Za različite veličine zaslona, ​​mogao bi se definirati odnos između tih svojstava i navesti ih na dinamičko prilagođavanje.

U međuvremenu sam dalje poprimio te koncepte i pretvorio ih u alat za web dizajn s ciljem pomaganja u dizajniranju preglednika u pregledniku. S Ratioom pokušavam svoje znanje o dizajnu, pisanju CSS-a i kreiranju dizajnerskih sustava pretvoriti u niz alata koji i dizajnerima i programerima omogućavaju da više istražuju i manje se brinu.

Ovaj članak objašnjava neke od mojih razmišljanja iza Ratio i detaljnije uvodi neke aspekte sučelja.

No prije nego što se pozabavim, htio bih se malo pozabaviti dizajnom i programiranjem i popularnim pitanjem "Treba li dizajnerima kodirati?"

Dizajn programa

Mislim da programiranje može biti dio procesa dizajniranja, ali ne bi trebao zahtijevati prelazak na uređivač teksta da bi se to postiglo. Stvaranje apstrakcija i uspostavljanje namjernih odnosa pojmovi su previše moćni da bi ostali izvan dizajnerskog paketa s alatima. Omogućuju rad s dinamičnim medijem i pripisivanje nekontroliranog.

Koncepti o kojima sam pisao prije dvije godine zapravo ne zahtijevaju puno koda. Ali oni zahtijevaju dopisivanje s vašim uređivačem teksta kako biste precizirali vrijednosti upisivanjem brojeva. Za dizajn mogu izvući alat za oblikovanje.

Tim Brown je u svojoj originalnoj knjizi "Fleksibilno klađenje" napisao:

Vaš dizajnerski alat djeluje protiv vas. Zaglavljen je u tradicionalnom razmišljanju apsolutnih mjerenja. To je upravo jedan od razloga zašto ljudi vrlo dobri u web dizajnu tvrde da bi dizajneri trebali naučiti pisati kod. Nijedan glavni dizajnerski alat - a radim za tvrtku koja izrađuje alate za dizajn dizajna - nije potpuno prikladan za današnju praksu unošenja teksta. Neki od najpametnijih ljudi koje poznajem grade primjerenije alate, ali za sada ćete morati donositi dizajnerske odluke pisanjem i testiranjem koda. - Tim Brown, fleksibilno postavljanje

Potpuno se slažem i vjerujem da bi način izražavanja i korištenja dinamičnijih i fleksibilnijih koncepcija dizajna u stvarnom dizajnerskom okruženju bio koristan mnogim ljudima. Za dizajnere bi bila izgubljena prilika da te tehnike prepuste programerima da smisle kako implementirati dizajn. Umjesto toga, mogli bismo koristiti aspekte programiranja - varijable, interpolaciju, funkcije - za stvarno projektiranje.

Ako koristimo dinamičke jedinice, proračune i formule, možemo početi preuzimati kontrolu nad Internetom kao dizajnerskim medijem. Kad pustimo statički način razmišljanja koji dolazi sa stranicama i umjetničkim pločama - fiksne snimke svojstveno dinamičnom mediju - možemo započeti prihvaćati stvarni potencijal weba.

Možemo početi stvarati interaktivnost. Možemo učiniti uzbudljivo djelo koje je previše često prepušteno interpretaciji programera. Možemo početi razmišljati u smislu namjere i apstrakcije. Kada razmišljamo o web dizajnu, trebamo razmišljati o cijelom sustavu i o tome kako se stvari međusobno odnose.

Riječ je o odnosima, granicama, krajnostima i svemu što je između.

Ali da bismo to učinili, potrebni su nam alati za oslobađanje uma. Trebaju nam alati koji nam izmaknu. Potrebni su nam alati koji nam omogućuju da dizajniramo brzinom misli. Trebamo alate koji su fluidni i prilagođavaju se. Trebamo alate koji nam odgovaraju. Dakle, moramo oblikovati vlastite alate kako bi oni mogli oblikovati naš rad.

Predstavljamo: Omjer

Umjesto da čekam da drugi naprave bolje okruženje za dizajn, stvorio sam ga sam. Zove se omjer Ona kombinira modularne ljestvice, fluidnu tipografiju, transformacije boja, tokene dizajna i snagu izgleda modernih preglednika.

Ratio opremljuje dizajnere istim alatima i konceptima koje programeri koriste za implementaciju složenih dizajnerskih sustava. Preuzmite kreativnu kontrolu nad tipografijom, bojom, vremenom i prostorom pomoću varijabli, ljestvice i funkcija. Cijeneći sažetak i obrazloženje, dizajneri dobivaju priliku istraživati ​​više i manje se brinuti. Otkriće umjesto guranje piksela.

Ispod haube dizajn u Ratiou pokreće CSS. Dakle, možete učiniti sve što CSS može učiniti. To sigurno nije prvi alat, ali moj je pristup malo transparentniji u vezi s osnovnim kodom i njegovim korištenjem. Ako želite, uvijek možete napraviti ručno kodiranje između.

No što je još važnije, Ratio nudi sučelja koja vam pomažu u radu s CSS-om bez da ga zapravo pišete. Pomaže vam da vizualizirate svoj sustav dizajna i stvorite apstrakcije kada to želite. To je moje osobno zalaganje za web inspektora. Volim web inspektore i što mogu učiniti. Ali ono što želim je web kreator.

Snaga CSS-a

Izgradnja alata na vrhu CSS-a dolazi s puno ugrađenih prilagodljivih dizajnerskih značajki. Samo razmislite o svim jedinicama relativne veličine s kojima možete raditi:%, em, rem, vh, vw i mnogim drugima koji nam omogućuju kodiranje odnosa za dinamičke sustave dizajna.

  • % - dio širine roditelja elementa
  • em - veličina u odnosu na veličinu fonta elementa
  • rem - veličina u odnosu na veličinu fonta elementa korijena
  • vh - dio visine prikaza
  • vw - dio širine prikaza
  • vmax - veća vrijednost bilo širine ili visine okvira za prikaz

Moderni preglednici podržavaju gotovo 500 CSS svojstava, a CSS posljednjih godina postaje sve snažniji. Jedan od najnovijih dodataka, CSS Grid, uvodi nove jedinice poput fr (frakcija), a funkcije poput calc, ponavljanja, min, max i minmax pomažu u stvaranju fleksibilnih izgleda.

S web-fontovima, OpenType značajkama, medijskim upitima, flex-boxom, mrežom, prijelazima i animacijama imamo sve mogućnosti oblikovanja potrebne za stvaranje lijepih sučelja.

Naravno, za neke će vam stvari biti bolje ako koristite Canvas, WebGL ili Shaders - ali CSS sam po sebi može učiniti puno. S ambicioznim projektima poput Houdinija, mogli bismo izmisliti nova svojstva CSS-a koja bi CSS-u mogla pretvoriti u još univerzalniji način za opisivanje dizajna s gotovo beskrajnim mogućnostima.

Automatsko dovršavanje dizajna

Nažalost, CSS je i dalje mnogima crni okvir s obzirom da je na raspolaganju toliko svojstava, a neka su svojstva naporna za unos. Dobra vijest: Ratio zna za sva ta svojstva i automatski ih dovršava za vas. Također nudi kratice za najčešće korištena svojstva, tako da možete jednostavno unijeti "ff" i pronaći "obitelj fontova". Programeri to mogu znati iz Emmeta.

Još jedna složenost CSS-a je u tome što sva svojstva imaju zadane vrijednosti, koje morate nadjačati da biste postigli željeni stil. Da biste utvrdili te zadane vrijednosti, često je potrebna upotreba web inspektora (mislite: zadani stilovi elementa forme).

Omjer vam pokazuje te izračunate vrijednosti odmah - i čak učite o zadanim vrijednostima. Jeste li znali da zadana vrijednost poravnanja teksta nije „lijevo“, već „pokrenite“? Nisam, ali ima smisla da bih podržao jezike desno-lijevo.

Sučelje za inspektore također vas potiče da ponovo koristite definirane vrijednosti nudeći vam automatsko dovršavanje. Iako je vaš uređivač koda možda već dovoljno pametan za prikupljanje definiranih svojstava, u Ratio ćete zapravo vidjeti vrijednosti koje se trebaju ponovno upotrijebiti.

Dizajnerski tokeni sa sjenilima unutar CSS inspektora.

Dizajnerski tokeni

Već mnogo godina web programeri koriste predprocesore poput Sass ili Less kako bi proširili mogućnosti CSS-a. Glavna značajka koja je došla s tim bile su varijable. Ovaj temeljni programski koncept omogućio je programerima da napišu održiviji kôd. Varijable su bile korisne za spremanje vrijednosti boja, prijelomnih točaka, razmaka, vrijednosti vremena i tipografskih značajki.

S porastom dizajnerskih sustava na webu, ponovno korištenje dizajnerskih svojstava također je došlo u obzir dizajnera proizvoda. Dizajnerski tokeni, kako ih je popularizirala Jina Anne (bivši Salesforce, sustav dizajna munje), posebno su korisni u kontekstu tematiziranja.

Omjer omogućuje stvaranje varijabli u obliku dizajnerskih tokena. Zbirke dizajnerskih tokena mogu se stvoriti za bilo koju nekretninu: boju, veličinu fonta, marginu, okvir sjene, obrub obruba,… zaista bilo što. Stvaranjem tokena dizajna dajete smislenim imenima vrijednostima. Ta će imena biti dostupna i moguće ih je pretraživati ​​u Ratioovom CSS inspektoru.

Knjižnica je prikazala dizajnerske znakove za različita svojstva. Ovdje su prikazane boje.

Mogućnost spremanja zajedničkih vrijednosti za svojstva pojedinog stila temeljno je sredstvo za održavanje dosljednosti, omogućuje ponovnu upotrebu dizajnerskih sustava, tematiziranje i također je vrlo brz način za stiliziranje - korištenjem imena tokena dizajna umjesto upisivanja dugih i kriptične vrijednosti iznova i iznova. Imenovanje postaje alat za dizajn, a ne zaostajanje u razvoju.

Tipografija tekućine

Iako se tokeni dizajna mogu dodavati ručno, oni se također mogu generirati, skalirati i interpolirati kroz prijelomne točke. To omogućava postavljanje modularne vage i fluidnu tipografiju. Umjesto da se zabrljate s pojedinačnim veličinama fonta odlomaka, naslova, blokova i sl., Jednostavno definirate osnovne veličine i omjere slova, a interpolacijom dopustite da ostane.

Ono što zvuči komplicirano i zahtijeva neko početno razumijevanje koncepta, rezultira vrlo snažnim mehanizmom za rad s tipom koji se može kontrolirati s nekoliko vrijednosti i klizača. Omjera ovdje pomaže pružanjem sučelja do inače složenih CSS formula ili Sass miksa.

Postavljanje modularnih vaga u omjeru koje mogu pomoći u tipografiji koja reagira. Veličine fonta mogu se fluidno skalirati i možete kontrolirati cijeli izgled podešavanjem nekoliko postavki i omjera.

Napomena: Postavljanje vrste tekućine nije poseban koncept koji radi samo za veličinu fonta, već je univerzalni mehanizam programiranja dizajna s Ratioom. Sučelje se odnosi na bilo koje svojstvo i može biti korisno za razmake linija, margine, podloge, boje, sjene i još mnogo toga.

Inspektori u omjeru

Ratio vam ne pokušava dati samo jednog svestranog dizajnerskog inspektora, već nudi više različitih gledišta koda. Na taj način, Ratio podržava obje strane web dizajna: istraživanje i inženjering. S Ratioom imate potpunu kontrolu nad pojedinačnim svojstvima, ali također ste u mogućnosti postaviti sustave koji orkestriraju više stvari istovremeno.

Platno u boji

Na primjer, platno u boji vizualizira veze između boja i može se koristiti za transformiranje iz jedne u drugu boju. Kao što je poznato iz CSS predprocesora, boje se mogu potamniti, osvijetliti, premjestiti u nijansu, zasićene i više. To su moćni mehanizmi ne samo za programere koji žele pisati manje koda, već i za dizajnere koji žele istražiti kombinacije boja i dizajn s temom u vidu.

Platno prikazuje osnovnu boju (plavu), boju pomične nijanse (žuta) i tamniju plavu boju koja se koristi za karticu na dnu.

Platno u boji možda neće biti potrebno za manje projekte, ali svakako sjaji složenim.

Složeni sustavi, poput operativnih sustava ili poslovnih aplikacija, mogu koristiti nekoliko razina apstrakcije boja. Na primjer, MacOS je nedavno predstavio Dark Mode i ohrabruje programere da koriste svoje varijable boja koje se nalaze unutar NSColor. Drugačiji primjer s pet razina apstrakcije je Nylas Mail koji može poslužiti kao inspiracija za postavljanje boja u Ratio.

U svakom slučaju, platno u boji može biti sjajan način objašnjavanja sustava boja suradnicima koji bi ih inače trebali zamisliti čitanjem izvornog koda ili izradom vodiča za stil. Uz Ratio, vizualizacije koje su često prepuštene dokumentaciji postaju stvarni alati.

Početni koncept prikazivanja odnosa boja između paleta. Korisničko sučelje za stvaranje ovog unutar Ratio-a danas (snimka zaslona gore) izgleda drugačije, ali koncept ostaje isti.

Vozački inspektor

Drugi primjer vizualizacije koda je vozački inspektor, sučelje koje djeluje slično vremenskoj traci u alatima za uređivanje video zapisa. Osim vremena, može se koristiti za manipuliranje vrijednostima na temelju drugih varijabli ulaza kao što su veličina prozora (prijelomne točke), položaj pomicanja (pomicanje paralaksom), položaj miša i drugo.

Svaki se selektor prikazuje sa zapisima za svako svojstvo koje ima promjenjive vrijednosti. Pomoću inspektora upravljačkog programa možete dodati, ukloniti i premjestiti ključne riječi ili promijeniti njihove odgovarajuće vrijednosti. To je jednostavan način da vidite što se inače skriva na više mjesta u vašem izvornom kodu.

Zasluga gdje je kredit dužan, Principle za Mac je bila glavna inspiracija za korištenje vremenskog sučelja više od samo vremena.

Inspektor vozača pokazuje promjenu vrijednosti preko prijelomnih točaka, vremena, položaja pomicanja i drugih ulaza promjenjivih vrijednosti.

CSS inspektor

Kada odaberete sloj u Ratio, možete vidjeti njegove CSS deklaracije u CSS inspektoru. Na taj način imate potpuni pristup i kontrolu nad stilovima - bez ograničenja. To je poput pisanja CSS-a u datoteku. No, u odnosu na uređivače teksta, Ratio filtrira šum drugih odabirača tako da vam ne treba pomicati, skakati i pretraživati ​​u svojim CSS datotekama.

Iako vam prikazuje manje, također vam pokazuje i više: Inspektor ističe korištenje varijabli (dizajnerski tokeni), grupira prijelomne točke po entitetu i prikazuje povezane odabire, poput stanja zadržavanja.

Kada želite stvoriti novo pravilo za postojeći selektor, inspektor pretražuje sve postojeće odabire. Kad upišete selektor koji je već definiran, Ratio će ući u selektor umjesto da ga ponovo stvori. Sučelje sprječava stvaranje nepotrebnih duplikacija. To je poput dodavanja novih CSS pravila na kraj datoteke, ali računalo se automatski čisti za vas.

Biranje stila

Stilsko biranje je gesturalni brojač dijelu CSS inspektora. To je kompaktno sučelje koje kombinira najvažnije aspekte tipografije, boje i prostora u radijalni izbornik. Umjesto da upisujete vrijednosti, to vam omogućuje da vrtite / pomičete vrijednosti prema gore ili prema dolje, dok istovremeno pratite sadržaj. Kontekstualni izbornik dizajniran je za istraživanje slobodnog dizajna bez ikakvih ograničenja.

Budući da podržava prečace na tipkovnici za prebacivanje između svojstava, podešavanje veličine fonta, visine retka, razmaka slova može postati fluidan proces pomicanja prema gore / dolje i prebacivanja između alata pomoću tipkovnice - i sve dok ste usredotočeni na stvarni sloj teksta.

Biranje stila kontrolira visinu linije, veličinu i težinu fonta pomicanjem gore / dolje. Korištenje miša za promjenu vrijednosti i tipkovnica za prebacivanje između svojstava je fluidan i precizan način za kontrolu numeričkih vrijednosti.

rastegljivost

Iako Ratio već nudi mnogo različitih perspektiva i sučelja na CSS-u, postoji mnogo više mogućnosti i web programeri su već ugradili alate za određene zadatke.

CSS generacijski gradijenti, alati za obrubljenje obruba, graditelji mreža, generatori paleta boja, modularne vage, alati za uparivanje fontova ... uvijek će postojati potreba i želja za izgradnjom prilagođenih sučelja i značajki. Stoga mi je važno da se omjer može proširiti i da se, na primjer, tokeni za dizajn mogu generirati vanjskim alatima.

Da bismo to ilustrirali, evo integracije skladnog generatora paleta boja tvrtke meodai. David je stručnjak za sustave boja i izgradio je na desetke različitih sučelja za rad s bojom. Koristeći se jednostavnim mehanizmom, njegova se postojeća web aplikacija može povezati s Ratioom i pružiti joj boje.

Meodaijev harmonični generator paleta boja sinkronizirano s Ratioom.

Želim da Ratio samostalno osigura osnovne jezgre, ali, kao aktivni programer Sketch i Adobe XD dodataka, mislim da je važno graditi proširivost od samog početka.

Šire razumijevanje koda

Za sada smo koristili pozivanje koda što je običan tekst u tekstualnim datotekama koje se sastavljaju i mogu pokrenuti u pregledniku. Ali bilo koji oblik komunikacije je kod. Svaka riječ koju izgovorimo, napišemo, bilo koja slika koju nacrtamo kodira informacije. Na drugom je da tumači i razumije.

Kad počnemo gubiti strah od pojma koda i programiranja, možemo početi gledati iza stvarnih principa. Logika. Uvjeti. Značenje. Pravila. To je sve s čime svi radimo, ali često zanemarujemo. Ali ako ih prigrlimo, možemo početi s dizajnom u omjeru. Moramo postati svjesni razloga koji stoje iza naših izbora i odluka. I onda su nam potrebni pravi alati kako bismo ih uhvatili i izrazili.

[...] Nadam se da vas ova knjiga nadahnjuje. Možete oblikovati riječi koje koristimo. Možete utjecati na alate za dizajn i raditi originalne radove. Možete se vratiti tradiciji i preslikati stare, stare savjete u ovaj novi svijet. - Tim Brown, Fleksibilno postavljanje, str. 205

Dok sam već duboko radio na Ratiou, čitanje ove rečenice bilo mi je veliko uvjerenje i motivacija da nastavim dalje. Hvala Tim Brown!

Budućnost Ratio

Omjer je trenutno u zatvorenoj Alfi, a sve ovdje predstavljeno funkcionira kao što je prikazano u videu. U budućnosti ću pisati o tehničkim aspektima Ratio-a i o tome kako se uklapa u vaše postojeće projekte i tijekove rada.

Od dizajnera koji žele dizajnirati u pregledniku, do dizajnera koji žele jednostavno ugađati posljednje detalje dizajna razvijenog web mjesta, pa sve do programera koji ga koriste za postavljanje dizajnerskih sustava, imam na umu brojne slučajeve korištenja.

Ako vas zanimaju buduće priče o Ratio, svakako me pratite ovdje i @useratio na Twitteru.

Prijavite se kako biste bili obaviješteni o javnom izdanju na useratio.com