Mockup website adalah representasi visual dari tata letak, desain, dan konten situs web. Biasanya dibuat menggunakan perangkat lunak desain seperti Figma atau Sketch dan digunakan untuk menampilkan desain website kepada para pemangku kepentingan dan klien, serta untuk merencanakan dan mengatur pengembangan website.
Mockup bukanlah website fungsional, tetapi memungkinkan desainer, pengembang, dan klien untuk mendapatkan gambaran tentang bagaimana website akhir akan terlihat dan terasa dan membantu mereka mengidentifikasi dan menyelesaikan masalah desain sebelum website dibangun.
Mengapa mockup itu penting?
Sekarang setelah kita memahami apa itu mockup, mari kita lihat mengapa penting untuk membuat mockup berkualitas tinggi.
Alasan 1: Klien atau pemangku kepentingan
Sebelum sebuah desain disetujui oleh klien atau pemangku kepentingan perusahaan, kita perlu menunjukkan mockup atau prototipe untuk mendemonstrasikan hasil pekerjaan kita. Biasanya, presentasi ini menyoroti aspek visual website, serta tugas-tugas utama yang dapat dilakukan oleh pengguna dengan website yang baru dirancang. Hal ini biasanya dilakukan dalam sebuah pertemuan di mana presentasi diberikan untuk menjelaskan seluruh proses desain, yang mengarah ke konsep akhir, yang merupakan representasi visual dari website.
Alasan 2: Pembuatan prototipe dan pengujian pengguna
Prototipe dapat berupa mockup yang dihidupkan dengan menambahkan interaksi, animasi, dan fungsionalitas dasar pada tata letak statis. Hal ini dapat digunakan untuk pengujian kegunaan untuk mengumpulkan umpan balik dan melakukan perbaikan sebelum website final dibangun. Prototipe dapat dibuat dengan alat yang sama dengan yang digunakan untuk membuat mockup atau dengan perangkat lunak pembuatan prototipe khusus seperti Adobe XD, Figma, atau InVision.
Prototipe penting karena berbagai alasan. Alasan yang paling utama adalah untuk menampilkan website kepada pengembang, klien, dan pemangku kepentingan, yang darinya kita dapat mengumpulkan umpan balik. Umpan balik ini dapat digunakan untuk melakukan perbaikan pada situs web atau untuk memvalidasi konsep sebelum melanjutkan ke tahap pengembangan.
Manfaat kedua dari membuat prototipe adalah menggunakannya untuk pengujian kegunaan. Dengan memeriksa dengan pengguna potensial, kita dapat mengidentifikasi masalah kegunaan dengan konsep tersebut. Lebih baik menemukan masalah dengan prototipe daripada dengan situs web yang sudah jadi karena menemukan masalah kegunaan lebih awal dapat menghemat banyak waktu dan uang bagi perusahaan dalam jangka panjang.
Secara keseluruhan, prototipe adalah langkah penting dalam proses desain untuk memastikan terciptanya situs web akhir yang berkualitas tinggi dan ramah pengguna.
Alasan 3: Serah terima pengembang
Mockup adalah representasi visual yang paling dekat dengan website yang sebenarnya, yang membantu para arsitek ekosistem memahami cara membangunnya. Pengembang frontend perlu mengetahui dengan tepat apa yang harus diwujudkan, dan memiliki mockup yang mendetail akan membantu mereka dengan pengalaman yang paling dekat. Menyediakan prototipe juga akan membantu pengembang backend memahami interaksi yang perlu mereka bangun melalui website.
Bayangkan sebuah situs web sebagai sebuah ekosistem yang memiliki aspek visual yang dibangun oleh para insinyur frontend yang menghubungkan beberapa bagian situs web ke titik akhir yang dibangun oleh para insinyur backend. Koneksi ini membuat situs web menyelesaikan tindakan yang diambil oleh pengguna.
Tiga fase untuk membangun Website Interface
Ketika berbicara tentang representasi visual sebuah website, ada tiga langkah penting yang harus dilakukan dalam prosesnya. Pertama, kita perlu membuat kerangka website, sebuah konsep yang kita sebut wireframe. Kedua, kita perlu memberi kulit pada kerangka kita, sebuah konsep yang kita sebut mockup. Terakhir, kita memberi kehidupan pada tubuh ini dengan konsep yang kita namakan prototipe.
- Wireframe adalah representasi konten dan tata letak dengan ketelitian rendah, yang menunjukkan penempatan elemen seperti teks, tombol, atau gambar. Wireframe membantu mengatur dan memvisualisasikan struktur website, navigasi, dan organisasi konten. Terakhir, penting untuk membuatnya dengan mempertimbangkan kegunaan
- Mockup, seperti yang telah kami jelaskan di atas, adalah representasi konten dan tata letak dengan ketelitian tinggi dengan detail, yang berarti kami menambahkan elemen seperti gaya dan komponen serta semua konten yang diperlukan, seperti gambar atau teks
- Prototipe menampilkan fungsionalitas mockup. Dengan menggunakan visual website dengan ketelitian tinggi, kami menambahkan hotspot untuk membuat komponen interaktif agar menghasilkan rasa interaksi antara berbagai layar website. Di sinilah pengguna dapat merasakan dan berinteraksi dengan produk.
Struktur mockup
Mockup website dibangun di atas artboard, area kerja untuk membuat dan mengedit karya seni digital. Artboard ini dapat dibagi secara fiksi dan terstruktur dengan tata letak dan kisi-kisi.
Tata letak adalah distribusi elemen seperti teks, gambar, atau tombol pada artboard. Tata letak dapat bersifat responsif, yang berarti bahwa semua elemen ini berubah secara dinamis berdasarkan ukuran layar. Grid adalah divisi yang lebih kecil, kumpulan garis vertikal dan horizontal yang digunakan untuk menyusun semua elemen dengan jarak yang konsisten.
Sekarang kita memiliki artboard yang dibagi oleh tata letak dan kisi untuk membantu kita menempatkan elemen di sepanjang perbatasannya. Elemen-elemen yang dapat kita tempatkan di atasnya adalah sebagai berikut:
- Teks: kata-kata tertulis, karakter, atau simbol yang diformat dengan berbagai cara, seperti ukuran atau tinggi huruf, warna, perataan, dan sebagainya
- Gambar dan media lain: gambar, gif, atau video adalah elemen umum yang ditemukan pada mockup situs web
- Komponen: elemen UI standar yang diulang di seluruh artboard beberapa kali. Ada komponen yang lebih kecil dan sederhana seperti tombol atau yang lebih kompleks seperti card dengan gambar, teks, dan tombol
- Untuk semua elemen ini (teks, gambar, dan komponen) kita dapat menerapkan gaya, seperti warna, ikon, dan efek. Gaya memungkinkan konsistensi, membantu pengguna menavigasi dengan mudah di seluruh website.
Baca Juga
Memilih alat bantu mockup
Secara ringkas, ketika memilih alat mockup, penting untuk mempertimbangkan faktor-faktor berikut ini:
- Kemampuan all-in-one untuk menangani berbagai tahapan visual pembuatan website (wireframing, mockup, dan pembuatan prototipe)
- Kemampuan untuk memusatkan dan mendokumentasikan gaya dan komponen dalam pustaka sistem desain
- Kemampuan kolaborasi real-time untuk pekerjaan jarak jauh dan banyak pemangku kepentingan
- Kemudahan handoff pengembangan, termasuk akses ke kode dan aset untuk membangun situs web akhir
Figma sebagai alat mockup
Salah satu alat yang memenuhi kriteria ini adalah Figma, perangkat lunak berbasis cloud untuk browser atau desktop, editor grafis vektor, dan alat pembuatan prototipe yang memungkinkan kolaborasi dan kontrol versi secara real-time.
Figma adalah alat yang lengkap untuk membuat wireframes, mockup, dan prototipe dengan bantuan pustaka sistem desain. Ini juga mencakup pustaka sistem desain untuk membuat dan mengelola gaya dan komponen. Figma menawarkan versi gratis hingga tiga file, versi gratis untuk siswa dan guru, dan paket yang berbeda untuk individu dan organisasi.
Langkah-langkah untuk membuat Mockup Website di Figma
1. Membuat Artboard
Buat file desain baru di Figma dan arahkan ke panel alat di sebelah kiri atas di mana Anda akan menemukan simbol tagar. Klik simbol tersebut, dan daftar artboard akan muncul di panel sebelah kanan. Sebagai alternatif, tekan tombol A pada keyboard Anda untuk membuka panel yang sama.
Ini adalah bagian Frame, di mana Anda akan menemukan beberapa artboard yang dapat dipilih, seperti ponsel, tablet, dan desktop, tetapi Anda juga dapat menemukan opsi seperti jam tangan pintar dan media sosial.
Buka bagian Desktop untuk menampilkan beberapa opsi, termasuk ukuran yang paling umum, yaitu 1280×832 dan 1440×1024.
Jika Anda lebih suka membuat artboard dengan ukuran yang berbeda, Anda bisa mengklik dan menarik mouse untuk membuatnya secara bebas. Perhatikan bahwa Anda juga bisa menyesuaikan ukuran artboard bahkan setelah membuat atau memilihnya.
Untuk membuat situs web yang responsif, Anda perlu membuat mockup untuk setiap breakpoint tata letak Anda. Biasanya, desainer memiliki empat tata letak yang berbeda: satu untuk ponsel, satu lagi untuk tablet, dan dua untuk desktop kecil dan besar.
2. Menerapkan Grid dan Layout
Untuk menggunakan fitur Layout Grid di Figma, pilih artboard dan tekan tombol plus pada alat panel sebelah kiri. Setelah menekan tombol tersebut, tata letak standar akan diterapkan ke artboard.
Untuk menyesuaikannya, klik tombol beberapa kotak dan panel pengaturan akan muncul. Di bagian atas, Anda memiliki menu tarik-turun di mana Anda dapat memilih apakah Anda menginginkan tata letak kisi atau tata letak vertikal atau horizontal.
Berikut ini beberapa rekomendasi untuk membuat grid dan layout:
Grid
Sistem grid 8px secara luas diakui sebagai yang paling populer, karena membuatnya lebih sederhana dan lebih konsisten untuk menyesuaikan desain. Semua elemen pada halaman web sejajar dengan grid dasar persegi 8px untuk berbagai perangkat seperti ponsel, tablet, dan desktop.
Ukuran dan spasi elemen pada halaman web harus dengan penambahan 8px; ini termasuk tinggi atau lebar, margin, atau padding yang ditentukan. Sebagai alternatif, Anda dapat menggunakan grid 4px.
Layout
Layout terdiri dari beberapa kolom yang dipisahkan oleh spasi yang disebut selokan. Tepi luar layout disebut sebagai margin layout.
Struktur layout terdiri dari blok konten, seperti header, navigasi, dan footer. Blok konten ini dapat menjangkau beberapa kolom dan menyesuaikan ukurannya dengan grid. Idealnya, gunakan 12 kolom untuk desktop dan 4 kolom untuk seluler.
3. Menambahkan elemen ke artboard
Karena Anda sudah memiliki wireframe, sekarang saatnya menggunakannya sebagai referensi untuk membuat mockup website baru. Beberapa desainer lebih suka membuat wireframe dengan mengganti komponen satu per satu di artboard yang sama, sementara yang lain lebih suka melakukannya di artboard baru. Pilihan ada di tangan Anda.
Ada beberapa opsi berbeda untuk melakukan pendekatan ini:
- Jika Anda tidak memiliki sistem desain: Dalam hal ini, Anda harus menggunakan kemampuan desain Anda dan menghabiskan waktu untuk mengubah elemen yang Anda buat di wireframe menjadi komponen dengan ketelitian tinggi. Sebagai contoh, bayangkan Anda membuat sebuah card wireframe untuk menjual sebuah perjalanan; komponen tersebut dibuat dengan sebuah persegi panjang dan di dalamnya terdapat gambar, tombol, teks, dan beberapa ikon. Pada tahap ini, Anda perlu mempercantik komponen dan kemudian menambahkan gaya ke dalamnya
- Jika Anda memiliki sistem desain: Dalam hal ini, semuanya akan jauh lebih mudah. Anda hanya perlu mengganti elemen dari gambar rangka dengan komponen baru dari sistem desain Anda dan akhirnya menambahkan gaya ke teks dan elemen lainnya
4. Langkah selanjutnya
Sekarang setelah Anda memiliki website yang indah di depan Anda, Anda siap untuk langkah selanjutnya.
Jika Anda membuat website responsif, ingatlah untuk membuat artboard untuk ukuran layar lainnya. Anda hanya perlu mengatur ulang komponen-komponen di seluruh kolom agar sesuai dengan ukuran layar yang baru.
Ingatlah untuk mempersiapkan aset untuk pengembangan, artinya Anda harus memiliki gambar atau ikon yang siap untuk diekspor, biasanya dalam bentuk SVG atau PDF.
Terakhir, ingatlah bahwa sekarang adalah waktunya membuat prototipe untuk mengubah situs web Anda menjadi tempat yang hidup dan penuh dengan interaksi.
Plugin Figma untuk membuat mockup yang responsif
Berikut ini adalah penjelasan singkat tentang Breakpoints dan Responsive, dua plugin Figma untuk membuat mockup responsif:
Breakpoints:
Breakpoints adalah plugin Figma yang memungkinkan Anda mengelola dan mengatur breakpoints untuk desain Anda dengan mudah. Anda dapat membuat breakpoints khusus untuk perangkat atau ukuran layar tertentu dan kemudian dengan mudah beralih di antaranya untuk melihat pratinjau bagaimana desain Anda akan terlihat pada layar yang berbeda.
Dengan Breakpoints, Anda juga dapat menetapkan batasan dan properti untuk setiap breakpoint untuk memastikan bahwa desain Anda tetap konsisten di semua perangkat
Responsif:
Responsive adalah plugin Figma yang membantu Anda dengan cepat membuat desain responsif. Plugin ini menyediakan antarmuka sederhana yang memungkinkan Anda untuk menyesuaikan lebar dan tinggi bingkai dan kemudian melihat perubahannya secara real-time pada layar pratinjau.
Responsive juga memiliki seperangkat breakpoint yang sudah ditentukan sebelumnya yang bisa Anda gunakan untuk membuat desain responsif hanya dengan beberapa klik saja. Selain itu, Anda bisa menggunakan batasan dan properti bawaan plugin ini untuk memastikan desain Anda tetap konsisten saat Anda menyesuaikannya untuk layar yang berbeda
Kedua plugin ini bisa sangat berguna untuk membuat desain responsif di Figma, dan pilihan di antara keduanya mungkin bergantung pada preferensi pribadi Anda dan kebutuhan spesifik proyek Anda.
Kesimpulannya
Proses pembuatan website dapat dibagi menjadi tiga langkah yang berbeda: wireframing, pembuatan mockup, dan pembuatan prototipe.
Dengan memetakan pengalaman pengguna dengan wireframe, Anda bisa membuat struktur dan tata letak yang jelas untuk situs web. Selanjutnya, dengan membuat mockup yang menarik secara visual, Anda dapat menyempurnakan desain dan menambahkan gaya polesan pada keseluruhan tampilan dan nuansa. Terakhir, dengan membuat prototipe situs web, Anda dapat menguji dan menyempurnakan fungsionalitasnya.
Sekarang setelah Anda mempelajari proses dasar pembuatan mockup dari awal, Anda dapat mempraktikkan pengetahuan tersebut dengan membuka Figma dan bereksperimen membangun situs web pertama Anda.
Ingatlah bahwa membuat situs web melibatkan banyak percobaan dan kesalahan, jadi jangan berkecil hati jika hasilnya tidak sesuai dengan yang Anda rencanakan. Sebaliknya, anggaplah ini sebagai kesempatan untuk belajar dan meningkatkan keterampilan Anda. Dan ingat, membuat situs web seharusnya menyenangkan, jadi nikmati prosesnya!