Hvis du har vært i designverdenen en stund, har du sannsynligvis hørt disse vilkårene: design framework, user interface framework, user interface kit, or pattern library. De refererer alle til det samme: et system med designstandarder, maler, brukergrensesnittmønstre og komponenter som brukes i hele produktet og tjener dets formål. designspråk . Hvis du ikke har bygget et designrammeverk før, kan det være overveldende og tidkrevende å starte en, men det vil øke hastigheten på designarbeidet ditt og gjøre det mer effektivt generelt.

La oss beskrive hovedproblemene et designrammeverk løser, hvorfor du trenger en og komponentene du må lage når du bygger en. Du finner et Sketch UI-rammeverk som kan lastes ned gratis senere i artikkelen som lar deg lage ditt eget designrammeverk.

Et designrammeverk i Sketch

Hva er et designrammeverk?

Hvert UI-design starter med et tomt tegnebrett, og hver designer har en prosess de bruker for å forvandle det blanke lerretet til et fullt fungerende produkt. Denne prosessen inkluderer alle de små designkomponentene som er opprettet, og trinnene designeren tar for å bygge en sammenhengende helhet, fra farger til knapper og alt i mellom.

Dette arbeidet er ofte repeterende og kan konsolideres og effektiviseres ved å lage et system av sammenhengende mønstre og komponenter. Med andre ord, et designrammeverk .

Designrammer løser flere problemer, inkludert:

• Eliminere inkonsekvenser i produktdesign.
• Øk samarbeid, effektivitet og kommunikasjon mellom design- og produktteam.
• Gjør designoppdateringer senere i designprosessen mindre frustrerende.

Det første problemet: inkonsekvens i produktet

Konsistens forvandler et godt design til et flott design. Konsistens forbedrer UX, total brukervennlighet og effektiviteten som brukerne kan bruke digitale produkter med. Uansett om det er et lite nettsted, en app eller et stort SaaS-produkt, bringer inkonsekvenser i design utseendet, følelsen, troverdigheten og Brukererfaring av produktet.

Uoverensstemmelser oppstår ofte når et lag eller et lag designer du gjør ting for fort eller gjør endringer på farten. Noen ganger svarer en designer på at en kunde eller interessent ber om noe annet ved raskt å vise dem hvordan disse endringene vil se ut. Plutselig kommer designteamet over fire forskjellige nyanser av grønt, og ingen er sikre på hva den primære knappefargen er.

Designrammer løser dette problemet ved å etablere konsistente standarder.

Det andre problemet: samarbeids- og kommunikasjonshull

Ofte under utviklingsprosessen når det er flere teammedlemmer involvert med mange som jobber med designet på forskjellige punkter i prosessen, kan det være forvirrende hvis det ikke er noen sett med standarder som kan lede teamet.

Et designrammeverk øker samarbeidet og effektiviteten ved å effektivisere kommunikasjonsprosessen og gi klare standarder og retning. Ikke mer tid blir kastet bort på å løpe rundt og prøve å finne ut hvilken farge eller skrift som er riktig å bruke.

Et ofte sett problem: tre forskjellige stiler på samme knapp

Det tredje problemet: endringer i utformingen av den siste fasen

Hvor mange ganger må designere foreta en engangsfargeendring i designfilen med 120 allerede utviklede desktop maler? Hvor mange ganger er det nødvendig å endre et ikon som er en del av 200 komponenter?

Endring er uunngåelig gjennom hele designprosessen, det er måten produktet forbedres på, men det skjer ofte senere enn de ønsker designerne . Et designrammeverk gjør endringer i siste trinn mye mindre smertefulle, fordi det er bygget på et system med objektorienterte komponenter. Bytt den en gang, og den krøller seg gjennom hele designet.

Hvordan lage et designrammeverk

Nå som vi vet hva et designrammeverk er og problemene det løser, la oss snakke om hvordan du lager en (og hva som er i nedlasting av Sketch UI-sett som er gitt senere i artikkelen).

Designrammeverket som brukes for denne artikkelen er en enkelt skissefil som presenteres ved hjelp av et spesifikt hierarki av komponenter, kjent i Sketch som 'symboler'. Disse symbolene gjør det enkelt å implementere endringer i hele filen med et enkelt klikk. En endring i 'master' -komponenten - 'symbolet' - gjenspeiles øyeblikkelig i alle andre tilfeller.

Design rammethierarki

For å lage et velfungerende designrammeverk, start med å sette opp et sterkt visuelt hierarki. Design de mest allestedsnærværende komponentene som farge og typografi først. Deretter jobber du deg ned til de mindre, som knapper og inngangskomponenter. Tenk på det som å bygge et hus - bygg fundamentet først, og legg deretter til de andre delene etter hvert som prosjektet skrider frem.

Ingen farge og plass: former, skygger og typografi er bare et sett med usynlige parametere.

Farge

Farge er det viktigste elementet i et rammehierarki UI-design - hver komponent i et design bruker farge. Farge fremkaller sterke reaksjoner og følelser hos mennesker og angir produktets generelle utseende, følelse og tone.

En god praksis er å dele fargene i grupper:

1. Primærfargene er de viktigste merkefargene, vanligvis brukt til å lage det generelle fargevalget for et prosjekt og for viktige komponenter som knapper.

2. Sekundære farger de utfyller hovedpaletten - de er ofte forskjellige nyanser, metninger eller fargetoner i primærfargene. Gråtone Det brukes ofte til typografi eller bakgrunn. Et sted mellom fem og åtte nivåer av grått skal være tilstrekkelig.

3. Systemkommentarfarger de er en viktig gruppe som designere ofte glemmer. Disse fargene viser systemmeldinger, inkludert varsler, advarsler og varsler.

Hver farge er et eget symbol i skissefilen - dette sikrer at når en farge endres, endres også alle elementene som bruker den fargen.

Rutenett: Designområdet

Når fargene er valgt, er neste trinn å sette opp et rutenett. Et rutenett holder alle de andre komponentene på siden på riktig sted og rekkefølge. Dette er det generelle designområdet.

Det er to typer nett: vertikal Y horisontal .

Det vertikale rutenettet er det mest brukte, og det holder alt horisontalt. Det er mange populære nettsystemer som Støvelhempe eller det eldre 960px-rutenettet. Et horisontalt rutenett er ikke så vanlig. Et horisontalt rutenett brukes til typografi. Skaper en vertikal rytme for avsnitt og blir ofte sett i aviser.

Modifikatorer: stilistiske regler

Foruten fargen og rutenettet, er det en komponent til som er høyt i hierarkiet i designrammeverket: modifikatorer. De kan ikke brukes som frittstående komponenter: de brukes til å modifisere eller style andre.

Denne gruppen bringer stil til et prosjekt og inkluderer komponenter som er ansvarlige for estetikk, for eksempel former eller nyanser ; å endre dem individuelt i de senere fasene av prosjektet kan være tungvint.

Behandle modifikatorer som parametere for alle påfølgende byggesteiner. Lag skissesymboler på tre forskjellige måter: rektangel, avrundet rektangel og sirkel. Bruk disse figurene til å lage hver av komponentene i et brukergrensesnitt, inkludert knapper, inngangskomponenter, skjemafelt og så videre. og bakgrunnselementer.

Denne teknikken tillater det til designere fokusere mer på UX enn på utseendet til UI-komponentene. Det gjør det også enkelt å gå tilbake til den grunnleggende formen, endre stil (for eksempel hjørneradius), og alt som er tilkoblet oppdateres automatisk.

Å lage figurer som skissesymboler er god praksis, da de kan brukes til å bygge påfølgende komponenter. Eventuelle endringer i de underliggende figurene vil umiddelbart reflekteres i disse komponentene.

Typografi: innholdet

Typografi er den siste hovedkomponenten i designrammen. Den kan deles inn i to grupper: statisk kopi av siden, som overskrifter og avsnitt; og interaktiv kopiering av komponenter, for eksempel knapper, navigering eller inndatafelt.

Design stilen og størrelsen på alle overskrifter (H1, H2, H3, etc.) og avsnitt. Den statiske kopien av siden har generelt ikke mange stilistiske variasjoner (farge eller vekt). Den eneste variasjonen, i forhold til den statiske sidekopiestilen, er om det er en lys eller mørk bakgrunn. Derfor er det best å lage to fargesett for å sikre at statisk sidekopi fungerer på begge.

Stilig kroppstekst på en lys og mørk bakgrunn

Kopien som vises i interaktive komponenter, for eksempel knapper eller systemfeedbackmeldinger, kan ha flere varianter. For eksempel kan systemtilbakemeldingsmeldinger vises i fire forskjellige bakgrunnsfarger, avhengig av typen melding (advarsel, feil, suksess osv.) - knappetiketter kan også ha forskjellig bakgrunn.

Å inkludere denne gruppen i designrammeverket er nyttig når du tenker globalt på typografi. Først oppretter du den vanlige tekstetiketten på knappen, og deretter lager du variantene; Dette vil bidra til å unngå å ende opp med for mange skriftstørrelser. Når du oppretter nye UI-komponenter i rammeverket, må du alltid sjekke om det er en eksisterende skriftstil som passer.

Farger som skissesymboler kan ikke brukes med typografi; endringer kan imidlertid brukes gjennom Sketch Styles. Det er god praksis å bruke det allerede opprettede fargebiblioteket og oppdatere disse tekststilene hvis en farge endres i biblioteket.

Ikoner

Det er to grupper av ikoner i et layoutsystem: informasjons- og brukergrensesnittikoner. Den første gruppen er vanligvis en del av en illustrasjonssett og det brukes ikke til noen UI-interaksjonskomponenter (som knapper). Den andre gruppen - brukergrensesnittikoner - gir mening til de mer komplekse komponentene: knapper, etiketter eller tabeller, mens de tar veldig liten plass. Ikonene i brukergrensesnittet kan også brukes som utløsere for funksjoner som 'rediger', 'kopier', 'nedlasting' og 'slett'. Begynn med enkle ikoner som brukes for brukergrensesnittinteraksjoner, for eksempel piler, 'legg til' (+) eller 'lukk' (x). En god praksis er å designe dem i forskjellige størrelser (12px, 16px, 24px 32px).

Viktige og enkle sett med brukergrensesnittikoner opprettet som skissesymboler som vil bidra til å skape andre brukergrensesnittelementer i designrammen.

Komponenter

Knapper

Knapper er utvilsomt en av de viktigste komponentene i design av brukergrensesnitt, og gjennom årene har har gått gjennom mange endringer ettersom designtrender har kommet og gått.

Når du designer knapper, må du sørge for å designe deres individuelle “tilstander”. Som regel har en knapp flere tilstander og gir visuell tilbakemelding til brukerne for å indikere gjeldende tilstand (inaktiv, rullet, presset, deaktivert, aktiv, etc.). Det er to måter å gjøre dette på: den første er å utforme utseendet til knappene hver for seg (vanlig, aktiv, rullet og trykket). Denne løsningen kan være tidkrevende, men gir da mye fleksibilitet. (Denne metoden ble brukt i gratis Sketch UI-rammeverket inkludert nedenfor.)

Den andre måten er å designe alle statene basert på den opprinnelige. For eksempel lage en Skissesymbol som vil endre farge, metning eller lysstyrke i hver stat. For å gjøre dette, plasser symbolet som et knappelag med en av skissens blandingsmodi: fargetone, metning eller overlegg. Bruk et svart rektangel med fargemiksingsmodus på vanlig knapp for å endre metning. Endring av overleggsopasiteten senere gjør det til en mer eller mindre mettet knapp.

Hver knapp er laget av tidligere opprettede symboler. Hvis hjørneradiusen er satt til et underliggende symbol, vil det påvirke alle knappene.

Inngangskomponenter

Inngangene lar brukeren kommunisere med applikasjonen og laste opp data. Bruk av komponenter som inndatafelt sammen med knapper gjør det mulig å lage en enkel webapplikasjon. Som med knapper er det best å lage inngangskomponenter med forskjellige tilstander. Det avhenger av designrammeverket, men i det minste bør du vurdere å lage tomme, fylte og feiltilstander.

Komplekse komponenter

På dette stadiet kan designrammeverket betraktes som komplett fordi det har alt du trenger for å lage et funksjonelt produkt. Det er imidlertid ofte verdt å bruke mer tid på å lage mer komplekse brukergrensesnittkomponenter for brukergrensesnittrammeverket, for eksempel kort, tabeller, datoseparatorer, diagrammer og skjemaer.

Seksjoner

På dette stadiet kan designrammeverket videreutvikles ved å lage de vanligste delene av applikasjoner eller nettsteder. Ved å designe ting som navigering, overskrifter, en 'om oss' -seksjon og gallerier, kan en designer spare tid i de senere fasene av et prosjekt. Å lage flere varianter av forskjellige deler av produktet vil gjøre det lettere å få plass til forskjellige prosjekter.

God praksis i designrammeverket

Test hele tiden designrammen

Testing skal inkluderes i alle design- eller utviklingsprosesser. Unngå feil og manglende komponenter når du lager små designbiter og stresstesting. For eksempel sjekker den om endring av en komponent opprettet i begynnelsen også endrer en nylig lagt til komponent.

Lag enkle brukergrensesnittkomponenter

Hold komponentene enkle mens du tenker på så mange designtilfeller som mulig, så i fremtiden kan enhver stil dekkes. Det er best å lage brukergrensesnittkomponenter med enkle former, og holde dem fleksible nok til å enkelt passe inn i ethvert prosjekt.

Ikke fokus på bare en stil

Et designrammeverk bør være universelt, så i stedet for å fokusere på en bestemt stil, fokuser på komponentene som kan brukes til å lage en stil.

Lag ditt eget designrammeverk

Ta deg tid i begynnelsen til å lage et designrammeverk i ditt neste prosjekt. Du vil oppdage at det forbedrer den generelle designprosessen, øker effektiviteten og forbedrer konsistensen i produktdesignet, og forbedrer brukervennligheten. Du sparer tid, kommuniserer designideer mer effektivt og gjør kunder og interessenter glade når disse ideene kommer til liv på bare sekunder på 120 Sketch-tegnebrett.

Klar til å starte ditt eget designrammeverk?

Last ned Sketch-filen her . Instruksjoner er inkludert om hvordan du bruker den.

Inspirerende designsystemer og rammer for brukergrensesnitt

En av de beste måtene å forstå mer om designrammer er å undersøke hvordan store etablerte selskaper bruker dem. Følg denne typen selskaper og kjenn deres tilnærming. Googles materialdesign - for tiden en av de mest populære designrammene i verden. Lær hvordan Google lagrer hele designprosessen og bygger et nyttig hierarki av komponenter.

IBMs designspråk - IBM deler hele designprosessen, inkludert en detaljert forklaring av alle detaljer.

De deler også mange ressurser fra designspråket, fra enkle ikoner til et UI-animasjonsbibliotek.

Atlassian –En annen flott læringsressurs. hans produkt stil guide det er et flott designsystem å studere. De deler sine Web GUI-pakke , en skissefil med mange komponenter og konsepter.