Handoffs Guide til Pixel Perfect Design. Del I.

Jeg har haft muligheden for at samarbejde med mange UI / UX-designere gennem min karriere, og jeg har bemærket en meget interessant ting om, hvordan de fungerer: De bruger ikke etablerede guider til at gennemføre projekter. Hvis du er en ny udvikler hos et firma, kan teammedlemmer sende dig links til en GitFlow eller GitHubFlow, og du lærer alt, hvad du har brug for at vide om depotstyring på 10 minutter. Som udviklere kan vi tilføje et projektlinter, og alle vil følge kodens stilguide. Men hvad kan du give din designer for at sikre, at de leverer alt det, du ønsker? Vi i Pixel Point skrev denne handoffs-guide til netop dette formål.

Glem ikke at læse andre dele også:

Del 2 - Net, responsivt design, animationer, prototyper

Del 3 - UI-sæt, eksport, elementtilstande, linjehøjde, skrifttyper, udviklere og designere

Software

Photoshop har en masse nyttige plugins til at fremskynde din arbejdsproces, men vi anbefaler Sketch eller Adobe XD. Disse værktøjer kombinerer fordelene ved at bruge vektorgrafik med de let justerbare egenskaber ved rasterbilleder. De er især nyttige, når de designer til mobile applikationer på enheder med store pixeltætheder. I disse tilfælde behøver du ikke at bekymre dig om farveprofil, størrelsen på dine projektfiler vil være mindre, og du får brug for en masse funktioner, der hjælper dig med at arbejde mere effektivt.

iOS Human Interface Guidelines filstørrelse til Photoshop og Sketch (http://apple.co/28YytHY)

Navngivning af aktiver

Brug en stregnotation til dine aktiver

Google anbefaler dette til alle filer, inklusive HTML, PDF og .jpg. Her er en Google WebMasters-video om den: youtu.be/AQcSFsQyct8. Selvom det er muligt at omdøbe alt på bagsiden, er det bedst at holde navne ensartede.

  • Brug kun latinske tegn.
  • Brug ikke mellemrum.
  • Brug kun små bogstaver.
  • Brug @ 2x eller @ 3x postfix til at forberede billeder til enheder med forskellige pixeltætheder.
  • Brug de samme regler for dine mappenavne.

Billedoptimering

Nogle kan sige, at dette er en opgave for udvikleren. Set fra mit perspektiv, men hvis du vil se designet realiseret nøjagtigt, som du har bygget det, skal du være sikker på, at udvikleren ikke tager beslutninger i forbindelse med de visuelle aspekter, som billedkvalitet og komprimeringsniveauer.

Prøv at bruge SVG

Når du bruger SVG til dine ikoner eller illustrationer, behøver du ikke at bekymre dig om enheder med forskellige pixeltætheder eller forberede versioner som @ 2x og @ 3x. En anden fordel er, at SVG-grafik bruger mindre plads og kan komprimeres effektivt ved gzip på serversiden.

Tænk to gange, før du sender et aktiv, der er større end 1 MB til en udvikler

Her er to sandsynlige scenarier, hvis du gør det: For det første vil udvikleren ikke overveje billedstørrelser, og dette vil medføre overdreven indlæsningstid for websteder. For det andet komprimerer udvikleren dit billede for meget, hvilket resulterer i artefakter, reduceret kvalitet eller ændringer i din farveprofil. Vær ikke doven og send jobbet til en udvikler; du er ansvarlig for projektets visuelle kvalitet. Tjek denne billedoptimeringsvejledning fra Google, og husk følgende:

  • Brug .jpg til billeder uden gennemsigtighed, og når du kan ofre kvalitet til fordel for størrelse.
  • Brug .png for at få den bedste kvalitet og gennemsigtighedssupport.
  • Brug videoformater eller GIF til animationer. Husk, at GIF'er er et meget gammelt format, så din videofil er højere i kvalitet, men mindre i størrelse.

Optimeringsværktøjer

Brug optimeringsværktøjer som Kraken, ImageOptim eller Optimage. Værktøjer som Photoshop og Sketch gemmer billedmetadata som standard og bruger ikke optimale algoritmer til at få dit billede til at se ens ud, men tage mindre plads.

Hvor godt fungerer Kraken.io?

Kraken har et par forskellige muligheder i Eksperttilstand til optimering af dit billede.

Kraken-indstillinger

Bestem, hvilket komprimeringsniveau der er acceptabelt for ikke-statiske billeder

Test forskellige komprimeringsniveauer i Photoshop, eller bede din udvikler om at demonstrere, hvordan han / hun behandler billeder for at definere, hvilket forhold mellem kvalitet og størrelse du kan acceptere. Nedenfor ser du en referencetabel over størrelser, der er acceptabel for forskellige slags billeder.

Lav ikke sprites

En sprite er en .jpg-, SVG- eller .png-fil, der indeholder al den nødvendige grafik på dit websted, og hjælper med at forhindre yderligere serveranmodninger om hentning af aktiver. Det er et nyttigt optimerings trick, men prøv ikke at lave sprites på egen hånd. En udvikler laver en automatisk, da han / hun ikke kun har brug for sprites, men også placeringen og størrelserne for hvert element i sprite. Du vil smerte udvikleren meget, hvis du beder om, at han / hun måler hvert element manuelt. Automatisk sprite-generation hjælper med at holde ikoner i deres faktiske tilstand og forhindrer dig i at oprette @ 2x eller @ 3x versioner. Selv hvis du ikke bruger SVG-sprites, vil dette spare dig for smerten ved at tilføje nye billeder til en eksisterende sprite.

SVG

Konverter SVG-tekst til kurver; Ellers får du tekstobjekter i standard skrifttypen (opret dispositionsindstillinger i Adobe Illustrator).

Kontroller, at du ikke har et base64-billede indsat i din SVG. Det kan vises, når du prøver at eksportere som et SVG-rasteriseret billede.

Eksempel på base64-billede indsat i din SVG

Optimer SVG ved at fjerne alle unødvendige oplysninger med SVGOMG. Normalt vil din SVG-fil som standard indeholde nogle meta-oplysninger (som titel og beskrivelse). Det vil have forkodet kode i stedet for inline minimerede, ubrugte grupper eller tomme containere. Du kan fjerne alt dette uden at miste kvalitet, hvis du bruger SVGOMG.

Kontroller SVG i en browser, før du tilføjer den til dine aktiver. Dette giver dig mulighed for at sikre, at du eksporterede den rigtigt, og at SVG gengives som du planlagde. Du vil være i stand til at fange nogle fejl, f.eks. Ikke-indstillet højde eller bredde, eller gengivne problemer, før udvikleren gør det. Brug kun heltalværdier til bredde, højde og placering af forskellige elementer.

Fra venstre til højre: SVG-eksport med fast højde og bredde, SVG-eksport med 100% højde og bredde

favicon

  • Forbered to filer med forskellige dimensioner.
  • Navngiv den første favicon.png, og indstil størrelsen til 32x32. Alle moderne browsere understøtter .png til favoritter, og du behøver ikke at konvertere dem til ico-format.
  • Navngiv den anden fil favicon-180x180.png, og indstil størrelsen til 180x180 for mobilikoner.

Mange artikler online hævder, at du er nødt til at forberede en masse favicons med forskellige størrelser, som 16x16, 24x24 eller 48x48. Du behøver ikke bekymre dig om det, fordi 32x32 og 180x180 fungerer fint i de fleste tilfælde. Browsere ændrer også størrelsen på dit eksisterende ikon, hvis det er nødvendigt. Glem ikke at bruge billedoptimeringsværktøjer til favoritter.

Tryk på knappen ❤, hvis du fandt, at denne artikel var nyttig!

Del 2 - Net, responsivt design, animationer, prototyper

Del 3 - UI-sæt, eksport, elementtilstande, linjehøjde, skrifttyper, udviklere og designere

Har du spørgsmål eller feedback? Opret forbindelse via Pixel Point