Di bawah ini adalah dasar – dasar perancangan tampilan Sistem Administrasi Toko Komputer

Quadra. Rancangannya sebagai berikut :

1. Dimulai dari form awal atau main menu yang tampilannya sebagai berikut :

Berdasarkan gambar diatas, poin pertama adalah menu. Peletakan menu ada di kiri atas dan terdapat

logo Quadra kecil di setiap menu. Tujuannya hanya unutk mempermanis tampilan menu.

Poin kedua adalah background. Warna yang dipilih untuk background adalah warna putih, warna putih

dipilih karena adalah warna yang bersih. Warna putih warna yang cerah dan bersifat netral, karena warna

ini memperjelas warna di obyek lain.

Poin ketiga adalah logo big Quadra. Logo tidak ada yang dirubah dari bentuk dan warnanya. Letak logo

ada di tengah dan menjadi yang terbesar diantara obyek yang lain agar menjadi obyek yang eye catching.

Dimana user langsung mengenali bahwa ini adalah aplikasi resmi milik Quadra.

Poin keempat adalah tulisan Quadra. Sebetulnya tulisan ini menjadi satu dengan logo Quadra. Hanya

saja dipisahkan agar bisa digabungkan dengan tulisan “ Welcome to … “. Ini hanya merupakan variasi agar

tampilan logo menjadi lebih menarik. Di bawahnya langsung tersedia inputan untuk Log in, password serta

tombol masuk, ketiganya di posisikan di bawah logo supaya user tidak bingung mencari jalan masuk ke

aplikasi karena obyek – obyek tersebut langsung terlihat setelah user membaca tulisan “ Welcome to

Quadra”.

Poin kelima adalah tombol shortcut untuk form pembelian dan penjualan. Pewarnaan tombol ini

adalah oranye dan hijau. Pemilihan warna ini diserasikan dengan logo Quadra sendiri ( oranye dan hijau ).

Bentuk tombol ini berbeda dengan tombol lainnya, ini hanya sekedar variasi saja.

Poin keenam adalah tombol exit. Bentuk tombol ini bulat dan terdapat gambar pintu yang bertuliskan

exit. Gambar ini hanyalah penegasan kepada fungsi tombol tersebut, karena sebetulnya sudah terdapat

kata “exit” di bawahnya. Bentuk tombol bulat dan ini hanya sekedar variasi saja.

Poin ketujuh adalah gabungan obyek garis tebal dan tipis serta obyek rounded rectangle yang di

dalamnya terdapat tulisan “main menu”. Ini hanyalah bentuk obyek garis yang di kombinasikan dengan

pewarnaan yang di sesuaikan dengan logo Quadra. Sedangkan obyek rounded rectangle dengan tulisan

“main menu” di dalamnya hanya sebagai pemanis.

2. Form kedua adalah form penjualan yang tampilannya sebagai berikut :

Berdasarkan gambar di atas, poin pertama adalah gambar transaksi penjualan, bentuk

obyek ini abstrak dan terdapat tulisan “transaksi penjualan” di dalamnya. Tidak ada unsur

khusus, ini hanya untuk membedakan form yang lainnya.

Poin kedua adalah gambar kecil kaca pembesar. Gambar ini hanya untuk mempertegas

inputan di sampingnya yang berupa inputan untuk mencari atau searching.

Poin ketiga adalah tempat tampilnya database yang bersangkutan. Di letakkannya tampilan

database di form ini bertujuan agar user bisa melihat langsung isi database yang bersangkutan,

yang dimana ini adalah database transaksi penjualan.

Poin keempat adalah logo Quadra transparan dibelakang inputan. Sebetulnya ini hanya

untuk mengisi kekosongan dan mempercantik latar belakang kolom inputan.

Poin kelima adalah combo box. Bila ada combo box, maka di situ terdapat istilah multiple

choice yang dimana user bisa memilih beberapa pilihan. Karena terdapat label “tanggal”, maka

user bisa memilih angka tanggalan dari 1 sampai 30, bulan dari Januari sampai dengan

Desember dan tahun dari sekian hingga sekian ( tergantung isian dari programmer ).

Poin keenam adalah tombol – tombol bulat bergambar. Seperti tampilan menu utama di

atas, gambar yang ada di dalam tombol merupakan penegasan pada fungsi tombol tersebut.

Sedangkan bentuk bulat hanya sekedar variasi saja.

3. Form ketiga adalah form transaksi pembelian :

Tidak jauh berbeda dengan tampilan form kedua, poin pertama yang dimana gambar

transaksi pembelian yang berwarna hijau. Dipilih warna berbeda agar user bisa membedakan

form satu dengan yang lain.

Poin kedua adalah combo box. Kali ini combo box ada di label “jenis barang”, user bisa

memilih jenis barang yang akan di transaksikan. PIlihan bisa dari VGA, RAM, Mouse dan

sebagianya.

4. Form keempat adalah form laporan pembelian yang tampilan sebagai berikut :

Tidak beda dengan form sebelumnya, perbedaan ada pada poin pertama yang dimana

gambarnya berbeda guna membedakan dengan form lain.

Poin kedua adalah combo box, kali ini combo box ada di label “perangkat”, user bisa

memilih perangkat apa yang akan di transaksikan.

5. Form kelima adalah form laporan penjualan yang tampilannya sebagai berikut :

Tidak beda dengan form sebelumnya, perbedaan hanya pada poin pertama. Perbedaan

dengan form laporan pembelian adalah tulisan di dalam obyeknya saja.

6. Form keenam adalah form karyawan yang tampilannya sebagia berikut :

Sesuai gambar di atas, poin pertama adalah gambar logo form karyawan. Seperti gambar

pada form sebelumnya, gambar dibuat lain agar user bisa membedakan dengan form yang lain.

Poin kedua adalah tempat foto karyawan. Di sini user bisa menaruh gambar atau foto

karyawan yang bersangkutan dengan isian input di bawahnya.

Poin ketiga adalah combo box, kali ini combo box ada di label “jabatan”, berarti user bisa

memilih jabatan karyawan di Quadra.

7. Form ketujuh adalah form karyawan yang tampilannya sebagai berikut :

Serupa dengan form kedua, hanya saja pada poin pertama yaitu gambar logo form ini.

Ditambah combo box yang berada di label “perangkat” dan “tgl masuk” untuk multiple choice.

8. Form kedelapan adalah form supplier yang tampilannya sebagai berikut :

Serupa dengan form kedua, hanya saja pada poin pertama yaitu gambar logo form ini.

9. Form kesembilan adalah form pemesanan barang yang tampilanya sebagai berikut :

Serupa dengan form kedua, hanya saja pada poin pertama yaitu gambar logo form ini.

10. Form kesepuluh adalah form utility user yang tampilan sebagai berikut :

Sesuai gambar di atas, poin pertama adalah gambar logo form utility user. Seperti gambar

pada form sebelumnya, gambar dibuat lain agar user bisa membedakan dengan form yang lain.

Poin kedua adalah tempat foto karyawan. Di sini user bisa menaruh gambar atau foto

karyawan yang bersangkutan dengan isian input di bawahnya.

Poin ketiga adalah combo box, kali ini combo box ada di label “jabatan”, berarti user bisa

memilih jabatan karyawan di Quadra.

11. Form kesebelas adalah form ganti password yang tampilannya sebagai berikut :

Sesuai gambar di atas, poin pertama adalah logo asli Quadra. Diletakkan di samping kolom inputan sebagai pemanis form ini.

Poin kedua adalah dua tombol hijau. Pemilihan warna hijau disesuaikan dengan warna dominan di logo Quadra. Bentuk tombol kotak hanya sekedar variasi.