24 Wireframe Situs Web Gratis Terbaik
Diterbitkan: 2019-01-09Gambar rangka adalah tata letak sketsa kasar dari halaman web atau seluler. Mereka memungkinkan desainer untuk menyusun konten halaman web dan memetakan dengan tepat bagaimana struktur ini akan bekerja. Setiap desainer mengikuti seperangkat pedoman dan sistem untuk membuat wireframe. Beberapa lebih suka membuat sketsa ide-ide mereka di selembar kertas sementara yang lain sering menemukan alat digital lebih berguna. Either way, mereka dianggap efektif ketika mereka intuitif dan mudah digunakan. Mari kita lihat beberapa gambar rangka yang dirancang dengan baik yang dirancang oleh berbagai desainer di industri ini.
1. Sumber Global
Ini adalah contoh khas dari wireframe. Ini berisi beberapa halaman. Produk dapat ditampilkan dalam urutan yang jelas dan dikelilingi oleh wadah teks yang dapat menampilkan detail produk. Anda dapat mengunduh filenya di sini.
2. EDX
Gambar rangka ini dirancang untuk bisnis yang berorientasi pada pendidikan. Ini mencakup halaman untuk kursus, program, mitra, tentang, rumah, dan kursus dan tutorial online. Anda dapat mengunduh filenya di sini.
3. GayaXGaya
Ini adalah wireframe berorientasi mode/gaya. Ini termasuk halaman dasar seperti login, profil, amal, rumah dll Halaman dirancang dengan baik dan elemen ditempatkan secara teratur. Anda dapat mengunduh filenya di sini.
4. Pelayan
Gambar rangka ini kami rancang untuk menyertakan interaksi hover. Anda dapat mengunduh filenya di sini.
5. Fadena
Ini adalah wireframe manajemen sekolah. Muncul dengan fitur seperti jadwal, kehadiran, PTS, komunikasi dan banyak lagi. Ini juga dirancang untuk menyertakan halaman login, formulir pendaftaran, kontak, dll. Anda dapat mengunduh file di sini.
6. Insinyur Nilai
Gambar rangka ini sangat bagus untuk bisnis yang sangat memperhatikan branding. Halaman utama wireframe termasuk home, about us, contact details dll. Anda dapat mendownload filenya disini.
7. Gambar rangka oleh Brandon Wimberly
Brandon Wimberly menggunakan template pada kertas titik untuk membuat wireframe dan membuat garis untuk membangun wireframe yang sangat seragam dan akurat untuk menguji ide-idenya.
8. Enkode
Gambar rangka dibuat untuk aplikasi pendidikan yang disebut Encode. Tata letaknya sederhana dan jelas. Ini memiliki halaman depan yang panjang sehingga pengguna dapat melihat informasi hanya dengan menggesek layar.
9. Konsep Profil Pengguna
Gambar rangka dirancang oleh Tomasz Sochacki. Anda dapat mengunduh filenya di sini.
10. Centang
Ini adalah gambar rangka untuk aplikasi manajemen tugas yang kuat. Ini hadir dengan tutorial animasi yang bagus. Ini dirancang untuk mengadopsi cara berinteraksi dengan pengguna dan menambahkan antarmuka ponsel nyata untuk memandu mereka.
11. Akuntansi Devon Selatan
Gambar rangka ini paling sesuai dengan akuntansi dan layanan bisnis. Tata letaknya sederhana dan jelas. Itu dapat dipasangkan dengan mock plus langsung untuk membangun menu. Anda dapat mengunduh filenya di sini.
12. Aplikasi cuaca
Gambar rangka ini dirancang di ilustrator dan Photoshop dirancang oleh Matt Sclarandis. Dia telah merancang koleksi gambar rangka untuk desktop dan iPhone.
13. Gambar rangka oleh Andre Picard
Andre Picard membuat gambar rangka di papan tulis. Ini memungkinkan dia untuk melakukan pengeditan dan revisi dengan cepat. Ini juga memungkinkan umpan balik dan kolaborasi yang mudah di kantor.
14. Gambar rangka oleh Melody Rose
Melody menciptakan bentuk, ukuran, dan wadah yang kohesif yang tampak konsisten di seluruh gambar rangka. Palet wireframe termasuk dalam skema warna abu-abu.
15. Awan berwarna-warni
Ini adalah gambar rangka untuk aplikasi cuaca yang indah yang dapat secara akurat memprediksi kondisi cuaca di masa depan. Ini dirancang untuk memiliki ilustrasi di halaman beranda dan mencakup halaman untuk login, cuaca rumah, kota, pusat bantuan, pengaturan, dll.
16. WeUI
Ini adalah contoh untuk wireframe komunitas. Fitur utama termasuk kesalahan formulir, pemberitahuan, unggah, operasi berhasil. Filenya bisa di download disini
17. Cara hidup
Aplikasi ini dirancang untuk merekam dan mengelola hidup Anda. Gambar rangka ini hadir dengan serangkaian fitur yang luar biasa.
18. Perangkat Bingkai Kawat Seluler
Kit ini memungkinkan Anda membuat mock-up dan dilengkapi dengan sekitar 90+ layar seluler dan ratusan elemen lainnya. Ini memiliki diagram alur, templat, aliran UX, dan presentasi. Setiap lapisan individu diberi nama dan diurutkan. Filenya bisa didownload disini.
19. Gesek
Gambar rangka bawaan ini membantu Anda merekam berbagai hal untuk meningkatkan efisiensi. Ini terdiri dari halaman login/daftar bersama dengan halaman lainnya.
20. Sosterio
Ini adalah gambar rangka sederhana yang dibangun di sekitar pengalaman web musik yang menyenangkan. Ini berisi halaman untuk rumah, pencarian, dan FAQ. Anda juga dapat mengirimkan musik hanya dengan mengklik tombol musik.
21. Caza
Gambar rangka ini dibuat untuk situs web daftar properti. Ini bersih, intuitif, dan responsif. Lapisan didefinisikan dengan jelas dan pengguna dapat memahami aliran dengan mudah. File ini dapat diunduh di sini.
22. Morphomics Website Mid Fidelity Wireframe
Gambar rangka ini dirancang oleh Lauren League. Ini dirancang untuk memecahkan masalah visualisasi data yang kompleks. Ini adalah templat yang terstruktur dengan baik yang diisi dengan kotak konten, bentuk, dan wadah.
23. Gambar rangka eksplorasi Shopify
Gambar rangka dengan fidelitas tinggi ini dibuat oleh Janna Hagan. Seperti yang Anda lihat, dia telah memperkenalkan visual pada tahap ini dan tata letaknya dirancang dengan indah.
24. Membuat Sketsa Proyek Baru oleh Tim Knight
Perancang merasa berguna untuk membuat gambar rangka sederhana berkecepatan tinggi. Ini berguna saat memetakan ide untuk klien dan pada tahap awal desain.
- Gambar rangka ini oleh Bitesize Chef dirancang oleh James Baross, Dengan mengklik tombol yang berbeda, pengguna dapat melihat alur pengguna secara keseluruhan.
- Grant Helton merancang aplikasi ini. Gambar rangka ini menunjukkan kepada pengguna bagaimana ia bertransisi dari layar ke layar. Dengan bantuan footer mengambang, ia dapat memandu pengguna dan membuat mereka melihat di mana mereka berada dalam aliran mereka. Dia menggunakan aplikasi invision untuk membangun prototipe ini.
- Gambar rangka ini dirancang oleh Julio Castellano — menunjukkan alur pengguna untuk identifikasi bahaya VR. Ini digunakan untuk mendidik karyawan baru tentang kebutuhan mereka untuk bekerja di lokasi dengan bahaya.
