Apa Itu Wireframe dan Mockup Web?

Wireframe dan Mockup web, mungkin 2 kata ini sangat sering didengar oleh orang-orang yang memiliki suatu web ataupun orang  yang bekerja untuk mendesain tampilan suatu web, akan tetapi apa sebenarnya wireframe  dan mockup dalam web itu?

di sini aku akan jelaskan pengertian Wireframe  dan  Mockup web tersebut

 

Wireframe 

Wireframe  merupakan rancangan tampilan ataupun kerangka dari website yang akan kita buat, tampilan ini dapat berupa tata letak dari setiap bagian-bagian web yang akan kita buat,  wireframe biasanya dibuat di secarik kertas dengan menggunakan peralatan gambar sederhana seperti sebuah pensil, penghapus, maupun penggaris, hasil dari gambar tersebut merupakan gambaran kasar seperti apa nanti jadinya website yang akan kita rancang.

gambar ini tidak hanya sekedar tampilan halaman depan saja, akan tetapi terdapat juga tampilan peletakan posisi tulisan, tombol, ataupun konten-konten akan tersedia di halaman website kita.

Kenapa hal ini terdapat di wireframe yang kita buat? ini karena wireframe tersebut memang akan menjadi panduan untuk desain yang akan kita buat, jadi dapat kita simpulkan kalau wireframe itu adalah rancangan kasar dari suatu website yang akan kita buat dan dijadikan panduan untuk membuat Website tersebut.

 

Mockup

setelah kita membuat wireframe kita selanjutnya membuat mockup, mockup sendiri adalah langkah selanjutnya setelah kita membuat wireframe, mockup merupakan tampilan halaman web yang sudah jelas dan pasti akan seperti apa tampilan web yang kita rencanakan.

mockup sendiri dibuat degan aplikasi pengolahan gambar apapun, tapi sebaiknya menggunakan aplikasi yang berbasis vektor karena gambar vektor sendiri memiliki kelebihan yaitu lebih tajam dan presisi dalam pembuatanya.

dalam pembuatan mockup, kita telah sampai merancang kepada pewarnaan, jenis tulisan yang digunakan, besarnya tulisan dan juga komponen-komponen pendukung yang ada di dalam web tersebut.

dalam perencanaan ini tentu saja bukanlah pekerjaan yang mudah karena kita diharuskan mempertimbangkan segala aspek yang berkaitan dengan interaksi antara pengunjung website kita! seperti warna mencolok, tulisannya terlalu kecil, ataupun gambar yang tidak dapat dilihat oleh pengunjung website kita, ini sangat perlu diperhatikan dikarenakan akan berdampak selain kepada user interface dan juga user experience.

 

Baca Juga:  6 Faktor Yang Dapat Menyebabkan Otak Kita Terganggu

Adapun tips dalam membuat suatu wireframe ataupun mockup antara lain adalah

  1. menggunakan alat tulis yang dapat dihapus ketika kita ingin merancang suatu wireframe, ini dikarenakan apabila terjadi kesalahan kita dengan sangat mudah menghapusnya dan apabila kita sudah puas akan hasil gambar atau rancangan yang kita buat kita dapat menebalkan nya dengan alat tulis seperti spidol ataupun pena.
  2. perhatikan setiap tata letak gambar, tulisan, dan juga tombol yang terdapat di website kita, pastikan kalau faktor tersebut dapat terlihat oleh pengunjung website kita dan juga tidak mengganggu ataupun tidak menimbulkan rasa tidak nyaman kepada pengunjung website kita
  3. gunakan software pengolah gambar yang sudah kamu kuasai! ini dikarenakan dalam membuat mockup kita diharuskan memiliki keahlian dalam pengolahan gambar, pada awal artikel ini aku menjelaskan bahwa penggunaan pengolahan gambar vektor itu lebih baik untuk membuat mockup, akan tetapi pengolahan gambar berbasis bitmap juga tidak ada salahnya kita gunakan dalam membuat mockup, ini tergantung dengan keahlian Aplikasi apa yang kita gunakan
  4. selalu perhatikan pewarnaan! pewarnaan sangat dibutuhkan di dalam perancangan suatu website ini dikarenakan hal yang yang ditampilkan pertama kali atau yang dilihat pertama kali oleh pengunjung adalah warna tampilan dari website kita, apakah pemilihan warna yang menarik ataupun terlalu cerah ataupun terlalu gelap, artinya ini sangat berpengaruh pada website kamu, aku sarankan mencari kombinasi pewarnaan yang cocok banyak terdapat di internet. banyak website-website penyedia kombinasi warna yang sangat pas ataupun bagus, sebaiknya kita mencari kombinasi warna yang tidak terlalu cerah agar mata pembaca tidak sakit ataupun kombinasi warna yang tidak terlalu gelap dikarenakan warna warna gelap cenderung menyulitkan untuk dibaca.
  5. memilih font itu penting dikarenakan seorang pengunjung website tidak hanya melihat gambar  saja tapi juga membaca isi dari konteks konten yang kita buat, untuk font sendiri gunakanlah font yang membuat mata nyaman ketika membacanya, pahami jenis-jenis font dan penggunaan-penggunaannya, dalam suatu tampilan website gunakanlah tampilan font paling banyak itu 2 sampai 3 jenis font berbeda, selain font perhatikan juga segala jenis tanda baca, dan letak kalimat, dan juga peletakan kalimat ataupun paragraf itu yang bagus adalah rata kiri ataupun rata kanan kiri.

demikian sedikit penjelasan dari apa itu wireframe dan mockup web, semoga bermanfaat

baca juga postingan yang aku buat tentang 5 alasan membuat website

dan juga website ke-2 ku disini  

Leave a Reply

Your email address will not be published. Required fields are marked *