Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Wireframes Interaktif Cepat dan Mudah dengan Bootstrap

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Desain web adalah profesi yang berkembang. Sementara mata yang tajam untuk warna, tipografi, dan tata letak akan selalu penting, keterampilan ini dikalahkan oleh kebutuhan untuk memahami motivasi pengguna. Tidaklah cukup untuk membangun situs dan menunggu lalu lintas masuk - situs harus membantu pengguna mencapai tujuan mereka, dengan minimal gesekan kognitif. Bootstrap dapat membantu para profesional web menentukan sasaran-sasaran ini, dan menciptakan pengalaman yang mematikan juga.

kami tidak membuat halaman, kami membuat film

Saya suka mengatakan kami tidak membuat halaman, kami membuat film. Pengguna mengharapkan situs memuat dengan cepat, menyediakan konten yang menarik, dan interaktivitas pintar. Sama seperti film bergantung pada pemotongan cepat, pencahayaan, dan suasana hati untuk menarik pengguna, situs web mengandalkan transisi, interaktivitas, dan waktu. Detail-detail ini sering hilang selama fase desain — atau lebih buruk, tidak pernah diperhitungkan. Sementara transisi yang membutuhkan waktu 0,5 detik ketika seharusnya 0,25 detik biasanya tidak akan menenggelamkan aplikasi, tingkat detail ini memisahkan yang baik dari yang besar.

Saya akan menunjukkan kepada Anda bagaimana Bootstrap dapat menggantikan wireframe statis dan membawa rincian ini ke garis depan lebih awal dan dengan sedikit usaha.


Langkah 1: Setup Project

Langkah pertama adalah mengunduh Bootstrap dan jQuery build terbaru yang stabil.

Meskipun jQuery di-host oleh sejumlah CDN, saya lebih suka menyertakan semua file secara lokal sehingga saya dapat bekerja dengan atau tanpa akses web. Lanjutkan dan atur struktur direktori seperti di bawah ini, dan salin Bootstrap CSS yang tidak dijinakkan, Bootstrap Responsive CSS, dan file Javascript. Tweak nama dan lokasi sesuai kebutuhan, tetapi menggunakan struktur ini berarti Anda juga dapat memanfaatkan template HTML saya di langkah berikutnya.

Sekarang akan menjadi saat yang tepat untuk membuat stylesheet ketiga, yang akan saya panggil user.css. File ini akan digunakan untuk mengganti gaya Bootstrap sesuai kebutuhan.

Directory structure for Boostrap wireframes


Langkah 2: Buat index.html dan Verifikasi Path

Ini adalah satu-satunya pengaturan lain yang diperlukan untuk mulai membangun bingkai gambar interaktif. Buat file di root direktori proyek Anda, dan beri nama index.html. Setelah Anda membuat file, salin kode ini dan simpan.

Buka browser web dan drag file index.html yang disimpan ke dalamnya. Jika semua menyertakan dimuat dengan benar, Anda akan melihat sesuatu yang mirip dengan tangkapan layar di bawah ini. Jika Anda tidak melihat alert, buka Konsol atau Web Inspector dan lihat apakah file gagal di load. Setelah pemecahan masalah, hapus atau komentari baris alert di function $(dokumen).ready di bagian bawah halaman dan bersiap-siap untuk membangun wireframe Bootstrap.

Web browser with Javascript alert box open


Langkah 3: Garis Besar di Blok Konten Anda

Dengan semua file yang diperlukan, kita dapat mulai hidup seadanya di blok konten utama. Sebagian besar situs (aplikasi) akan berisi tajuk, navigasi utama, sumur konten utama, bilah samping, dan catatan kaki. Saya sengaja menjaga tata letaknya sederhana, untuk dengan cepat menggambarkan power sistem grid Bootstrap.

Satu-satunya markup struktural pada halaman sejauh ini adalah div kami dengan kelas 'container'.

Catatan: Div ini adalah blok berisi yang diperlukan untuk Bootstrap; kami akan membangun seluruh aplikasi gambar wireframe di dalamnya.

Bootstrap juga membutuhkan doctype HTML baru, dan menghasilkan aturan style dengan class, bukan nama tag. Keputusan ini berarti kita dapat menggunakan beberapa elemen HTML5 baru: header, navigation, section, article, aside, dan footer. Perlu disebutkan jika Anda berencana untuk menguji tata letak Anda di Internet Explorer, Anda harus mengunduh dan memasukkan Modernizr, atau HTML5 Shim. Versi modern Firefox, Chrome, dan Safari secara native mendukung standar HTML5.

Bootstrap dibangun di atas kisi 12 kolom. Ini menggunakan dua class, row dan span untuk membuat container tingkat blok. Dengan menerapkan class row ke container seperti div atau header, secara otomatis membentang di seluruh lebar 940px. Dengan menambahkan container dengan class span N (N menjadi pengganti untuk jumlah kolom), Anda dapat dengan mudah membuat konten wells, sidebars, dan blok tata letak lainnya tanpa harus mengelola float atau quirks lain.

Untuk bangkit dan berjalan dengan cepat, saya akan membangun tajuk dasar, bilah navigasi, sumur utama, samping, dan catatan kaki. Ganti 'Tata letak Anda akan di sini' dengan kode berikut.

Saya juga menambahkan beberapa aturan dasar ke user.css, untuk membuat blok konten lebih mudah diidentifikasi. Jika semuanya berjalan dengan baik, Anda akan melihat sejumlah blok abu-abu dengan teks deskriptif hitam di dalamnya.

Multiple content blocks properly floated and ordered


Langkah 4: Fixed, Fluid, Responsive!

Perbaikan dan tata letak cairan telah ada sejak lama. Tata letak responsif relatif baru, dan menggabungkan bagian terbaik dari keduanya. Ini memberikan alat desainer untuk mengoptimalkan desain mereka untuk berbagai ukuran perangkat (smartphone, tablet, tampilan sempit dan layar lebar) tanpa harus mempertahankan basis kode terpisah untuk masing-masing. Ubah ukuran jendela browser Anda untuk melihat stylesheet responsif Bootstrap saat beraksi, dan rasakan kemampuan luar biasa untuk menulis sekali dan uji wireframe di sejumlah environtment.

Peramban memanfaatkan break point CSS untuk memutuskan cara merender halaman, berdasarkan pada pengukuran lebar minimum dan maksimum. Break point dalam kaitannya dengan lebar browser selalu dimulai dengan @media(width argument) dan sangat mudah dibaca. Mereka juga dapat berisi argumen kedua dalam kurung lain, yang memungkinkan banyak fleksibilitas untuk beberapa perangkat.

Dalam contoh kode di bawah ini, saya telah membuat beberapa aturan yang menentukan warna latar belakang untuk empat break points responsif Bootstrap yang umum, dimodifikasi sedikit untuk menunjukkan transisi yang mulus dari satu warna ke warna berikutnya.

Kami telah membangun tata letak yang sepenuhnya responsif, tetapi kami masih melewatkan hal-hal yang baik. Sisa tutorial ini akan menunjukkan kepada Anda cara menambahkan minat visual melalui konten dan interaktivitas.


Langkah 5: Sound Off!

Sekarang setelah scaffolding sudah ada, kita dapat mulai menambahkan konten. Saya sengaja menjaga view ini generik — kotak abu-abu dengan style minimal mendorong pengguna beta untuk fokus langsung pada interaksi, dan tidak terlalu terpaku pada gaya visual.

Hero Unit dirancang untuk membuat ajakan bertindak depan dan tengah. Unduhan kode, aplikasi baru, atau berita terbaru adalah kandidat yang baik. Untuk tujuan kami, saya akan menggunakannya untuk mengumumkan peningkatan perangkat lunak utama. Ganti tag h2 dan p yang ada di konten utama dengan baik dengan kode di bawah ini dan segarkan browser Anda untuk melihat pahlawannya beraksi.

Hero Unit adalah awal yang baik, tetapi orang ingin melihat ke mana waktu dan uang mereka akan pergi. Galeri gambar adalah tindak lanjut yang kuat, dan sangat mudah diterapkan. Gambar ditata menggunakan bentang spanN yang sama yang mendefinisikan blok tata letak, dan dapat dengan mudah diperluas untuk menyertakan headlines, tags, captions, atau mikrodata. Untuk saat ini, kami akan menggunakan Placehold.it untuk menghasilkan tiga kotak abu-abu di bawah hero unit kami.

Saya sangat percaya pada markup semantik, jadi kami akan menggunakan tag HTML5 figure dan figcaption untuk konteks yang lebih luas. Bahkan jika tidak ada pengguna Anda yang menjelajah dengan screenreader atau alat bantu lainnya, markup deskriptif adalah praktik terbaik untuk UX dan pengembangan front-end.

Tambahkan unordered list dan beberapa gambar di dalam konten utama dengan baik, di bawah elemen hero Anda seperti ini:

Refresh browser lain pasti menghasilkan tata letak yang mirip dengan ini, ketika dilihat layar lebar.

Hero unit and 3 inline images


Langkah 6: Navigasi dengan Tab

Hero unit dan gambar menambah banyak minat visual, tetapi sorot tantangan kami berikutnya: tautan bullet point berdiri untuk elemen navigasi yang tepat.

Bootstrap memiliki beberapa gaya navigasi bawaan, sehingga eksperimen dianjurkan. Saya akan menyoroti navigasi tab di sini. Urutan bisnis pertama kami adalah mengganti daftar navigasi dasar:

Selanjutnya, mari kita hapus latar belakang abu-abu dari elemen header dan nav kami. Tambahkan empat baris berikut ke akhir file user.css Anda.

Kami juga perlu memperbarui konten utama dengan baik. Saya telah menambahkan class tab-content ke elemen section, dan membungkus hero dan gambar dalam div dengan class="tab-pane active" dan id="tab1". Saya menambahkan tiga elemen div tambahan di bawah ini, dengan ID yang cocok dengan tag tautan navigasi. Tiga blok ini adalah rintisan yang harus diisi kemudian, tetapi akan berguna untuk pengujian. Memperbarui section markup dan me-refresh browser. Jika semuanya berjalan benar, Anda pasti dapat menelusuri tab dan melihat stubbed di konten.

Tab 4 Contact Us selected to show navigation functionality


Langkah 7: Tooltips dan Popovers

Tab itu keren, tapi itu juga hanya permulaan. Meskipun Internet cepat menjadi tersegmentasi dan seperti aplikasi, ia masih didorong oleh tautan dari satu sumber daya ke sumber daya lainnya. Tautan digunakan untuk menghubungkan halaman bersama, menyediakan konteks tambahan, dan terkadang, untuk menampung fungsi sekunder. Tooltips dan popover adalah contoh fungsi sekunder yang bagus; mereka mudah diimplementasikan dengan atribut data khusus.

Apa itu atribut data? Per John Resig, yang menulis tentang perangkat ini kembali pada tahun 2008:

Secara sederhana, spesifikasi untuk atribut data kustom menyatakan bahwa setiap atribut yang dimulai dengan 'data-' akan diperlakukan sebagai area penyimpanan untuk data pribadi (pribadi dalam arti bahwa pengguna akhir tidak dapat melihatnya - itu tidak mempengaruhi tata letak atau presentasi).

Ini berarti kami dapat menambahkan data khusus ke tag tautan kami, dan Bootstrap akan menanganinya sesuai.

Misalnya, galeri gambar kami terdiri dari informasi teknis. Deskripsi mungkin termasuk terminologi yang tidak jelas bagi pengguna rata-rata. Aktifkan tooltips dengan mengganti HTML image galeri, mulai dengan unordered list, dan tambahkan jQuery $(dokumen).ready berfungsi dan fungsi tooltip Bootstrap di bagian bawah halaman.

Dengan HTML dan Javascript di tempatnya, refresh browser dan gerakkan tautan galeri untuk membuka tooltips Anda.

Basic search typeahead functionality

Kami sekarang akan menambahkan sharing ke galeri gambar kami (setidaknya di cara wireframe-y) dengan popovers. Popovers diaktifkan oleh data-atribut di markup Anda, dan potongan lain JavaScript.

Pertama, mari kita tambahkan tombol bagikan ke masing-masing keterangan gambar kami. Tambahkan blok kode tepat di bawah tag paragraf penutup di setiap figcaption.

Mungkin aneh untuk menempatkan setiap item pada barisnya sendiri, tetapi saya telah menemukan Bootstrap cukup pilih-pilih tentang markup yang terbentuk dengan baik, dan lebih mudah untuk menemukan kesalahan satu baris pada satu waktu. Kita perlu menulis beberapa baris JavaScript dan popover akan siap.

Kali ini kami telah menambahkan fungsi tautan umum untuk mencegah layar kami melompat ketika pengguna mengklik tombol Bagikan. Tanpa menggali terlalu jauh ke spesifik, setiap tindakan pada halaman web mendaftarkan acara, yang kami tangkap di sini sebagai argumen fungsi 'e'. Dengan menghentikan event ini, dan menggantinya dengan JavaScript khusus kami, halaman tetap berada di tempatnya dan popover kami muncul seperti yang diharapkan.

Basic share functionality shown in a small popover


Langkah 8: Membuat Modal Windows

Wah. Setelah semua itu, jendela modal akan menjadi cakewalk. Bootstrap menyediakan modal windows dengan menambahkan blok HTML ke bagian atas wadah Anda, dan sebuah tombol atau tautan dengan href yang cocok dengan ID modal window. Pertama, modal HTML.

Satu-satunya hal yang harus dilakukan adalah menambahkan pemicu kami. Karena ini adalah aplikasi, kami berhak mengasumsikan akan ada urutan login. Saya telah memodifikasi header untuk mempersingkat area banner, dan menambahkan tombol Login kami di sebelah kotak pencarian. Ubah HTML berikut, dan tambahkan CSS ke akhir file user.css Anda.

Refresh dan klik tombol Login. Anda pasti dihargai dengan animasi cepat, dan jendela modal menampilkan depan dan tengah.

Hero unit and 3 inline images


Langkah 9: Bagaimana Saya Akan Menemukan Sesuatu?

Wireframe gambar interaktif ini datang dengan baik. Kami memiliki navigasi yang berfungsi, banyak blok untuk menambahkan konten, interaktivitas, dan tata letak yang responsif. Apa yang tidak kami miliki adalah cara untuk mencari hal-hal, bahkan dalam arti pengujian pengguna. Sekali lagi, Bootstrap sudah kita cakup.

Pengguna terbiasa dengan kotak pencarian yang ditampilkan secara jelas di sudut kanan atas tampilan desktop, dan tepat di bawah judul pada tampilan yang lebih sempit. Kami akan mulai dengan memecah elemen header menjadi dua blok, dan menambahkan satu input ke yang lebih kecil:

Kita juga akan menambahkan beberapa baris CSS ke file user.css, untuk mendorong kotak pencarian dari atas halaman.

Kami juga akan menulis jumlah JavaScript yang sedikit lebih besar untuk membuat tipahead berfungsi dengan baik. Saya akan menyimpannya seminimal mungkin, dan menjelaskan apa yang dilakukan setiap skrip.

Saya membayangkan beberapa dari Anda berpikir, “Saya seorang web desainer, bukan pengembang. Poin yang adil, tetapi setidaknya kita harus menguji perairan JavaScript untuk membuka kekuatan penuh Bootstrap. Dan selain itu: klien kagum ketika kotak input mulai mengembalikan hasil dari huruf pertama yang mereka ketikkan.

Tambahkan snipet JavaScript di bawah ini ke tag skrip Anda yang ada, dan tekan Segarkan. Jika berfungsi dengan benar, Anda akan melihat menu dropdown dengan hasil yang disarankan setelah Anda mengetik satu atau lebih huruf di kotak pencarian.

Oke, ini yang dilakukan kodenya. var search = $ ('input#search') memberitahu jQuery untuk menyimpan referensi ke kotak pencarian dalam pencarian variabel bernama search. Kemudian kami memanggil, fungsi jQuery pada variabel pencarian kami, dan juga memanggil metode Bootstrap typeahead. Di dalam kurung typeahead, Anda akan melihat tanda kurung buka dan tutup { }. Kurung ini digunakan untuk membuat objek JavaScript, dan menyimpan beberapa informasi tentang kotak pencarian kami. 

Bagian pertama dari informasi adalah source array. Pada yang paling sederhana, sebuah array adalah daftar ordered hal. Berikut ini adalah daftar pemain gitar. Setiap pemain gitar yang ditambahkan ke array akan tersedia sebagai hasil dari input pencarian kami. Bagian kedua dari objek, item: 5 memberi tahu kotak pencarian jumlah maksimum hasil yang ditampilkan.

Ini adalah hanya dua dari beberapa pilihan yang tersedia. Saya menganjurkan Anda untuk melihat dokumentasi Bootstrap typeahead dan bereksperimen dengan konfigurasi yang berbeda. Akhir layar untuk langkah ini akan terlihat seperti ini:

Basic search typeahead functionality


Kesimpulan

Bootstrap telah menjadi pokok dalam alur kerja front-end saya. Ini memungkinkan saya untuk menguji ketika iterasi relatif tidak menimbulkan rasa sakit, dan mencoba beberapa pendekatan yang berbeda secara bersamaan. Penemuan ini membantu memandu keputusan desain akhir, dan membantu menghindari perubahan yang memakan waktu selama siklus pengembangan penuh. Dengan memperlakukan gambar rangka sebagai bagian penting dari pengalaman pengguna, saya dapat membuat alat yang terasa lebih alami dan lebih memuaskan.

Saya baru saja menggaruk permukaan Bootstrap, dan apa yang mungkin menggunakan kit bagian-bagiannya. Wireframes adalah tempat yang tepat untuk mulai mempelajari seluk beluk — mereka dimaksudkan sebagai model uji awal aplikasi lengkap yang akan datang. Klien dan kolega dapat menguji asumsi kami, dan membantu kami memperbaiki dengan cepat, dengan waktu yang singkat.

Saya harap Anda menyukai tutorial ini, terima kasih sudah membaca!

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.