Dutormasi.com – Saat anda ingin membuat sesuatu hal hal yang berkaitan dengan desain website disarankan terlebih dahulu untuk membuat wireframe dan mockup nya terlebih dahulu. Karena pada dsarnya jika anda ingin membuat desain website, anda tidak bisa langsung membuatnya langsung ke html, framework atau jenis lainnya.
Untuk itu kalian harus mengetahui terlebih dahulu apa itu wireframe dan apa itu mockup. Wireframe adalah sebuah kerangka atau sebuah coretan kasar untuk menata item item yang akan dimasukkan kedalam website sebelum desain website sesungguhnya dimulai. Sedangkan mockup adalah sebuah porses kelanjutan dari wireframe. Mockup juga merupakan desain website yang menjadi salah satu tren yang sering digunakan pada masa kini.
Wireframe sebenarnya hampir sama dengan mockup dan juga saling berhubungan namun wreframe biasanya dibuat terlebih dahulu dikertas untuk merancang desainnya setelah merancang nya lewat kertas setelah itu baru ketahap selanjutnya yaitu membuat mockup. Untuk membuat mockup anda bisa membuat lewat adobe photoshop atau adobe desain lainnya.
Contohnya kita beri kasus untuk membuat tampilan UI home dengan pege landing untuk website saya.
Contoh Wireframe website
- Pada lembar wireframe yang akan saya buat ini. Nanti tampilan home, about blog dan contact akan menjadi 1 tampilan. Namun pada postingan sedikit berbeda karena akan membuat lembaran baru jika diklik.
- Tampilan nomor 1 terdiri atas header yang ada nama saya sendiri MUHAMMAD RAKHA dan pilihan seperti Home, About, Blog dan Contact. Didalamnya pada tampilan 1 disisipi background, about me dan media sosial.
- Pada tampilan 2 merupakan tampilan about. Didalamnya disisipi dengan foto(Lingkaran), nama saya, dan tentang blog ini. Pada sisi kanannya akan saya beri persentase skill.
- Pada tampilan 3 merupakan tampilan blog yang didalmnya ada thumbnail postingan dan ada nama penulis dan tanggal penulisan.
- Pada tampilan 4 merupakan tampilan contact dan footer yang bisa membuat pengunjung memberikan pesan kepada pemilik website.
Contoh Mockup
Untuk mockup nya kita harus mengikuti wireframe yang telah kita buat diatas. Karena desain wireframe merupakan contohan untuk membuat mockup.
Nah mungkin itulah contoh mockup yang anda rancang dari wireframe ke mockup. Setelah anda membuat mockup nya tahapan selanjutnya yang harus anda lanjuti adalah membuat websitenya. Bagaimana caranya ? caranya bisa anda membuat secara manual dengan HTML,CSS, JAVASCRIPT. Tetapi dizaman sekarang ada banyak cara yang bisa anda pakai untuk mempermudah anda membuat website yaitu framework.
Framework adalah sebuah kerangka kerja yang berbentuk software untuk mempermudahkan para programmer untuk membuat suatu aplikasi atau website dari beberapa sisi yaitu fungsi, plugin dan lain sistem tertentu lainnya. Framework sendiri ada yang PHP dan juga framework Javascript dan CSS.
Baca Juga :
Pengertian Bootstrap dan Kelebihannya
Namun pada kali ini saya akan menjelaskan bootstrap saja. Bootstrap adalah sebuah lemari framework CSS yang dibuat untuk bisa membuat secara khusus untuk bisa mengembangkan front-end atau tampilan interface website.
Kelebihan bootstap adalah :
- Penggunaan bootstrap cukup mudah
- Penggunaan bootrap sangat menghemat waktu
- Tampilan dari bootstrap sangat cukup modern
- Bootstrap juga responsive dan user friendly.
- ringan
Penggunaan Bootstrap:
- Download bootstrap langsung dari website resminya yaitu getbootstrap.com
- Kemudian anda ambil kode CSS dan Javascript
- Buka aplikasi sublimetext
- Letak kode CSS dan Javacript
Setelah anda melakukan penggunaan bootstrap tadi, maka anda bisa membuat website dengan mengcopy dan merubah sedikit sedkit codingan yang telah disediakan pada website resminya. Untuk itu cobalah anda belajar membuat mockup yang telah saya buat diatas tadi, jika anda sudah membuatnya maka selanjutnya anda akan mudah saja membuat contoh website dan lain.
Jika anda telah pro menggunakan bootstrap ini, maka anda akan bisa menjadikan skill persentasi anda sehingga bisa menambah skill persentasi pada posrtofolio anda. Mungkin sampai sini saja penjelasan pada kali ini, semoga bisa anda mengerti.
Salam Dutormasi !
