() translation by (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.
SketchCara Mengatur Gaya dan Simbol Sketch Anda Seperti Seorang yang Pro
SketsaTips yang Efisiensi untuk Bekerja dengan Artboard dan Layer Sketch
WireframingPanduan untuk Pemula untuk Wireframing
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.
Adobe XD juga akan menangani file-file Photoshop, menjaga artboard, layer, dan aset tetap asli seperti aslinya
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.
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.
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.
Memiliki versi gelap dan terang, tergantung pada preferensi Anda, tetapi itu serumit keputusan visual. Dapatkan beberapa layar, jatuhkan, tautkan bersama-sama!
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.
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.
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.
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.
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.
Kustomisasi dengan Stamp, daripada membangun dari awal, dan Anda akan dengan cepat memiliki desain web yang lengkap dan modern.
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.
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.
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 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!
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.
Ini adalah koleksi yang sangat besar, memberi Anda 170+ kartu UI, dan menunjukkan berbagai elemen dengan enam halaman sampel. Menawarkan komponen-komponen berikut ini:
- Galeri Media
- Fitur
- Call to Action
- Blog
- E-Commerce
- Testimoni
- Tabel Harga
- Analisis
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.
