Praktikum Minggu Ke-8: Pembuatan Mock Up


November 23, 2018
DESAIN WEB - PRAKTIKUM MINGGU KE-8: PEMBUATAN MOCK UP
A. Tujuan
     Mahasiswa mampu membuat mock up website sesuai dengan tema website yang dipilih

B. Dasar Teori
     Dalam dunia website, Mockup/Wireframe adalah rancangan awal atau sket sebuah desain web yang dibuat secara manual menggunakan photoshop, atau software pengedit gambar lainnya. Mockup merupakan gambar model atau prototif halaman web secara full dan detail. Format mockup ini biasanya berbentuk file .PSD (Photoshop Document).
     Sebenarnya, selain menggunakan photoshop atau software pengedit gambar, Mockup juga dapat dibuat dengan software yang memang dikhususkan untuk membuat mockup seperti Mockingbird, Cacoo, Mockflow, dan sebagainya. Namun, bisanya software-software seperti ini justru hanya memungkinkan pembuat untuk membuat mockup yang sederhana alias seadanya. Misalnya, hanya sebatas layout dan navigasinya saja.
     Mockup ini berfungsi sebagai acuan kerja pembuatan website agar tidak menyimpang dari tujuan awal membuatnya. Biasanya, pembuatan website yang menggunakan mockup lebih efektif dan terstruktur karena pada saat pembuatan mockup itu sudah ditentukan kerangka pembuatan websitenya.
     Mockup dikerjakan oleh seorang web designer yang nantinya akan diserahkan pada web programmer. Oleh web programmer, Mockup ini nantinya akan di ubah ke bentuk halaman web berformat .html. Pengubahan ini biasanya disebut “Slicing PSD to HTML“. Pengubahan ini dilakukan secara manual oleh programmer dengan mengetikkan kode-kode HTML dan CSS.


C. Tugas
Buat mock up dari sebuah website. Jika Tugas Akhir berupa website atau aplikasi/game, maka mock up dari output tugas akhirnya. Selain itu, mock up website dibebaskan

D. Hasil Praktikum
     Mock up desain web, saya dan nita membuat mock up web rumah sedep dengan menggunakan aplikasi mobirise.






E. Kesimpulan
     Mockup atau sket suatu desain web bisa berbentuk apa saja, misalnya jpg/png, html, prototype, atau ppt, dan lain sabagainya.

Komentar

Posting Komentar

Postingan populer dari blog ini

Minggu 13 - Progress Animasi 3D logo 86

Gambar
Tujuan Pada tahap ini, kegiatan yang dilakukan adalah mencari video animasi 3D untuk dibuat projek. Dasar Teori Logo  merupakan suatu  gambar  atau sekadar  sketsa  dengan arti tertentu, dan mewakili suatu arti dari  perusahaan ,  daerah ,  organisasi ,  produk ,  negara ,  lembaga , dan hal lainnya membutuhkan sesuatu yang singkat dan mudah diingat sebagai pengganti dari  nama  sebenarnya. Logo harus memiliki  filosofi  dan kerangka dasar berupa konsep dengan tujuan melahirkan sifat yang berdiri sendiri atau mandiri. Logo lebih lazim dikenal oleh penglihatan atau visual, seperti ciri khas berupa warna dan bentuk logo tersebut. Animasi 3D Sementara pada animasi 3D digunakan tiga vektor x, y, dan z. Vektor z inilah yang berfungsi sebagai tinggi objek sehingga menghasilkan volume. Pada animasi 3D gambar bisa dilihat secara keseluruhan dari segala arah dan objeknya terlihat semakin nyata. Dibutuhkan software berkemapuan khusus untuk mengolah animasi 3D dan modeli
Baca selengkapnya

Praktikum Minggu 4 : Rangkuman Materi Desain Thinking

Gambar
JUDUL : Design Thinking I.                   Tujuan Mahasiswa mampu mempersiapkan diri dalam menghadapi Tugas Akhir. Mahasiswa dapat menyelesaikan tugas akhir menggunakan prinsip desain thinking . II.                 Dasar Teori (Rangkuman Pembelajaran) Design Thinking adalah metodologi desain yang memberikan pendekatan berbasis solusi untuk memecahkan masalah. Ini sangat berguna dalam mengatasi masalah kompleks yang tidak jelas atau tidak diketahui, dengan memahami kebutuhan manusia yang terlibat, dengan membingkai ulang masalah dengan cara yang berpusat pada manusia, dengan menciptakan banyak ide dalam sesi brainstorming, dan dengan mengadopsi pendekatan langsung dalam pembuatan prototipe dan pengujian. Memahami lima tahap Design Thinking ini akan memberdayakan siapa pun untuk menerapkan metode Berpikir Desain untuk memecahkan masalah kompleks yang terjadi di sekitar kita. Design Thinking adalah salah satu metode baru dalam melakukan proses desain. Design
Baca selengkapnya

PRAKTIKUM 12: ANIMATICS (TAHAP 2)

Gambar
I. TUJUAN Membuat Animatics untuk Branding Komunitas SEMUT MMB melalui animasi dan poster II. ALAT Smartphone Adobe Premiere Pro CS6 III. BAHAN - Storyboard Fix - Voice Over IV. DASAR TEORI Pengertian Storyboard Storyboard adalah sketsa gambar yang disusun berurutan sesuai dengan naskah. Dengan storyboard, kita dapat menyampaikan ide cerita kita kepada orang lain dengan lebih mudah, karena kita dapat menggiring khayalan seseorang mengikuti gambar-gambar yang tersaji, sehingga menghasilkan persepsi yang sama pada ide cerita kita. Komponen Storyboard Format dalam penggunaan storyboard akan tidak sama, hal ini disesuaikan dengan peruntukan dalam pembuatab storyboard itu sendiri, semisal storyboard iklan akan berbeda dengan storyboard yang dipergunakan dalam pembuatan website, berikut beberapa hal yang terdapat dalam storyboard : Urutan/Scene/Frame Video Warna/penempatan Audio Waktu/Durasi Teks Interaksi dengan penonton Jenis Font Pengertian Animatic
Baca selengkapnya