Vodič za handoffs za savršen dizajn piksela. I. dio

Imao sam priliku surađivati ​​s mnogim UI / UX dizajnerima tijekom moje karijere, i primijetio sam jednu vrlo zanimljivu stvar o tome kako oni funkcionišu: Ne koriste utvrđene vodiče za dovršavanje projekata. Ako ste novi programer u tvrtki, članovi tima mogu vam poslati linkove na GitFlow ili GitHubFlow, a za 10 minuta naučit ćete sve što trebate znati o upravljanju spremištem. Kao programeri možemo dodati liniju projekata i svi će slijediti vodič za stil tog koda. Ali što možete pružiti svom dizajneru kako bi osigurali da isporuče sve što želite? Mi u Pixel Pointu napisali smo ovaj priručnik o primanjima upravo u tu svrhu.

Ne zaboravite pročitati i druge dijelove:

Dio 2 - Mreža, osjetljivi dizajn, animacije, prototipovi

Dio 3 - UI setovi, izvoz, stanja elemenata, visina crta, fontovi, programeri i dizajneri

Softver

Photoshop ima puno korisnih dodataka za ubrzavanje vašeg radnog procesa, ali preporučujemo Sketch ili Adobe XD. Ovi alati kombiniraju prednosti uporabe vektorske grafike s lako prilagodljivim svojstvima rasterskih slika. Posebno su korisni pri dizajniranju za mobilne aplikacije na uređajima velike gustoće piksela. U tim slučajevima nećete trebati brinuti o profilu boja, veličina vaših projektnih datoteka bit će manja i moći ćete koristiti puno funkcija koje vam pomažu učinkovitiji rad.

Veličina datoteke za iOS ljudsko sučelje za Photoshop i Sketch (http://apple.co/28YytHY)

Imenovanje imovine

Upotrijebite crticu za svoju imovinu

Google preporučuje ovo za sve datoteke, uključujući HTML, PDF i .jpg. Evo videozapisa Google WebMasters o tome: youtu.be/AQcSFsQyct8. Iako je sve moguće promijeniti na pozadini, najbolje je da imena budu dosljedna.

  • Koristite samo latinične znakove.
  • Ne upotrebljavajte razmake.
  • Upotrijebite samo mala slova.
  • Upotrijebite @ 2x ili @ 3x postfiks za pripremu slika za uređaje različite gustoće piksela.
  • Upotrijebite ista pravila za imena mapa.

Optimizacija slike

Neki bi mogli reći da je to programer zadatak. Iz moje perspektive, međutim, ako želite da se dizajn realizira točno onako kako ste ga napravili, budite sigurni da programer neće donositi odluke povezane s vizualnim aspektima, poput kvalitete slike i razine kompresije.

Pokušajte koristiti SVG

Kad koristite SVG za svoje ikone ili ilustracije, ne morate se brinuti o uređajima različite gustoće piksela ili pripremi verzija poput @ 2x i @ 3x. Još jedna prednost je što SVG grafika troši manje prostora, a može se učinkovito komprimirati gzipom na strani poslužitelja.

Dvaput razmislite prije nego što programeru pošaljete imovinu veću od 1 MB

Evo dva vjerojatna scenarija ako to učinite: Prvo, programer neće uzeti u obzir veličine slike, a to će uzrokovati pretjerano vrijeme učitavanja web mjesta. Drugo, programer će previše komprimirati vašu sliku, što će rezultirati artefaktima, smanjenom kvalitetom ili promjenama u profilu boja. Ne budite lijeni i posaljite posao programeru; vi ste odgovorni za vizualnu kvalitetu projekta. Pogledajte Googleov vodič za optimizaciju slike i imajte na umu sljedeće:

  • Koristite .jpg za slike bez prozirnosti i kad možete žrtvovati kvalitetu u korist veličine.
  • Za najbolju podršku kvalitete i transparentnosti koristite .png.
  • Za animacije koristite video formate ili GIF. Imajte na umu da su GIF-ovi vrlo starog formata, tako da će vaša video datoteka biti kvalitetnije, ali manje veličine.

Alati za optimizaciju

Koristite alate za optimizaciju kao što su Kraken, ImageOptim ili Optimage. Alati poput Photoshopa i Sketcha zadano spremaju metapodate slike i ne upotrebljavajte optimalne algoritme da bi slika izgledala jednako, ali zauzima manje prostora.

Koliko dobro djeluje Kraken.io?

Kraken ima nekoliko različitih opcija u stručnom načinu rada za optimizaciju vaše slike.

Kraken opcije

Utvrdite koja je razina kompresije prihvatljiva za nestatičke slike

Testirajte različite razine kompresije u Photoshopu ili tražite od svog programera da pokaže kako će on obrađivati ​​slike kako bi odredio odnos između kvalitete i veličine koji možete prihvatiti. Ispod ćete vidjeti referentnu tablicu veličina prihvatljivih za različite vrste slika.

Ne pravite sprite

Sprite je .jpg, SVG ili .png datoteka koja sadrži svu potrebnu grafiku vaše web lokacije i pomaže u sprečavanju dodatnih zahtjeva poslužitelja za dohvaćanje imovine. To je koristan optimizacijski trik, ali nemojte pokušavati sami napraviti spritete. Programer će napraviti jedan automatski, jer će mu biti potrebni ne samo pragovi, već i položaj i veličine svakog elementa u spritu. Programeru ćete naboljeti ako zatražite ručno mjerenje svakog elementa. Automatska generacija sprite pomaže zadržati ikone u stvarnom stanju i sprječava stvaranje @ 2x ili @ 3x verzija. Čak i ako ne upotrebljavate SVG sprite, to će vas spasiti od boli dodavanjem novih slika postojećem spritu.

SVG

Pretvori SVG tekst u krivulje; u suprotnom, dobit ćete tekstualne objekte zadanim fontom (stvorite obrisne opcije u Adobe Illustratoru).

Provjerite da nemate base64 sliku umetnutu u vaš SVG. Može se pojaviti kada pokušate izvesti kao SVG rastriziranu sliku.

Primjer base64 slike umetnute u vaš SVG

Optimizirajte SVG uklanjanjem svih nepotrebnih podataka pomoću SVGOMG. Vaša SVG datoteka uobičajeno će sadržavati neke meta podatke (poput naslova i opisa). Imat će lijepi kôd umjesto inline minimiziranih, neiskorištenih grupa ili praznih spremnika. Sve to možete ukloniti bez gubitka kvalitete ako koristite SVGOMG.

Provjerite SVG u pregledniku prije nego što ga dodate svojim sredstvima. To vam omogućuje da osigurate da ste ga pravilno izveli i da se SVG prikazao onako kako ste planirali. Moći ćete uhvatiti neke bugove, kao što su neprilagođena visina ili širina, ili stvoriti probleme prije nego što programer to napravi. Koristite samo cjelobrojne vrijednosti za širinu, visinu i položaj različitih elemenata.

S lijeva na desno: izvoz SVG s fiksnom visinom i širinom, izvoz SVG sa 100% visine i širine

favicon

  • Pripremite dvije datoteke različitih dimenzija.
  • Imenujte prvi favicon.png i postavite veličinu na 32x32. Svi moderni preglednici podržavaju .png za favicon-ove i ne morate ih pretvarati u ico format.
  • Dodijelite naziv drugoj datoteci favicon-180x180.png i postavite veličinu na 180x180 za mobilne ikone.

Mnogi članci na mreži tvrde da morate pripremiti puno dodataka različitih veličina, poput 16x16, 24x24 ili 48x48. Ne morate se brinuti zbog toga, jer 32x32 i 180x180 djeluju u redu u većini slučajeva. Preglednici će također promijeniti veličinu vaše postojeće ikone ako je to neophodno. Ne zaboravite koristiti alate za optimizaciju slike i za zabave.

Dodirnite gumb if ako smatrate da je ovaj članak koristan!

Dio 2 - Mreža, osjetljivi dizajn, animacije, prototipovi

Dio 3 - UI setovi, izvoz, stanja elemenata, visina crta, fontovi, programeri i dizajneri

Imate li pitanja ili povratnih informacija? Povežite se putem Pixel Pointa