Design med forhold

For to år siden offentliggjorde jeg “Designing with Intent”, hvor jeg skrev om designværktøjer, der kan fange et designs intention og forhold ud over blot egenskaber og værdier.

Dengang brugte jeg metoder som ”interpolering” og begreber som ”kontrast” til at beskrive en måde at tænke og designe i ekstremer - mellem minimum og maksimal tilstand.

I stedet for at finpusse et dusin forskellige skrifttypestørrelser til overskrifter og kropskopi, kunne man definere den grundlæggende skrifttypestørrelse og skalafaktor, der styrer hierarkiet mellem dem alle.

I stedet for at justere tekstfarve og baggrundsfarve hver for sig, kunne man definere den ønskede kontrast mellem dem.

I stedet for at justere linjeafstand, skrifttypestørrelser, skriftvægte, bogstavafstand osv. For forskellige skærmstørrelser, kunne man definere forholdet mellem disse egenskaber og få dem til at justere dynamisk.

I mellemtiden tog jeg disse koncepter videre og forvandlede dem til et webdesignværktøj, der havde til formål at hjælpe design til browseren, i browseren. Med Ratio forsøger jeg at vende min viden om design, skrive CSS og skabe designsystemer til en række værktøjer, der giver både designere og udviklere mulighed for at udforske mere og bekymre sig mindre.

Denne artikel forklarer nogle af mine tanker bag Ratio og introducerer nogle aspekter af grænsefladen mere detaljeret.

Men inden jeg går ind på det, vil jeg uddybe design og programmering og det populære spørgsmål ”Bør designere kode?”

Programmeringsdesign

Jeg tror, ​​at programmering kan være en del af en designproces, men det skal ikke kræve, at der skiftes til en teksteditor for at gøre det. Oprettelse af abstraktioner og etablering af forsætlige relationer er begreber, der er for magtfulde til at forblive uden for en designer's værktøjskasse. De gør det muligt at arbejde med et dynamisk medium og temme det ukontrollerbare.

De koncepter, som jeg skrev for to år siden, kræver faktisk ikke meget kode. Men de kræver fiddling med din teksteditor for at finjustere værdier ved at indtaste numre. De kræver at komme ud af designværktøjet for at designe.

I sin ægte bog "Flexible Typesetting" skrev Tim Brown:

Dit designværktøj arbejder imod dig. Det sidder fast i det traditionelle tankesæt om absolutte målinger. Dette er netop en grund til, at folk, der er meget gode til webdesign, argumenterer for, at designere skal lære at skrive kode. Intet mainstream-designværktøj - og jeg arbejder for et firma, der fremstiller mainstream-designværktøjer - er helt passende til praksis med at sætte i dag. Nogle af de smarteste mennesker, jeg kender, bygger mere passende værktøjer, men i øjeblikket skal du tage designbeslutninger ved at skrive og teste kode. - Tim Brown, fleksibel indstilling

Jeg er helt enig og tro på, at en måde at udtrykke og bruge mere dynamiske og fleksible designkoncepter i et faktisk designmiljø ville være fordelagtigt for mange mennesker. Det ville være en tabt mulighed for designere at overlade disse teknikker op til udviklere til at finde ud af, hvordan man implementerer design. I stedet kunne vi bruge aspekter af programmering - variabler, interpolering, funktioner - til rent faktisk at designe.

Hvis vi bruger dynamiske enheder, beregninger og formler, kan vi begynde at tage kontrol over nettet tilbage som et designmedium. Når vi slipper det statiske tankesæt, der følger med sider og tegnebræt - faste snapshots af et iboende dynamisk medium - kan vi begynde at omfavne det virkelige potentiale på nettet.

Vi kan begynde at designe interaktivitet. Vi kan udføre det spændende arbejde, der alt for ofte overlades til udviklerens fortolkning. Vi kan begynde at tænke i form af intention og abstraktion. Når vi tænker på webdesign, er vi nødt til at tænke på hele systemet, og hvordan tingene hænger sammen.

Det handler om forhold, grænser, ekstremer og alt derimellem.

Men for at gøre det, har vi brug for værktøjer til at frigøre vores sind. Vi har brug for værktøjer, der kommer ud af vejen. Vi har brug for værktøjer, der giver os mulighed for at designe med tankehastigheden. Vi har brug for værktøjer, der er flydende og tilpasning. Vi har brug for værktøjer, der passer til os. Derfor er vi nødt til at forme vores egne værktøjer, så de kan forme vores arbejde.

Introduktion: Ratio

I stedet for at vente på, at andre skal bygge et bedre designmiljø, har jeg skabt det selv. Det kaldes forhold. Det kombinerer modulskalaer, flydende typografi, farvetransformationer, designtokener og moderne browsers layoutstyrke.

Ratio udstyrer designere med de samme værktøjer og koncepter, som udviklere bruger til at implementere komplekse designsystemer. Tag kreativ kontrol over typografi, farve, tid og rum ved hjælp af variabler, skalaer og funktioner. Ved at værdsætte det abstrakte og rationelle får designere chancen for at udforske mere og bekymre sig mindre. Opdag i stedet for at skubbe pixel.

Under hætten er design i Ratio drevet af CSS. Således kan du gøre alt, hvad CSS kan gøre. Det er bestemt ikke det første værktøj, der gør det, men min tilgang er at være lidt mere gennemsigtig omkring den underliggende kode og bruge den. Hvis du vil, kan du altid lave noget håndkodning imellem.

Men endnu vigtigere er, at Ratio leverer grænseflader, der hjælper dig med at arbejde med CSS uden egentlig at skrive det. Det hjælper dig med at visualisere dit designsystem og skabe abstraktioner, når du vil. Det er min personlige opgave på webinspektøren. Jeg elsker webinspektører og hvad de kan gøre. Men hvad jeg vil have er en webskaber.

Kraften i CSS

Bygning af et værktøj oven på CSS kommer med en masse indbyggede responsive designfunktioner. Bare tænk på alle enheder i relativ størrelse, som du kan arbejde med:%, em, rem, vh, vw og mange flere, der gør det muligt for os at kode forhold for dynamiske designsystemer.

  • % - en brøkdel af elementets overordnede bredde
  • em - en størrelse i forhold til elementets skriftstørrelse
  • rem - en størrelse i forhold til rodelementets skriftstørrelse
  • vh - en brøkdel af udsigtets højde
  • vw - en brøkdel af visningens bredde
  • vmax - den større værdi af enten bredden eller højden på visningen

Moderne browsere understøtter næsten 500 CSS-egenskaber, og CSS er blevet mere og mere magtfuld i de senere år. En af de seneste tilføjelser, CSS Grid, introducerer nye enheder som fr (fraktion), og funktioner som calc, gentag, min, max og minmax hjælper med at skabe fleksible layouts.

Med web-skrifttyper, OpenType-funktioner, mediespørgsmål, flex-box, gitter, overgange og animationer har vi alle de stylingsmuligheder, der er nødvendige for at skabe smukke grænseflader.

For nogle ting er du selvfølgelig bedre til at bruge Canvas, WebGL eller Shaders - men CSS på egen hånd kan gøre meget. Og med ambitiøse projekter som Houdini kan vi muligvis opfinde nye CSS-egenskaber, der kunne gøre CSS til en endnu mere universel måde at beskrive design med næsten uendelige muligheder på.

Auto-komplet til design

Desværre er CSS stadig en stor sort kasse for mange, da der er så mange egenskaber, der er tilgængelige, og nogle egenskaber er kedelige at skrive. Den gode nyhed: Ratio ved om alle disse egenskaber og udfylder dem automatisk for dig. Det giver også forkortelser for de mest anvendte egenskaber, så du kan bare skrive “ff” for at finde “font-family”. Udviklere ved det muligvis fra Emmet.

En anden kompleksitet med CSS er, at alle egenskaber har standardværdier, som du skal tilsidesætte for at opnå den ønskede stil. For at finde ud af disse standardværdier er det ofte nødvendigt at bruge webinspektøren (tænk: standardformularelementstilarter).

Ratio viser dig de beregnede værdier med det samme - og du lærer endda om standardværdierne. Vidste du, at standardværdien for tekstjustering ikke er "venstre", men "start"? Det gjorde jeg ikke, men det giver mening for at støtte sprog fra højre til venstre.

Inspektørgrænsefladen opfordrer dig også til at genbruge definerede værdier ved at tilbyde dig autofuldførelse. Selvom din kodeditor allerede allerede er smart nok til at indsamle definerede egenskaber, vil du i Ratio faktisk se de værdier, der er beregnet til at blive genbrugt.

Box-skygge design-symboler i CSS-inspektøren.

Designtegn

I mange år har webudviklere brugt forprocessorer som Sass eller Less for at udvide CSS-funktionerne. En hovedfunktion, der fulgte med disse, var variabler. Dette grundlæggende programmeringskoncept gjorde det muligt for udviklere at skrive mere vedligeholdelig kode. Variabler har været nyttige til at gemme farveværdier, breakpoints, mellemrumsværdier, timingværdier og typografiske funktioner.

Med fremgangen i designsystemer på nettet er genanvendelse af designegenskaber også ankommet i tankegangen for produktdesignere. Designtegn, som populariseret af Jina Anne (tidligere Salesforce, Lightning Design System), er især nyttige i forbindelse med tema.

Ratio muliggør oprettelse af variabler i form af designtokener. Samlinger af design-tokens kan oprettes til enhver egenskab: farve, skriftstørrelse, margin, kasseskygge, kantradius, ... virkelig hvad som helst. Ved at oprette design-tokens giver du meningsfulde navne på værdier. Disse navne vil derefter være tilgængelige og søgbare i Ratios CSS-inspektør.

Biblioteket viste design-tokens til forskellige egenskaber. Her vises farver.

At være i stand til at gemme fælles værdier for individuelle stilegenskaber er et grundlæggende værktøj til at opretholde konsistens, muliggør genbrug af designsystemer, tema og er også en virkelig hurtig måde at style på - ved at bruge navnet på et designtoken i stedet for at skrive lang og kryptiske værdier igen og igen. Navngivning bliver et designværktøj snarere end en eftertanke i udviklingen.

Fluid Typography

Mens design tokens kan tilføjes manuelt, kan de også genereres, skaleres og interpoleres på tværs af breakpoints. Dette muliggør opsætning af modulskalaer og fluidtypografi. I stedet for at kommunikere med individuelle skrifttypestørrelser på afsnit, overskrifter, blokquoter osv., Definerer du simpelthen basefontstørrelser og skalaforhold og lader interpolering gøre resten.

Det, der muligvis lyder kompliceret og kræver en vis indledende forståelse af konceptet, resulterer i en meget kraftig mekanisme til at arbejde med type, der kan styres af et par værdier og glider. Ratio hjælper her ved at tilvejebringe en grænseflade til ellers komplekse CSS-formler eller Sass-mixins.

Opsætning af modulskalaer i forhold, der kan hjælpe med lydhør typografi. Skriftstørrelser kan skaleres flydende, og du kan kontrollere et helt layout ved at justere et par indstillinger og forhold.

Bemærk: Opsætning af væsketype er ikke et specielt koncept, der kun fungerer til skriftstørrelser, men det er en universel mekanisme for programmeringsdesign med Ratio. Interfacet gælder for enhver egenskab og kan være nyttigt til linjeafstand, marginer, polstringer, farver, skygger og mere.

Inspektører i forhold

Ratio forsøger ikke bare at give dig en enkelt designinspektør til alle formål, men tilbyder i stedet flere forskellige perspektiver på kode. På den måde understøtter Ratio begge sider af webdesign: efterforskning og teknik. Med Ratio har du fuld kontrol over individuelle egenskaber, men du er også i stand til at opsætte systemer, der orkestrerer mere end én ting ad gangen.

Farve lærred

For eksempel visualiserer farveduken forbindelser mellem farver og kan bruges til at omdanne fra en farve til en anden. Som kendt fra CSS-forprocessorer kan farver blive mørkere, lysere, skiftet i farvetone, desatureret og mere. Dette er effektive mekanismer, ikke kun for udviklere, der ønsker at skrive mindre kode, men også for designere, der ønsker at udforske farvekombinationer og design med tanke på dem.

Lærredet viser en basisfarve (blå), en farvetone-farvet farve (gul) og en mørkere blå farve, der bruges til kortet i bunden.

Farve lærredet er muligvis ikke nødvendigt til mindre projekter, men skinner bestemt med komplekse projekter.

Komplekse systemer, såsom operativsystemer eller forretningsapplikationer, kan bruge flere niveauer af farveabstraktion. For eksempel introducerede MacOS for nylig Dark Mode og opfordrer udviklere til at bruge deres farvevariabler findes i NSColor. Et andet eksempel med fem abstraktionsniveauer er Nylas Mail, der kan tjene som inspiration til opsætning af farver i forholdet.

Under alle omstændigheder kan farve lærred være en god måde at forklare farvesystemer til samarbejdspartnere, som ellers skulle forestille sig det ved at læse kildekoden eller ved at opbygge en stilguide. Med Ratio bliver visualiseringer, der ofte overlades til dokumentation, faktiske værktøjer.

Første koncept med at vise farveforhold mellem paletter. Brugergrænsefladen til at oprette dette inden i forholdet i dag (skærmbillede ovenfor) ser anderledes ud, men konceptet forbliver det samme.

Driverinspektør

Et andet eksempel på visualisering af kode er driverinspektøren, en grænseflade, der fungerer svarende til en tidslinje i videoredigeringsværktøjer. Ud over tid kan det bruges til at manipulere værdier baseret på andre variable indgange såsom vinduesstørrelse (breakpoints), rulleposition (parallax scrolling), museposition og mere.

Hver valg vises med spor for hver egenskab, der har ændrede værdier. Du kan bruge driverinspektøren til at tilføje, fjerne og flytte nøglerammer eller ændre deres tilsvarende værdier. Det er en enkel måde at se, hvad der ellers er skjult flere steder i din kildekode.

Kredit, hvor kredit skyldes, Principle for Mac har været hovedinspirationen til at bruge en tidslinjegrænseflade i mere end bare tid.

Driverinspektøren viser ændringen af ​​værdier på tværs af breakpoints, tid, rulleposition og andre variable indgange.

CSS-inspektør

Når du vælger et lag i forholdet, kan du se dets relaterede CSS-erklæringer i CSS-inspektøren. På den måde har du fuld adgang og kontrol over stilarter - ingen grænser. Det er som at skrive CSS til en fil. Men sammenlignet med tekstredaktører filtrerer Ratio støj fra andre vælgere, så du ikke behøver at rulle, hoppe og søge rundt i dine CSS-filer.

Når du viser dig mindre, viser det dig også mere: Inspektøren fremhæver brugen af ​​variabler (designtokener), grupperer breakpoints pr. Egenskab og viser relaterede vælgere, såsom svævertilstande.

Når du vil oprette en ny regel for en eksisterende vælger, søger inspektøren gennem alle de eksisterende vælgere. Når du skriver en vælger, der allerede er defineret, vil Ratio indtaste vælgeren i stedet for at oprette den igen. Grænsefladen forhindrer dig i at foretage unødvendige duplikationer. Det er som at tilføje nye CSS-regler til slutningen af ​​en fil, men computeren renser automatisk op for dig.

Style Dial

Stilskiven er en gestus-moddel for CSS-inspektøren. Det er en kompakt grænseflade, der kombinerer de vigtigste aspekter af typografi, farve og rum i en radial menu. I stedet for at skrive værdier giver det dig mulighed for at dreje / rulle værdier op eller ned, mens du holder øje med indholdet. Den kontekstuelle menu er designet til freestyle-designudforskning uden begrænsninger.

Da det understøtter tastaturgenveje til at skifte mellem egenskaber, finjustering af fontstørrelse, linjehøjde, bogstavafstand kan blive en flydende proces med at rulle op / ned og skifte mellem værktøjer ved hjælp af tastaturet - alt sammen med fokus på det egentlige tekstlag.

Stilskiven styrer linjens højde, skriftstørrelse og fontvægt ved at rulle op / ned. Brug af musen til at ændre værdier og tastatur til at skifte mellem egenskaber er en flydende og præcis måde at styre numeriske værdier på.

udvidelsesmuligheder

Mens Ratio allerede tilbyder mange forskellige perspektiver og grænseflader på CSS, er der mange flere muligheder, og webudviklere har allerede bygget værktøjer til specifikke opgaver.

CSS-gradientgeneratorer, værktøjer til grænseradius, gitterbyggere, farvepaletgeneratorer, modulskalaer, fontparringsværktøjer,… der vil altid være behov og ønske om at oprette brugerdefinerede grænseflader og funktioner. Derfor er det vigtigt for mig, at Ratio kan udvides, og at for eksempel designtokener kan genereres af eksterne værktøjer.

For at illustrere dette er her en integration af den harmoniske farvepaletgenerator af meodai. David er ekspert, når det kommer til farvesystemer, og han har bygget snesevis af forskellige grænseflader til at arbejde med farve. Ved hjælp af en simpel mekanisme kan hans eksisterende webapp kobles ind i forholdet og give farver til det.

Meodais harmoniske farvepaletgenerator synkroniseres med forholdet.

Jeg vil have, at Ratio skal levere kerneværktøjerne på egen hånd, men som en aktiv Sketch- og Adobe XD-pluginudvikler, synes jeg det er vigtigt at opbygge udvidbarhed lige fra starten.

En bredere forståelse af kode

For tiden er vi vant til at kalde kode, hvad der er almindelig tekst i tekstfiler, der bliver samlet og kan køre i en browser. Men enhver form for kommunikation er kode. Ethvert ord, vi siger, skriver, ethvert billede, vi tegner, koder information. Det er op til den anden at fortolke og forstå.

Når vi begynder at miste vores frygt for udtrykket kode og programmering, kan vi begynde at se bag de faktiske principper. Logikken. Betingelserne. Betydningen. Reglerne. Det er det, vi alle arbejder med, men forsømmer ofte. Men hvis vi omfavner dem, kan vi begynde at designe med forhold. Vi er nødt til at blive opmærksomme på årsagerne bag vores valg og beslutninger. Og så har vi brug for de rigtige værktøjer til at fange og udtrykke dem.

[…] Jeg håber, at denne bog inspirerer dig. Du kan forme de ord, vi bruger. Du kan påvirke designværktøjer og udføre originalt arbejde. Du kan vende tilbage til tradition og kortlægge dyrebare, gamle råd om denne nye verden. - Tim Brown, fleksibel indstilling, s. 205

Mens jeg allerede dybt arbejdede med forholdet, var det at læse denne sætning en stor forsikring og motivation til at fortsætte bevægelsen. Tak Tim Brown!

Ratio's fremtid

Ratio er i øjeblikket i lukket Alpha, hvor alt det her, der er præsenteret her, er funktionelt som vist i videoen. I en fremtidig historie vil jeg skrive om tekniske aspekter af forholdet, og hvordan det passer ind i dine eksisterende projekter og arbejdsgange.

Fra designere, der ønsker at designe i browseren, til designere, der blot ønsker at finpusse de sidste designdetaljer på et udviklet websted, helt til udviklere, der bruger det til at konfigurere designsystemer, der er mange brugssager, som jeg har i tankerne.

Hvis du er interesseret i fremtidige historier om Ratio, skal du sørge for at følge mig her og @useratio på Twitter.

Tilmeld dig for at blive underrettet om den offentlige udgivelse på useratio.com