3.

Mockup
Mockup adalah sebuah media visual atau preview dari sebuah konsep

desain "datar" yang diberikan efek visual sehingga hasilnya sangat tempak atau
menyerupai wujud nyata, mockup dapat memberikan gambaran nyata dari sebuah
konsep desain bagaimana konsep itu akan terlihat nantinya jika sudah
diaplikasikan menjadi atau kedalam benda nyata, apakah terlihat bagus atau
kurang sesuai. Mockup juga dapat menambahkan nilai visual dari sebuah konsep
desain, misalnya sebuah desain dibuat dalam versi datar maka desain itu akan
terlihat bisa-bisa saja, namun hanya dengan menggunakan mockup untuk
mentweak sebuah konsep desain maka desain tersebut akan terlihat lebih menarik
dan mengundang apresiasi..Berikut beberapa mockup dari MECHAGIS Bengkel.
3.1.1

Mockup Halaman Admin

Mockup halaman admin berisikan data penting untuk memudahkan

pengubahan data atau penambahan data oleh admin. Mockup halaman admin
dapat dilihat pada Gambar 3.9 berikut.

Gambar 3.9 Mockup Halaman Admin

Gambar 3.9 merupakan tampilan mockup halaman admin MECHAGIS.

Halaman Admin MECHAGIS memiliki beberapa menu, diantaran menu
Dahsboard, Master Data, dan Logout. Halaman admin menggambarkan
keseluruhan data yang diperlukan oleh admin untuk memudahkan dalam
pengubahan data. Menu Master Data memiliki beberapa data, diantaranya data
User, Marker, Reviews, Categories, Manufactures, Vehicles, dan
Features.
3.1.2

Halaman Master Data

Mockup halaman master merupakan sebuah halaman yang digunakan

sebagai master data dari MECHAGIS Bengkel. Mockup halaman master data
dapat dilihat pada Gambar 3.10 berikut.

Gambar 3.10 Mockup Halaman Master Data

Gambar 3.10 merupakan mockup halaman master data. Mockup halaman

master data berisikan data User, Reviews, Marker, Manufactures,
Features, Categories, dan Vehicles. Tampilan untuk setiap sub-menu

master data adalah sama, hanya data yang ditampilakan berbeda untuk setiap sub
menu master data.
3.1.3

Mockup Halaman User

Mocup halaman user merupakan halaman yang diberikan bagi pengguna

MECHAGIS Bengkel. Mockup halaman user dapat dilihat pada Gambar 3.11
berikut.

Gambar 3.11 Mockup Halaman User

Gambar 3.11 merupakan mockup halaman user saat pertama di buka.

Menu yang ada pada halaman user berupa menu pencarian Garage, Sign in, dan
Sign up. User harus mendaftar terlebih dahulu untuk dapat menggunakan aplikasi
MECHAGIS Bengkel secara maksimal.

3.1.4

Mockup Halaman Sign up

Mockup halaman sign up merupakan gambaran visual dari sign up user.

Mockup halaman sign up dapat dilihat pada gambar 3.12 berikut.

Gambar 3.12 Mockup Halaman Sign up

Gambar 3.12 merupakan mockup halaman sign up user. Halaman Sign up

digunakn untuk pendaftaran user pada aplikasi MECHAGIS bengkel. Data yang
diperlukan untuk mendaftar di MECHAGIS Bengkel adalah username, e-mail,
dan password.
3.1.5

Mockup Halaman Sign in

Mockup halaman sign in merupakan sebuah gambaran visual Sign in user.

Mockup halaman sign in dapat dilihat pada Gambar 3.13 berikut.

Gambar 3.13 Mockup Halaman Sign in

Gambar 3.13 merupakan mockup halaman sign in. User terlebih dahulu
melakukan pendaftran sebelum dapat masuk ke halaman user. Selanjutnya user
melakukan sign in sesuai dengan dengan username dan password sebelumnya.
3.1.6

Mockup List Data

Mockup list data merpakan sebuah gambaran visual dari list data yang ada

pada halaman user. Mockup halaman list data dapat dilihat pada Gambar 3.14
berikut.

Gambar 3.14 Mockup Halaman List Data

Gambar 3.14 merupakan mockup halaman list data yang terdapat pada
halaman user. User dapat melihat list data bengkel yang ada pada aplikasi
MECHAGIS Bengkel. List Data yang ada pada MECHAGIS Bengkel, adalah
nama bengkel, alamat bengkel, dan nomor telepon bengkel.