Käsin piirretty nuoli tekee käyttöliittymälle jotain, mihin mikään vakio-UI-kitin geometrinen osoitin ei pysty: se tuo luonnetta. Se viestii käyttäjälle "tämän takana on ihminen, ei liukuhihna." Mutta neljän tusinan nuolen piirtäminen vektorina, jokaisen kynäkäyrän viimeistely Figmassa tai Illustratorissa, on puolentoista tunnin homma, johon deadlinea pakoilevalla suunnittelijalla ei yksinkertaisesti ole aikaa.

Onneksi suunnittelija Denes Let's WP:stä teki tämän työn puolestamme. Hän kokosi 44 käsin piirrettyä SVG-nuolta yhtenäisellä, pelkistetyllä tyylillä, joka ei ole sidottu mihinkään tiettyyn designjärjestelmään, ilman koristeellisuutta, ilman turhaa painokkuutta. Setti on ilmainen sekä kaupalliseen että yksityiseen käyttöön: nappaa se ja liitä taittoon, vaihda väriä ja paksuutta, skaalaa laadun kärsimättä.

Alla kerrotaan, mitä arkisto sisältää, missä ja miten näitä nuolia kannattaa käyttää, millä työkaluilla muokkaus onnistuu ja mistä löytyy vastaavia settejä, jos 44 variaatiota tuntuu riittämättömältä.

💡 Nopea yleiskatsaus:

• Lataa ZIP-arkisto, jossa on 44 SVG-nuolta, Let's WP:n sivustolta (tai peilipalvelimelta)
• Avaa tiedosto Figmassa, Inkscapessa tai Illustratorissa ja säädä viiva palettiisi sopivaksi
• Lisää taittoon, esitykseen tai somejulkaisuun, skaalaus on vapaata ilman selkeyden menetystä
• Käytä kaupallisissa projekteissa ilman mainintaa tekijästä

Mitä setti sisältää

Arkisto sisältää 44 erillistä SVG-tiedostoa, joista jokaisella on oma kaarikaraktäärinsa ja kärkityyppinsä. Tässä on mitä löydät zipin purkamisen jälkeen:

• Suorat nuolet oikealle ja vasemmalle, klassisia osoittimia eri kärkimuodoilla (terävä, pyöristetty, kaksoiskärki). Perustyökalu lohkojen linkittämiseen laskeutumissivulla ja esityksessä.
• Kaari- ja käyräviivat, elementtiryhmien ääriviivoitukseen, visuaaliseen korostukseen näyttöalueella ja epälineaaristen yhteyksien osoittamiseen kaavioissa.
• Katko- ja viivoitusviivat, ihanteellisia vaiheittaisiin ohjeisiin, käyttäjäpolkuihin ja vuokaavioihin. Katkoviiva tulkitaan "reitiksi", viivoitus "vaihtoehtoiseksi reitiksi".
• Ohuet viivat siistillä kynäjäljellä ja paksut vedot, ensin mainitut sopivat minimalistiseen UI:hun ja rautalankamalleihin, jälkimmäiset toimivat ilmeikkäänä korostuksena promosivulla.
• Silmukkamaiset koukerot ja koriste-elementit, otsikoihin, osioiden jakajiin ja somejulkaisujen tyylittelyyn.

Kaikki tiedostot ovat SVG-muodossa. Tämä tarkoittaa, että viivaa ei ole laajennettu käyriksi, vaan voit muuttaa paksuutta (stroke-width) ja väriä (stroke) sekä grafiikkaeditorissa että suoraan koodissa. Laatu ei kärsi missään skaalauksessa.

Settiä jaetaan vapaasti: kaupallinen käyttö on sallittua asiakassivustoilla, esityksissä ja painotuotteissa. Tekijän mainintaa ei vaadita, mutta se on toivottavaa. Tekijä, Denes, on suunnittelija ja Let's WP -blogin luoja.

Missä käsin piirretyt nuolet ovat hyödyllisiä

Käsin piirretty tyyli ratkaisee yhden tietyn tehtävän: se pehmentää käyttöliittymän geometrista jäykkyyttä. Siinä missä vakio Material Design -nuoli näyttää liian steriililtä ja persoonattomalta, käsin piirretty tuo "inhimillisen" kosketuksen. Tässä on viisi tyypillistä skenaariota.

Laskeutumissivut ja promosivut. Nuoli ohjaa katseen CTA-painikkeeseen, linkittää "ongelma → ratkaisu" -lohkon, korostaa tarjousta. Käsin piirretty tyyli vähentää visuaalista kaavamaisuutta, sivu näyttää vähemmän liukuhihnatuotannolta ja herättää siksi enemmän luottamusta.

Esitykset ja pitch deckit. Vektori upottuu Google Slidesiin, PowerPointiin ja Keynoteen selkeyden kärsimättä. Nuolet linkittävät lohkoja dialla, näyttävät järjestyksen tai hierarkian, lopputulos on selkeä eikä häiritse ydinsanomalta.

Kaaviot ja infografiikat. Katko- ja viivoitusvariantit tarjoavat valmiin visuaalisen kielen vuokaavioihin, miellekarttoihin ja käyttäjäpolkuihin. Lukija ymmärtää suunnan ilman lisäselityksiä.

Somejulkaisujen tyylittely. Nuolikoukerot toimivat jakajina ja korostuksina Instagram-karuselleissa, Twitter-otsikoissa ja artikkelikansissa. Ne tuovat dynamiikkaa litteään kuvaan.

UI-suunnittelu ja rautalankamallit. Kun prototypoit, käsin piirretyt osoittimet auttavat ilmaisemaan interaktiota: minne klikata, mikä johtaa mihinkin, miten näytöt liittyvät toisiinsa. Tyyli on tarkoituksella "luonnosmainen", asiakas näkee rakenteen, ei lopullista designia.

Miten SVG-nuolia muokataan

Setti toimitetaan SVG-muodossa, joten mikä tahansa vektorigrafiikkaeditori käy. Kolme vaihtoehtoa, vaativuusjärjestyksessä.

Figma, ilmainen, selain. Raahaa SVG-tiedosto työalustalle, nuoli ilmestyy vektoriobjektina. Valitse se ja muuta oikean paneelin Stroke-kohtaa (paksuus ja ääriviivan väri). Skaalaus on vapaata. Ihanteellinen, jos työskentelet jo Figmassa taiton parissa etkä halua vaihdella työkalujen välillä.

Inkscape, ilmainen, työpöytä. Tehokas avoimen lähdekoodin SVG-editori. Avaa tiedosto, paina Ctrl+Shift+F, "Täyttö ja viiva" -paneeli. Täällä ovat käytettävissä: täytön ja viivan väri, viivan tyyli (yhtenäinen, katkoviiva, pistekatkoviiva), alku- ja loppuviivamerkit. Inkscape tukee komentorivieräajoa, mikä on kätevää, jos haluat värjätä kaikki 44 tiedostoa kerralla yritysväreihin.

Adobe Illustrator, maksullinen, työpöytä. Ammattilaistyökalu. Tuo SVG, pura ryhmitys tarvittaessa ja työskentele Stroke- ja Appearance-palettien kanssa. Liukuväriviivat, siveltimet ja efektit ovat käytettävissä, mutta yksinkertaisille nuolille tämä on yleensä ylimitoitettua.

Nopea värinvaihto koodin kautta

Jos haluat upottaa nuolen suoraan merkintään inline-SVG:nä, värinmuutos onnistuu yhdellä attribuutilla:

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>

Korvaa #FF6B35 omalla värilläsi, ja nuoli sopii mihin tahansa palettiin.

Video: SVG:n perusteet aloittelijoille

Jos et ole koskaan työskennellyt vektorigrafiikan parissa, aloita tästä tutoriaalista. Tekijä selittää selkeästi: mitä SVG on, miten vektorimuotoja luodaan ja muokataan, miten tyylejä ja animaatiota sovelletaan.

Vastaavia ilmaisia vektorinuolisettejä

44 nuolta on hyvä alku, mutta joskus projekti kaipaa vaihtelua. Tässä on viisi varmennettua lähdettä laadukkaille käsin piirretyille SVG-nuolille.

• Hand Drawn Arrows SVG Repossa, yli 200 SVG-nuolen kokoelma eri tyyleissä: minimalistisesta koristeelliseen. Kaikki MIT-lisenssillä, voidaan käyttää kaupallisissa projekteissa rajoituksetta. Hae "hand drawn arrows" osoitteessa svgrepo.com.

• Arrow Icons Flaticonista, yli 1 800 nuolikuvaketta SVG- ja PNG-muodossa. Käsin piirrettyjä, ääriviiva-, litteitä ja liukuvärivaihtoehtoja on saatavilla. Ilmainen maininnalla tekijästä, tai tilauksella ilman: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows Vecteezyssä, kymmeniä tuhansia vektorinuolia eri tekijöiltä. Suodata lisenssin mukaan: valitse "Free" ja tarkista, vaatiiko tietty setti maininnan tekijästä: vecteezy.com.

• Arrow Sketch Freepikissä, valtava kokoelma käsin piirrettyjä nuolia vektori- ja PNG-muodossa. Ilmainen maininnalla (linkki Freepikiin), premium-setit saatavilla ilman mainintaa: freepik.com.

• Setin peilaus Bypeoplelta, jos päälähde (Let's WP) ei ole käytettävissä, samat 44 nuolta saa Bypeoplen kautta: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Usein kysytyt kysymykset

Voiko näitä nuolia käyttää kaupallisissa projekteissa?

Kyllä. Let's WP:n settiä jaetaan vapaalla lisenssillä: kaupallinen ja yksityinen käyttö on sallittua, mukaan lukien asiakassivustot, esitykset, painotuotteet ja digitaaliset tuotteet. Tekijän mainintaa ei vaadita. Nuolet ovat vektorigrafiikkaresurssi, eivät ohjelmakoodia: voit lisätä ne taittoon, muokata väriä ja viivan paksuutta, mutta et jälleenmyydä erillisenä nuolisettinä.

Mitä tiedostomuotoa tiedostot ovat ja miten ne avataan?

Muoto on SVG (Scalable Vector Graphics). Avautuu millä tahansa vektorieditorilla: Figma (selain, ilmainen), Inkscape (työpöytä, ilmainen), Adobe Illustrator (työpöytä, maksullinen), Vectornator (iPad), CorelDRAW. SVG:n voi avata myös tekstitiedostona missä tahansa koodieditorissa ja muokata merkintää suoraan. Nopeaan katseluun ilman editoria raahaa SVG-tiedosto selainikkunaan, se renderöityy tavallisena kuvana.

Miksi käsin piirretyt nuolet ovat parempia kuin tavalliset geometriset?

Käsin piirretty nuoli tuo "inhimillisyyttä" käyttöliittymään. Geometrinen vakio-UI-kitin nuoli sanoo "tämä on käyttöliittymä", kun taas käsin piirretty sanoo "tämän käyttöliittymän takana on ihminen." Markkinoinnin laskeutumissivuilla, esityksissä ja opetusmateriaaleissa tämä lisää sitoutumista: silmälle on jotain mihin tarttua. Saavutettavuuden kannalta eroa ei ole, ruudunlukijat ohittavat molemmat yhtä lailla ilman itse lisäämääsi aria-labelia.

Mitä tehdä, jos alkuperäinen Let's WP -sivusto ei ole käytettävissä?

Alkuperäinen sivusto letswp.io on nyt käytettävissä osoitteessa letswp.justifiedgrid.com. Setti on myös aggregaattialustoilla: Bypeople ja Armory (visualsoldiers.com). Jos mikään peilaus ei toimi, käytä vaihtoehtoja yllä olevasta listasta: SVG Repo ja Flaticon tarjoavat yhdessä yli 2 000 käsin piirrettyä nuolta.

Soveltuvatko nämä nuolet painotuotteisiin?

Kyllä. SVG on vektorimuoto, joka skaalautuu laadun kärsimättä mihin tahansa resoluutioon: pienestä kuvakkeesta suurikokoiseen bannereihin. Ennen painotaloon lähetystä varmista, että värimalli on muunnettu CMYK:ksi (Figmassa ja Inkscapessa tämä tehdään viemällä PDF:ään ja muuntamalla sen jälkeen). Ruudulla 1-2 px:n viivapaksuus muuttuu painettuna hiusviivaksi, nosta stroke-width arvoon 3-5 px.

Onko nuolien itsensä muokkaamiselle rajoituksia?

Ei mitään. Setin SVG-tiedostoja ei ole "leivottu kiinni", viivaa ei ole laajennettu käyriksi. Voit vapaasti muuttaa väriä, paksuutta, viivan tyyliä (yhtenäinen, katkoviiva), lisätä täytön ja liukuvärejä. Ainoa lisenssirajoitus: muokattua settiä ei saa jälleenmyydä erillisenä kloonituotteena.

Ottaako vai eikö ottaa: lopullinen erittely Let's WP -nuolista

Jos taitat laskeutumissivua, koostat esitystä tai tyylittelet somejulkaisua, Denesin 44 nuolta kattavat useimmat tyypilliset skenaariot. Käsin piirretty tyyli on universaali: se ei riitele Material Designin, minimalismin eikä brutalismin kanssa.

Nopeisiin tehtäviin ota ja liitä sellaisenaan. Räätälöityyn designiin vaihda väri ja viivan paksuus minuutissa Figmassa tai Inkscapessa. Ja jos 44 variaatiota ei riittänyt, yllä oleva vaihtoehtolista antaa sinulle pari tuhatta nuolta lisää.

Lataa, kokeile ja tee käyttöliittymistä elävämpiä.