RapidUI Guide: Sådan gør du din Sketch-fil klar til udvikling

(Hej du: dette er vores andet indlæg i RapidUI Guides-serien. Vil du læse om opbygning af PSD'er til webdesign? Klik her.)

At opbygge bedre, hurtigere websteder starter i designplatformen, så vi har sammensat en liste over bedste praksis til strukturering af dine lag i Sketch, der gør din design-til-live-overgang hurtig og nem.

Vi lover, at når du sætter dig ned for at bygge, vil du være glad for at du tog dig tid til at blive organiseret: At arbejde med et ordnet lagsystem sparer dig spande tid i platformen og masser af potentiel hovedpine.

Og naturligvis resulterer i renere kode.

Sketch giver dig total frihed til at designe killerwebsteder, men det er ikke altid nemt at oversætte dem til websteder. For at gøre overgangen fra design til at bo i RapidUI lettere har vi sammensat en trinvis vejledning til at optimere dit design til web, fra lagnavne til tekstindstillinger.

Den vigtigste ting at huske er vigtigheden af ​​ryddighed: At arbejde med et laghierarki, mapper og navngivne lag vil hjælpe med til at gøre din overgang til at leve lettere og enklere. Tænk på, hvor meget lettere det er at vedligeholde et rent rum kontra at rengøre et rodet rum - det er det samme i Sketch. (Og i køkkenet. Men det er for en anden at skrive om.)

Organiserede lag gør det lettere at automatisk generere kode - og lettere at arbejde i RapidUI.

Konsistens er nøglen

På dit websted finder du sandsynligvis, at du arbejder med gentagne skrifttyper, layout og symboler. Vi kommer ind i det nydelige ved at arbejde med tegnebræt i et øjeblik, men mens du læser det, skal du huske vigtigheden af ​​konsistens: gentagelse af tekstformater og symboler vil gøre din designproces mere flydende, især på tværs af tegnebræt.

Tip 1: Oprydning af dine lag

Inden du uploader dit design, skal du sørge for at organisere dine lag i grupper, navngive lag korrekt og slette skjulte / unødvendige lag, så dit websted fungerer så glat som muligt.

  • Navngiv dine lag: I fremtidens interesse skal du gøre dig selv en dejlig ting og navng dine lag! Tænk på, hvordan du finder disse lag i et hav af figurer, symboler og billeder, og navngiv derefter. Gå hele vejen med at organisere lag i mapper og grupper - alt hvad du kan gøre i bestræbelserne på at rydde.
  • Gruppér dem: Hvis du vil have visse objekter til at klæbe sammen i alle opløsninger, skal du gruppere dem sammen! Tænk på ikoner: Hvis du vil have et ikon til at forblive med dets tekst (og det gør du), skal du sætte dem i en gruppe sammen. Du vil virkelig føle fordelene ved at gruppere, når du bliver lydhør; fordi grupperede elementer påvirker hinandens placering, vil grupperede elementer klæbe sig sammen i mindre skærme, så redigering af et objekt redigerer automatisk resten af ​​gruppens elementer, så de passer - super hurtigt.
  • Gå element for element: To objekter på det samme lag fungerer som et i RapidUI. Dette betyder, at hvis du vil have objekter til at fungere separat, er tiden til at opdele dem i forskellige elementer nu; dette vil gøre tingene lettere under redigerings- / igangværende responsprocessen og hjælper dig, når du tilpasser dine elementers funktionaliteter.
  • Ét billede pr. Sted, vær venlig: Du behøver ikke uploade mere end et billede på samme sted. Og vi foretrækker, at du ikke gør det. For gallerier, skydere osv., Upload et billede med din designfil; når du har gjort dette element interaktivt, kan du tilføje resten af ​​dine billeder. Upload af alle billederne langsommere kun uploadprocessen og tilføjer ekstra trin til din arbejdsgang.

En hurtig note om tegnebræt:

I RapidUI uploades hvert tegnebræt som en separat side. Når du uploader dit design, hvis det indeholder flere tegnebræt, bliver du spurgt, hvilket tegnebræt du vil bruge.

Du kan tilføje så mange sider og tegnebræt, som du vil; de skal bare arbejdes separat.

Tip 2: Lær dine blandingstilstande at kende

Mens de fleste, hvis ikke alle, af Sketches blandingstilstande og -effekter understøttes i RapidUI, kan avancerede effekter, der ikke understøttes i CSS, se forskellige ud i dit design.

Vi har fundet, at fladning af komplekse ikke-understøttede lag til bitmap ofte vil hjælpe os med at generere websteder, der ligner meget mere dit design. Tænk på et basisbillede med sekundære lag med avancerede blandinger eller effekter over det; kombiner disse elementer i et enkelt lag (flad markering til bitmap).

Hvis elementer i dit design ikke ser nøjagtigt ud, som de gør i Sketch, kan du prøve en af ​​disse to metoder:

  1. Flad udvalgte elementer til bitmap (glem ikke - dine lag kan ikke redigeres, når de er fladet ud!)
  2. Eksporter alle dine ønskede lag til et lag, og upload dem til RapidUI som billeder.

Tip 3: Følg med i tekstlag

For at dit websted skal komme ud af pixel-perfekt, er du nødt til at være opmærksom på detaljerne i din tekststyling: for eksempel fontfamilie, skriftstørrelse og linjehøjde.

Det vigtigste råd, vi kan give dig, er: konverter aldrig tekstlag til konturer! Hvis det ikke er et tekstlag i Sketch, uploades det ikke som et tekstlag til RapidUI.

  • Pas på dine tekstindstillinger: Selv hvis dine tekster ser fine ud, skal størrelserne være fornuftige, så hold øje med linjehøjde og skriftstørrelse.

Eksempel: en titels tekstlag kan have en skriftstørrelse på 18px, men en linjehøjde på 200px. I dette tilfælde vil linjehøjden på din web være 200 px - hvilket vil se super underligt ud. Ved at være opmærksom på detaljer, kan det let undgås.

  • Sørg for, at tekstretning altid er indstillet korrekt: Dine indstillinger fra venstre til højre (eller fra højre til venstre) skrives i din kode, og selvom de kan ændres - det gør bare dit liv kompliceret.
  • Dobbeltkontrol af dine tekstindstillinger !!!: Brug altid de samme tekstindstillinger til den samme teksttype. Hvis du bruger det samme overskriftformat flere gange på dit websted, skal du sørge for, at deres stilarter er ens.
  • Pas på delte tekstformater: Det er noget, vi arbejder på, men vi understøtter i øjeblikket ikke delte tekstformater. Hvis du vil have din tekst til at oversætte perfekt, skal du style teksten direkte - og hold dig opdateret om opdateringer fra vores ende!

Webudviklingsprocessen starter med design. Ved at integrere disse tip i din arbejdsgang kan du begynde at opbygge websteder hurtigere og lettere - og se bedre resultater.

Når det kommer til bygning med RapidUI, hvad du ser, hvad du får - og det starter i Sketch.