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

Kit UX dan UI Terlaris Untuk Sketch, Photoshop, Illustrator, XD, dan Figma

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Kit UX dan UI membantu desainer dalam banyak cara, dan pada tahap yang berbeda dalam proses desain. Dalam ringkasan ini saya akan menunjukkan kepada Anda beberapa kit UX dan UI terlaris yang tersedia dari Envato, untuk membantu Anda memulai wireframing, membuat prototipe, dan mendesain situs web atau aplikasi Anda berikutnya.

Apa Kit UX dan UI itu?

Kit berikut ini adalah cara terbaik untuk membuat proses desain Anda berjalan. Mereka dapat berfungsi sebagai inspirasi, cara untuk dengan cepat menyajikan ide kepada klien, atau memberi Anda kerangka dasar untuk desain penuh. Biasanya tersedia untuk Sketch, Adobe Illustrator, dan lainnya, kit disediakan secara logis dengan artboards, gaya, dan simbol, untuk membantu Anda menemukan dan bekerja dengan elemen yang Anda cari.

Beberapa diantaranya multiguna dan menyediakan sejumlah besar elemen, ada yang khusus untuk wireframing, yang lain lebih cocok dan memenuhi sesuatu seperti eCommerce, media sosial, peta dan navigasi, real estat, UI seluler, apa pun yang Anda inginkan.

Aplikasi Desain yang Didukung

Setiap kit yang tercantum di sini kompatibel dengan setidaknya satu dari aplikasi berikut ini, dan biasanya lebih banyak lagi:

  • Sketch
  • Adobe Photoshop
  • Adobe ilustrator
  • Adobe XD
  • Figma
  • InVision

Saat ini Anda dapat membuka file Sketch di Sketch (jelas), Adobe XD, Figma, dan InVision tanpa masalah.

InVision supports Sketch and Photoshop files perfectly
InVision pada dasarnya mendukung file Sketch dan Photoshop

Adobe XD juga akan menangani file-file Photoshop, menjaga artboard, layer, dan aset tetap asli seperti aslinya

Adobe XD warns you about Photoshop imports
Adobe XD memperingatkan Anda tentang membuka PSD, tetapi itu sangat bagus

Axure sedikit kurang kompatibel dengan format file lain, tetapi tidak peduli untuk aplikasi apa kit dibuat kemungkinan besar Anda akan menemukannya kompatibel dengan alat desain pilihan Anda.

Apakah UX dan UI sama?

Istilah UX dan UI sering digunakan secara bergantian. Sementara ada beberapa crossover, dan keduanya bekerja bersama, mereka tidak bermaksud hal yang sama.

Jika kita merujuk pada kit UI, kita berbicara tentang aset yang dapat digunakan untuk mendesain antarmuka pengguna. Ini berarti mendesain presentasi, estetika, bagaimana tampilan visual UI. Aset dari kit UX, di sisi lain, akan digunakan untuk mendesain pengalaman situs web atau aplikasi. Pikirkan wireframe dan prototipe. Kegunaan, alur, interaksi antara pengguna dan produk.

Kit UX dan UI dapat melayani kedua tujuan tersebut, itulah sebabnya mereka sering secara kolektif disebut "Kit UX dan UI.

Kit UX dan UI pada Envato

Kami memiliki ratusan paket UX dan UI di Envato Market dan Envato Elements (di mana Anda dapat mengunduh sebanyak yang Anda inginkan dengan satu harga murah). Mari kita lihat beberapa yang paling populer diantaranya!

1. Wireland (Sketch)

Namanya mewakili semuanya; Wireland adalah tentang wireframing. Muncul dengan lebih dari 200 tata letak yang telah ditentukan, dan ada sejumlah detail, memberi Anda lebih dari lo-fidelity, tetapi estetika biru yang tenang dan rapi sempurna untuk wireframe.

Wireland - Wireframe Library for Web Design Projects - Sketch Template
Wireland: Library Wireframe untuk Proyek Desain Web

Ini termasuk library perangkat, elemen markup untuk menunjukkan alur, menggunakan simbol, dan didasarkan pada grid Bootstrap yang sudah dikenal. Terakhir, bahkan ada sampel gratis yang dapat Anda unduh dan coba sebelum membeli versi lengkap yang berlisensi.

Wirelands markup elements
Elemen markup Wireland, untuk memberi label, mengomentari, dan mendemonstrasikan alur

2. Userflow & Sitemap (Photoshop dan Illustrator)

Menyusun alur pengguna adalah bagian yang sangat penting dari proses desain. Itu terjadi sejak awal, dan itu terjadi dengan cepat. Situs Web Userflow & Sitemap Kit UX memiliki semua elemen yang mungkin Anda perlukan untuk melakukan ini: kumpulan layar dan grafik agar Anda dapat menentukan bingkai bagaimana pengguna akan berpindah dari satu bagian situs web ke bagian lainnya.

Website Userflow Sitemap UX Kit
Situs Web UX Kit Userflow & Sitemap

Memiliki versi gelap dan terang, tergantung pada preferensi Anda, tetapi itu serumit keputusan visual. Dapatkan beberapa layar, jatuhkan, tautkan bersama-sama!

Website Userflow Sitemap UX Kit dark version
Situs Web Kit UX Userflow & Sitemap , versi gelap

3. Bolder Mobile UI (Sketch)

Bolder adalah kit UI yang menawarkan 65 tata letak mobile berkualitas super tinggi, mencakup berbagai hal seperti media sosial, eCommerce, dan blogging. Bolder memiliki getaran dalam petak, dan diatur secara praktis dengan artboard, layer, simbol, dan gaya tipografi, sehingga memudahkan setiap desainer UI mobile untuk bekerja dengannya.

Bolder - Multipurpose Mobile UI KIT for Sketch
Bolder - KIT UI Mobile Serbaguna untuk Sketch

4. Kama iOS UI Kit (Sketch)

Kama didesain khusus untuk iOS. Mencakup lebih dari 120 layar, memberikan tata letak bagan perancang aplikasi, penelusuran, eCommerce, multimedia, profil pengguna, navigasi, dan opsi media sosial untuk dimainkan, serta 60 ikon khusus.

Kama iOS UI Kit
Kama iOS UI Kit

5. Farah (Sketch, XD, Figma)

Farah benar-benar sangat memukau. Memiliki 15 layout mobile hi-fidelity, semua sepenuhnya dapat diterima, dan semua dengan nuansa yang sangat kontempore Tambahan yang relatif baru untuk Envato Market, mencerminkan permintaan saat ini untuk berbagai aplikasi desain dengan melayani secara khusus untuk pengguna Sketch, XD, dan Figma.

Jika Anda mencari yang berani dan percaya diri, ini adalah tampilan yang bagus untuk diterapkan pada desain Anda.

Farah - Profile UI Kit for Sketch App
Farah - Kit UI Profil untuk Aplikasi Sketch

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

MIGO adalah desain lain yang berani dan energik dari hoangpts. Yang ini untuk aplikasi kencan, dan akan memberikan desain Anda warna liar, gradien, dan penuh kehangatan. Berisi 22 layar iOS (siap untuk iPhoneX) berkualitas tinggi, dan kompatibel dengan Sketch, XD, dan Figma.

MIGO Dating UI Kit
MIGO Dating UI Kit

7. Stamp (Sketch)

Stamp adalah pilihan hi-fidelity lain, menawarkan kepada desainer lebih dari 75 "kartu" tata letak, yang dibuat dengan lebih dari seratus komponen berbeda.

Customize with Stamp
Sesuaikan dengan Stamp

Kustomisasi dengan Stamp, daripada membangun dari awal, dan Anda akan dengan cepat memiliki desain web yang lengkap dan modern.

Stamp 100 Beautiful Web Components
Stamp – 100 Komponen Web Cantik

8. Ultramarine UI Kit (Sketch)

Saya suka yang ini. Paling tidak karena ultramarine itu benar-benar mengemas sesuatunya dipasangkan dengan hijau limau. Sekali lagi, ini adalah hal-hal yang berkualitas tinggi, jadi tidak terlalu banyak untuk tahap desain UX suatu produk, lebih lanjut tentang menambahkan lapisan yang stylish. Dengan demikian, ini adalah lapisan yang kuat (dan sangat lengkap), menawarkan 120+ komponen untuk digunakan dalam desain Anda.

Ultramarine UI Kit
Ultramarine UI Kit

9. Next Ecommerce (Sketch, Photoshop)

Jika Anda menikmati membangun desain Anda di Photoshop, Next Ecommerce memberi Anda pilihan tersebut. Dengan 35 PSD + File Sketch, ada banyak elemen UI seluler untuk dimainkan.

Next Ecommerce - UI Kit
Next Ecommerce - UI Kit

10. Doom (Photoshop)

Opsi Photoshop lainnya, Doom adalah kit UI yang sangat besar. Memberi Anda hampir 100 tata letak PSD, termasuk halaman beranda, halaman dalam, dengan segala macam bagian yang dibahas, dan merupakan yang pertama dari contoh kami yang menyertakan opsi admin dasbor.

Doom - Massive All in One PSD Pack
Doom - Paket PSD All in One yang Besar

Doom juga mencakup sejumlah besar desain situs cryptocurrency (jika itu yang Anda inginkan) jadi jika Anda mendesain halaman pendaratan untuk proyek besar berikutnya, ini adalah tempat yang bagus untuk memulai!

Doom - Massive All in One PSD Pack
Doom - desain halaman pendaratan cryptocurrency

11. Blokk Wireframe Kit(Photoshop)

Blokk adalah kit Photoshop lainnya, menyediakan UI sederhana untuk keperluan wireframing. Tanpa detail yang tidak perlu, Blokk akan membantu Anda membuat keputusan inti sejak awal dalam proses desain.

Blokk Wireframe Kit
Layar Blokk Wireframe Kit 170+

Ini adalah koleksi yang sangat besar, memberi Anda 170+ kartu UI, dan menunjukkan berbagai elemen dengan enam halaman sampel. Menawarkan komponen-komponen berikut ini:

  1. Galeri Media
  2. Fitur
  3. Call to Action
  4. Blog
  5. E-Commerce
  6. Testimoni
  7. Tabel Harga
  8. Analisis
Blokk Wireframe Kit 6 page demos
Blokk Wireframe Kit: enam layout demo

Dapatkan Kit UX/UI Hari Ini!

Apakah Anda berada pada tahap awal desain dan memerlukan beberapa gambar wireframe, meletakkan estetika terakhir di atas prototipe, atau mencari inspirasi untuk proyek Anda berikutnya, kit UX dan UI dapat sangat membantu (dan sangat menyenangkan!) untuk desainer web atau aplikasi apa pun.

Barang-barang yang tercantum di sini semuanya tersedia di Envato Market, tetapi jangan lupa untuk mengecek penawaran besar-besaran di Envato Elements juga!

Kami akan secara Teratur Memperbarui Daftar Ini

Beri tahu kami di komentar yang merupakan favorit Anda, rekomendasikan kit Anda sendiri, dan bagikan tips yang mungkin Anda miliki. Kami akan memperbarui daftar ini seiring waktu untuk menjaganya agar tetap terbaru dan serelevan mungkin.

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.