{"id":926,"date":"2013-05-24T10:43:25","date_gmt":"2013-05-24T03:43:25","guid":{"rendered":"http:\/\/dmd.binus.ac.id\/?p=926"},"modified":"2018-01-24T06:23:30","modified_gmt":"2018-01-24T06:23:30","slug":"binus-tv-menyegarkan-kembali-situs-tv-online-binus","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/knowledge\/2013\/05\/binus-tv-menyegarkan-kembali-situs-tv-online-binus\/","title":{"rendered":"BINUS.tv – Menyegarkan Kembali Situs TV Online BINUS"},"content":{"rendered":"

“Kami mengucapkan terima kasih atas terlaksananya website kami karena menjadi bagus dan modern”
\nFariz Camaru – Marketing Manager BINUS.tv<\/small>
\n<\/em><\/p>\n

Awal mula proyek & Desain Awal<\/h2>\n

Setelah bertahun-tahun mengudara dengan desain antarmuka yang sama, tiba akhirnya waktu bagi BINUS.tv untuk mendapatkan “penyegaran”. Dengan tujuan membuat pengalaman pengguna BINUS.tv lebih baik lagi, pekerjaan redesain BINUS.tv dimulai pada akhir 2012 silam dengan kajian desain antarmuka terhadap desain lama BINUS.tv. Beberapa\u00a0pain point\u00a0<\/em>kemudian dapat disimpulkan melalui proses ini:<\/p>\n

    \n
  1. Kurangnya elemen untuk memisahkan bagian yang lain<\/span><\/span><\/li>\n
  2. Sulit untuk fokus – kurang menggunakan whitespace<\/li>\n
  3. Lebih \u00a0menonjolkan banner daripada video streaming<\/em>-nya<\/li>\n
  4. Beberapa elemen visual tidak konsisten dari segi ukuran dan desain<\/li>\n
  5. Kurangnya area yang lebih menunjukkan keragaman program \/ acara<\/li>\n<\/ol>\n

    <\/p>\n

    \"Tampilan<\/a>
    Tampilan UI lama BINUS.tv<\/figcaption><\/figure>\n
    \"Kajian<\/a>
    Kajian Visual BINUS.tv – Ketiadaan sistem visual yang baik<\/figcaption><\/figure>\n
    \"Kajian<\/a>
    Kajian Visual BINUS.tv – kurangnya hirarki desain<\/figcaption><\/figure>\n
    \"Kajian<\/a>
    Kajian Visual BINUS.tv – tidak ada whitespace<\/figcaption><\/figure>\n

    Untuk menjaga koherensi dengan desain antarmuka yang diaplikasikan pada situs-situs BINUS yang lainnya, beberapa elemen desain perlu\u00a0manut\u00a0<\/em>dengan\u00a0standard graphic manual\u00a0<\/em>yang digunakan pada BINUS. Beberapa elemen yang dipertahankan dapat ditemukan pada:<\/p>\n

      \n
    1. Penggunaan background\u00a0<\/em>bertekstur<\/li>\n
    2. Letak header\u00a0<\/em>dan navigasi utama<\/li>\n
    3. Penggunaan framing\u00a0<\/em>pada layout<\/li>\n
    4. Penggunaan\u00a0layout\u00a0<\/em>konten yang sama<\/li>\n
    5. Penggunaan palet warna yang serupa pada area\u00a0footer<\/em><\/li>\n<\/ol>\n

      Dengan mempertimbangkan aspek-aspek yang perlu dipertahankan dan dikembangkan, desain awal untuk BINUS.tv pun dapat dibuat:<\/p>\n

      \"Desain<\/a><\/p>\n

      Previewing<\/em> & Revisi Desain<\/h2>\n

      Dalam perkembangannya, desain awal BINUS.tv yang telah dibuat di-preview\u00a0<\/em>oleh\u00a0stakeholder\u00a0<\/em>dari BINUS.tv yang meliputi rektor BINUS University selaku pembina dan manajemen BINUS.tv. Proses preview\u00a0<\/em>menghasilkan feedback\u00a0<\/em>yang bermanfaat untuk mengecek apakah permasalahan yang dicoba untuk diselesaikan\u00a0melalui desain baru berhasil diselesaikan atau belum. Jika belum, maka perubahan atau revisi apa yang perlu diaplikasikan pada desain baru BINUS.tv.<\/p>\n

      Pada akhirnya, dapat diputuskan bahwa beberapa aspek dari desain awal BINUS.tv yang telah dibuat memerlukan revisi. Aspek-aspek tersebut adalah:<\/p>\n

        \n
      1. Homepage BINUS.tv perlu memiliki area\u00a0news ticker\u00a0<\/em>untuk menampilkan berita terbaru.<\/span><\/li>\n
      2. Untuk mempermudah\u00a0content discovery<\/em>, laman home\u00a0<\/em>memerlukan\u00a0beberapa area yang menunjukkan video terbaru berdasarkan parameter tertentu (featured<\/em>,\u00a0topik, terbaru, dan terpopuler).<\/li>\n
      3. Menggunakan ukuran banner untuk iklan sesuai dengan standar yang umum digunakan<\/a>.<\/li>\n
      4. Fitur akses pintar disetiap halaman\u00a0inside page<\/em>.<\/li>\n
      5. Fitur media sosial pada bagian footer<\/em>.<\/li>\n
      6. Revisi indikator\u00a0current program\u00a0<\/em>yang mendampingi area live streaming<\/em>.
        \n<\/em><\/li>\n<\/ol>\n

        Proses revisi desain BINUS.tv menghasilkan desain final BINUS.tv yang dapat dilihat dibawah ini:<\/p>\n

        <\/div>\n

        Proses Pengembangan<\/h2>\n

        Seperti proyek-proyek sebelumnya, penggunaan WordPress sebagai CMS dari BINUS.tv menjadi opsi yang digunakan, menggantikan in-house CMS berbasis ASP yang digunakan sebelumnya. Penggunaan WordPress dipilih dengan mempertimbangkan keunggulan-keunggulan yang dimiliki WordPress<\/a>.<\/p>\n

        Terlepas dari keunggulan yang dimiliki WordPress, kebutuhan spesifik BINUS.tv mengharuskan kami meng-extend\u00a0<\/em>fungsionalitas WordPress. Untungnya, memang\u00a0extendability\u00a0<\/em>ini lah yang menjadi keunggulan WordPress. Berikut ini adalah beberapa modifikasi yang kami lakukan untuk memenuhi kebutuhan spesifik BINUS.tv.<\/p>\n

        Jenis konten yang beragam<\/h3>\n

        Antarmuka yang didesain berdasarkan kebutuhan yang dirangkum oleh designer DMD, Anthoni Askaria, menunjukan bahwa BINUS.tv memiliki berbagai jenis konten yang perlu difasilitasi di situs baru-nya. Jenis konten\u00a0post\u00a0<\/em>dan\u00a0pages\u00a0<\/em>yang menjadi jenis konten\u00a0default<\/em>\u00a0bawaan WordPress saja tidak cukup. Disinilah fitur custom post-type berperan: memfasilitasi ragam konten yang klasifikasinya memerlukan lebih dari \u00a0post\u00a0<\/em>dan\u00a0pages<\/em>: program, program promo, host, dan video<\/b>.<\/p>\n

        \"Custom<\/a>
        Custom post type FTW<\/figcaption><\/figure>\n

        Menyadari bahwa ragam konten yang berbeda memiliki\u00a0meta information\u00a0<\/em>yang berbeda, maka\u00a0UI saat menampilkan\u00a0<\/i>daftar konten yang tersedia pun membutuhkan penyesuaian:<\/p>\n

        \"Laman<\/a>
        Laman dashboard dengan custom meta information column<\/figcaption><\/figure>\n

        Custom meta box<\/h3>\n

        Salah satu action API WordPress yang sering sekali digunakan belakangan ini di lingkungan DMD, termasuk dalam pengembangan theme BINUS.tv, adalah add_meta_boxes<\/code>. Meta data\u00a0yang berbeda membutuhkan cara input yang berbeda. Disinilah peran action API add_meta_boxes<\/code>: memungkinkan\u00a0developer\u00a0<\/em>untuk membuat custom UI<\/em> untuk input\/output data pada laman editor WordPress. \u00a0Berikut ini adalah beberapa custom meta box<\/em> yang kami kembangkan untuk BINUS.tv:<\/p>\n

        \"Custom<\/a>
        Custom meta box untuk program<\/figcaption><\/figure>\n
        \"Custom<\/a>
        Custom meta box untuk video<\/figcaption><\/figure>\n

         <\/p>\n

        Schedule Administration<\/h3>\n

        Salah satu desain yang paling “menantang” untuk diimplementasikan adalah UI untuk halaman schedule yang halaman depannya dapat dilihat disini<\/a>:<\/p>\n

        \"BINUS.tv<\/a>
        BINUS.tv Schedule front end UI<\/figcaption><\/figure>\n

        Meskipun UI front-end<\/em>-nya sendiri sudah\u00a0tricky<\/em>, begitu mendapat spesifikasi desain ini pertanyaan yang terlintas adalah masalah pengelolaan di dashboard-<\/em>nya. Pertanyaannya:<\/p>\n

        Bagaimana caranya agar pengguna dapat mengelola\u00a0schedule\u00a0<\/em>secara efisien dan mudah?<\/p><\/blockquote>\n

        Lalu tidak kalah pentingnya lagi, bagaimana caranya agar UI & UX dari dashboard tersebut “menyatu” dengan WordPress dan terasa familiar oleh pengguna? Setiap versi terbaru dari WordPress kerap dilengkapi dengan\u00a0update\u00a0<\/em>terhadap dashboard-nya. Memastikan UI dashboard untuk “menyatu” dan dapat beradaptasi dengan perubahan yang akan dihadirkan oleh WordPress pada versi kedepannya akan menjadi sangat penting.
        \n<\/em><\/p>\n

        Setelah melihat opsi-opsi yang ada, ternyata UI dan UX yang digunakan oleh WordPress pada halaman administrasi\u00a0menus<\/em>-nya cukup akomodatif untuk menampung UI dari laman administrasi\u00a0schedule\u00a0<\/em>yang hendak dibuat untuk BINUS.tv. Berdasarkan pertimbangan ini, UI untuk laman\u00a0dashboard schedule\u00a0<\/em>pun dikembangkan menggunakan markup yang digunakan pada laman\u00a0menus<\/em>. Hasilnya dapat dilihat pada\u00a0screenshot\u00a0<\/em>di bawah ini:<\/p>\n

        \"Schedule<\/a>
        Schedule administration page<\/figcaption><\/figure>\n

        Video demo ini mengilustrasikan cara penggunaannya:<\/p>\n