Saznajte kako je Microsoft dizajner u svoje slobodno vrijeme izgradio unutarnju biblioteku ikona

Zamislite svijet u kojem ikone koegzistiraju bez obzira na dizajnerski alat koji profesionalni interfejs / UX preferira. Ikone žive mirno zajedno, pravilno su označene i klasificirane, a svi ih lako mogu pretraživati.

Jedan dizajner iz Microsofta, Jackie Chui, izgradio je ovu utopiju. U tri tjedna, on je pokrenuo knjižnicu koja se zasniva na pretraživačima, s potpunim setom 4.000 ikona tvrtke. Pretražio je intuitivno, uključujući imena klasa za inženjere i oznake za dizajnere. Inženjeri mogu čak i obrnuto pretraživati ​​da biste preuzeli metapodate tako da zalijepe ikonu u knjižnicu.

Možda je najbolja od svih njih funkcionalnost unakrsnih alata. Budući da Jackiejeva knjižnica radi u pregledniku, svatko u Microsoftu može donijeti ikone ravno u svoj preferirani alat za dizajn. Nema više rasprava oko toga koja bi aplikacija trebala vladati svima njima.

Ako vam se čini da vaše ikone žive u košmaru dizajniranog dizajna, pogledajte Jackiejev pragmatični pristup stvaranju zajedničke biblioteke ikona.

Kako postaviti svoju biblioteku ikona

1. Istraživanje konkurentnog krajolika i potreba korisnika

Prvo, kao i svaki dizajner vrijedan soli, Jackie je obavio svoje preliminarno istraživanje. Razgovarao je s nekoliko dizajnera Microsofta i promatrao njihove procese dizajniranja u akciji kako bi najbolje razumjeli njihove probleme sa ikonama. Zatim je potražio postojeće proizvode na tržištu.

Najbolja biblioteka ikona s mogućnostima organiziranja i kopiranja / lijepljenja koju je mogao pronaći bio je IconJar, ali i dalje je nedostajalo nekoliko značajki koje je Microsoft trebao:

  1. Nije imala mogućnost dijeljenja i gužve izvora. Jackie je znao da želi svima da autonomije daju oznake za ikone.
  2. Nije bio temeljen na pregledniku, što znači da ikone nisu mogle živjeti u oblaku.
  3. Bio je to samo Mac - veliko isključivanje za tvrtku koja je stvorila Windows.

Odlučio je da će trebati izraditi alat od početka kako bi se zadovoljile jedinstvene potrebe tvrtke. Projekt je želio zadržati u tajnosti i pokrenuti ga kao zabavno iznenađenje svojih suradnika, pa su na njemu radili nakon radnog vremena.

2. Dizajnirajte i razvijajte svoj alat mudrošću dizajnera i inženjera

Kao prvi korak izgradio je osnovnu verziju korisničkog sučelja svoje planirane biblioteke ikona na Sketch-u. (Ovih dana Jackie koristi Figmu - postali smo primarni alat za dizajn Microsoftovih timova za dizajn oblaka i AI dizajna .) Inspiraciju je uzeo iz IconJar-ovog dizajna i ismijavao sličnu verziju, oblikujući je u Microsoftovom jeziku Fabric Design.

Jednom kada je završio s dizajnom, trebao ga je izgraditi. Imao je iskustva s HTML-om, CSS-om i Javascript-om u stvaranju web stranice svog portfelja, pa je odlučio iskoristiti to postojeće znanje dodirnuvši Javascript knjižnicu prilagođenu početnicima pod nazivom Meteor.js. Omogućio mu je izgradnju prednjih i stražnjih baza podataka bez trošenja previše vremena za savladavanje novog programskog jezika.

Na internetskoj web stranici Meteor uzeo je udžbenik React i primijenio ono što je naučio za izgradnju biblioteke ikona. Na primjer, Meteor-ov udžbenik naučio je Jackie kako izraditi bazu podataka za popis obveza, a taj je koncept proširio na stvaranje baze podataka za svoju biblioteku ikona. Imajući u vidu pravi problem koji mu je trebao popraviti, osjećao se više nego motiviran za učenje na putu.

3. Prikupite i izvadite ikone iz spremišta tvrtke

Za one koji ne znaju, ikone se obično pohranjuju u datoteku fonta. Izazov s ikonama je što ne možete 'tipkati' ikone pomoću tipkovnice jer na tipkovnici postoji mnogo više znakova nego tipki. Umjesto toga, morate kopirati 'znak ikone' i zalijepiti ga u svoj dizajn. Prije toga, dizajneri su morali voditi datoteku s hrpom znakova s ​​znakovima koje često koriste kako bi mogli kopirati i zalijepiti u svoje dizajne. Jackiejev alat omogućuje dizajnerima da lako pretražuju i kopiraju "znak ikone" na jednom središnjem mjestu.

Preuzeo je i izvadio datoteke te dobio stvarne znakove unicode svake ikone. Zatim je pronašao Microsoftovu stranicu s dokumentacijom sa svim ikonama i njihovim pripadajućim imenima klasa koje su inženjeri koristili. Kopirao je popis imena ikona u proračunsku tablicu Excel, a zatim ga pretvorio u datoteku JSON za korištenje u svom kodu. Presto.

4. Distribucija

Nakon tri tjedna ne punog spavanja, prva verzija njegove Biblioteke ikona bila je spremna. Uputio je alat na Microsoft Azure, uslugu računanja u oblaku za izgradnju i upravljanje uslugama i aplikacijama koji su otvoreni za javnost. U ovom trenutku nije razmišljao previše o distribuciji, samo je poslao jednostavan e-mail s vezom do alata svom timu, a onda se to proširila na ostatak dizajnerskog studija usmenom predajom. Odmah je to bio pogodak (vidi dokaz gomile e-poruka u nastavku.)

Trenutno Jackie radi na V2 svoje biblioteke ikona. Njegovi suradnici pomažu mu u pronalaženju pogrešaka i predlaganju novih značajki, no već se pretvorio u tijek rada mnogih dizajnera. Nakon što završi s izgradnjom posljednjih nekoliko značajki i ispravljanjem preostalih grešaka, podijelit će je javno sa ostalim Microsoftovim timovima kako bi proširio utjecaj alata.

Planovi za budućnost

Dakle, što slijedi za naš neumorni vršnjak? U sljedećim mjesecima Jackie želi razviti pretvarač koji bi jednim klikom mogao uzeti sve 4000 ikona iz njegove Knjižnice ikona i pretvoriti ih u Figma komponente. To bi omogućilo svima u Microsoftu da mnogo lakše organiziraju i pretražuju ikone u Figmi, a da ne moraju proći posrednički alat. Da, njegovo novo sredstvo učinit će posljednjim zastarjelim.

Mogućnost za to nadilazi Microsoftove ikone. Na kraju, Jackie planira svoj pretvarač učiniti dostupnim dizajnerskoj zajednici, omogućujući svima da mogu upisati datoteku s fontom ikona i dobiti sve svoje ikone natrag kao Figma komponente.