Skitsevejledninger

Sådan ændres dit design på farten

Lær hvordan du foretager hurtige ændringer af dine designaktiver på kort tid

Dette er en del af Frames for Sketch - række korte tutorials om bedste praksis, vi brugte til at gøre Frames Kit virkelig nyttigt værktøj. Vi dækker over, hvordan du kan gøre enhver ændring mindre smertefuld og generere ubegrænsede variationer til dine designs med eksemplet på en enkel knap.

Hvis du ikke er interessant i at læse alle disse ord, er du velkommen til at downloade tutorial-filen lige her - Dynamic Buttons Tutorial

Hvis du er noget som mig, bruges en stor del af din tid på wireframes, der altid skal diskuteres, før du går over til design af høj kvalitet. Vi ved alle, hvor vigtig denne fase er, når man opretter websteder og applikationer, er det afgørende tid for at vælge de rigtige elementer og indstille deres placering på det valgte layout.

På dette tidspunkt forestiller de fleste designere sig allerede, hvordan de smarte afrundede knapper vil se her og der efter deres gudagtige touch, hvor smukt vil dette billede se ud med en smule uskarphed i heltsektionen og så videre. Men når det kommer til virkeligheden, kan færdiggørelse af individuelle detaljer bringe forskellige hypoteser og tvister om elementer former, farver, billeder, tekster, ikoner og alt andet, der betyder noget for vores kunder, brugere og os selv.

Mange designere bliver ofte så meget knyttet til den valgte designstil, at hver nye ændring kan blive mere og mere smertefuld for dem at gøre.

Men hvorfor skulle det være smertefuldt, hvorfor kan det ikke være sjovere?

Det kan det være. Ved at bruge kombinationer af enkle skisseteknikker kan du opnå den ønskede fleksibilitet, når du arbejder med wireframes og layouts, såvel som at skabe et ubegrænset antal designvariationer på kort tid og forblive fornuftig og kølig resten af ​​dagen.

Hvad skal der gøres?

Sketch-app giver mulighed for at oprette tilpasselige komponenter og genbruge dem en uendelig lang tid. For at de skal fungere ordentligt, skal du først gøre disse enkle trin for at forberede alle elementerne, før du går videre:

  1. Definer et sæt af alle UI-elementer, der vil blive brugt på tværs af dit projekt, såsom knapper, ikoner, tekst, avatar, mockups osv. Prøv at tænke på disse elementer som noget, der kan kodes og bruges uden for din skissefil.
  2. Opret et separat symbol for hvert eksempel af visuelle parametre som farve, form eller tilstand. (For eksempel, hvis dit projekt bruger 16 forskellige farver, skal du oprette et symbol for hver af dem).
  3. Find den rigtige balance mellem antallet af parametre og UI-elementer, som de er distribueret til. (At arbejde med dropdown-menuen for overstyringer kan undertiden være ganske kedeligt, så det er vigtigt at opretholde en balance mellem antallet af parametre og bekvemmeligheden ved at interagere med dem).
Det virker som en masse arbejde, ja, måske er det, men denne tilgang belønner dig i det lange løb og giver dig mulighed for at spare hundreder af timer på at oprette en ny designfil, når du har alle ingredienser, der altid er klar til at blive tilberedt.

Lad os have et simpelt eksempel

Vi vil overveje at oprette en af ​​disse komponenter ved hjælp af eksemplet med en simpel knap, jeg håber, at du vil være i stand til at bruge denne teknik til dine fremtidige projekter. Først og fremmest skal du downloade denne demofil.

Hvordan får man det til at fungere?

For at gøre vores knap nyttig, og vi kunne bytte dens parametre, er vi nødt til at sætte alle de rigtige børnesymboler i vores enkelt knap. Så lad os se på disse symboler:

  • Tekst - Indstil symbolbredde, så den passer til størrelsen på knappen, og indstil den til at forblive fast i midten af ​​knappen. For at ændre tekstfarven skal du oprette det ønskede antal farver til dette element.
  • Form - Dette er også et forældresymbol, der indeholder tilstands- og farvesymboler inde i ham. Brug det til at skifte mellem afrundede og grundlæggende figurer og anvende forskellige farver og tilstande, såsom svæver, fokus eller presset.
  • Ikon - Som standard er ikonet skjult, du kan vise det og fjerne teksten på knappen for at oprette en ikonknap. Du er velkommen til at ændre dens farve, hvis nødvendigt, og sørg for at indstille den til bredde og højde for at forblive fast, når du ændrer størrelse. Brug det til at lave en flydende handlingsknapper eller enkle sociale knapper.

Nu kan du generere en næsten ubegrænset variation af disse knapper ved blot at tilføje flere figurer, farver, ikoner og måske nogle flere tilstande til dine knapper i Sketch.

Og det er alt. Håber du finder det nyttigt.

Inden du rejser, skal du ikke glemme at:

  • Download freebie ovenfor!
  • Hjælp os med at sprede ordet om Frames for Sketch og få 25% rabat. Bare mail os / tweet os / DM os linket til dit indlæg, så vender vi tilbage til dig så hurtigt som muligt.
  • Følg Robowolf på Twitter for flere fantastiske freebies og tutorials.