Capaian pembelajaran :

1. Mahasiswa mampu menganalisis Storyboard & Mockup
2. Mahasiswa mampu membuat Storyboard & Mockup sesuai dengan desain yang dibuat

 

1.    Pengertian Storyboard

Hei, para Explorers! Aku mau ceritain tentang storyboard pada website nih. Jadi, storyboard itu kayak gambaran visual buat rencana desain halaman web. Kita bikin sketsa atau ilustrasi biar bisa lihat gimana tata letak, navigasi, dan kontennya nanti.

 

Nah, storyboard ini bantu tim pengembang dan desainer buat pahamin keseluruhan struktur website sebelum mulai bikin. Di storyboard, kita punya panel-panel yang mewakili halaman-halaman di situs web. Di setiap panel, kita kasih gambaran dasar tentang elemen-elemen pentingnya, kayak tulisan, gambar, tombol, dan konten lainnya. Jangan lupa, di storyboard juga ada rute buat navigasinya, biar bisa pindah dari satu halaman ke halaman lainnya, seperti tautan dan menu.

 

Storyboard ini bermanfaat banget buat bantu kita visualisasikan dan komunikasikan ide-ide sebelum mulai bikin situs webnya. Jadi, kita bisa nyiapin tata letak halaman, susun kontennya, dan pastiin pengalaman pengguna yang keren.

 

Selain itu, storyboard juga jadi alat kolaborasi yang oke buat tim. Kita bisa ngeliat dan kasih masukan tentang tata letak, navigasi, dan konten yang diusulin sebelum lanjut ke tahap detail pembuatan.

 

Pokoknya, storyboard pada website ini adalah alat visual buat rencanain dan gambarkan tampilan serta interaksi di situs web sebelum mulai bikin secara rinci. Jadi, yuk, kita eksplorasi bareng dan siap-siap bikin situs web keren!

 

2.    Fungsi storyboard

Ay, Explorers! Sekarang, kita mau bahas tentang fungsi storyboard pada website nih.

Selain itu, storyboard juga bikin komunikasi tim jadi lebih lancar. Semua orang bisa ngeliat dan kasih pendapat tentang tampilan halaman, navigasi yang enak, dan konten yang pas. Kita bisa kerja sama bareng-bareng biar semua ide keren masuk ke dalam website kita.

Menyingkronkan pikiran antara tim pengembang dan desainer

Fungsinya apa aja sih? Pertama, storyboard mempermudah tim pengembang dan desainer buat nyambungin pikiran mereka. Jadi, kita bisa ngomongin dan nunjukin ide-ide kita pake gambar-gambar kasar sebelum mulai bikin website yang beneran. Praktis banget, kan?

 

a.    Membantu merencanakan layout, navigasi, dan konten

 

Storyboard pada website itu kaya senjata rahasia buat nyiapin desain halaman web yang keren. Jadi, storyboard ini tuh bantuin kita merencanain tata letak, navigasi, dan konten halaman web dengan cara yang asik banget.

 

b.    Pemahaman lanjutan projek

Fungsi lainnya, storyboard bantu kita lihat secara keseluruhan struktur situs web sebelum mulai membangunnya. Jadi, kita bisa atur posisi elemen-elemen penting, kayak tulisan, gambar, tombol, dan lain-lain. Kita juga bisa pasang rute navigasi, biar pengunjung bisa muter-muter di website kita dengan mudah.

Intinya, storyboard pada website ini bikin hidup kita jadi lebih mudah dan kreatif! Kita bisa eksplorasi berbagai ide, komunikasi dengan tim, dan lihat tampilan keseluruhan sebelum situs webnya jadi. Jadi, yuk, kita mulai eksplorasi dan bikin website keren bareng-bareng!

 

3.    Cara membuat Storyboard

a.    Tentukan Tujuan

Pertama-tama, tentuin tujuan dari situs webmu. Apakah itu situs bisnis, blog, atau mungkin situs portfolio? Pahami dengan jelas apa yang ingin kamu sampaikan melalui websitemu.

b.    Identifikasi Halaman Utama

Tentukan halaman utama yang penting dalam situs webmu. Biasanya, ini adalah halaman beranda atau landing page. Fokuskan perhatianmu pada halaman ini karena ini yang akan pertama kali dilihat oleh pengunjung.

c.    Buat Daftar Halaman Lainnya

Setelah halaman utama, buat daftar halaman-halaman lain yang ingin kamu sertakan dalam situs webmu. Misalnya, halaman tentang, layanan, portofolio, blog, dan kontak. Jangan lupa pikirkan urutan dan hierarki halaman-halaman tersebut.

d.    Sketsa Kasar

Mulailah membuat sketsa kasar untuk setiap halaman dalam bentuk panel-panel. Gunakan kertas atau alat desain seperti software grafis atau aplikasi khusus storyboard. Ingat, ini hanya sketsa, jadi fokuskan pada tata letak dasar, seperti posisi elemen penting, teks, gambar, dan navigasi.

e.    Deskripsikan Konten

Untuk setiap panel, tuliskan deskripsi singkat tentang konten yang akan ada di halaman tersebut. Misalnya, judul, teks, gambar, dan bagian-bagian lain yang perlu ditampilkan. Ini akan membantu kamu memvisualisasikan isi setiap halaman.

f.     Buat Navigasi

Pastikan kamu menambahkan elemen navigasi antara halaman-halaman dalam storyboardmu. Gambarkan tautan dan menu yang akan membantu pengunjung berpindah dari satu halaman ke halaman lainnya. Usahakan agar navigasi terasa intuitif dan mudah dipahami.

 

g.    Iterasi dan Perbaikan

Jangan ragu untuk mengulang dan memperbaiki storyboardmu sesuai kebutuhan. Lakukan revisi jika ada ide baru atau jika ada bagian yang perlu diperbaiki. Kamu bisa mendiskusikan storyboard dengan timmu untuk mendapatkan masukan tambahan.

 

Ngoke, Itulah cara membuat storyboard untuk website yang seru dan keren. Dengan storyboard, kamu bisa mendapatkan gambaran jelas tentang tampilan dan struktur situs webmu sebelum memulai pengembangannya secara detail. Jadi, mulailah berkreasi dan eksplorasi ide-idemu dalam storyboard, dan biarkan website mu menjadi karya yang luar biasa!

 

4.    Bedanya Storybaord dan Wireflow apaan?

 

Storyboard dan wireflow adalah dua konsep yang berbeda namun saling melengkapi dalam proses desain pengembangan website atau aplikasi. Berikut adalah perbedaan antara storyboard dan wireflow:

 

Storyboard:

 

- Gambaran Visual: Storyboard adalah gambaran visual dalam bentuk serangkaian panel atau sketsa yang menggambarkan tampilan dan alur cerita dari sebuah situs web atau aplikasi.

- Fokus pada Pengalaman Pengguna: Storyboard berfokus pada memberikan gambaran pengalaman pengguna secara keseluruhan. Ini mencakup tata letak halaman, konten, navigasi, dan interaksi yang diinginkan.

- Komunikasi dan Narasi: Storyboard digunakan untuk berkomunikasi ide dan cerita kepada tim pengembang, desainer, dan pemangku kepentingan lainnya. Ini membantu dalam memahami bagaimana pengguna akan berinteraksi dengan situs web atau aplikasi.

- Kehidupan Nyata: Storyboard cenderung menampilkan gambaran yang lebih abstrak dan naratif, mirip dengan urutan gambar dalam komik atau film.

 

Wireflow:

- Alur Navigasi dan Interaksi: Wireflow adalah representasi visual yang lebih rinci tentang bagaimana pengguna akan berinteraksi dengan situs web atau aplikasi. Ini melibatkan alur navigasi dan interaksi antara berbagai elemen antarmuka, seperti tombol, tautan, formulir, dan halaman.

- Fokus pada Fungsionalitas: Wireflow lebih fokus pada fungsionalitas dan interaksi antarmuka. Ini membantu menggambarkan bagaimana pengguna akan berpindah antara halaman-halaman dan berinteraksi dengan elemen-elemen di dalamnya.

- Detail dan Konteks: Wireflow cenderung lebih terperinci dan lebih dekat dengan representasi nyata dari tampilan dan interaksi antarmuka yang akan dibangun. Ini membantu pengembang dan desainer memahami bagaimana sistem akan beroperasi dan berinteraksi dengan pengguna.

- Membantu Pengembangan: Wireflow sering digunakan sebagai panduan bagi pengembang untuk membangun sistem dan mengimplementasikan fungsionalitas yang diinginkan.

 

Secara keseluruhan, storyboard memberikan gambaran keseluruhan dan naratif dari pengalaman pengguna, sedangkan wireflow lebih berfokus pada detail dan interaksi antarmuka. Keduanya penting dalam proses desain dan pengembangan, dan sering digunakan bersama-sama untuk memastikan pengalaman pengguna yang optimal dan implementasi yang efisien.