bab v visualisasi karya · menu “troli” atau “cara pesan barang” pada menu “troli” atau...

48
69 BAB V VISUALISASI KARYA A. Media Utama 1. Icon Logo Icon Logo, berikut merupakan tampilan icon untuk aplikasi Widi Nugraha yang didalamnya mencantumkan logo WN.

Upload: others

Post on 27-Oct-2019

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

69

BAB V

VISUALISASI KARYA

A. Media Utama

1. Icon Logo

Icon Logo, berikut merupakan tampilan icon untuk aplikasi Widi Nugraha yang

didalamnya mencantumkan logo WN.

Page 2: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

70

Media : Icon Logo

Ukuran Desain : 720 x 720 pixels

Mode : Warna

Format desain : Portrait

Visualisasi Karya : CorelDraw X7

Page 3: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

71

2. Interface Logo

Interface Logo, berikut merupakan tampilan awal yang akan muncul ketika user

membuka aplikasi Katalog Digital Widi Nugraha. Penempatan posisi logo berada

di tengah, kemudian terdapat ornamen dekorasi pohon bambu yang terdapat di

sekitar logo dengan transparansi 50% sehingga logo tetap tampak lebih menonjol.

Page 4: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

72

Media : Interface Logo

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Visualisasi Karya : CorelDraw X7

Page 5: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

73

3. Menu Registration

Menu Registration merupakan tampilan kedua yang akan muncul setelah logo

aplikasi Katalog Digital Widi Nugraha. Pada tampilan ini tetap menampilkan logo

dengan tambahan nama “WIDI NUGRAHA”, kemudian terdapat 3 menu

didalamnya yaitu Login, Register, dan Guest Check out yang di gunakan bagi

pengguna yang tidak ingin melakukan Login atau Register , artinya bila di klik akan

langsung masuk pada menu utama.

Page 6: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

74

Media : Menu Registration

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 7: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

75

4. Menu Login

Menu Login ini diperuntukan bagi pengguna yang telah mendaftar sebelumnya dan

memiliki akun untuk aplikasi Widi Nugraha. Pada menu ini pengguna diminta

untuk memasukkan email dan password untuk melalukan Login. Keuntungan bagi

pengguna yang telah memiliki akun adalah pada setiap melakukan belanja dengan

menggunakan aplikasi katalog Widi Nugraha ini pengguna memiliki history daftar

belanja yang sudah pernah di beli.

Page 8: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

76

Media : Menu Login

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 9: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

77

5. Menu Register

Menu Register ini diperuntukan bagi pengguna yang belum memiliki akun untuk

aplikasi Widi Nugraha. Pada menu ini pengguna diminta untuk memasukkan

beberapa data pengguna seperti nama atau ID yang akan digunakan, email dan

password untuk melalukan Register.

Page 10: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

78

Media : Menu Register

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 11: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

79

6. Home Page

Home Page adalah menu utama pada aplikasi Katalog Digital Widi Nugraha yang

didalamnya terdapat beberapa menu yang disajikan kepada pengguna, seperti

Pencarian, Troli, dan Menu. Pada Home Page ini logo berada pada bagian atas,

kemudian terdapat tiga BAR yang memiliki memiliki fungsi berbeda-beda. Gambar

serta penjelasan seperti berikut:

Page 12: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

80

Media : Home Page

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

- Pada icon “Menu” ditampilkan secara pop-up yang muncul dari ujung icon

“Menu” tanpa berganti halaman, dengan warna dasar yang transparan

sehingga halaman Home Page dapat terlihat.

- Kemudian icon “Pencarian” atau “Search” digunakan untuk mempermudah

pengguna dalam mencari produk yang diinginkan tanpa perlu mencari

perhalaman produk.

- Icon “Troli” atau “Cara Pesan Barang” memiliki fungsi untuk memberikan

informasi bagi pengguna yang ingin membeli atau memesan produk batik

Widi Nugraha. Dalam halaman ini juga terdapat penjelasan lengkap mengenai

prosedur pemesanan dan pembayaran yang ditampilkan simple agar mudah

dipahami oleh pengguna.

Page 13: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

81

7. Tampilan “Menu”

“Menu”, ditampilkan secara pop-up tanpa berpindah halaman dari “Home Page”

sehingga hanya menutupi sebagian tampilan Home Page . Pada menu ini terdapat

beberapa pilihan menu lagi didalamnya seperti Kabar Widi Nugraha, Batik Khas

Ngawi, Fashion Pria, Fashion Wanita, Fashion Anak, dan Asesoris. Background

pada tampilan ini berwarna hijau tua R:13 G:54 B:50, dengan transparansi 50%

sehingga halaman belakangnya masih sedikit terlihat. Kemudian tipografi

menggunakan font Robotic dengan warna font putih.

Page 14: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

82

Media : “Menu”

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 15: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

83

8. Menu “Troli” atau “Cara Pesan Barang”

Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan

simpel yang difungsikan agar mempermudah pengguna dalam memahami

informasi yang dicantumkan di dalamnya. Warna dasar yang digunakan adalah

hitam, kemudian tipografi menggunakan tipografi tipe San-Serif dengan warna font

putih dan kuning untuk poin-poin kalimat penjelasan yang penting.

Page 16: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

84

Media : Menu “Troli”

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 17: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

85

9. Menu “Kabar Widi Nugraha” Halaman 1

Media : Menu “Kabar Widi Nugraha” Halaman 1

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 18: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

86

10. Menu “Kabar Widi Nugraha” Halaman 2

Media : Menu “Kabar Widi Nugraha” Halaman 2

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 19: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

87

11. Menu “Batik Khas Ngawi”

Media : Menu “Batik Khas Ngawi”

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 20: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

88

12. Menu “Batik Khas Ngawi” Motif Kembang Jati

Media : Menu “Batik Khas Ngawi” Motif Kembang Jati

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 21: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

89

13. Menu “Batik Khas Ngawi” Motif Fosil

Media : Menu “Batik Khas Ngawi” Motif Fosil

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 22: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

90

14. Menu “Batik Khas Ngawi” Motif Kali Tempuk

Media : Menu “Batik Khas Ngawi” Motif Kali Tempuk

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 23: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

91

15. Menu “Batik Khas Ngawi” Motif Bulus

Media : Menu “Batik Khas Ngawi” Motif Bulus

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 24: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

92

16. Menu “Batik Khas Ngawi” Motif Bambu

Media : Menu “Batik Khas Ngawi” Motif Bambu

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 25: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

93

17. Menu Fashion Pria #1

Media : Menu Fashion Pria #1

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 26: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

94

18. Menu Fashion Pria #2

Media : Menu Fashion Pria #2

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 27: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

95

19. Menu Fashion Pria #3

Media : Menu Fashion Pria #3

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 28: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

96

20. Menu Fashion Pria #4

Media : Menu Fashion Pria #4

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 29: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

97

21. Menu Fashion Pria #5

Media : Menu Fashion Pria #5

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 30: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

98

22. Menu Fashion Wanita #1

Media : Menu Fashion Wanita #1

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 31: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

99

23. Menu Fashion Wanita #2

Media : Menu Fashion Wanita #2

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 32: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

100

24. Menu Fashion Wanita #3

Media : Menu Fashion Wanita #3

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 33: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

101

25. Menu Fashion Wanita #4

Media : Menu Fashion Wanita #4

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 34: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

102

26. Menu Fashion Wanita #5

Media : Menu Fashion Wanita #5

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 35: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

103

27. Menu Fashion Anak #1

Media : Menu Fashion Anak #1

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 36: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

104

28. Menu Fashion Anak #2

Media : Menu Fashion Anak #2

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 37: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

105

29. Menu Fashion Anak #3

Media : Menu Fashion Anak #3

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 38: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

106

30. Menu Fashion Anak #4

Media : Menu Fashion Anak #4

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 39: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

107

31. Menu Fashion Anak Halaman #5

Media : Menu Fashion Anak #5

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 40: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

108

32. Menu Asesoris #1

Media : Menu Asesoris #1

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 41: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

109

33. Menu Asesoris #2

Media : Menu Asesoris #2

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 42: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

110

34. Menu Asesoris #3

Media : Menu Asesoris #3

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 43: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

111

35. Menu Asesoris #4

Media : Menu Asesoris #4

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 44: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

112

36. Menu Asesoris #5

Media : Menu Asesoris #5

Ukuran Desain : 1280 x 720 pixels

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7

Page 45: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

113

B. Media Pendukung

1. Web Banner

Media : Web Banner

Ukuran Desain : 1.792 x 330 pixels

Mode : Warna

Format desain : Landscape

Eksekusi Karya : CorelDraw X7, Photoshop, Adobe Flash

Page 46: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

114

2. X-Banner

Page 47: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

115

Media : X-Banner

Ukuran Desain : 160 x 60 cm

Mode : Warna

Format desain : Portrait

Eksekusi Karya : CorelDraw X7, Photoshop

Page 48: BAB V VISUALISASI KARYA · Menu “Troli” atau “Cara Pesan Barang” Pada menu “Troli” atau “Cara Pesan Barang” ini ditampilkan secara sederhana dan simpel yang difungsikan

116

3. Poster Iklan pada Facebook

Media : Poster Iklan pada Facebook

Ukuran Desain : 4464 x 2054 pixel

Mode : Warna

Format desain : Landscape

Eksekusi Karya : CorelDraw X7, Photoshop