Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

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

by
Length:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

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.

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.

InVision supports Sketch and Photoshop files perfectly
Sinusuportahan ng InVision ang mga Sketch at Photoshop na file

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

Adobe XD warns you about Photoshop imports
Binabalaan ka ng Adobe XD mula sa pagbukas ng tmga PSD, ngunit maganda pa rin ito.

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!

1Wireland (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.

Wireland - Wireframe Library for Web Design Projects - Sketch Template
Wireland: Koleksyon ng Wireframe para sa mga Proyektong Disenyo

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.

Wirelands markup elements
Mga elementong markup sa Wireland para sa pag-label, komento at pagpapakita ng daloy

2Userflow & 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. 

Website Userflow Sitemap UX Kit
Website Userflow & Sitemap UX Kit

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!

Website Userflow Sitemap UX Kit dark version
Website Userflow & Sitemap UX Kit, madilim na bersyon

3Bolder 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.

Bolder - Multipurpose Mobile UI KIT for Sketch
Bolder - Multipurpose Mobile UI KIT para sa Sketch

4Kama 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.

Kama iOS UI Kit
Kama iOS UI Kit

5Farah (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.

Farah - Profile UI Kit for Sketch App
Farah - Profile UI Kit para sa Sketch App

6MIGO 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.

MIGO Dating UI Kit
MIGO Dating UI Kit

7Stamp (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.

Customize with Stamp
Baguhin gamit ng Stamp

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

Stamp 100 Beautiful Web Components
Stamp – 100 Magandang Web Component

8Ultramarine 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.

Ultramarine UI Kit
Ultramarine UI Kit

9Next 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. 

Next Ecommerce - UI Kit
Next Ecommerce - UI Kit

10Doom (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.

Doom - Massive All in One PSD Pack
Doom - Malaking Sakop-Ang-Lahat ng PSD Pack

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

Doom - Massive All in One PSD Pack
Doom - disenyo para sa cryptocurrency landing page

11Blokk 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.

Blokk Wireframe Kit
Blokk Wireframe Kit 170+ Screens

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
Blokk Wireframe Kit 6 page demos
Blokk Wireframe Kit: anim na demo layout

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!

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. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.