Wireframes Facebook Using Balsamiq Mockup

Afif Saputra
3 min readJan 15, 2020
Sumber gambar : https://blog.fluidui.com/

WIREFRAME: Halaman facebook

Mockup/Wireframe adalah rancangan awal sebuah desain web yang dibuat secara manual menggunakan balsamiq, atau software pengedit gambar lainnya.Mockup merupakan gambar model atau prototif halaman web secara full dan detail. Format mockup ini biasanya berbentuk file .

Mockup ini berfungsi sebagai acuan kerja pembuatan website agar tidak menyimpang dari tujuan awal membuatnya. Biasanya, pembuatan website yang menggunakan mockup lebih efektif dan terstruktur karena pada saat pembuatan mockup itu sudah ditentukan kerangka pembuatan flowchart untuk websitenya. kali ini saya akan membuat Mockup/Wireframe PersonalWebsite bertemakan Halaman facebook

Berikut ini saya akan menjelaskan prinsip-prinsip kerja dalam Mockup Website Halaman facebook

1.Halaman masuk dan daftar

Pada halaman daftar dan login, terdapat beberapa form pengisian, yaitu:

  • Nomor ponsel dan atau email : Berisi nomor telfon atau email yang sudah terdaftar di facebook
  • Kata sandi : Berisi kata sandi yang anda gunakan untuk login
  • Buat akun baru : digunakan apabila belum mempunyai akun facebook sehingga membuat akun baru
  • Bahasa Jawa,English,bahasa lainnya :untuk memilih bahasa yang anda mengerti

2. Berikut penjelasan item-item yang terdapat pada halaman awal website (beranda facebook):

  • Top Bar, yang berisi cari facebook, profil, Kamera yang berfungsi untuk mengambil gambar, permintaan pertemanan ,pesan ,marketplace,pemberitauhan dan lihat profil
  • Posting status baru : digunakan untuk memposting status,foto/video
  • Teks untuk menulis status, siaran langsung untuk live secara langsung , lokasi :untuk menambahkan lokasi anda
  • Tambahkan cerita: berisi menambahkan cerita (story)
  • Postingan baru : untuk melihat postingan yang baru update,like postingan ,coment dan bagikan postikan .

3. Halaman posting

  • Teman berisi siapa yang dapat melihat postingan anda
  • Foto/video : memilih foto/video yang akan di posting
  • Tandai teman : tandai teman apabila ada didalam foto
  • Tambahkan lokasi : tambah lokasi anda foto
  • Perasaan/aktivitas : Tambahkan apa yang anda lakukan atau rasakan
  • Jawab pertanyaan : Jawab pertanyaan yang diberikan
  • Siarkan langsung : mulai siaran langsung pemirsa anda dapat melihat apa yang di siarkan
  • Jual sesuatu : Anda bisa menjual sesuatu yang bisa dijual

Pilih foto untuk diposting atau ambil foto secara lansung setelah selesai klik berikutnya.

5.Hasil pengerjaan

Menggunakan software Balsamiq MockUp 3.

--

--