Bayangkan atau pikirkan tentang klien yang datang kepada Anda dan menugaskan Anda untuk mendesain situs web. Mungkin Anda harus mendesain tema yang akan digunakannya, dan itu akan menjadi kesan pertama yang akan ditinggalkannya pada ribuan atau jutaan orang yang akan mengunjunginya. Bagaimana Anda akan menyajikannya kepadanya? Maukah Anda mengambil tangkapan layar situs web tempat Anda mengerjakan desain dan menunjukkannya kepada mereka? Bukankah lebih baik menggunakan web mock up?
Tunggu, Anda tidak tahu kalau ada juga mockup website? Nah, kalau begitu ini pasti cocok untuk Anda. Anda bisa memberikan tampilan yang lebih profesional pada presentasi Anda dan membuat klien jauh lebih senang setelah melihat gambar yang membuat website tersebut tampak seperti sudah aktif dan berjalan. Dan yang pasti, biayanya tidak terlalu mahal.
Apa itu mockup situs web?
Sebelum membahas lebih lanjut, mari kita jelaskan sedikit tentang apa itu mockup situs web . Seperti yang Anda ketahui, mockup sebenarnya adalah representasi, biasanya "gambar realistis," yang menunjukkan seperti apa hasil akhir pekerjaan Anda nantinya.
Dalam kasus situs web, itu akan berupa gambar hasil dari halaman web tersebut.
Jenis kolase ini digunakan untuk memberikan kesan lebih realistis pada karya , karena seringkali, ketika dipresentasikan, karya tersebut tampak kosong atau tidak sepenuhnya mewakili apa yang telah Anda kerjakan. Selain itu, ini memberikan klien cara yang lebih visual untuk mendapatkan gambaran tentang produk akhir.
Dan Anda mungkin berkata, mengapa tidak menunjukkan kepada mereka situs web yang telah Anda kerjakan? Itu bisa dilakukan, tetapi bukan sebagai presentasi hasil pekerjaan. Anda harus membiarkan klien menjelajahi situs web tersebut untuk mengenalnya secara menyeluruh, dan seringkali mereka tidak punya waktu untuk melakukan itu, jadi Anda tidak bisa yakin mereka telah melihat semuanya.
Di sisi lain, dengan mockup web Anda akan mencapainya karena Anda akan menyorot semua yang ingin Anda lihat di gambar tersebut.
Bagaimana mereka dibuat?
Sekarang, bagaimana web mock up ini dibuat? Apakah ada program untuk membuatnya? Apakah mereka kolase yang diambil dari Internet?
Sebenarnya, ada beberapa alat gratis yang dapat membantu Anda membuat ini, dan dapat memberi Anda pilihan, tidak hanya dengan contoh yang akan kami tunjukkan nanti.
Dengan ini Anda bahkan dapat membuat koleksinya untuk klien itu, menempatkan desain dalam urutan berbeda yang membuat hasil akhir terlihat jauh lebih baik.
Alat-alat ini adalah:
gliffy
Alat ini online dan gratis . Dengan alat ini, Anda dapat membuat mockup situs web karena memiliki banyak template dan API yang memungkinkan Anda untuk memulai dalam hitungan menit.
Faktanya, ini adalah salah satu yang paling banyak digunakan dan memberi Anda banyak pilihan.
coklat
Dalam hal ini, kami harus memperingatkan Anda bahwa, meskipun kami akan fokus pada bagian gratisnya , alat ini juga berbayar dan itu berarti akan lebih terbatas dalam hal yang dapat Anda lakukan.
Sebagai gambaran, Anda hanya dapat mengekspor dalam format PNG (yang berarti tidak terlalu mudah disesuaikan jika Anda ingin menggunakannya dengan klien lain).
Hal baiknya adalah jika Anda bekerja dengan tim, Anda dapat bekerja bersama pada waktu yang sama (yaitu secara real time).
wirify
Wirefy adalah salah satu alat yang dapat mengubah situs web menjadi wireframe , memungkinkan Anda untuk bekerja sama dengan klien dan menunjukkan situs web kepada mereka sesuai keinginan mereka. Namun, Anda tetap perlu memilih foto yang diambil dengan komputer, tablet, atau perangkat seluler untuk menyusun wireframe tersebut.
Seperti yang mungkin sudah Anda duga, semua alat memberi Anda gambar desain web, tetapi Anda perlu benar-benar merakitnya dalam gambar nyata. Untuk ini, Anda harus mengakses foto di mana komputer, ponsel, tablet ditampilkan untuk memasukkan desain Anda di atas dan mendapatkan foto yang menyatukan keduanya (dan itu terlihat bagus).
Untuk melakukan ini, Anda dapat menggunakan maket yang sudah jadi atau membuatnya sendiri dengan program pengeditan gambar.
Mock up web yang dapat Anda unduh
Jika Anda tidak ingin terlalu stres memikirkan presentasi karya Anda, berikut beberapa contoh mockup situs web yang dapat Anda unduh dan gunakan. Anda akan menghemat waktu.
Mock up situs web yang realistis
Kami mulai dengan adegan yang bisa dimiliki siapa saja. Ini adalah meja dan layar komputer di atas (keyboard dan mouse di bawah). Di latar belakang rak buku dengan buku-buku. Namun, rak buku ini berwarna hitam putih, begitu juga dengan elemen dekoratif meja (lebih banyak buku dan lampu) dan dinding, yang berwarna abu-abu.
Mengapa? Untuk menjaga agar perhatian pemirsa tetap terfokus pada halaman yang ditampilkan di monitor. Dalam kasus Anda, ini bisa berupa halaman beranda , atau bagian-bagian representatif yang ingin Anda tunjukkan kepada klien.
Unduh di sini.
Mockup situs web sederhana
Representasi yang lebih sederhana, di mana dengan latar belakang abu-abu (walaupun dapat dikustomisasi) tidak menunjukkan layar di mana kita akan menyisipkan halaman web.
Terlihat jelas bahwa, jika Anda melihat layar, ada bagian yang lebih terang dan bagian yang lebih gelap, karena itu mensimulasikan bahwa cahaya jatuh di atasnya.
Ini bisa menarik untuk bagian-bagian di mana Anda ingin pelanggan fokus sepenuhnya pada bagian tersebut.
Unduh di sini.
Mockup Samsung Galaxy S5
Ini khususnya adalah mockup dari Samsung Galaxy S5 tetapi dapat menjadi sempurna bagi Anda untuk menunjukkan, dalam gambar yang sama, tiga bagian dari desain web yang telah Anda buat sehingga klien menghargai bagaimana tampilannya di ponsel.
Perlu diingat bahwa Google kini memberikan lebih banyak dukungan kepada bisnis yang menggunakan situs web responsif , artinya situs web yang terlihat bagus baik dilihat di komputer, tablet, atau perangkat seluler. Oleh karena itu, tidak cukup jika situs web Anda terlihat bagus di komputer; Anda perlu memastikan situs web tersebut juga terlihat bagus di semua platform lainnya.
Anda dapat mengunduhnya di sini.
Mockup untuk tablet dan seluler
Dalam hal ini, Anda tidak akan dapat menampilkan 100% web di tablet, tetapi Anda bisa menampilkannya di ponsel. Dan jika Anda ingin menunjukkan desain Anda pada kedua perangkat ini, Anda juga dapat melakukannya, sehingga klien mendapatkan gambaran bagaimana tampilannya.
Perlu diingat bahwa tampilan akan horizontal di tablet, sedangkan di ponsel akan ditampilkan secara vertikal . Ini adalah cara agar pengguna dapat melihat perubahan desain Anda untuk beradaptasi dengan kedua perangkat tersebut.
Ini dia.
Apakah Anda memiliki beberapa contoh web mock up? Anda dapat membagikannya di komentar.