School of Information Systems

Jenis Storyboard

Pada pembuatan wireframe kita membuat proses bisnis dalam User Interface hal yang paling penting ialah membuat kerangka pada User Interface tersebut agar memastikan hasil design bisa di terima ke setiap user maupun stakeholder dan proses bisnis tersebut, suatu hasil simple dari diagram yang menampilkan setiap peletakan dan penempatan element dalam suatu tampilan itu adalah wireframe yang saya dapatkan untuk hari ini. Berbeda dengan User Interface atau prototype yang dimana hasil design dari User Interface ini sudah di lengkapi dengan warna nya maupun proses bisnis yang matang atau siap untuk di buat oleh developer maupun siap untuk di liris, dalam membuat itu semua tentu kita memerlukan suatu gambaran besar yang dimana kita dapat mengambarkan di sebuah nama peletakan kertas besar atau disebut sebagai StoryBoard apa itu storyboard secara Teknik guna dari storyboar itu sendiri merupakan kumpulan dari beberapa wireframe yang disantukan hingga Teknik ini sering disebut sebagai Teknik filming yang menggunakan beberapa karton dan beberapa struktur, key of moment yang dapat memberikan suatu experience secara diwakili, namun apa tujuan dari Storyboard itu sendiri menurut saya fungsi utama dari Storyboard tersebut memungkinkan kita maupun setiap user maupun orang yang berinterkasi pada sistem tersebut agar dapat merasakan suatu “aliran” dari setiap pengalaman wireframe atau User Interface tersebut.

Ada beberapa jenis utama dalam StoryBoard dalam sebuah desain interaktif :

  • Traditional storyboarding, dimana pada jenis ini sebuah story boarding pada wireframenya biasanya pada saat menjelaskan proses berjalannya diletak sebuah notes dimana tujuan dari notes ini saling berkaitan atau melekat pada setiap pergerkan wireframenya pada setiap kejadian. Ini adalah bentuk storyboard yang paling umum jika tidak ada rasa multimedia yang kuat untuk aplikasi tersebut
  • Scored storyboards, jika dalam sebuah User Interface pada setiap aplikasi yang memiliki banyak grafik biasanya sebuah storyboard dapat dianotasikan, contoh anotasikanya berupa tentang menginformasikan jenis warna, gambar, suara, dan beberapa masalah yang dilampirkan dibawahnya
  • Text-only storyboards, Storyboard ini digunakan pada saat jika suatu aplikasi memiliki banyak urutan yang sangat complex. Contohnya jenis gambar yang akan di tampilkan maupun gambar yang besertakannya

Kemudian ada Namanya Mood board, dimana tujuan dari ini yaitu suatu metode yang mengumpulkan rangsangan visual yang menangkap sesuatu tentang apa yang dirasakan terhadapat suatu desain tersebut, Setelah kita mengetahui ada beberapa step dalam membuat suatu proses alur bisnis dalam UI tahap selanjutnya Navigation maps dimana tujuan dari ini adalah gimana dari setiap user focus pada bagaimana bergerak melalui beberapa situs atau aplikasi, dimana juga focus dari tujuan utama ini bagaimana setiap user bisa merasakan setiap situs. Setiap halaman di situs, atau lokasi dalam aplikasi, diwakili dengan kotak atau heading dan setiap halaman yang dapat diakses dari halaman tersebut yang mengalir, Navigation maps sangat penting bukan hanya dalam aspek aplikasi dan produk dan bukan hanya pada suatu website

Kita sudah berbicara banyak sekali metode dalam membuat suatu proses bisnis pada User interfacen metode diatas adalah tahap yang harus dilakukan pada saat kita berada dalam 1 tema agar setiap divisi dapat mengerti apa yang kita sampaikan ke setiap orang,

kita sudah berbicara tentang wireframe setiap metode diatas memilki kaitan yang sama pada saat kita membuat sebuah wireframe, wireframe dapat berkerja karena pada wireframe mereka hanya focus pada setiap elemen yang dikatikan atau pun desain tersebut karena wireframe ini bukan hasil akhir pada dalam membuat suatu User Interface yang bagus. Yang kemudian kita hasil akhir dari setiap desain tersebut dijadikan suatu prototype dimana tujuan dari protoype ini mendemonstrasikan konsep yang ingi kita buat

HI – FI prototype, merupakan desain jadi dari aplikasi yang akan dibuat. Hi-fi mockup merupakan versi detail dari lo-fi mockup, Detail-detail yang ditambahkan pada hi-fi mockup seperti warna, icon, dll.

LO – FI prototype, Lo-fi mockup atau yang bisa disebut wireframe yang lebih berfokus pada elemen-elemen dasar dari sebuah antar muka aplikasi, elemen yang dimaksud seperti button, navigasi, text dll.

Joni Suhartono