Langsung ke konten utama

Perancangan Mockup Web pada Desktop



Apa itu Mockop?

Mockup merupakan gambaran atau visualisasi secara nyata dari website yang akan dibuat. Mockup bisa juga dikatakan sebagai preview sebuah ide yang terlihat seperti wujud aslinya. Mockup adalah hal penting dalam dalam tahap perancangan website. Karena dengan adanya mockup dapat memberikan gambaran dan meyakinkan kamu atau klien untuk website yang kamu buat sehingga bisa klien bisa memberikan masukkan dan saran dari UI website tersebut. 

Biasanya mockup akan sangat dibutuhkan ketika ada sebuah perusahaan atau ada suatu pihak yang sedang membutuhkan website baru, karena pihak tersebut akan membutuhkan gambaran atau visualisasi nyata dari website tersebut terlebih dahulu sebelum website tersebut telah jadi. Pihak yang membutuhkan website tersebut bisa memberikan masukkan terkait rancangan desain web tersebut dan dengan demikian kedua belah pihak, desainer web dan pihak yang membutuhkan website dapat menemukan jalan tengah terhadap website yang akan dibuat.

Mockup dapat dibuat dengan berbagai cara dan media. Bisa dibuat dengan cara manual dengan memanfaatkan kertas, pensil, pena, pensil warna, cat warna dan sejenisnya. Mockup juga bisa dilakukan dengan cara modern dengan mamanfaatkan aplikasi desain grafis seperti Adobe Photoshop, Adobe Ilustrator, CorelDraw, Marcomedia Freehand, Canva dan software editing lainnya. 


Contoh  Desain Mockup Web




Fungsi Mockup pada Desain Website

1. Memudahkan desainer untuk mendapatkan gambaran konsep dari desain UI web

2. Mempresentasikan projek dari desain website

3. Sebagai pedoman teknis untuk membuat rancangan halaman website.

4. Menampilkan konsep dari rancangan website dan memberikan kepada klien sehingga klien dapat memberikan masukkan jika ada hal yang ingin ditambahkan pada desain web tersebut.

5. Sebagai kontrol agar desain web tidak melenceng dari konsep awal. 

6. Mempermudah stakeholder dalam memberikan masukan dan kritikan mengenai desain tersebut.

7. Hemat anggaran karena sudah memastikan tidak ada kesalahan lagi saat desain sudah difinalisasikan


Aspek Penting dalam Desain Mockup Web

1. Layout

Buatlah layout yang menarik tapi enak untuk dilihat. Pikirkan ukuran setiap icon dan porsi pada tiap bagian di konten.

2. Warna

Warna sangat penting dalam desain mockup. pilihlah warna yang tepat sesuai jenis website mu. Pilihlah warna yang nyaman untuk dilihat oleh pengunjung website.

3. Tipografi

Tipografi atau pemilihan font merupakan salah satu aspek dalam desain mockup website. Pilihlah font yang mudah untuk dibaca dan beri space font yang sesuai. 

4. Navigasi

Rancanglah navigasi website yang sederhana dan mudah untuk dipahami semua orang. Rancanglah navigasi yang memudahkan pengguna ketika menjelajah website yang akan kamu buat atau kembangkan. 

5. Spacing

Aturlah dan seimbangkan space atau jarak pada tiap ruang kosong yang ada pada konten web kamu. 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...
Posting Komentar
Baca selengkapnya

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...
Posting Komentar
Baca selengkapnya

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...
Posting Komentar
Baca selengkapnya