Skitsevejledninger

5 ting at gøre, før du starter din næste designfil i skitse, eller forberede dit design “mise en place”

Vores nye stilguide er tilgængelig ved hjælp af alle tipene, der er beskrevet i denne artikel!

At studere fra kokkeskole og komme ind i den virkelige verden er ikke så glamorøst, som man skulle tro (så jeg har samlet). Du behøver ikke bare få fat i din grad, kaste på en kokke toque hat og åbne en restaurant i en trendy del af byen.

Ville det ikke være rart!

Nej, flertallet af kokke deltager i den kulinariske verden, der forbereder mise en place. Kan du ikke tale fransk? Heller ikke mig! Mise en place betyder "alt på sin plads" og henviser til forberedelse og tilrettelæggelse af ingredienserne før middagsservering.

Du ved, hvordan Rachael Ray altid har de bittesmå skåle med præportionerede ingredienser, når hun laver en af ​​sine 30-minutters-måltider-som-jeg-sværger-faktisk-tager-mindst-en-time? Det viser sig, at det ikke er langt væk fra, hvad professionelle køkkener gør før hver middagsservering. Se det her:

Denne organisation får mig til at føle mig varm og uklar.

Unge kokke fra greenhorn kommer til køkkenet timer før service for at hugge enhver grøntsag, trimme hver filet og tilberede alle saucer (blandt mange andre opgaver). Dermed gør de det muligt for restauranten at tilberede udsøgte retter med flere kurser for at fodre dit fedt ansigt og få dig ud af døren på under to timer. Hvis de ventede, indtil de modtog en ordre om at tilberede alle ingredienserne, ville service tage timer, retter ville være inkonsekvente, og køkkenet ville simpelthen ikke være i stand til at opretholde sig selv.

Produktdesignere skal altid forberede deres mise på stedet, inden de dykker ned i design ”middagservice”.

Før du begynder at designe snesevis af skærme og arbejdsgange, er det vigtigt at indstille dig til en bæredygtig designsucces. Her er fem tip til at forberede din design mise en place:

1. Indstil typografi og tekststilarter

Denne første er indlysende, men det kan være en rigtig opgave. Der er ikke mere direkte måde, som brugere vil interagere med og forstå dit produkt end gennem ord, så det er vigtigt, at vi får det rigtigt.

Jeg kan godt lide at give mig det bredest mulige udvalg af tekststørrelser og stilarter, så mit typografiblad ser sådan ud (jeg opretter altid en mørk version!):

Det er super hurtigt at ændre skrifttypen, hvis jeg skifter mening: 1) Vælg Alle, 2) Skift skrifttype, 3) Synkroniseringsformater. Færdig!

Hver stil har fire undertyper:

  • Standard (normalt 80–100% gennemsigtighed)
  • Sekundær (50-70% gennemsigtighed)
  • Deaktiveret (20–40%)
  • Accent (normalt min mærke farve)

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!

Jeg kommer ikke ind på mekanikerne i at vælge gode skrifttypestørrelser i dette indlæg, men tjek Typografi i ti minutter for at få et hurtigt nedbrudskursus.

Til sidst er det bydende nødvendigt, at du opretter en skissetekststil for hver stil, du definerer. Hvis du beslutter, at du ønsker, at din "deaktiverede" farve skal være 25% i stedet for 30%, skal du bare ændre den ét sted, og den vil kaskade over dit dokument.

ProTip: Brug af skråstreg i tekstnavnsnavne (se ovenfor) skaber små undermenuer i rullemenuen med dine stilarter:

Mine

2. Konfigurer farver og objektformer

Der er FEM grundfarver, som du skal finde ud af inden noget andet:

Basisfarver

  • Brand: Dette er din brandfarve, temmelig ligetil.
  • Sort: Indstil en basis sort, som du vil bruge til alle typer i dine designs. Jeg kan godt lide at undgå ren sort og i stedet oprette en sort farvet med min mærkefarve (eller en komplementær farve). Se billedet herunder.
Tag din mærke farve og læg en 80-90% sort firkant over det. Farve drop dette som din basis sort. Det er subtilt, men det vil gøre en forskel! Den nederst til højre er, hvad jeg ville bruge.

Statsfarver

  • Fejl: Nogle røde varianter. Denne tilstand fortæller brugere, når noget er gået galt. Ren rød er lidt meget. Ton det med gult eller blåt for at gøre det lettere på øjnene.
  • Advarsel: En eller anden variant af gult. Denne tilstand lader brugere vide, når noget endnu ikke er gået galt, men kan potentielt føre til problemer. Lav ikke denne gule for elektrisk; min er normalt lidt mere orange, så den kan læses over hvidt.
  • Succes: En eller anden variant af grønt. Denne tilstand lader brugere vide, at alt er groovy. Jeg foretrækker, at appfarver er lidt køligere, så jeg får min grøn lidt mere blå.
Fra venstre til højre: Brand, Black, Error, Advarsel, Success.

Hvorfor kun fem farver? Jeg føler stærkt, at farver skal bruges meget bevidst i et produkt. Lav ikke noget lilla bare for at gøre det lilla. Mine designs er bygget i sort og hvid, MENNEMT Jeg prøver at gøre opmærksom på noget.

Yderligere farver er passende til ting som diagrammer og grafer, men de skal bruge forskellige farver end dine basistatusfarver.

Objektstilarter

Disse er lidt sværere at konfigurere foran, men er stadig gode til at spare tid. Objektstilarter er alt fra kortbaggrunde til listefelt, der afgrænser bokse. Her er et ark med nogle af mine objektformater:

Jeg bruger disse typografier, hver gang jeg opretter objekter, og hvis jeg vil opdatere basestilen, kommer jeg bare til dette ark og synkroniserer det på alle mine sider. Det er en enorm tidsbesparelse, især efter flere måneders design af skærme til en klient i en fil med 97 skærme. Mamma Mia!

3. Opret sider og kunsttavler

Denne er temmelig let, men det vil hjælpe dig med at bevare din sundhed. Bestem forfra, hvordan du vil organisere dine designs:

  • Efter funktion: I en mad-app har du muligvis en side opsat til alle "opskrifts" -tavleplader og en separat side til alle "profil" -tavler
  • Efter brugerrolle: I appen Medium har du muligvis en side opsat til alle "læser" -tavleplader, og en separat side opsat til alle "indsendere" -tavleplader
  • Efter arbejdsgang: I Uber-appen har du muligvis en side opsat med alle kunstplader i din "Bestilling af en bil" -arbejdsgang og en anden til "Tilføjelse af et kreditkort" -arbejdsgang.

Enhver af ovenstående er fine, men forpligter sig til noget tidligt og holder sig med det.

ProTip: Hvis du bruger InVision, kan brug af Pages til at organisere dine Art Boards eventuelt til sidst betale sig. Jeg kontaktede deres supportteam om, hvordan kunstbræt og sider synkroniseres med InVision, og spurgte, om de bare automatisk ville oprette sektioner til mig baseret på mine sidetitler. Det vil sige, hver side vil være et afsnit, og alle kunstplader på den side findes i det afsnit om InVision. De sagde, at det ikke understøttes i øjeblikket, men at de har fået masser af anmodninger om det, så alle burde sende dem en tweet, der beder om denne funktion. Lad os få denne [åbenlyse] funktion tilføjet!

Her er siderne i UX Power Tools-kit, vi arbejder på, så du kan se, hvordan vi har opdelt tingene. ProTip: Hvis du tilføjer en bindestreg i begyndelsen af ​​din side eller navnet på kunstkortet, synkroniseres de ikke med InVision!

4. Opsæt dit ridsystem og layout

Netnettet er så vigtigt, at jeg har talt om det før. Men du bliver bare nødt til at lytte til mig tale om det igen

Alle disse tip handler om at gøre tingene lettere for dig og reducere mængden af ​​beslutninger, du skal tage, mens du designer.

Opsætning af dit gittersystem gør layout og positionering til en meget passiv handling; du behøver ikke engang at tænke over, hvor langt hinanden skal fordele ting, fordi du kender dine ristesystemforøgelser og endda har justeret dine standarder for Sketch nudge for at overholde dem.

Rutenettet til 12 søjler er stadig det mest populære, fordi det har de fleste søjledeler: 1, 2, 3, 4, 6 og 12.

Her er et kig på indstillingerne for 8px-grid-raster bag skærmen ovenfor:

Dette er en app i fuld bredde med et flydende indholdsområde. Efterhånden som browserbredden vokser, forbliver rutenettet på 12 søjler i midten af ​​indholdsområdet.

Noget at bemærke, når du opretter dit layout. Afhængigt af dit applayout (kant til kant vs. flydende), skal du muligvis have separate layoutguider på hver side.

Dette er et fast bredde (flydende) layout med en fuldbreddehoved.

Tilføjet bonus: Dine udviklervenner kommer til at elske dig for at opsætte og overholde dette gitter, fordi alle rammer derude sidder oven på et gittersystem som dette.

En sidste bemærkning: Jeg opretter ikke personligt rækker i Sketch, fordi det varierer så meget fra side til side. Du er velkommen til at gøre dette, hvis du vil!

5. Import & symboliser branding-aktiver

Næsten færdig! Dyb indånding.

Den sidste ting at gøre er at importere alle / alle branding-aktiver. Dette kan være så simpelt som et logo eller så stort som et sæt app-ikoner for mærkevarer. Den vigtige ting er, at du konverterer hvert af disse aktiver til symboler.

Hold det enkelt, men hold dem symboler!

Hvorfor?

Tag godt på dine fantasibukser, og lad os som om du har designet 75 skærme med dit logo og slogan i navigationshovedet. Marketing har besluttet, at de ønsker at grøfte sloganet, fordi det tilsyneladende allerede er "Just Do It", og et stort firma truer med at sagsøge. Hvordan kunne jeg have savnet det ?!

Nå, Danny designeren goofed op og symboliserede ikke hans logo. Så Danny Designer skal gå opdatere det på 75 individuelle skærme, fordi de bruges i markedsføringsmateriale og juridiske behov, som slogan fjernede.

Bliv ikke som Danny.

I et genialt strejke besluttede Sandy the Sketcher at symbolisere logoet fra get-go. Hun opdaterede basesymbolet i sin stilguide og tryk derefter på synkroniseringsknappen for at opdatere det på alle sine sider. Mens Sandy er ude af at nippe til Piña Coladas, sveder Danny gennem snesevis af sider med opdatering af logoer.

Vær som Sandy.

Det er det! Du har nu forberedt dit designmise en place og er klar til at starte din "designmiddagservice".

Skamløs selvpromovering:

Alt i UX Power Tools Style Guide er bygget ved hjælp af alle tipene, der er beskrevet i denne artikel. Det massive typografiblad? Allerede konfigureret med snesevis af tekststilarter. Det ark med objektstilarter? Jepp, de også!

Tjek det på https://www.uxpower.tools og følg os på Twitter @uxpowertools. Følg mig også, hvis du blev underholdt: @thejmoore.