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?
Menunggu, Tahukah Anda bahwa ada juga web mock up? Nah, maka topik ini menarik minat Anda. Dan banyak. Karena Anda dapat memberikan presentasi Anda kehadiran yang lebih baik dan membuat klien pergi jauh lebih bahagia setelah melihat gambar di mana tampaknya situs web sudah beroperasi. Dan kenyataannya adalah bahwa Anda tidak perlu mengeluarkan biaya banyak untuk melakukannya.
Apa itu mockup situs web?
Pertama-tama, mari kita jelaskan sedikit apa itu tiruan situs web. Seperti yang Anda ketahui, mockup sebenarnya adalah representasi "gambar nyata" yang menunjukkan seperti apa hasil akhir dari pekerjaan Anda.
Dalam kasus sebuah situs web, akan menjadi gambar dari hasil halaman web itu.
Jenis kolase ini mereka digunakan untuk memberikan lebih banyak realisme pada pekerjaan, karena berkali-kali, ketika Anda mempresentasikannya, mungkin kosong atau tidak mewakili seratus persen apa yang telah Anda lakukan. Selain itu, klien memiliki cara yang lebih visual untuk mendapatkan ide.
Dan Anda akan berkata, mengapa tidak menunjukkan kepadanya situs web yang telah Anda kerjakan? Itu bisa dilakukan, tetapi bukan sebagai presentasi pekerjaan tetapi Anda harus membiarkan klien menavigasi web baginya untuk mengenalnya secara menyeluruh dan, sering kali, mereka tidak punya waktu untuk melakukannya, jadi Anda tidak memastikan bahwa dia 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 bahwa mereka dapat membantu Anda untuk membuatnya, dan bahwa mereka dapat memberi Anda pilihan, tidak hanya dengan contoh yang akan kami berikan kepada Anda 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 adalah online dan gratis. Dengan itu Anda dapat membuat web mock up karena memiliki banyak skema dan API yang dapat digunakan untuk menyelesaikan pekerjaan dalam hitungan menit.
Sebenarnya, itu adalah yang paling banyak digunakan dan itu memberi Anda banyak pilihan.
coklat
Dalam hal ini kami harus memperingatkan Anda bahwa, meskipun kami akan fokus pada bagian gratis, alatnya itu juga berbayar dan itu artinya akan lebih terbatas dalam apa yang dapat Anda lakukan.
Untuk mendapatkan ide, Anda hanya dapat mengekspor di PNG (jadi tidak begitu dapat 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
wirify merupakan salah satu alat dapat mengubah situs web menjadi gambar rangka dan, dengan itu, bekerja dengan klien menunjukkan web sesuai keinginan Anda. Tapi tentu saja, di sini perlu memilih foto komputer, tablet, atau ponsel untuk memasang hasil program ini.
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 membebani diri Anda terlalu banyak untuk mempresentasikan pekerjaan, di sini kami meninggalkan Anda beberapa contoh dari tiruan 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? Sehingga pandangan terfokus pada halaman yang ditampilkan oleh monitor. dalam kasus Anda bisa menjadi rumah halaman, atau bagian representatif yang ingin Anda tunjukkan kepada klien.
Anda mengunduhnya 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 yang Anda inginkan klien hanya melihat mereka.
Anda mengunduhnya 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 memberdayakan bisnis lebih dari gunakan situs web yang responsif, yaitu, tampilannya bagus baik Anda menggunakan komputer, tablet, atau ponsel. Oleh karena itu, tidak cukup hanya terlihat bagus di komputer, Anda harus memastikan di semua platform lain.
Anda bisa mendownloadnya 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.
Tentu saja, perlu diingat itu di tablet itu akan ditampilkan dalam format lansekap sedangkan mobil akan memilikinya vertikal. Ini adalah cara baginya untuk melihat perubahan desain Anda agar sesuai dengan kedua perangkat.
Anda mengerti di sini.
Apakah Anda memiliki beberapa contoh web mock up? Anda dapat membagikannya di komentar.