Prototyping di Browser: Tips dan Tool untuk Desainer

Tugas prototype web adalah sebuah proses yang luas untuk membuat gambaran rangka dasar dengan fitur interaktif. Sementara gambaran rangka dasar mungkin masih gambaran statis atau sketsa, prototype sering interaktif dengan fungsi untuk semua halaman utama.

Program editing grafis selalu menjadi pilihan yang paling populer untuk prototyping. Tapi dalam beberapa tahun terakhir lebih banyak pengembang (developer) yang beralih ke prototyping di browser. Hal ini jauh lebih cepat, lebih bersih dan sederhana ketika membangun merek proyek baru. Tapi bagaimana cara kita memulainya?

Dalam postingan ini kita akan membahas tentang dasar-dasar prototyping di browser dan info tentang tool untuk membantu Anda selama dalam proses tersebut.

Dasar-dasar dari Browser Prototyping

Website dapat digambarkan sebagai interface digital yang dibangun agar berjalan dalam web browser. Banyak desainer ingin membuat interface tersebut di editor grafis sebelum pindah ke coding.

Tapi itu lebih dimengerti bagi website prototype di browser untuk melihat bagaimana setiap fitur bekerja, dan untuk mengukur konsep awal seperti struktur layout dan animasi halaman.

Belum ada cara terbaik untuk prototype meskipun kebanyakan desainer memiliki rutinitas mereka sendiri untuk memulai sebuah proyek baru. Banyak desainer masih lebih suka untuk memulainya di Photoshop, tapi mulai dibrowser memiliki banyak keuntungan.

  • Mudah untuk menguji dan mengubah sistem grid
  • Breakpoints dapat ditambahkan sesuai keinginan
  • Efek dinamis seperti menu dropdown dapat diuji langsung
  • Anda mulai dengan basis kode kecil dan perlahan-lahan tambahkan lagi yang lebih

Photoshop tidak memungkinkan Anda untuk secara dinamis berinteraksi dengan mockup. Hal ini juga berlaku untuk breakpoint responsif dimana Anda perlu untuk membuat dokumen individu atau kelompok layer breakpoint.

Pada akhirnya prototype browser adalah representasi yang lebih akurat dari interface akhir. Mockup dan sketsa yang datar dan statis. Ini masih merupakan aset berharga, tapi akhirnya Anda akan membutuhkan layout interaktif. Inilah sebabnya mengapa browser prototyping menghemat banyak waktu.

Anda dapat melompat langsung dari sketsa awal ke browser untuk membuat prototype web interaktif dengan semua fitur-fitur utama yang Anda butuhkan dalam versi akhir.

Tool yang digunakan untuk mencapai prototype akan sangat bervariasi. Tapi jangan mempersamakan tool dalam proses tersebut.

Anda dapat membuat prototype dalam browser menggunakan HTML/CSS dasar, library open source, atau tool lain seperti browser add-ons. Tidak peduli apa yang Anda gunakan tujuannya selalu sama: untuk membuat kerangka UI interaktif dengan model bagaimana situs akhir akan berjalan.

Proses Prototyping

Mungkin ini merupakan cara terbaik dengan memulai dengan sketsa kertas untuk melakukan rendering ide. Sketsa ini bisa dilakukan dalam program grafis, tetapi Anda pada umumnya memiliki lebih banyak kebebasan ketika bekerja di atas kertas.

Dengan cepat beralih ide-ide baru dan hanya mendapatkan nuansa kasar untuk desain. Anda bisa menandakan kolom, gutter dan membuat catatan tertulis untuk menggambarkan properti container (width, padding, dll)

01-sketches-wireframe-design

Setelah sketsa terlihat baik Anda dapat pindah ke browser. Bertujuan untuk merancang layout grayscale dasar pertama. Hal ini dapat dilakukan dengan banyak sumber daya yang berbeda seperti Placehold.it yang menghasilkan gambar abu-abu dasar dari berbagai ukuran.

Dengan layout abu-abu sederhana Anda dapat lebih fokus pada grid, tipografi, spasi dan unsur-unsur dinamis seperti slideshow atau menu dropdown. Tujuan dari tahap ini adalah untuk merancang bagaimana layout harus berjalan tanpa terganggu oleh estetika.

02-placehold-it-webapp-images

Anda ingin meluruskan semua link potensial dengan browser bug dan breakpoints responsif. Mendapatkan layout keseluruhan dan fungsional di semua browser.

Dari sana Anda dapat dengan cepat menambahkan konten, gambar dan style terkait tanpa khawatir tentang gambaran yang lebih besar. Ini benar-benar strategi terbaik untuk prototyping di browser karena Anda berfokus pada unsur besar pertama.

Jika layout break di Firefox itu akan terlihat sama apakah Anda memiliki warna atau tidak. Tapi itu jauh lebih mudah untuk memperbaiki masalah layout saat Anda hanya mementingkan tata letak.

Setelah Anda memiliki prototype yang berfungsi penuh Anda akan memiliki waktu yang jauh lebih mudah untuk coding fitur tambahan seperti background, tile, icon dan fitur lainnya yang sejenis.

Ada banyak hal yang harus dipertimbangkan dalam tahap prototype ini. Setiap proyek akan memiliki tujuan sendiri, tapi disini adalah daftar singkat dari tujuan mempertimbangkan saat prototyping.

  • Apakah layout berjalan disemua browser utama?
  • Apakah ada cukup ruang putih diantara elemen?
  • Apakah semua elemen halaman dinamis berfungsi dengan baik?
  • Apakah Anda konfigurasi semua yang diperlukan breakpoint responsif?

Tool Browser Prototyping

Sangat penting untuk dicatat Anda benar-benar tidak memerlukan tool khusus atau library untuk membangun prototype browser. Anda dapat menulis HTML/CSS/JS kode secara umum dan mendapatkan prototype siap kerja dengan cepat.

Tapi ada begitu banyak library yang dapat menghemat waktu. jQuery adalah contoh library terbaik yang dapat membantu saat menulis JavaScript.

Anda seharusnya merasa bebas untuk menggunakan resource apapun yang Anda rasa nyaman. Tetapi jika Anda sedang mencari tool-tool baru kami sangat menyarankan opsi berikut. Semuanya benar-benar bebas dan super mudah untuk menambahkan ke tahap prototype.

Chrome Workspace

03-chrome-workspaces-devtools

Ada fitur mungil yang bagus di Google Chrome DevTool disebut Workspace. Ini merupakan direktori lokal pada disk Anda yang dapat diikat ke browser ketika editing.

Jika Anda membuat HTML/CSS prototype sederhana dan buka di chrome, Anda akan dapat mengedit pada panel DevTool. Dengan menciptakan Workspace, kamu bisa menyelamatkannya di browser suntingan lokal ke file di komputer Anda. Anda juga dapat membuat file baru dan menduplikasi kode lokal di Chrome.

Sebagian besar pengembang sudah menggunakan DevTool jadi hal ini merupakan cara bagus untuk membuat prototype dalam browser. Lihat tutorial singkat ini untuk setup workspace di Chrome.

Bootstrap

04-bootstrap-css-open-source

Setiap developer frontend harus tahu tentang library Bootstrap. Muncul dengan komponen pre-built dan class CSS untuk setiap elemen halaman dapat Anda bayangkan.

Anda akan mendapatkan button, column, tab widget tab, menu drop down dan banyak fitur situs umum lainnya. Tidak perlu untuk menulis sesuatu dari awal karena Bootstrap sudah mencakup semuanya.

Satu-satunya kelemahannya adalah karena sangat banyak website yang menggunakan Bootstrap akan menjadi agak membosankan. Jika Anda ingin menimpa Bootstrap dengan custom style Anda sendiri maka hal itu merupakan libarary prototyping besar.

Foundation

05-zurb-foundation-resource-prototyping

Salah satu pilihan yang sangat populer lainnya adalah ZURB Foundation. Menurut kami Foundation jauh lebih bersih dan sederhana daripada Bootstrap, hanya karena tidak memiliki banyak style default.

Foundation ini sangat mudah untuk ditimpa dengan style Anda sendiri untuk tombol, link dan widget. Bootstrap sering digunakan dalam proyek-proyek yang menggunakan style Bootstrap secara umum. Tapi Foundation begitu dasar dan Anda hampir harus menambahkan style custom.

Foundation merupakan framework yang powerfull yang datang dengan semua komponen utama yang sama seperti Bootstrap, tetapi tanpa style yang unik.

Pure CSS

06-pure-css-open-source-library

Framework CSS/JS lain yang kami rekomendasikan adalah Pure CSS. Open source seperti Foundation dan Bootstrap. Muncul dengan grid, tipografi, button, dan kompunen dinamis juga.

Mungkin Pure CSS ini merupakan campuran yang baik dari fungsi dan estetika. Hal ini jelas sederhana, tapi tepat untuk prototype apapun dan hanya menawarkan banyak fitur dalam satu library ringkas.

Handcraft

07-handcraft-prototyping-tool-extension

Berikut adalah add-on unik Google Chrome yang memungkinkan developer untuk menyimpan dan berbagi prototype online. Disebut Handcraft dan dapat didownload secara gratis di Chrome Web Store.

Setiap kali Anda sedang membangun prototype hal yang paling umum yaitu menulis semua kode secara lokal. Dengan Handcraft Anda dapat meyimpan prototype ini secara online dengan URL unik untuk mempercepat proses sharing dengan yang lain. Hal itu membuat pekerjaan Anda lebih mudah ketika berkolaborasi dengan klien atau anggota tim kreatif Anda.

Kesimpulan

Cara terbaik untuk memulai dengan prototyping browser hanya perlu berlatih. Apakah Anda memiliki proyek mendatang atau jika Anda perlu untuk membuat sesuatu hanya memulainya dan rajin berlatih browser prototyping

Awalnya merasa aneh tetapi dari waktu ke waktu dapat membuat proses building yang lebih sederhana. Dan jika Anda bekerja dengan salah satu source diatas dijamin Anda akan terkesan seberapa cepat Anda dapat mengembangkan layout dari awal. Semoga bermanfaat jangan lupa sharing yah

Comments

comments