Skip to main content

Praktikum Minggu ke-8 - Membuat Mock Up Design Web


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 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 website sesuai dengan tema website yang dipilih !

D.    Hasil Praktikum
Berikut adalah hasil mockup web dari kelompok kami:





E.     Kesimpulan

Comments

Post a Comment

Popular posts from this blog

Animasi 1 Membuat Animasi Sederhana

Praktikum 01 – Membuat Animasi Pertama 1.      Tujuan Mencoba Membuat Animasi Pertama 2.      Alat Adobe After Effects CC 2015 3.      Bahan Font 4.      Dasar Teori Animasi  a dalah suatu rangkaian gambar diam secara inbeethwin dengan jumlah yang banyak, bila kita proyeksikan akan terlihat seolah – olah hidup (bergerak), seperti yang pernah kita lihat film – film kartun di tevisi maupun dilayar lebar jadi Animasi kita simpulkan menghidupkan benda diam diproyeksikan menjadi bergerak. 3 Penggunaan animasi pada komputer telah dimulai dengan ditemukannya software komputer yang dapat dipergunakan untuk melakukan ilustrasi di komputer, membuat perubahan gambar satu ke gambar berikutnya sehingga terbentuk suatu bentuk gerakan tertentu .   Secara garis besar, animasi computer dibagi menjadi dua kategori, yaitu: a.       Computer Assisted Animation , animas...
Post a Comment
Read more

Praktikum 7 : Membuat Animasi Logo Official - part 3

Praktikum 7 : Membuat Animasi Logo Official - part 3 1. TUJUAN       Pada praktikum kali ini bertujuan untuk m embuat animasi 3D logo official. 2. ALAT      Adobe Illustrator CC 2017      Adobe After Effects CC 2017 3. BAHAN - 4. PETUNJUK PRAKTIKUM       Tutorial di bawah ini untuk membuat logo dan animasi logo Youtube 5. HASIL PRAKTIKUM https://youtu.be/WLx8yDAeo3Q 6. KESIMPULAN 7. REFERENSI https://www.youtube.com/watch?v=A0i2xTOa2zc&t=759s https://www.videocopilot.net/products/element2/update/
Post a Comment
Read more

Praktikum 11 Project Animasi: Animatics

Praktikum 11 Project Animasi: Animatics I. Tujuan     Mencoba bekerjasama dengan client untuk dibuatkan animasi. II. Alat     1. Pensil dan penghapus     2. Penggaris     3. Spidol     4. Aplikasi Scanner     5. PowerPoint III. Bahan          1. Kertas A3 IV. Dasar Teori   1. Storyboard   Storyboard adalah  visualisasi ide dari aplikasi yang akan dibangun, sehingga dapat memberikan gambaran dari aplikasi yang akan dihasilkan. Storyboard dapat dikatakan juga visual script yang akan dijadikan outline dari sebuah proyek, ditampilkan shot by shot yang biasa disebut dengan istilah scene. Storyboard sekarang lebih banyak digunakan untuk membuat kerangka pembuatan website dan proyek media interaktif lainnya seperti iklan, film pendek, games, media pembelajaran interaktif ketika dalam tahap perancangan /desain. Beberapa alasan menga...
Post a Comment
Read more