Käsitsi joonistatud nool teeb liidesega midagi, mida ükski standardse UI-komplekti geomeetriline osuti ei suuda: see lisab iseloomu. See ütleb kasutajale: „siin töötas inimene, mitte konveierilint." Kuid nelja tosina noole vektoris joonistamine, iga sulejoone viimistlemine Figmas või Illustratoris, on poolteist tundi nõudev ülesanne, milleks tähtajaga disaineril lihtsalt aega pole.

Õnneks tegi disainer Denes Let's WP-st selle töö kunagi meie eest ära. Ta pani kokku komplekti 44 käsitsi joonistatud SVG-noolest ühtses, lakoonilises stiilis, mis pole seotud ühegi konkreetse disainisüsteemiga, ilma ilustuste ja liigse raskuseta. Komplekt on tasuta nii äri- kui ka isiklikuks kasutuseks: haara see ja kleebi oma kujundusse, muuda värvi ja paksust, skaleeri kvaliteeti kaotamata.

Allpool sellest, mis on arhiivi sees, kus ja kuidas neid nooli rakendada, milliseid tööriistu kohandamiseks kasutada ning kust leida sarnaseid komplekte, kui 44 varianti tundub vähe.

💡 Kiire ülevaade:

• Laadi Let's WP saidilt (või peeglist) alla 44 SVG-noolega ZIP-arhiiv
• Ava fail Figmas, Inkscape'is või Illustratoris ja kohanda joont oma paletiga sobivaks
• Lisa kujundusse, esitlusse või postitusse, skaleerimine on vaba, selgust kaotamata
• Kasuta äriprojektides autorile viitamata

Mis on komplekti sees

Arhiiv sisaldab 44 eraldi SVG-faili, igaühel oma kõvera iseloom ja otsa tüüp. Pärast zip-faili lahtipakkimist leiad sealt järgmist:

• Sirged nooled paremale ja vasakule, klassikalised osutid erineva otsakujuga (teravad, ümarad, topelt). Põhitööriist plokkide sidumiseks maandumislehel ja esitluses.
• Kaarjad ja kõverad, elementide rühmade piiritlemiseks, ekraaniala visuaalseks rõhutamiseks ja mittelineaarsete seoste näitamiseks diagrammidel.
• Kriips- ja viirutusjooned, ideaalsed samm-sammuliste juhiste, kasutajateekonna ja vooskeemide jaoks. Kriipsjoon loetakse „teekonnaks", viirutus „alternatiivse marsruudina".
• Peened jooned korraliku sulega ja jämedad tõmbed, esimesed sobivad minimalistlikku kasutajaliidesesse ja traatkavanditesse, teised toimivad ekspressiivse aktsendina reklaamilehel.
• Looklevad vinjetid ja dekoratiivsed elemendid, päiste, jaotiste eraldajate ja sotsiaalmeedia postituste kujundamiseks.

Kõik failid on SVG-vormingus. See tähendab, et joon ei ole kõverateks laiendatud, paksust (stroke-width) ja värvi (stroke) saad muuta nii graafikaredaktoris kui ka otse koodis. Ükskõik millisel skaleerimisel kvaliteet ei kao.

Komplekti levitatakse vabalt: äriline kasutamine on lubatud kliendi saitidel, esitlustes ja trükistes. Autorile viitamine pole nõutav, kuid on teretulnud. Autor Denes on disainer ja Let's WP blogi looja.

Kus on käsitsi joonistatud nooled kasulikud

Käsitsi kirjutatud stiil lahendab ühe konkreetse ülesande: see pehmendab liidese geomeetrilist jäikust. Seal, kus tavaline Material Design'i nool tundub liiga steriilne ja näotu, lisab käsitsi joonistatu „inimliku" puudutuse. Siin on viis tüüpilist stsenaariumi.

Maandumislehed ja reklaamilehed. Nool suunab pilgu CTA-nupule, seob „probleem → lahendus" ploki, rõhutab pakkumist. Käsitsi kirjutatud stiil vähendab visuaalset šabloonsust, leht tundub vähem konveieril valmistatud ja äratab seetõttu rohkem usaldust.

Esitlused ja pitch deck'id. Vektor lisatakse Google Slides'i, PowerPointi ja Keynote'i selgust kaotamata. Nooled seovad slaidil plokke, näitavad järjestust või hierarhiat, tulemus on puhas ega tõmba tähelepanu sisult kõrvale.

Diagrammid ja infograafika. Kriips- ja viirutusvariandid on valmis visuaalne keel vooskeemide, mõttekaartide ja kasutajateekonna jaoks. Lugeja mõistab suunda ilma täiendavate selgitusteta.

Sotsiaalmeedia postituste kujundamine. Noolevinjetid toimivad eraldajate ja aktsentidena Instagrami karussellides, Twitteri päistes ja artiklite kaanepiltides. Need lisavad lamedale pildile dünaamikat.

UI disain ja traatkavandid. Prototüüpimisel aitavad käsitsi joonistatud osutid näidata interaktsiooni: kuhu klõpsata, mis kuhu viib, kuidas ekraanid on seotud. Stiil on taotluslikult „mustandlik", klient näeb struktuuri, mitte lõplikku disaini.

Kuidas SVG-nooli redigeerida

Komplekt tarnitakse SVG-vormingus, seega on kasutatav iga vektorgraafika redaktor. Kolm võimalust, keerukuse kasvamise järjekorras.

Figma, tasuta, brauseripõhine. Lohista SVG-fail lõuendile, nool ilmub vektorobjektina. Vali see ja muuda paremal paneelil Stroke (paksus ja kontuuri värv). Skaleerimine on vaba. Ideaalne, kui töötad juba Figmas kujunduse kallal ega soovi tööriistade vahel vahetada.

Inkscape, tasuta, töölauarakendus. Võimas avatud lähtekoodiga SVG-redaktor. Ava fail, vajuta Ctrl+Shift+F, paneel „Täide ja kontuur". Siin on saadaval: täite ja kontuuri värv, kontuuri stiil (pidev, kriips, kriips-punkt), alguse ja lõpu joonemarkerid. Inkscape toetab pakktöötlust CLI kaudu, mugav, kui on vaja kõik 44 faili korraga ettevõtte värvidesse värvida.

Adobe Illustrator, tasuline, töölauarakendus. Professionaalne tööriist. Impordi SVG, vajadusel tühista rühmitus ja tööta Stroke ja Appearance palettidega. Saadaval on gradientkontuurid, pintslid ja efektid, kuid lihtsate noolte puhul on see tavaliselt üleliigne.

Kiire värvimuutus koodi kaudu

Kui on vaja nool lisada märgendisse otse inline SVG-na, muudab värvi üks atribuut:

1
<svg width="100" height="40" viewBox="0 0 100 40">
2
  <path d="M10,20 L80,20 L70,10 M80,20 L70,30"
3
        stroke="#FF6B35" stroke-width="2" fill="none"/>
4
</svg>

Asenda #FF6B35 oma värviga ja nool sobituks iga paletiga.

Video: SVG põhitõed algajatele

Kui sa pole kunagi vektorgraafikaga töötanud, alusta sellest õpetusest. Autor selgitab arusaadavalt: mis on SVG, kuidas luua ja redigeerida vektorkujundeid, kuidas rakendada stiile ja animatsiooni.

Sarnased tasuta vektornoolte komplektid

44 noolt on hea algus, kuid mõnikord vajab projekt vaheldust. Siin on viis kontrollitud allikat kvaliteetsete käsitsi joonistatud SVG-nooltega.

• Hand Drawn Arrows SVG Repos, kollektsioon 200+ SVG-noolega erinevates stiilides: minimalistlikest kuni dekoratiivseteni. Kõik MIT-litsentsi all, saab piiranguteta kasutada äriprojektides. Otsi märksõnaga „hand drawn arrows" saidilt svgrepo.com.

• Arrow Icons Flaticonist, üle 1800 nooleikooni SVG- ja PNG-vormingus. Saadaval on käsitsi joonistatud, kontuur-, lame- ja gradiendivariandid. Tasuta koos autorile viitamisega või tellimusega ilma: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows Vecteezys, kümned tuhanded vektornooled erinevatelt autoritelt. Filtreeri litsentsi järgi: vali „Free" ja vaata, kas konkreetne komplekt nõuab autorile viitamist: vecteezy.com.

• Arrow Sketch Freepikis, tohutu kollektsioon käsitsi joonistatud nooli vektor- ja PNG-vormingus. Tasuta koos autorile viitamisega (link Freepikile), premium-komplektid saadaval ilma viitamiseta: freepik.com.

• Komplekti peegel Bypeople'ist, kui peamine allikas (Let's WP) pole saadaval, saab needsamad 44 noolt hankida Bypeople'i kaudu: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Korduma kippuvad küsimused

Kas neid nooli saab kasutada äriprojektides?

Jah. Let's WP komplekti levitatakse vaba litsentsi alusel: äriline ja isiklik kasutamine on lubatud, sealhulgas kliendi saidid, esitlused, trükised ja digitaalsed tooted. Autorile viitamine pole nõutav. Nooled on vektorgraafiline ressurss, mitte programmikood: saate neid lisada kujundusse, redigeerida värvi ja kontuuri paksust, kuid mitte edasi müüa eraldiseisva noolekomplektina.

Mis formaadis failid on ja kuidas neid avada?

Formaat on SVG (Scalable Vector Graphics). Avaneb iga vektorredaktoriga: Figma (brauser, tasuta), Inkscape (töölaud, tasuta), Adobe Illustrator (töölaud, tasuline), Vectornator (iPad), CorelDRAW. SVG-d saab avada ka tekstifailina ükskõik millises koodiredaktoris ja redigeerida märgendit otse. Kiireks vaatamiseks ilma redaktorita lohista SVG-fail brauseriaknasse, see renderdub tavalise pildina.

Miks on käsitsi joonistatud nooled paremad kui tavalised geomeetrilised?

Käsitsi joonistatud nool lisab liidesele „inimlikkust". Geomeetriline standardse UI-komplekti nool ütleb „see on liides", samas kui käsitsi joonistatu ütleb „selle liidese taga on inimene". Turunduse maandumislehtedel, esitlustes ja õppematerjalides suurendab see kaasatust: silmal on, mille külge kinnituda. Ligipääsetavuse seisukohalt pole vahet, mõlemat ignoreerivad ekraanilugejad ilma aria-label'ita võrdselt, selle lisad ise.

Mida teha, kui algne Let's WP sait pole saadaval?

Algne sait letswp.io on nüüd saadaval aadressil letswp.justifiedgrid.com. Komplekt on ka agregaatorplatvormidel: Bypeople ja Armory (visualsoldiers.com). Kui ükski peegel ei tööta, kasuta alternatiive ülaltoodud loendist: SVG Repo ja Flaticon pakuvad kokku üle 2000 käsitsi joonistatud noole.

Kas need nooled sobivad trükki?

Jah. SVG kui vektorformaat skaleerub kvaliteeti kaotamata igale resolutsioonile: väikesest ikoonist laiformaatbännerini. Enne trükikotta saatmist veendu, et värvimudel on teisendatud CMYK-i (Figmas ja Inkscape'is tehakse seda PDF-i ekspordi ja sellele järgneva konverteerimise kaudu). Ekraanil 1-2 px kontuuripaksus muutub trükis juuksejooneks, suurenda stroke-width 3-5 px-ni.

Kas noolte endi muutmisel on piiranguid?

Ei ole. Komplekti SVG-failid ei ole „küpsetatud", kontuur ei ole kõverateks laiendatud. Muudad vabalt värvi, paksust, kontuuri stiili (pidev, kriips), lisad täidet ja gradiente. Ainus litsentsipiirang: redigeeritud komplekti ei tohi eraldiseisva kloontootena edasi müüa.

Võtta või mitte võtta: lõplik kokkuvõte Let's WP noolte kohta

Kui kujundad maandumislehte, koostad esitlust või kujundad postitust, katavad 44 noolt Deneselt enamiku tüüpilisi stsenaariume. Käsitsi kirjutatud stiil on universaalne: see ei lähe vastuollu Material Design'i, minimalismi ega brutalismiga.

Kiirete ülesannete jaoks võta ja kleebi nii, nagu on. Kohandatud disaini jaoks muuda värvi ja kontuuri paksust minutiga Figmas või Inkscape'is. Ja kui 44 varianti ei piisanud, annab ülaltoodud alternatiivide loend sulle veel paar tuhat noolt.

Laadi alla, eksperimenteeri ja muuda liidesed elavamaks.