Skisse og Zeplin Hjelpe designere og utviklere samarbeide

Samarbeid mellom designere og utviklere er avgjørende for suksessen til et webprosjekt, og det er et mål for et lags suksess. Mens det å dele det samme arbeidsområdet er uvurderlig, har en online kilden til sannhet som hjelper med dette samarbeidet utrolig nyttig. I denne artikkelen skal vi se på Zeplin og hvordan det fungerer i kombinasjon med Sketch for å bringe lag sammen.

Et raskt ord på skisse

For omtrent seks måneder siden, da jeg flyttet jobber, ble jeg oppfordret til å prøve Sketch. Den gode tingen om denne programvaren er at den er spesielt fokusert på grensesnitt og ikondesign; fra tavler med spesifikke størrelser for web, mobil og ikoner, til funksjoner som bidrar til å forbedre designprosessen, Sketch er et must for designere.

I tillegg er lærekurven hvis du er en mellomliggende Photoshop eller Illustrator-bruker, nær ingen.

Her er noen eksempler som gir deg en oversikt over hva du kan gjøre med skisse:

1. Opprett sider for å organisere innholdet ditt (for eksempel: mobile design, skrivebordsmodeller) og kunstbrett på disse sidene for å mockup produktet ditt (for eksempel: skape en trinnvis kunders reise).
2. Bruke Inspektør for å finne alle detaljer om et bestemt objekt (størrelse, posisjonering, farger, skrifttypestiler, opacity og mye mer).
3. Bruke Eksport funksjonen til å eksportere Artboards eller individuelle objekter til bestemte filformater (PNG, JPG, PDF, og så videre).

"Jeg er en dev, jeg har aldri brukt Sketch!"

I de senere år har designere lært å samarbeide med hverandre ved hjelp av verktøy som InVision, men denne plattformen mangler fortsatt funksjoner som gjør det mulig for et raskt design å håndtere utviklingslaget.

Vi bør ikke be utviklere å være dyktige i de samme verktøyene som designere bruker til å mockup produkter. Når det er sagt, bør vi heller ikke kreve at designere flytter seg bort fra det de gjør best: design! Å bygge et "spesifikasjonsdokument" hver gang de overleverer et design, er langt fra å være "smidig", og kan bety mye bortkastet tid mellom overlevering av design og å måtte iterere om det er nødvendig.

Zeplin

Det er her Zeplin går inn i scenen.

Zeplin er et samarbeid verktøy for UI designere og front end utviklere. Det går utover design arbeidsflyten og hjelper lagene med designavdelingen.

Det tillater designere å laste opp sine wireframes eller visuelle motiver rett fra Sketch, og legg dem til prosjektmapper i Zeplin. Den beste tingen? Annoteringer blir automatisk lagt til i designene (størrelser, farger, marginer og til og med CSS-forslag til bestemte elementer) som vil gi deg et online-lager som hele laget kan bidra til.

"Zeplin fungerer veldig bra som en eneste sannhetskilde, når den brukes som sådan.
Også, siden det er tilgjengelig som en frittstående app, så vel som en web-app, kan du få tilgang til det ganske mye hvor som helst. Gjør det enkelt å sjekke design og ting som mellomrom, størrelser, farger, etc. "- Daniel Setas Pontes, Javascript-utvikler @NOW TV, Sky

Eksportere design fra skisse til zeplin

Zeplin fungerer som et plugin innenfor Sketch, slik at opplasting av design er en klikk jobb.

Slik starter du et prosjekt:

Starte et Zeplin-prosjekt

1. Last ned Zeplin (kun mac) og installer. Utviklere trenger ikke å kjøre OS X, da de bare trenger tilgang til det webbaserte verktøyet for å få tilgang til innhold.
2. Lag prosjekter.
3. Velg plattformen du har designet for.
4. Merk prosjektet (pass på at du velger et navn som er kjent for hele laget).

Eksporterer fra skisse

Innen Skisse velger du individuelle objekter og gjør dem eksporterbare. Dette vil tillate dev team å eksportere hvert element senere fra Zeplin. Slik fungerer det:

1. Deretter velger du artikkelen du vil laste opp til Zeplin.
2. Gå til Plugins> Zeplin> Eksporter valgte artboards.
3. Velg prosjektet du vil laste opp designene til, og klikk deretter Importere.

Arbeider med Zeplin

En gang i Zeplin kan du navigere mellom prosjekter og enkelt utforske alle komponentene i dem. Å finne ut om spesifikasjoner av visse elementer er også intuitiv; velg elementet du vil ha, så vises all relevant informasjon i kolonnen til høyre.

Utviklere: Slik fungerer det, når du har åpnet det nettbaserte verktøyet og logget på:

1. Velg objektet du vil inspisere.
2. Se på kolonnen til høyre for detaljert informasjon som skriftstiler, farge osv. (Informasjon vil bli vist i henhold til objektet du velger).
3. Kopier den foreslåtte CSS.

Hvis designteamet tillater eksporterbare elementer når du importerer designene til Zeplin, bør utviklingslaget kunne eksportere individuelle eiendeler. Eiendeler vil være tilgjengelige for nedlasting i SVG-format og tre forskjellige PNG-størrelser.

1. Her kan du legge til notater og kommentarer til designene.
2. Her kan du kopiere og dele prosjektlenkelen, kanskje til og med integrere med lagets Slakkkanal for å få varsler eller invitere lagmedlemmer til å samarbeide!

Hvorfor laget ditt skal gjøre flyttingen

Arbeide med Zeplin har mange fordeler, her er noen eksempler:

• Du vil unngå å bygge et spesifikasjonsdokument; noe som ikke er fleksibelt eller lett å oppdatere.
• Lag umiddelbare annoterte motiver med all relevant informasjon for utviklere og andre designere.
• Du kan opprette eksporterbare design, slik at utviklere får rask tilgang til individuelle eiendeler.
• Opprett så mange prosjekter du vil, og last opp og oppdater med bare noen få klikk.
• Lag stilguider som hjelper designlaget å holde seg konsistent.
• Dra nytte av Slack-integrasjon, og meld deg øyeblikkelig til teamet ditt hver gang det er en oppdatering.

Prøv det!

Arbeide med Sketch og Zeplin er en flott måte for designere å samarbeide harmonisk med utviklere. Teamet mitt elsker å jobbe på denne måten. Jeg vil gjerne høre dine tanker og erfaringer med disse verktøyene!

nyttige lenker

• Sketch plugins
• Sketch tutorials på Envato Tuts+
• Sketch nettside maler på Envato Market
• @zeplin_io på Twitter
  
• zeplin.io