Posts

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

10 fun browser games untuk pembelajaran web development

Bermain video game sering kali dapat membantu kita dalam berfikir untuk menyelesaikan  trial and error. Dapatkah Anda memikirkan sesuatu hal yang membutuhkan keterampilan berfikir dengan logis? Ya benar Programming

Pada artikel ini sudah kita siapkan untuk Anda 10 game browser untuk web developer dan coders, yang dapat Anda gunakan untuk mempelajari lebih lanjut tentang Javacript, CSS dan HTML, atau sebagai ajang pembuktian keterampilan webmaster Anda. Beberapa game yang mudah, dan ada juga yang sangat sulit, tetapi semuanya menyenangkan!

Code Combat

codecombat

 

Meskipun Code Combat dibuat untuk anak-anak disekolah, tapi permainan ini masih bisa dinikmati oleh orang dewasa dari segala usia. Dalam program tersebut secara programatik Anda yang mengontrol tindakan pemberani yang akan melalui ratusan ruang bawah tanah, melawan musuh dan mengumpulkan permata. Mengalahkan seluruh permainan membutuhkan waktu sekitar 20 jam lebih dan meliputi konsep pemrograman

Hex Invaders

hexinvaders

Dalam versi ini permainan arcade klasik dunia yang diserang oleh trio alien, masing-masing permainan dengan warna yang berbeda. Untuk menyelamatkan umat manusia, pemain harus cepat menerjemahkan nilai hex RGB ke warna manusia dan menembak jatuh penyerang.

Flexbox Froggy

flexboxfroggy

Puzzle game dimana Anda harus membantu sekelompok katak berwarna-warni sampai ke lillypads pilihan mereka. Memindahkan amfibi yang mengelilingi dapat dilakukan dengan flexbox dan disini benar-benar menguji keterampilan kita dalam membangun sebuah layout. Petunjuk dalam game akan memberitahu Anda properti CSS mana yang digunakan dalam setiap situasi, tapi itu terserah kepada pemain untuk memutuskan kombinasi value untuk mengaturnya.

Pixactly

pixactly

Pixactly memiliki konseo yang sangat sederhana, namun menantang. Permainan ini memberikan dua value pixel acak, satu untuk lebar dan satu lagi untuk ketinggian sebuah persegi panjang. Pemain kemudian harus menggambar kotak sedekat mungkin dengan dimensi yang diberikan.

CSS Diner

cssdiner_

Sebuah permainan yang bagus untuk belajar CSS. Pemain diberikan meja hidangan dalam bentuk animasi dan HTML, dan item tertentu atau item untuk memilih dari sebuah meja makan. Level yang berbeda menutupi segala sesuatu, seorang developer web harus mengetahui tentang selector, dari yang sangat dasar untuk ~ dan :fist-child

Screeps

screeps

Anda dapat menganggap game ini sebagai peternakan semut digital Anda dimana setiap semut diprogram oleh pemain. Setelah mendirikan sebuah koloni dan perilaku merayap Anda, mereka akan pergi untuk bisnis mereka menjelajahi dunia permainan tak berujung, mengumpulkan sumber daya dan berjuang melawan musuh bahkan saat Anda sedang offline

Codingame

codeingame-e1463583483728

Sebuah koleksi game yang semuanya dapat dimainkan dalam Javascript, PHP, Rubby, Go, Python dan banyak bahasa pemrograman lainnya. Platform ini mencakup berbagai teka-teki, multiplayer dan game berbasis AI, sedangkan kode ditulus dalam IDE canggih dengan Emacs dan Vim support.

Flexbox Defense

flexboxdefence-e1463583451902

Menara klasik pertahanan permainan dengan sentuhan CSS, semua menara dan perangkap dalam permainan diposisikan menggunakan layout kotak fleksibel. Ada 12 tingkat dengan gelombang musuh mencoba untuk mencapai basis Anda. Untuk menyelesaikan semuanya Anda harus menerapkan seluruh pengetahuan Anda tentang properti flexbox.

Elevator Saga

elevator_saga

Elevator Saga adalah permainan puzzle dimana Anda menggunakan JavaScript untuk mengontrol elevator disebuah bangunan. Sekelompok orang-orang yang akan naik dan turun sepanjang waktu dan Anda harus mencoba dan mendapatkan mereka ke tempat tujuan mereka secepat mungkin. Permainan ini untuk mengetes kemampuan menulis algoritma Anda serta pengetahuan Anda tentang fungsi JS, array dan event handler

Untrusted

untrusted

Untrustted adalah game petualangan mete-JavaScript dimana Anda memainkan peran Dr.Eval, tanda @ yang dapat mengontrol dunia disekelilingnya dengan mengubah source code. Pemain disajikan dengan fungsi yang menginisialisasi setiap tingkat dan harus mengubahnya menggunakan permainan API untuk membuat dan melarikan diri route untuk Dr. Eval.

Bonus: Dungeon & Developer

dd

Sebuah talent tree dengan CSS, HTML dan JavaScript magic bukan dari api dan es. Menambah poin dalam keterampilan yang sudah Anda ketahui dan melihat seberapa dekat Anda untuk menjadi Master Web Development. Menyerahkan talent tree sebagai CV untuk aplikasi pekerjaan dengan resiko Anda sendiri.

Yuk, agar tidak jenuh dan sekalian refreshing juga kita coba game diatas. Tapi ingat main game untuk selingan jangan sampai keterusan apalagi sampai ketagihan nanti kerjaan berantakan hehe. Semoga bermanfaat ^-^