Membuat Tutorial Penggunaan Aplikasi dengan MockuPhone
Tutorial Penggunaan Sebuah Aplikasi Pada Smartphone
Sudah lihat gambar di atas? Kalau belum, cobalah perhatikan dengan baik gambar tersebut. Gambar di atas merupakan sebuah mockup dari aplikasi Spotify yang saya buat guna menjelaskan cara membagikan lagu yang saya dengar pada aplikasi Spotify ke Instagram Story. Saya menempelkan beberapa hasil screenshot aplikasi Spotify ke dalam sebuah layar handphone, menambahkan sedikit keterangan, dan membuatnya menjadi lebih realistis dan enak untuk dibaca.
Sekarang ini, membuat mockup seperti yang saya lakukan di atas tidak lagi sulit. Kalian tidak perlu susah-susah membuat layout handphonenya terlebih dahulu, baru kemudian menempelkannya dengan gambar hasil screenshot pada aplikasi komputer seperti adobe photoshop. Kini proses tadi sudah dipersingkat dan dipermudah oleh sebuah web aplikasi yang bernama mockuphone.com
Dengan mockuphone.com, orang yang tidak memiliki kemampuan desain yang baik seperti saya pun mampu untuk membuat sebuah mockup yang baik. Tak perlu berlama-lama, berikut ini saya bagikan cara membuat mockup aplikasi melalui mockuphone.com
Cara Menggunakan mockuphone.com
- Buka browser kalian dan ketikkan mockuphone.com sebagai alamat URL.
Halaman Utama dari Mockuphone.com
- Pilih tipe handphone yang ingin kalian gunakan untuk meletakkan hasil screenshot dari aplikasi. Tersedia banyak jenis handphone yang bisa kalian pilih di mockuphone.com. Sebagai contoh kali ini, saya akan menggunakan layout dari Google Pixel.
Ragam pilihan layout Handphone yang bisa kalian pilih
- Upload file hasil screenshot yang ingin kalian pasang pada Google Pixel tadi dengan cara meletakkannya ke dalam kotak bertuliskan Drop Files Here. Jika sudah, tekan tombol Generate Product Mockups.
Letakkan file yang ingin kalian upload ke dalam kotak ini
Tekan tombol Generate Product Mockups
- Salah satu kemudahan yang saya suka dari mockuphone adalah kita bisa mengupload banyak gambar sekaligus dan mockuphone akan meng-handle-nya secara otomatis. Biarkan website ini men-generate semua gambar yang kalian upload tadi hingga selesai.
Biarkan semua gambar yang kamu upload diproses oleh mockuphone hingga selesai
- Ketika proses generate selesai, mockuphone akan menampilkan preview dari gambar-gambar yang sudah kita upload tadi dengan keadaan yang sudah menempel pada handphone (dalam hal ini Google Pixel). Tekan tombol Download my mockups untuk mengunduh semua gambar hasil jadi tersebut.
Tekan Download My Mockups untuk mengunduh semua file hasil upload-an kalian
- Setelah menekan tombol Download My Mockups, sebuah pop up menu akan muncul. Di dalam text box yang ada di pop up menu tersebut, kalian akan diminta untuk memasukkan alamat email karena sebuah link untuk mendownload semua gambar tadi akan dikirim lewat email. Pastikan kamu memasukkan alamat email dengan benar, lalu tekan tombol Download.
Masukkan alamat email dan tekan download
- Biarkan proses pengiriman link berlangsung. Sambil menunggu link tersebut masuk ke inbox email, kalian bisa membantu mempromosikan aplikasi web mockuphone.com ini ke sosial media yang kalian punya seperti FB atau Twitter.
Bantu promosiin aplikasi ini dong
- Sekarang cek inbox kamu. Klik link yang ada pada isi email tersebut dan file kamu akan terunduh secara otomatis dengan nama mockup.zip
Kiriman dari mockuphone sudah datang
klik link yang ada pada isi email dan file dengan nama mockup.zip akan terunduh secara otomatis
- Unzip file mockup.zip dan kalian akan melihat semua file tersaji dengan rapi. Mockuphone menyediakan 2 versi tampilan untuk setiap gambar yng kalian upload yaitu versi landscape dan versi potrait.
File hasil jadi dari mockuphone
- Untuk finalisasi dan membuat rangkaian gambar yang informatif seperti yang pertama kali kalian lihat pada postingan ini, saya biasanya menggunakan aplikasi Inkscape. Aplikasi ini tersedia untuk sistem operasi Windows, Linux dan Mac OS. Kabar baiknya lagi, aplikasi Inkscape ini GRATIS lho.
Proses penyempurnaan tutorial dengan aplikasi Inkscape
******
Itu tadi sedikit sharing mengenai cara membuat mockup sebuah aplikasi dan membungkusnya menjadi sebuah infografis yang cantik dan enak untuk dibaca. Buat kalian para blogger yang suka ikut lomba menulis, cobain deh trik ini. Cobalah untuk membuat kumpulan gambar hasil screenshot aplikasi menjadi suatu gambar yang lebih hidup dan lebih bercerita. Selamat mencoba ya dan sampai jumpa di tips & trick berikutnya 🙂
Catatan
- Ukuran gambar yang direkomendasikan oleh mockuphone.com untuk di-upload adalah 1440px * 2560px.
- mockuphone.com mendukung gambar dengan format JPG, PNG dan PSD.
- Ukuran file setelah digabungkan, antara file gambar hasil upload dengan layout handphone, kurang lebih 2512px * 2512 px dengan besar yang mencapai 1 – 2 MB.
- Aplikasi ini GRATIS.
- Jika kalian tidak menemukan tipe handphone yang ingin kalian gunakan, terdapat tombol Request New Device yang bisa kalian gunakan untuk meminta sang developer menyediakan tipe handphone yang kalian mau. Enak kan?
- Jika ingin mendapatkan hasil yang lebih bagus (dan berbayar tentunya), kalian bisa coba situs serupa dengan nama placeit.net
Really, coaching is simplicity. It’s getting players to play better than they think that they can.
— Tom Landry
