Anda di halaman 1dari 12

MODUL

PETUNJUK TEKNIS
WEB HALAMAN DEPAN

DINAS PERINDUSTRIAN DAN TENAGA KERJA


KAB. BANGKALAN
Untuk membuat desain User Interface dari Web profile DISPERINAKER menggunakan aplikasi JustinMind
Prototyper. Tools pada JustinMind yang digunakan diantaranya adalah Text, Button, Rectangle dan beberapa
tools untuk membuat tampilan form. Pada desain web profil ini terdapat header yang terdiri dari logo Instansi
nama Instansi dan form pencarian. Diatas header terdapat no.telp, alamat email dan akun media sosial yang
dimiliki sekolah sebagai kontak yang bisa dihubungi. Kemudian pada footer terdapat logo sekolah, kontak yang
bisa dihubungi dan alamat sekolah. Pada tampilan setiap layoutnya akan selalu menampilkan sidebar berikut ini:

1 Home Berisi Tentang Ucapan selamat Datang Pengenalan Instansi Seperti ( Gambar 5.1)
 Tombol Telusuri Akan Muncul Tugas Pokok dan Fungsi dari DISPERINAKER ( Gambar 5.2)
 Galery Foto Kegiatan Balai Latihan Kerja ( Gambar 5.3 )
 Berita Terbaru DISPERINAKER ( Gambar 5.4 )
 Sambutan dari Kepala DISPERINAKER ( Gambar 5.5 )
 Alamat DISPERINAKER dan LINK untuk menuju ke web Pemda Bangkalan dan Kominfo
( Gambar 5.6 )

( Gambar 5.1)
( Gambar 5.2 )

( Gambar 5.3 )
( Gambar 5.4 )

( Gambar 5.5 )
( Gambar 5.6 )
2 Tombol PROFIL Berisi ( Gambar 5.7)
 Tentang Kami Berisi Tentang Tugas Pokok dan Fungsi DISPERINAKER Kab. Bangkalan
( Gambar 5.8)
 Visi dan Misi DISPERINAKER Kab. Bangkalan ( Gambar 5.9)
 Struktur Organisasi DISPERINAKER Kab. Bangkalan ( Gambar 5.10 )

( Gambar 5.7 )

( Gambar 5.8 )
( Gambar 5.9 )

( Gambar 5.10 )
3 Tombol PRODUK Berisi tentang Produk Produk Unggulan yang diproduksi oleh Kab. Bangkalan
dibawah naungan DISPERINAKER Kab. Bangkalan ( Gambar 5.11)

( Gambar 5.11 )
4 Tombol BERITA Berisi tentang Kegiatan dan Sosialisasi DISPERINAKER Kab. Bangkalan
( Gambar 5.12 )

( Gambar 5.12 )

( Gambar 5.12 )
5 Tombol GALERY Berisi Tentang Kegiatan Balai Latihan Kerja DISPERINAKER Kab. Bangkalan. (
Gambar 5.13)

( Gambar 5.13 )
6 Tombol KONTAK Berisi TentangAlamat Instansi, Nomor Telepon yang bisa dihubungi dan Alamat
Email DISPERINAKER. ( Gambar 5.14)

( Gambar 5.14 )

( Gambar 5.14 )

Anda mungkin juga menyukai