Skitsevejledninger

5 måder at holde dit sketchekøkken rent

Se, hvor pænt det måltid er grupperet inde i dets afgrænsningsboks! Så frisk! Så ren!

Ansvarsfraskrivelse: Jeg spiste lige, så mad er på mit sind. Bare rulle med mig.

Hvis du ser The Travel Channel eller The Food Network så meget som jeg, har du set masser af fantastiske køkkener fra de bedste restauranter rundt omkring i verden. Noget, de alle har til fælles? Knirkende rene køkkener.

Et køkken så rent, at de lader kunderne se!

Restauranter som The Alinea i Chicago tager deres rengøring meget alvorligt, og beviset ligger i deres budding (selvom jeg tvivler på, at en 3-Michelin-stjernet restaurant serverer budding). Her er hvad nogen sagde om Alinea-køkkenrengøringsritualet:

Vi rengørte mindst 4 gange i løbet af de 9 til 10 timer, som jeg var der [på besøg]. Fire store renser og mange mindre renser. Føj det videre til konstant linjesveip, og støvsuges hvert 20. minut. Alles station var uplettede, og hvis det var mindre end perfekt, var kokken sikker på at feje over, skælde over dig og fikse det. Det var befordrende for at arbejde rent og have et så rent miljø. Alt var skinnende, intet 'køkkenskidt' overalt. Alt udstyr - kølerne, bundhylden på klarbordet, bunden af ​​gryder og pander, bunden af ​​hotelgryderne, ryggen på udstyret, hylderne under linjen, vinduerne - alt var rent. Dette var et køkken, hvor enhver overflade var ren nok til at spise ud af. (mere her)

Jo renere dit køkken er, jo bedre bliver dit produkt. Her er et par henstillinger til at undgå “køkken snavs” i dine Sketch-design, så du forbliver effektiv og dine leverancer forbliver poleret:

1. Hold dig til et basislinjenet

Jeg siger ikke, du skal bruge nogen bestemt størrelse, så længe du holder dig til den. Jeg foretrækker personligt et 8-punkts grundlinjegitter på grund af det spiller pænt med forskellige typografiske standarder og har flere divisorer (1, 2, 4, 8 px) vs. (1, 5, 10 px), men jeg ved, at 10 px basislinjenet er populære, da alt design applikationer sendes med Shift + ← som 10px. Så brug hvad du flyder din slæbebåd. Du kan bruge Nudg.it til at ændre standardafstanden Shift + ← for at spare dig selv tid. Dette gør vidundere, når du designer i en stil som Google Material Design, der fungerer ud fra et 8px gitter.

At holde sig til et gitter vil gøre afstandskomponenter til en leg og sikre perfekt visuel rytme. Det fjerner gæt, når der er afstand mellem komponenter, fordi afstande skal være multipler af din baseline-netværdi. Som en bonus vil dine udviklere elske dig, fordi de sandsynligvis vil arbejde med en layoutramme, der overholder et gittersystem.

2. Brug afgrænsningsbokse

Når du har indstillet dit baseline-gitter, er det utroligt nyttigt at bruge afgrænsningsbokse til at holde objekter på dit tegnebræt organiseret og fordelt konsekvent. På billedet herunder bruger jeg afgrænsningsbokse til hvert faneblad og behøver faktisk ikke at placere noget mellemrum mellem fanegrupperne. Afstanden er indbygget i afgrænsningsboksen, så hver fane er tæt mod den der ved siden af. Ved hjælp af et plugin som Ken Moore's Relabel-knap kan du oprette jævnt fordelt faner som dette på få sekunder.

Desuden har objekter med afgrænsningsbokse større klikområder, og giver dig mulighed for at bruge ting som indre skygger som skillelinjer eller fremhæver. Hvilket bringer os til ...

3. Brug aldrig linjer til skillelinjer

Mens vi er emne med klikområdet, kan vi tale om, hvor svært det er at få fat i et linjesegment ?! Det er som Sketch siger ”Vi ved, at der er 2 millioner pixels på skærmen, men du skal bare klikke på denne. Ikke det ... nej… den… nej… almos… negles i… nej. ”

For det andet, selvom du vælger indstillingen Tilpas til pixel i Sketch-indstillinger, vil træk-ændring af størrelse på en linje altid sætte den på underpixel. Super skærpende, og det vil virkelig ødelægge din afstand et andet sted, fordi linealen afretter værdier for ethvert objekt, der sidder på underpixels.

Så hvad skal du gøre i stedet? Jeg anbefaler at bruge indre skygger til at tegne streger. Tegn et rektangel og giv det en indre skygge sådan:

Hvorfor er det bedre? Du har nu et meget større klikområde, du er beskyttet mod den frygtede subpixel, og vigtigst af alt, kan du bruge det som en stil. Forestil dig, at du opretter en liste over elementer, og vil have en linje, der adskiller hvert element. I stedet for en flok tekst plus en linje, kan du nu indstille din afgrænsningsboks og give den en indre skygge. Hvor cool er det ?!

Bemærk: Indtil Sketch understøtter rammer med kontrollerbare sider, har jeg fundet indre skygger som den bedste metode til ting som dette.

4. Organiser dine stilarter og symboler

Denne er let. Vidste du, at du kan oprette undermenuer for stil og symboler i Sketch? Ved at sætte skråstreg i din stil- og symbolnavne, kan du oprette en organiseret "mappestruktur" til at finde ting senere.

Det alfabetiserer endda ting i din undermenu for dig! Tak, skitse!

5. Navngiv dine lag ... Alle af dem

Vælg et objekt på dit tegnebræt og lær denne hurtigtast-rækkefølge:

Kommando + Skift + J
Kommando + R

Forstået?! Det skal vælge laget på din lagliste og derefter fremhæve lagnavnet, så du kan ændre det. ProTip: Brug Tab-tasten til at hoppe til det næste lag på din lagliste for også at omdøbe den ene! Jeg anbefaler dette plugin af Rodrigo Soares til at omdøbe flere lag på én gang, finde-og-udskifte og omdøbe med sekventering!

I skærmbilledet ovenfor ser du, at jeg har kaldt "Jason Burke" -laget "Navn". Hvorfor? Nå, fordi det er, hvad det er. Som standard vil Sketch navngive laget til hvad teksten der er inde i, men at se “Jason Burke” på en liste over potentielt hundreder af lag er ikke særlig nyttigt for mig.

Så hvad ... det er ikke en kæmpe aftale? Ikke rigtig, nej. Men hvor det bliver usædvanligt nyttigt, er når du kan gøre ting som dette:

Tilståelse: Jeg brugte aldrig Søgefunktionen til at finde lag, men når jeg først begyndte at navngive lag semantisk for at beskrive, hvad indholdet var og ikke, hvad indholdet sagde, så indså jeg kraften ved at søge lag.

En sidste ting ... ren, mens du går. Når du er færdig med at designe den liste, skal du omdøbe den! Gruppér det! Hvis du føler dig vild ... symboliser det! Små mængder arbejde undervejs sparer dig masser af tid på lang sigt.

Ingen kan lide at rengøre et tårn med beskidte retter efter at have tilbragt en times madlavning, så gør dig selv en tjeneste og rengør, mens du går! Glad skitse!

Mange af de billeder, der blev brugt i dette indlæg, er taget direkte fra UX Power Tools, som vi har designet omhyggeligt med disse (og andre) teknikker i tankerne.

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