BAB IV.

Transkripsi

1 BAB IV KONSEP PERANCANGAN A. TATARAN LINGKUNGAN/KOMUNITAS Dengan adanya website DOT Photograph dapat mengangkat nilai jual dari DOT Photograph sendiri sehingga dampak yang dihasilkan lebih besar dalam membantu orang-orang yang membutuhkan jasa photography. Selain itu dalam website DOT Photograph terdapat halaman portfolio yang nanti akan diisi oleh foto-foto yang menarik dari ide photogprahy yang dapat dijadikan acuan dalam setting photography. Dalam dunia photography beberapa karya dapat memberikan efek yang banyak, misalkan dalam foto pre wedding juga dapat mempromosikan wilayah-wilayah bagian Indonesia yan cantik dan juga dalam resepsi pernikahan dapat memberitahukan adanya adat dan budaya Indonesia dalam perkawinan sehingga dapat menjadi inspirasi bagi mereka yang ingin melangsungkan pernikahan atau melakukan pre wedding. B. TATARAN SISTEM Website merupakan media digital yang dapat diakses melalui smartphone, computer, dan tablet maupun perangkat elektronik lainnya yang terdapat akses internet. Website ini dapat dibuka melalui berbagai macam browser seperti Google Chrome, Mozilla Firefox, Internet Explorer, dan Safari. Untuk dapat membuka website ini kita perlu memasukan domain thedotphotograph.com dimana ini adalah alamat website yang kita akses. 32

2 Gambar 4.1: Halaman index Sumber koleksi pribadi Didepan terdapat video, video ini merupakan video bumper untuk DOT Photograph yang dilakukan dengan embed Youtube channel DOT Photograph. Nantinya video ini dapat diganti dengan videovideo terbaru dari DOT Photograph. Selanjutnya Penulis mengarahkan pengunjung untuk mengklik tombol enter untuk masuk kedalam mainpage website DOT Photograph. Gambar 4.2: Halaman home Sumber koleksi pribadi 33

3 Pada halaman ini terdapat home, about, portfolio, dan contact. Untuk melihat semua halaman Pengunjung dapat melakukan klik tombol menu atau scroll kebawa dengan mouse. Setiap scroll cukup dilakukan dengan satu kali saja karena scrolling mouse sudah memakai smooth scrolling sehingga nanti ketika kita scroll kebawah satu kali maka langsung mengantar kita ke satu halaman dibawah home sebaliknya juga jika kita ingin scroll ke atas. Karena perpindahan scroll ini perhalaman, Penulis menggunakan anchor (tanda jangkar) untuk perpindahan didalam halaman yang sama. Gambar 4.3: Halaman portfolio Sumber koleksi pribadi Pada halaman Portfolio ini terdapat beberapa foto pilihan yang dipajang di halaman ini, tidak semua foto dapat masuk kedalam halaman ini. Foto-foto dihalaman ini akan di update sebulan sekali untuk memperharui halaman portfolio agar lebih menarik. Setiap foto dihalaman ini akan muncul dikotak besar setiap kita klik agar lebih memperjelas foto-foto yang sudah di upload. 34

4 Gambar 4.4: Halaman contact Sumber koleksi pribadi Dihalaman kontak Penulis memberikan form untuk Pengunjung bertanya langsung kepada DOT Photograph agar lebih memudahkan, dan juga terdapat peta yang terintegrasi dengan google maps. Google maps ini memberikan letak dari alamat kantor DOT Photograph, dapat di zoom sama seperti ketika buka google maps di browser. Gambar 4.5: Halaman contact tes form Sumber koleksi pribadi 35

5 Untuk melakukan atau mengirim langsung maka perlu Pengunjung untuk mengisi form di halaman kontak jika form terkirim aka nada tulisan Form received. Pada bagian bawah tombol submit dam jika gagal muncul tulisan The server encountered an eror. Gambar 4.6: Halaman contact tes form2 Sumber koleksi pribadi Gambar 4.7: Halaman tes form Sumber koleksi pribadi Pesan yang dikirim melalui form dihalaman website akan langsung menuju DOT Photograph, di juga terdapat data dari 36

6 Pengunjung yang mengirim sehingga DOT Photograph dapat menghubungi Pengujung yang bertanya melalui form di website. C. TATARAN PRODUK Produk ini adalah sebuah website komersil untuk dipergunakan oleh DOT Photograph dalam mempromosikan sebuah jasa photography. Website ini diharapkan dapat menambah klien dari DOT Photograph, Untuk setiap halamannya terdapat info yang berbeda sesuai dengan halaman dari website ini. Website ini dapat menyesuaikan lebar dari monitor, karena Penulis menggunakan monitor berukuran 1920X1080px maka otomatis lebar dari tampilan web ini akan menyesuaikan begitu juga jika kita membukanya dihandphone ataupun tablet. Gambar 4.8: Halaman Home fix Sumber koleksi pribadi Pada halaman index atau welcome page ukuran video ini adalah 300X200px tetapi jika dibuka dimonitor lain yang berukuran kecil ini juga dapat berubah ukurannya sepert dihandphone. Dalam proses pengerjaannya Penulis memerlukan waktu dua minggu untuk melakukan desain dan satu minggu untuk menganimasikan berbagai konten website ini. 37

7 D. TATARAN ELEMEN Gambar 4.9: Proses Produksi Sumber koleksi pribadi Gambar 4.10: Image Konten Home Sumber koleksi pribadi Image atau gambar yang terdapat pada halaman main page home, Penulis sengaja mengambil gambar kamera dengan bingkai putih 38

8 dan tulisan photography. Foto kamera tersebut merupakan hasil jepretan asli dari Penulis. Font Photography menggunakan font Bringshoot dengan warna putih ffffff Gambar 4.11: Color Picker Sumber koleksi pribadi Background menggunakan warna hitam agar memberikan kesan elegant dan perbeda, kebanyakan website dibidang usaha photography berwarna putih. 39

9 Gambar 4.12: Image konten About Sumber DOT Photograph Gambar untuk background halaman profile atau about, Penulis mendapatkan dari DOT Photograph yang ingin menggunakan gambar tersebut khusus dihalaman websitenya. Berukuran 5012X3332px berformat JPEG Gambar 4.13: Konten Sumber DOT Photograph dan Pribadi Foto-foto yang di dapat Penulis untuk diletakkan dihalaman portfolio, sebagian milik Penulis yang disarankan oleh DOT Photograph. Ukuran foto yang diatas adalah 704X469px. 40

10 Font yang penulis gunakan dalam setiap website adalah century gothic ABCDEFGHIJKLMNOPQRSTUVWXYZ Abcdefghijklmnopqrstuvwxyz Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz dengan warna putih agar lebih jelas dibaca dibackground website yang gelap. Gambar 4.14: Elemen Grafis Sumber DOT Photograph dan Pribadi Digunakan untuk memperjelas halaman kontak agar terlihat lebih menarik. 41