Pinakamabentang UX at Ui na mga Kit para sa Sketch, Photoshop, Illustrator, XD, at Figma

Tinutulungan ng mga UX at UI Kit ang mga nagdidisenyo sa maraming paraan at sa iba’t ibang yugto sa proseso ng pagdisenyo. Ipapakita rito ang ilan sa mga pinakamabentang UX at UI na kit mula sa Envato, upang makapagsimula sa pag-wireframe, prototype, at pagdisenyo ng sunod na website o app.

Ano ang mga UX at UI Kit?

Ang mga sumusunod na kit ay magandang paraan upang masimulan ang proseso ng pag-disenyo. Maaari silang magsilbi bilang inspirasyon, isang mabilis na paraan na ipresenta ang ideya sa kliyente, o kaya ay bigayan ka ng gabay para sa isang buong disenyo.  Kadalasan ay pwede ito para sa Sketch, Adobe Illustrator at iba pa, ang mga kit ay nakaayos sa lohikal na paraan na may mga artboard, estilo, at simbolo, upang matulungan kang hanapin at gamitin ang mga elementong kailangan.

Ang ilan ay maraming bisa at mayroong mataas na bilang ng mga elemento, ang ilan ay espesipikong para sa pag-wireframe, ang iba ay mas para sa mga bagay kagaya ng eCommerce, social media, mapa at nabigasyon, real estate, mobile UIs, kung ano pa man.

• 
  Sketch
  Paano Mag-organisa ng Estilo at Simbolo ng Pagguhit na Parang Propesyonal
  Adi Purdila
• 
  Sketch
  Gabay sa Pagpapadali ng Trabaho sa mga Artboard at Layer 
  Adi Purdila
• 
  Pag-Wireframe
  Gabay Para sa Baguhan sa Pag-Wireframe
  Winnie Lim

Sinusuportahang Aplikasyon para sa Disenyo

Ang bawat kit na naka-lista rito ay nababagay sa kahit isa sa mga sumusunod, at kadalasan mas marami pa:

• Sketch
• Adobe Photoshop
• Adobe Illustrator
• Adobe XD
• Figma
• InVision

Sa panahon ngayon ay maaari nang buksan ang Sketch file sa Sketch, Adobe XD, Figma, and InVision nang walang problema.

Ang Adobe XD ay tumatanggap din ng mga Photoshop file, at pinananatiling pareho sa orihinal ang mga artboard, layer at asset.

Ang Axure ay hindi kasing masunurin sa ibang mga format ng file, ngunit para sa kahit ano pang aplikasyon ginawa ang kit, mataas pa rin ang tsansang nababagay pa rin ito sa iyong sangkap na pang-disenyo.

Pareho ba ang UX at UI?

Ang mga terminong UX at UI ay madalas na napagsasalit. Habang mayroong pagkakatulad, at ang dalawa ay nagtatrabaho nang magkasama, hindi pareho ang mga ito.

Sa UI kit, ang pinag-uusapan natin ay mga asset na maaaring gamitin sa pag-disenyo ng user interface. Ito ang pag-disenyo ng presentasyon, aesthetics, ang biswal na anyo ng UI. Ang mga asset sa UX kit, sa kabilang banda, ay ginagamit sa pagdisenyo ng pagdanas sa website o app. Isipin ang mga wireframe at prototype. Ang pagkakagamit, daloy, interaksyon sa pagitan ng gumagamit at produkto.

Ang mga UX at UI kit ay maaaring gampanan ang parehong gamit, kung kayamadalas na kolektibong tinatawag na “UX at UI Kits.”

Mga UX at UI Kit sa Envato

Maroong daan-daang mga UX at UI kit sa Envato Market at sa Envato Elements (kung saan maaaring mag-download ng kahit ilan mo gusto sa mababang presyo). Tignan natin ang ilan sa mga pinakakilala!

1. Wireland (Sketch)

Sinasabi na ng pangalan; Ang Wireland ay para sa pag-wireland. Mayroon itong higit sa 200 na layout, at mayroong mga detalye, na nagbibigay ng higit sa lo-fidelity, ngunit ang kalmado at organisadong asul na aesthetic ay perpekto para sa mga wireframe.

Mayroon itong koleksyon ng mga device, elementong markup para sa pagpapakita ng daloy, gumagamit ng mga simbolo, at naka-base sapamilyar na ayos ng Bootstrap. Huli, mayroon ding libreng sample na maaaring i-download at subukan bag o bilhin ang buong lisensyadong bersyon.

2. Userflow & Sitemap (Photoshop at Illustrator)

Paglatag mg userflow ay mahalagang parte ng proseso ng pagdisenyo. Nangyayari to sa umpisa at nang mabilis. Ang Userflow & Sitemap UX Kit ay mayroon nang lahat ng elemento para magawa ito: koleksyon ng mga screen at graphic para ma-wireframe kung paano pupunta sa isang bahagi ng website tungo sa iba. 

Mayroong itong madili at maliwag na mga bersyon, depende sa kagustuhan, ngunit iyon na ang pinaka komplikado na kaya ng biswal na decision. Kumuha ng mga screen at i-link nang sama-sama!

3. Bolder Mobile UI (Sketch)

Ang Bolder ay UI kit na mayroong 65 na mataas ang kalidad na mobile layout, kabilang na ang social media, eCommerce at blogging. Ang Bolder ay maaliwalas sa mga swathe at inoorganisa gamit ng artboard, layer, simbolo at tipograpikong estilo, na ginagawang madali para sa kahit sino nagdidisenyo ng mobile UI.

4. Kama iOS UI Kit (Sketch)

Ang Kama ay espesipikong dinisenyo para sa iOS. Mayroon itong higit sa 120 na screen, at nagbibigay samga nagdidisenyo ng app ng mga chart layout, walkthrough, eCommerce, multimedia, user profile, nabigasyon, at social media na mapagpilian, saka na rin 60 na custom icon.

5. Farah (Sketch, XD, Figma)

Ang Farah ay tunay na nakaaakit. Mayroon itong 15 na hi-fidelity mobile layout, na maaaring baguhin, at mayroong modernong anyo.  Ito ay bagong dagdag sa Envato Market, tumutugon sa kahingian ng iba’t ibang aplikasyon sa pagdisenyo sa pagtugon espesipiko sa mfa gumagamit Sketch, XD, at Figma.

Kung naghahanap ng malakas ang dating, ito ay magandang gamitin oara sa mga disenyo.

6. MIGO Dating UI Kit (Sketch, XD, Figma)

Ang MIGO ay isa pang kaakit-akit na disenyo mula sa hoangpts. Ito ay para sa mga dating app at lalagyan ang disenyo ng maiingay na kulay, gradient, at kabuoang pagkaakit. Mayroon itong 22 na mataas ang kalidad na iOS (handa para sa iPhoneX), at nababagay sa Sketch, XD, at Figma.

7. Stamp (Sketch)

Ang Stamp ay isa pang hi-fidelity na mapagpipilian, mayroong higit sa 75 na layout “card” na may higit sa isang daan na nilalaman.

Baguhin gamit ng Stamp imbis na gumawa ng bago, at agarang nagkakaroon ng kumpleto at modernong web design.

8. Ultramarine UI Kit (Sketch)

Maganda iti. Hindi lang dahil bagay iyong ultramarine at lime green. Muli, ito ay hi-fidelity, kaya hindi para sa UX na disenyong produkto, mas mpara sa magandang anyo. Ito ay malakas at kumpleto na veneer, mayroong higit sa 120+ na component na maaaring gamitin sa mga disenyo.

9. Next Ecommerce (Sketch, Photoshop)

Kung ikinatutuwa mo ang paggawa ng disenyo sa Photoshop, ang Next Ecommerce ay nagbibigay ng isa pang opsyon. Sa 35 PSD + Sketch Files, maraming pwedeng gamiting mobile UI na elemento. 

10. Doom (Photoshop)

Isa pang opsyon sa Photoshop, and Doom ay isang malaking UI na kit. Mayroon itong halos 100 na PSD na layout, kasama na ang homepage, inner page, at iba’t ibang mga niche, at ang unang halimbawa na mayroong admin dashboard.

Ang Doom ay mayroon ding mga cryptocurrency na disenyo para sa site kaya maaaring gamitin ito kung nais magdisenyo ng landing page para rito!

11. Blokk Wireframe Kit (Photoshop)

Ang Blokk ay isa pang Photoshop kit, na may simpleng UI para sa pag-wireframe. Walang hindi kinakailangang detalya, ang Blokk ay makatutulong sa paggawa ng mga desisyon sa unang mga bahagi ng proseso ng disenyo.

Ito ay malaking koleksyon, na may 170+ na UI card, at pinapakita ang malawag na mapagpipiliang elemento sa anim na sample page. Mayroon itong sumusunod na component:

1. Media gallery
2. Mga Feature
3. Call to Action
4. Blog
5. E-Commerce
6. Mga Testimonial
7. Mga Pricing Table
8. Analytics

Kumuha na ng UX/UI Kit ngayon!

Maging nasa pinakamaagang bahagi pa lamang ng pagdisenyo at kailangan ng mga wireframe graphic, naglalagay ng huling mga aesthetic sa prototype, o naghahanap ng insipirasyon para sa susunod na proyekto, malaking tulong ang mabibigay ng UX at UI kit para sa kahit sinong web o app na taga-disenyo.

Ang mga naka-lista rito ay matatagpuan sa Envato Market, ngunit huwag kalimutang tignan din ang Envato!

• 
  Pag-Wireframe
  20 Kailangang Wireframe Template at UI Kit para sa Design LIbrary
  Brittany Jezouit

Dadagdagan ang listahan na ito

Ipaalam sa amin sa mga komento kung alin ang mga paborito, magbigay ng sariling mga kit, at ipamahagi ang mga nalalaman. Magdaragdag sa listahan na ito upang maging napapanahon ang laman.