Skitsevejledninger

9 tip til at designe hurtigere og mere effektivt, så du ikke bliver vanvittig

Ja, det er en oversigt. Men disse er gode.

Forfatternotat og skamløst stik: Dette er teknikker, jeg tog op, mens jeg byggede UX Power Tools designsystem. Jeg er en aktiv designer og bruger dette system i 10 timer om dagen sammen med enhver teknik, der er nævnt i denne artikel. Hvis jeg ikke troede på det, ville jeg ikke skrive om det

1. Brug stilarter

Det gør mig ondt, hvor ofte dette skal siges, men jeg vil fortsat sige det, indtil du begynder at gøre det

Grundlæggende ændringer kommer til Sketch meget snart, der vil gøre dine liv SÅ MEGET LETTER, hvis du bare spænder ned og begynder at bruge stilarter. Der er ingen bedre tid end nu.

Brug af tekstformater og lagstilarter gør dit design mere konsistent, og tro det eller ej, vil du ende med at arbejde hurtigere.

2. Lav et typografiark

Ikke-påkrævet-men-meget-opmuntret-læsning:

Stilark er enormt vigtigt i CSS, fordi de giver dig mulighed for centralt at styre, hvordan ting visuelt vises på et websted. Foretag en ændring af knapstilen, og hver knap på tværs af hele webstedet opdateres.

Der er ingen grund til ikke at oprette et til designprojekter, så du har et lignende niveau af kontrol. Alt hvad du skal gøre er at have et enkelt tegnebræt med en enkelt instans af hver gemt tekststil og lagstil. Så længe du bruger disse typografier i hele dit design, vil du altid være i stand til at revidere dette typografiregisterstavle, hvis du nogensinde vil opdatere skrifttypen.

UX Power Tools designsystem er bygget oven på et centralt typografiark. Du kan ændre skrifttyper og farver på en enkelt side, synkronisere dine ændringer, og hele systemet opdateres for at afspejle dine opdateringer. Det er temmelig cool og sparer mig masser af tid, når jeg arbejder på massive klientprojekter.

3. Brug gennemsigtighed

Dette er virkelig bare et sjovt festtrick, men jeg viste denne teknik til en frontend-udvikler i sidste uge, og jeg renser stadig op konferencesalen, hvor hans sind eksploderede.

Hvorfor bruger jeg gennemsigtighed i stedet for hex-værdier?

Det er et pænt lille trick at sikre, at din tekst ser godt ud over enhver baggrundsfarve. På billedet herunder ser gennemsigtigheden (anden linje) meget bedre ud end den grå (første linje), fordi den har taget farven på farven under den. Der er ingen tricks; den anden tekstlinje er nøjagtig den samme i hvert farvescenario. Det er bare den gennemsigtighed, der fungerer for dig, der får dem til at ligne forskellige tekstformater. Alt til en pris. Hvor praktisk!

Dette lille trick kan også bruges til knapgrænser. Ved du, hvordan du nogle gange vil have en rød knap med en lidt mørkere rød ramme? Prøv en indre kant med 25% sort:

En gennemsigtig sort kant hjælper dig med at efterligne en mørkere farvekant uden den hex-værdige hovedpine.

4. Lav et symbol for tom tilstand

Jeg er først begyndt at gøre dette for nylig, men det er virkelig en dejlig tidsbesparende. For ting som datagitter eller sider, hvor der muligvis ikke findes data, afhængigt af hvad der er oprettet eller konfigureret, er det en god ide at have en dejlig tom tilstand for at lade brugeren vide, at ikke alt håb går tabt!

Design et standard tomtilstandssymbol, så kan du hurtigt genbruge det senere. Jeg har normalt en titel, beskrivelse, illustration og handlingsknap:

Illustration af min vidunderligt talentfulde kollega, Parker McCullough.

For bonuspoint skal du gøre din illustration til et indlejret symbol, så du kan bytte dem ind og ud afhængigt af hvilken side du er på.

Hvilket bringer mig til ...

5. Opret et illustrationsbibliotek

Dette er lidt af avanceret teknik, men det er et simpelt koncept, der vil gøre dit liv lettere og din yndlings illustratørs liv også lettere (tak, Parker)!

Sketch Biblioteker har været ude i et stykke tid nu, men de fleste mennesker bruger dem til at styre deres designsystemer. Jeg anbefaler også at bruge det til at administrere dit illustrationsbibliotek!

Opret en separat Sketch-fil til illustrationer, og tilføj den derefter som et bibliotek:

Lav i illustrationsbiblioteket tegnebræt til enhver brugerdefineret illustration, du har brug for, og importer derefter disse symboler til din designfil som pladsholdere:

Dette lader din illustratør arbejde på egen hånd i det vektorprogram, de ønsker (som Illustrator eller Affinity Designer). Når de er færdige med en illustration, er de bare nødt til at slippe den ind på det passende tegnebræt i illustrationsbiblioteket. Sketch giver dig besked om biblioteksopdateringer, og alt hvad du skal gøre er at synkronisere ændringerne. Nu er din skinnende nye illustration der i al sin herlighed:

Illustration af min vidunderligt talentfulde kollega, Parker McCullough.

Temmelig sej, ikke?

6. Brug konsistente ikoner

Nucleo-ikoner er langt de bedste ikoner, der findes på internettet. Ikke kun er sættet massivt og mangfoldigt, men deres desktop-app er utrolig.

Du kan ændre fra udfyldte ikoner til linjeikoner, ændre vægten og endda definere en accentfarve:

Som om det ikke allerede er nok, har jeg aldrig fundet en lettere måde at forberede ikoner til udviklere end deres eksportfunktion:

Det bliver alvorligt ikke meget lettere end det.

7. Brug Ale Muñoz's Artboard Organizer Plugin

Jeg skammer mig over at sige, at jeg ikke vidste, at dette eksisterede før for ca. en måned siden, men jeg har brugt det obsessivt lige siden.

Dette plugin blev oprettet af en af ​​Sketchs hovedudviklere, så det. lige. arbejder.

Download det her:

Hit Control-Option-Command-A på dit tastatur, og alle dine artboards vil magisk justere og gruppere sig lodret og vandret. Rækker af tegnebræt repræsenterer grupperinger (50px mellem hvert tegnebræt), og grupperinger adskilles lodret med 250 px.

De to bedste funktioner i dette plugin er: Artboard Snapping og Layer Reordering. Når du trækker et tegnebræt til en ny række, klikker det automatisk på plads, selvom du trækker det mellem andre tegnebræt. Endnu bedre er, at dette tegnebræt placerer sig i korrekt forhold til alle andre tegnebræt på laglisten. Jeg siger jer, jeg har aldrig følt mig så organiseret i mit liv!

Så rent og ryddeligt!

8. Byg en produktarkitektur (se ovenfor)

Når du har installeret plugin fra nr. 7, bliver produktarkitekturer (der er sandsynligvis et bedre navn til det) virkelig let at opbygge. Screenshotet ovenfor er en ægte produktarkitektur, jeg oprettede til et klientprojekt. Rækker repræsenterer funktioner, og hvert tegnebræt repræsenterer en skærm, som vi har identificeret, som skal designes. De små er modaler.

Disse er vidunderlige, fordi designprocessen bogstaveligt talt bliver et spil med udfyldning. Det er let at kigge over hele dokumentet for at se, hvilke huller der stadig findes i designet, og det vil være indlysende, hvis der mangler tegnebræt.

9. Giv modeller deres eget tegnebræt

Dette er et lille tip, der er nævnt i nr. 8, men hold op med at placere dine modaler oven på fulde tegnebræt. Det er fint, hvis du gør det en gang bare for at sikre dig, at det føles rigtigt i sammenhæng med en anden skærm, men når du har fundet ud af den rigtige størrelse, er der ingen grund til at fortsætte med at vise det oven på andre skærme.

Hvorfor?

Hvad sker der, hvis du opdaterer skærmen under det modale? Nu skal du opdatere skærmen to gange: en gang på selve skærmen og en anden gang under den modalskærm. Temmelig irriterende.

Hvis du foretager en opdatering til skærmen til venstre, bliver du også nødt til at opdatere skærmen til højre. Det bliver virkelig irriterende, VIRKELIG HURTIG.

Den anden fordel ved at fremstille fristående, modale tegnebræt er, at du kan linke til dem som modale dialoger ved hjælp af InVisions prototyperværktøj. Dette giver en bruger mulighed for at klikke på en knap i din InVision-mockup, og det modal, du oprettede, vil faktisk animere på skærmen. Derefter kan de klikke væk fra modalen, og det vil være "lukket", ligesom det ville være i den rigtige app. Kunder elsker det lort!

Når jeg ikke søger efter varme og uklare følelser, arbejder jeg på ressourcer som UX Power Tools for at gøre dig til en bedre og mere effektiv designer.

  1. Følg UX Power Tools på Twitter
  2. Følg mig på Twitter
  3. Hej på LinkedIn
  4. Lær nogle ting, og abonner på mit agenturs blog