MEMBUAT MOCKUP WEBSITE KURANG DARI 10 MENIT

halo semua, hari ini saya akan sharing tentang cara membuat mockup sebuah website dalam waktu kurang dari 10 menit, semoga ini bisa bermanfaat buat semuanya dan berguna untuk kalian yang suka membuat website.

mungkin teman teman kenal dengan istilah good artist copy but great artist steal, jadi basically disini kita akan mencoba sebuah mockup dengan cara menggabungkan beberapa elemen dari beberapa website sehingga membuat sebuah mockup website yang akan kita buat menjadi sebuah template website utuh.

apa sih mockup? 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).

nah sekarang kita mulai membuat mockup dalam waktu kurang dari 10 menit :

persiapan :

• screenshot dari beberapa website :
• untuk mencari referensi website bisa lewat sini
• webcreme (teman teman bisa mencari sesuai warna web yang diinginkan dengan klik kotak warna yang ada di bawah link website tsb)
• tentunya googling.
• tools/ plugin/ extension untuk screenshot website tsb
• chrome : clipular, qsnap
• firefox   : pearl crescent page saver basic (recommended)
• Adobe Photoshop (disini ane pake CS5 & CS6) kalo gapunya bisa googling & download photoshopnya
• 960 grid 12 column (download file psdnya saja)
• ide & tema dari website yang akan teman teman buat

1. buka file 960 grid 12 column yg sudah di download.
   
2. buka menu image > canvas size (ctrl+alt+c) lalu tambahkan sama dengan gambar dibawah.
   
3. buka file screenshot dari vsco lalu buat selection seperti pada gambar.
   
4. drag & drop ke file yang dibuat tadi diawal sehingga menjadi seperti gambar dibawah.
   
5. buka file screenshot dari falve lalu klik kanan > color range lalu klik pada tulisan logo falve
   atau buat yang mirip dengan menggunakan type tools.
   
6. hasil logo yang telah dibuat.
   
7. buka file screenshot flawless lalu buat selection seperti pada gambar.
   
8. pindahkan ke dalam file yang dibuat di awal lalu buat menjadi 4 mengikuti grid yang ada.
   
9. buka screenshot website dropdead dan buat selection di produk yang kamu mau dan simpan diatas gambar produk yang telah diambil dari website flawless sehingga menjadi seperti yang ada di gambar dibawah ini.
   
10. sekarang kita akan membuat elemen featured product :
    
    1. buat sebuah kotak kecil
    2. lalu beri text di dalamnya dengan font arial italic
    3. beri shadow pada text dengan detail
       distance : 1
       spread   : 100
       size       : 0
    detail yang sudah jadi :
    
11. buka screenshot bonlook dan buat selection seperti gambar dibawah ini
    
12. lalu pindahkan ke file yang dibuat diawal tadi
    
13. buka kembali screenshot flawless lalu buat selection seperti pada gambar
    
14. copy box di featured product lalu tambahkan kata "category" detail seperti pada gambar
    
15. kembali ke screenshot flawless lalu buat selection seperti pada gambar
    
16. lalu pindahkan ke file yang dibuat diawal
    
17. crop bagian yang tidak diperlukan

VOILA! mockup pun sudah selesai dibuat

perlu diperhatikan mockup ini adalah sebuah prototipe sebuah website, hanya untuk mendapatkan look and feel juga style dari website yang nantinya akan dibuat, kita boleh mengambil inspirasi dari banyak website tapi tolong hargai hasil karya orang lain yang telah membuat website website yang luar biasa ini.

cukup sekian tutorial yang saya bagikan kepada teman teman, mudah mudahan dapat bermanfaat dan bisa memberikan inspirasi.

selamat mendesign!

file PSD bisa di download disini