• Tidak ada hasil yang ditemukan

2. Perancangan Struktur Menu Admin

3.4.2 Perancangan Antarmuka

3.4.2.1 Perancangan Antarmuka Pengunjung 1.Perancangan Antarmuka Home

Berikut dapat dilihat perancangan antarmuka menu utama (Home) dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.16 dibawah ini:

Gambar 3.16 Perancangan Antarmuka Home

Menu

Anda Pengunjung Ke-

Kalender

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home + Profil + Diklat + Buku Tamu + Vote Angka Kalender Selamat Datang Isi Footer Nama layar : T01 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T01

Menu

Anda Pengunjung Ke-

57 2. Perancangan Antarmuka Profil

Berikut dapat dilihat perancangan antarmuka Profil dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.17 dibawah ini:

Gambar 3.17 Perancangan Antarmuka Profil

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Profil Isi Footer Nama layar : T02 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T02

Menu

Kalender Anda Pengunjung Ke-

58 3. Perancangan Antarmuka Diklat

Berikut dapat dilihat perancangan antarmuka Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.18 dibawah ini:

Gambar 3.18 Perancangan Antarmuka Diklat

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Diklat Isi Footer Nama layar : T03 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T03

Menu

Kalender Anda Pengunjung Ke-

59 4. Perancangan Antarmuka Buku Tamu

Berikut dapat dilihat perancangan antarmuka Buku Tamu dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.19 dibawah ini:

Gambar 3.19 Perancangan Antarmuka Buku Tamu

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home +Profil + Diklat + Buku Tamu + Vote Angka Kalender Buku Tamu Nama Email Situs Pesan

Lihat buku tamu

Footer Nama layar : T04

Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T04

Menu

Kalender Anda Pengunjung Ke-

60 5. Perancangan Antarmuka Vote

Berikut dapat dilihat perancangan antarmuka Vote dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.20 dibawah ini:

Gambar 3.20 Perancangan Antarmuka Vote

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home +Profil + Diklat + Buku Tamu + Vote Angka Kalender Vote Pertanyaan ? o Vote A o Vote B o Vote C o Vote D o Vote E

>> Lihat Hasil Voting

Footer Nama layar : T05

Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T05

Menu

Kalender Anda Pengunjung Ke-

61 6. Perancangan Antarmuka Profil

Berikut dapat dilihat perancangan antarmuka Profil dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.21 dibawah ini:

Gambar 3.21 Perancangan Antarmuka Profil

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Profil Isi Footer Nama layar : T06 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T06

Menu

Kalender Anda Pengunjung Ke-

62 7. Perancangan Antarmuka Visi dan Misi

Berikut dapat dilihat perancangan antarmuka Visi dan Misi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.22 dibawah ini:

Gambar 3.22 Perancangan Antarmuka Visi dan Misi

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender

Visi dan Misi

Isi

Footer Nama layar : T07

Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T07

Menu

Kalender Anda Pengunjung Ke-

63 8. Perancangan Antarmuka Kerjasama

Berikut dapat dilihat perancangan antarmuka Kerjasama dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.23 dibawah ini:

Gambar 3.23 Perancangan Antarmuka Kerjasama

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Kerjasama Isi Footer Nama layar : T08 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T08

Menu

Kalender Anda Pengunjung Ke-

64 9. Perancangan Antarmuka Organisasi

Berikut dapat dilihat perancangan antarmuka Organisasi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.24 dibawah ini:

Gambar 3.24 Perancangan Antarmuka Organisasi

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Organisasi Isi Footer Nama layar : T09 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T09

Menu

Kalender Anda Pengunjung Ke-

65

10. Perancangan Antarmuka Struktur Organisasi

Berikut dapat dilihat perancangan antarmuka Struktur Organisasi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.25 dibawah ini:

Gambar 3.25 Perancangan Antarmuka Struktur Organisasi

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Struktur Organisasi Isi Footer Nama layar : T10 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T10

Menu

Kalender Anda Pengunjung Ke-

66 11. Perancangan Antarmuka Staff

Berikut dapat dilihat perancangan antarmuka Staff dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.26 dibawah ini:

Gambar 3.26 Perancangan Antarmuka Staff

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13

Header

+Home

-Profil Profil

Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Staff Isi Footer Nama layar : T11 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T11

Menu

Kalender Anda Pengunjung Ke-

67 12. Perancangan Antarmuka Jadwal Diklat

Berikut dapat dilihat perancangan antarmuka Jadwal Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.27 dibawah ini:

Gambar 3.27 Perancangan Antarmuka Jadwal Diklat

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Jadwal Diklat Isi Footer Nama layar : T12 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T12

Menu

Kalender Anda Pengunjung Ke-

68 13. Perancangan Antarmuka Katalog Diklat

Berikut dapat dilihat perancangan antarmuka Katalog Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.28 dibawah ini:

Gambar 3.28 Perancangan Antarmuka Katalog Diklat

Klik Home menuju T01

Klik Profil menuju T02 Klik Diklat menuju

T03

Klik Buku Tamu menuju T04

Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi

menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat

menuju T12

Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Katalog Diklat Isi Footer Nama layar : T13 Ukuran layar : 1150x900

Font : Times New Roman

Warna Backgoround : Putih T13

Menu

Kalender Anda Pengunjung Ke-

69

3.4.2.2 Perancangan Antarmuka Admin

Dokumen terkait