Best practices voor schetssymbolen

Symbolen hebben een grote upgrade gekregen in Sketch 39. Ze zijn veel krachtiger dan vroeger en we proberen allemaal uit te zoeken hoe we ze het beste kunnen gebruiken.

Er is een bijgewerkte versie van deze gids beschikbaar:

Bij Tradeshift beginnen we een centraal Sketch-document met al onze symbolen te onderhouden. Om aan dit document te worden toegevoegd, moet een symbool een paar kwaliteits- en consistentiecontroles doorstaan. Iedereen die voor ons ontwerpt, zal dit document gebruiken, dus we willen niets anders dan de beste symbolen van onze gemeenschappelijke UI-componenten distribueren. Symbolen moeten zich op dezelfde manier gedragen, klein genoeg zijn om modulair te zijn, groot genoeg zijn om nuttig te zijn en goed georganiseerd zijn voor eenvoudige bewerking (of inbedden in een document wanneer losgekoppeld).

Hopelijk vind je mijn ideeën voor het maken van symbolen van goede kwaliteit nuttig, maar dit is absoluut een levend document en ik zal het updaten omdat we onvermijdelijk betere manieren vinden om complexere dingen te doen. Ik weet niet helemaal zeker of dit de perfecte aanpak is, maar ik wil graag een gesprek beginnen over de kwaliteit van symbolen.

Maak de meest elementaire componenten

Idealiter zou je Symbolen niet vaak moeten loskoppelen, omdat dat het doel verslaat. Maak de meest basale versie van een component, afzonderlijke symbolen die u later kunt combineren om een ​​meer onderhoudbaar geheel te maken.

Bijvoorbeeld: bij Tradeshift hebben we een pictogram-tab die er zo uitziet, maar u kunt zien dat onze component u toestaat om een ​​pictogram bovenop het symbool te plaatsen, waarmee u vervolgens de tab eenvoudig in actieve / inactieve modi kunt schakelen zonder moeten losmaken of teveel varianten maken van wat in wezen hetzelfde symbool is.

Stel een naamgevingsconventie vast

Geef je lagen een passende naam. We proberen ons aan kleine letters te houden, gescheiden door streepjes. Sketch organiseert automatisch symbolen in mappen wanneer u een / in de naam plaatst.

Ik beveel een controle / definiërende naamgevingconventie aan. Standaardstatussen mogen geen status hebben - tab-inactief en tab-actief is overbodig. tab, tab-actief is de manier om te gaan.

Voorbeeld:

  • knoop / color-mouseover
  • tab / icon-actief

Pete Lacey maakte een goed punt dat namen niet te nauw moeten worden gebonden aan hun fysieke kenmerken, omdat ze waarschijnlijk zullen evolueren. Voor ons zijn we vrij strikt groen en blauw, dus het is echt hun bepalende eigenschap. Maar misschien zijn primair, secundair enz. Geschikter.

Wanneer u Sketch Runner gebruikt, betekent het opstellen van een naamgevingsconventie dat u altijd snel kunt vinden waarnaar u op zoek bent, omdat er een organisatiepatroon is om aan te voldoen.

Niemand ervaart in het algemeen een slecht georganiseerd schetsbestand, dus laten we slecht georganiseerde symbolen niet verspreiden.

Gebruik generieke tekst

Geef de lagen generieke plaatsaanduidingstekst - niet alleen de tekst die u gebruikte in de specifieke use case die u had toen u dit symbool maakte. Onze tijdelijke tekst voor knoppen is "ACTIE-INTENT" als een passieve herinnering aan hoe u uw microcopie moet formuleren.

Geef lagen de juiste namen

Geef de lagen zelf passende en consistente namen. Achtergronden moeten altijd achtergrond worden genoemd en niet worden vermengd met bg, enz. Vloek je als je het de naam Rectangle 100 geeft! Als u het symbool verwijdert, moet het een opgeruimd en op zichzelf staand object blijven.

Tekst is vooral belangrijk. Zorg ervoor dat symbolen die u regelmatig vervangt (d.w.z. door vergelijkbare symbolen met verschillende statussen) dezelfde namen van tekstlagen hebben. U kunt tekst in een symbool bewerken in de vervangende editor - als u het symbool vervangt, blijft de tekst in het nieuwe symbool behouden als het dezelfde naam van de tekstlaag deelt. Het toont ook de naam van de tekstlaag, niet de inhoud, als de veld-ID.

Implementeer een schone en consistente hiërarchie

Plaats elke bewerkbare tekst bovenaan.

Groep netjes en zorg ervoor dat er geen extra groepen of elementen zijn die geen doel hebben (wat kan gebeuren als u een pictogram enz. Plakt).

Symbolen worden hergebruikt, losgemaakt en geremixed - ze moeten echt goed georganiseerd zijn, zodat iedereen snel kan begrijpen wat er aan de hand is als ze onder de motorkap kijken.

Zorg ervoor dat het formaat van symbolen correct wordt gewijzigd

Speel met je symbolen, test ze en probeer ze te breken. Je moet proberen iets kogelvrij te bouwen. Een extra paar minuten van uw tijd om het symbool te perfectioneren, bespaart hoofdpijn op de weg en maakt ontwerpers die uw Sketch-bestanden en -symbolen gelukkig moeten houden.

Bekijk het cheatsheet van Peter Nowell

Tekst moet worden vastgesteld

Tekst moet worden gefixeerd en correct worden uitgelijnd, zodat wanneer u het formaat van een symbool wijzigt, de positie en opvulling correct blijft. Tekst moet de eigenschap 'Resize Object' resizing hebben.

Ontwerp de kleinste versie van een symbool

Het is gemakkelijker om symbolen rond het uitrekken van symbolen te ontwerpen dan ze te comprimeren.

Voor ons willen we dat tab een minimale breedte van 99 px heeft, ongeacht de tekst. De kleinste versie van het tabblad is dus 99 px breed en we weten dat we deze niet kleiner mogen maken.

Zorg ervoor dat de symbolen die u vervangt, dezelfde tekengebiedgrootte hebben

Sketch vervangt het ene symbool door een ander en comprimeert / rekt het symbool uit zodat het in dezelfde grootte past. Misschien is dit opzettelijk, misschien is het een bug, maar uiteindelijk moet je proberen symbolen te maken die je regelmatig even groot maakt. Als het ze uitrekt, kunt u met de rechtermuisknop klikken-> Op origineelformaat instellen om het te repareren.

Raak me met ideeën en feedback! Ik weet niet helemaal zeker of dit de perfecte aanpak is, maar ik wil graag een gesprek beginnen over de kwaliteit van symbolen.