() translation by (you can also view the original English article)
Wireframing. Pengguna perjalanan. Peta konten. Desain yang berpusat pada pengguna. Arsitektur informasi. Animasi prototipe. Konversi jalan. Fitur berulang-ulang. Sitemap. Uhh, apa?
Mari kita bersikap jujur, dunia UX (pengalaman pengguna) dan UI (user interface) penuh jargon dan syarat overcomplicated. Ambil, misalnya, baris ini nyata saya copy-paste dari deskripsi pekerjaan untuk posisi senior spesialis konten di Universitas:
"Menciptakan template yang menghasilkan pendekatan strategi konten yang konsisten termasuk pedoman untuk peta situs, konten persediaan dan audit, analisis data dan pengguna pengalaman latihan."
Itulah banyak frase mewah yang bisa lebih sederhana. Tapi jika Anda bekerja di desain web atau strategi konten, kau mungkin terlalu akrab dengan istilah-istilah ini. Ironi dari hal ini adalah bahwa tujuan dari UX (itu pengalaman pengguna) adalah benar-benar membuat hal-hal (alias isi) lebih mudah untuk memahami (alias lebih dinavigasi) bagi orang-orang (alias pengguna).
Wireframes dan UI Kit dua istilah industri suara yang rumit, tetapi sebenarnya super sederhana untuk memahami.
Apa itu Wireframe?
Telah Anda pernah brainstorming ide situs baru dengan seorang rekan saat makan siang, atau dengan seorang teman di sebuah bar? Anda merasa terinspirasi, ambil serbet dan pena, dan mulai membuat sketsa tahu apa situs akan terlihat seperti: itulah wireframing. Pada dasarnya, wireframing adalah sebuah garis besar atau sketsa apa website (atau app) akan terlihat seperti. Ini adalah cetak biru, peta, konsep telanjang-tulang.
Tentu saja, sebuah sketsa pada serbet akan hanya mendapatkan Anda sejauh ini. Oleh karena itu, perancang telah menciptakan template untuk wireframes yang dengan mudah ditransfer ke presentasi atau desain perangkat lunak. (Saya sarankan artikel ini, A Beginner's Guide to Wireframing, jika Anda ingin lebih rinci dan sumber daya-berat rincian wireframes.)
Apa yang dimaksud dengan UI Kit?
UI singkatan antarmuka pengguna, dengan kata lain: hal yang Anda membuat bahwa orang-orang akan berinteraksi dengan.
UI kit berisi berkas bermanfaat dan grafis yang Anda mungkin perlu, seperti kotak centang, ikon, dan banyak lagi. Pada dasarnya, ini adalah sebuah kit yang ada sehingga Anda tidak perlu membangun setiap komponen dari situs web atau aplikasi dari awal- dan standardisasi berarti bahwa itu akan baik-dirancang dan mudah bagi audiens Anda untuk menggunakan.
Tidak ada satu "benar" cara untuk merancang sebuah tombol, tetapi pasti ada cara yang lebih baik daripada yang lain, dan banyak desain penelitian. Dengan menggunakan UI kit, Anda percaya para ahli dan memastikan rincian situs Anda dipoles dan profesional.
Terbaik gambar rangka template dan UI kit
Gambar rangka template dan UI Kit adalah dua hal yang berbeda, tetapi isi dari template ini sering tumpang tindih. Jadi, kami telah mengumpulkan mereka dalam daftar ini yang terbaik dan paling berguna wireframes dan UI kit untuk menambah koleksi Anda:
1. molo Mobile Wireframe Kit
Molo wireframe kit ini dibuat untuk aplikasi dan pengembangan mobile. Ada sembilan kategori, termasuk login, walkthroughs, sosial, blog, dan navigasi. Semuanya dibuat dengan Google font, yang berarti Anda tidak akan pernah berurusan dengan masalah desain tak terduga atau rusak tipografi.
2. Codama iOS Wireframe UI Kit
Codama adalah gambar rangka iOS yang dibuat dengan sketsa, software desain top. Itu terorganisasi dengan baik dan file bernama dengan cara yang masuk akal untuk menggunakan dalam sketsa. Pilihan font adalah Montserrat, yang adalah klasik untuk Apple Desain.
3. greyhound UX diagram alur
Greyhound adalah kit unik yang datang dengan 100 + mini flowchart kartu, ditambah blok tindakan, Panah, dan banyak lagi.
4. WeDot - Wireframe UI Kit
WeDot adalah populer wireframe kit dengan 170 + layout. Hal ini terutama baik untuk dashboard, data dan grafik.
5. Blokk Wireframe Kit
Blokk adalah sebuah awesome wireframe kit untuk satu halaman website. Semua blok konten didasarkan pada Bootstrap, sehingga mudah untuk pergi dari Photoshop atau sketsa garis besar untuk sebuah situs web yang nyata, hidup.
6. UX Workflow- gambar rangka dan Sitemap pencipta
Sebuah sitemap adalah garis besar dari semua konten pada situs Anda; dari halaman rumah, ke halaman Anda, posting blog, hubungi halaman, dll. Itu semua link bersama-sama dalam beberapa cara. Peta situs adalah representasi visual yang. Alur kerja UX sitemap pencipta adalah alat yang hebat, terutama jika Anda perlu hadir ide website secara visual.
7. Collector Wireframe Web Kit
Kolektor Wireframe Web Kit ini dibuat untuk AdobeXD, UX desain perangkat lunak bebas dari Adobe. Ini berbasis bootstrap dan diatur oleh Kategori populer seperti header, portofolio, blog, kontak, dan tabel harga.
Catatan: ini dijual seharga hampir $40 di website lain Desain, yang merupakan lebih dari harga langganan Envato elemen (pada saat penulisan)! Ini memiliki berguna demo video di YouTube.
8. Wirey Wireframe Kit
Selain bersenang-senang nama, Wirey adalah sebuah kit wireframe untuk situs web dan proyek-proyek digital. Termasuk kategori navigasi, header, fitur, blog, dan footer.
9. Turbo iOS Wireframe Kit
Merancang sebuah aplikasi yang akan memiliki halaman pendaftaran, walkthrough tutorial, profil pengguna, dan komponen sosial? Apa tentang berita, penjualan, atau video? Mencoba ini iOS Turbo Wireframe Kit, yang memiliki Instagram-seperti yang terlihat.
10. 6 Wireframes e-commerce
UI dari situs e-commerce dapat menjadi rumit: ada pilihan warna dan ukuran item, pembelian tombol, logo, Gambar, promosi lintas-item, dan banyak lagi. Hal terakhir yang Anda ingin lakukan adalah membingungkan pengguna Anda dari pembelian!
11. Google font kombinasi
Oke, ini mungkin tidak secara teknis akan "UI kit", tapi ketika saya sedang merancang sebuah website baru, hal pertama yang saya terjebak pada adalah tipografi pilihan. Ini adalah elemen penting dari desain, tapi ada begitu banyak pilihan. Sangat mudah untuk overthink, dan tiba-tiba Anda telah menghabiskan jam memperdebatkan Pro dan kontra dari terbuka Sans vs Lato... Jangan seperti saya! Hanya download kit ini Google Font kombinasi, memilih sebuah combo dipilih-desain font, dan melanjutkan dengan proyek Anda.
12. basement Wireframe Kit
Kit untuk website sederhana, terutama untuk perusahaan dan situs penjualan online. Dilengkapi dengan versi file Photoshop dan sketsa.
13. Clean UI Kit untuk sketsa kasar
Bebas gangguan UI kit, sehingga Anda dapat membuat sebuah website yang berencana tanpa terlalu macet dalam rincian.
14. Paper Wireframe Kit
"Seperti sebuah sketsa kertas", kertas gambar rangka Kit adalah alat sederhana, grid berbasis desain.
15. W1 UI Kit untuk menonton Apps
Di sini adalah salah satu yang sedikit berbeda: sebuah kit UI yang dirancang hanya untuk aplikasi Apple Watch. Merancang untuk layar kecil sangat sulit, jadi penting bahwa desain tepat dan mudah untuk mengikuti!
16. Dashboard UI Kit
Menciptakan sebuah dashboard untuk proyek dan pelaporan data? Jangan menggunakan screenshot dari Excel atau lembar Google Anda. Desain sebuah dashboard yang benar-benar berguna dengan kit UI ini, yang dapat diubah ukurannya untuk berbagai ukuran layar.
17. Awesome Web UI Kit
Sebuah populer UI kit dibangun pada Bootstrap grid, dengan Photoshop-siap file. Hal ini terutama mudah untuk mengubah untuk beradaptasi dengan warna merek Anda, yang merupakan fitur berguna jika Anda sudah memiliki skema warna dalam pikiran.
18. Heavy UI Kit: musik
Bermain tombol, karya seni album, menjeda: kit UI ini dibangun untuk aplikasi musik, dan memiliki setiap komponen Anda akan perlu untuk merancang satu. Dilengkapi dengan file Photoshop dan sketsa. Desainer ini memiliki beberapa kit UI khusus dalam portofolio mereka, termasuk orang-orang untuk majalah online, perjalanan apps dan cerita-cerita Instagram.
19. Creative Mind UI Kit
Kurang sedikit daripada wireframe tradisional, Kit UI pikiran kreatif dirancang untuk blog dan berita besar.
20. social Media Kit
Perencanaan kampanye media sosial, atau architecting tampilan dan nuansa dari merek baru? Mencoba kit seperti ini Kit Media sosial, yang datang dengan grafis, spanduk, kutipan template, dan banyak lagi.
Lebih UI kit, Wireframes, dan grafis yang berguna
Mencari lebih untuk menambah koleksi Anda? Check out Perpustakaan elemen Envato penuh hampir 2.000 UX dan UI kit, termasuk template untuk halaman arahan, kuis apps, dan berlangganan rencana.
