Vodiči za skice

Najefikasniji način upotrebe ikona ako ste dizajner ili programer.

Ne samo kako to učiniti, već i zašto je to bolje nego bilo koji drugi način.

Ispovijed: Ovaj se članak namjerno polarizira kako bi netko napisao bijesni komentar i dao mi efikasnije rješenje.
Možda je to manipulacija Ja to nazivam Predvidljivost Interneta

Ikone su mi velike boli u guzici:

  • Moraju izgledati homogeno (sličan vizualni stil)
  • Moraju imati granične kutije
  • Oni moraju raditi kada su stvarno veliki i stvarno mali
  • Moraju ih biti lako dizajnirati
  • Moraju ih se lako kodirati
  • Moraju biti uspješni (sporedna napomena: Peter Nowell je kralj SVG-ova)
  • Moraju ne gnjaviti s vašim dizajnerskim timom
  • Moraju ne gnjaviti sa svojim razvojnim timom

Ok, pa što je sa fontovima ikona?

Fontovi ikona poput FontAwesome nastali su kao način ublažavanja agonije rada s ikonama, ali još uvijek nisu savršeni. Dizajn s njima je jednostavno ... u redu; još uvijek morate potražiti glif, kopirati ga i zalijepiti u sloj teksta. Ne možete ih zaista simbolizirati, a ako to učinite, promjena njihove boje zahtijeva malo trika sa simbolom teksta. Razvoj s fontovima ikona je jednostavan, ali ne bez problema. Ako preglednik ne uspije učitati font ikone, onda ste u dreku bez vesla. I ti si sama. U kajaku. Tužno.

Pa ... što sad?

Dakle ... koristiti SVG-ove?

Pa, za dizajnere, SVG-ove je sigurno lakše simbolizirati u Sketch-u, ali može biti vrsta boli da promijene boju. Dakle, nemojte ih praviti simbole, zar ne? Tada možete koristiti slojeve slojeva da ih napravite različitim bojama! Ali što ako želite ažurirati malu strelicu pada s karata do trokuta? Sretno pronađite svih 398 pojava te male strelice i ažurirajte ih jednu po jednu. Dakle, to je ... pa, nije sjajno. I iz iskustva znam da programeri ne vole ništa više od korištenja samostalnih SVG-ova za svaku ikonu u mom dizajnu. Ne brinite, postoji samo 207 jedinstvenih ikona. To ne bi trebalo utjecati na učitavanje stranice. Obećajem. / s

Ugh, što onda ?!

Nastavite čitati, rukavice I prije nego što uđemo, evo nešto besplatno. To će vam pomoći da pratite zajedno s ostatkom udžbenika.

Moj tijek rada

Moj je pristup podijeljen na dva dijela: Što radim za dizajn i Što radim za razvoj. Nijedna tehnika nije potpuno savršena, ali dosad je bila uspješna i većinu ljudi čini sretnima na putu.

To je važno!

Što radim za dizajnere

Apsolutno volim set ikona Nucleo. Na raspolaganju su 8.300+ ikona u svim vrstama različitih stilova (obrisane, pune, mini, pune boje, dvotonske), a čak su uključile i one čudne društvene ikone koje su vam potrebne u gotovo svakom projektu. Možete uzeti one ispod (49 USD za godinu dana, 129 dolara za život).

Apsolutni najbrži i najodrživiji način upotrebe ikona u Sketch-u je upotreba simbola u boji i maski. Prije ste vidjeli ovu tehniku ​​zahvaljujući mom prijatelju Francescu, ali evo kratkog osvježenja:

Korak 1: Napravite simbole za boje koje želite da upotrijebite za svoje ikone. Uvjerite se da je svaka ploča s simbolima boje iste veličine.

Korak 2: Napravite novu ploču za svoj simbol ikone. Zalijepite svoju ikonu na novu ploču s umjetnicima. Ako koristite aplikaciju za radnu površinu Nucleo Icon, samo povucite ikonu izravno u Sketch, a zatim je stavite na svoju novu ploču s umjetnicima.

Korak 3: Provjerite je li ikona jednog oblika i postavite je kao masku. Ako vaša ikona nije u jednom obliku, odaberite različite staze i ujedinite ih.

Korak 4: Na vrh maske ikona umetnite bilo koji od simbola boje i promijenite veličinu veličine umetničke ploče. Ovu boju moći ćete nadjačati svaki put kad dodate instancu svoje ikone!

Korak 5 (neobavezno): Ako je vaša ikona logotip (pogledajte gore), postavite masku na boju marke marke aplikacije. Lako je brzo pronaći službene boje brenda na brandcolors.net. To vam štedi od potrebe stvaranja simbola u boji za gomilu različitih boja aplikacija - ako ikada poželite upotrijebiti boju marke, isključite preklapanje simbola boje:

Upozorenje: Ako imate simbole boje s poluprozirnim ispunama, moći ćete vidjeti masku kako se ispunjava kroz prozirnost. Ako želite da 25% crna boja bude dostupna, nemojte koristiti masu na kojoj se puni.

Zašto ovo djeluje za dizajnere

  • Sve su moje ikone simboli, pa ako ih ikada poželim ažurirati, mogu to učiniti na jednom mjestu i odmah vidjeti kako se ažuriraju u svim mojim dizajnima.
  • Mogu brzo prebrisati boju inspektora.
  • Ako ažuriram simbol u boji, ažurirat će sve ikone koje koriste tu boju.
  • Mogu gnijezditi ikone unutar drugih simbola i brzo ih izmjenjivati.

Zašto ovo ne djeluje za programere

  • Zeplin i InVision ne čitaju preskakanje boja, pa će vam uvijek ikada pokazati boju koju koristite u osnovnom simbolu.
  • Simbol boje + tehnika maske dodaje nešto svjetlosti veličini SVG datoteke.
  • Oni su svi pojedinačni SVG-ovi, pa će vragovi htjeti skočiti s mosta.
Bočna napomena: Sve ikone u UX Power Tools izrađene su na ovaj način. Izmjena boja je vrlo brza, a još je lakše zamjena ikona unutar elemenata poput gumba, polja i obavijesti.

Što radim za programere

Zeplin djeluje nevjerojatno dobro za izgled, boju i tipografiju, ali nije strašno učinkovit za imovinu. Umjesto da vragovi povlače ikone izravno iz Zeplina (ili im šalju zip SVG-ova), koristim Nucleo za izradu SVG spriteta, a zatim to šaljem programerima. Ne da se hvalim, ali oni su meni "

1. korak: Kreirajte novi projekt u web aplikaciji Nucleo.

Korak 2: Dodajte ikone u svoj Nucleo projekt koje namjeravate koristiti (ili ste već koristili) u svojim dizajnovima.

Korak 3: Otvorite projekt, odaberite sve ikone na desnoj ploči i kliknite Preuzmi.

Korak 4: Odaberite svoje izvozne postavke. "Izvezi kao simbol" koristi xlink: href koji će biti uništen u SVG 2 (još nije izdan). Kako je rečeno, više neće biti potreban samo dio "xlink", pa je "Izvoz kao simbol" još uvijek sigurna opcija. Obično odaberem "Izvoz CSS-a", koji stvara jedan SVG sprite, a zatim stvara CSS datoteku s klasama za svaku ikonu.

Ali čekajte, to nije ni najbolji dio!

Uz SVG sprite i generirani CSS, Nucleo također stvara HTML stranicu na kojoj se prikazuje svaka ikona i CSS klasu za korištenje te ikone u kodu.

Zašto ovo djeluje za dizajnere

  • Ne morate mijenjati postupak dizajniranja
  • Postoji lijepi GUI za odabir ikona
  • Dodavanje novih ikona je za obje strane jednostavno

Zašto ovo djeluje za programere

  • Stvara jedan SVG sprite i ispravan CSS
  • Programerima pruža GUI za pronalaženje ikona i kopiranje koda
  • Oni mogu mijenjati boju i veličinu ikone u kodu. Aleluja!

Sažetak

Postoje brzi načini za dizajn s ikonama i brzi načini za razvoj s njima. Malo je dodatnog rada da stvari budu optimalne za obje strane, ali to će svima olakšati život.

Ako ne koristite Nucleo, možete pronaći puno usluga poput Iconizr-a koji će vam pomoći u stvaranju SVG sprite-a. Ako imate dovoljno sreće da imate vlastite dizajnere ikona, morat ćete to svejedno učiniti jer će sve biti po mjeri! Ti si sretan pas.

Pogledajte UX Power Tools kako biste vidjeli kako možete koristiti te ikone u svim vrstama sofisticiranih ugniježđenih simbola. To je zaista najbrži način dizajniranja.

Kad se ne borim s ikonama, radim na alatima za dizajn Sketch-a u UX Power Tools kako bih bio bolji i učinkovitiji dizajner.

Slijedite UX Power Tools na Twitteru
Slijedite me na Twitteru