Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf ·...

16
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf ·...

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

i

PERANCANGAN WEBSITE

LITTLE TEACUP

Laporan Tugas Akhir

Ditulis sebagai syarat untuk memperoleh gelar Sarjana Seni (S.Sn)

Nama : Andrian

NIM : 10120210189

Program Studi : Desain Komunikasi Visual

Fakultas : Seni & Desain

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2014

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

i

HALAMAN PENGESAHAN TUGAS AKHIR

PERANCANGAN WEBSITE LITTLE TEACUP

Oleh

Nama : Andrian

NIM : 10120210189

Program Studi : Desain Komunikasi Visual

Fakultas : Seni & Desain

Tangerang, 28 Agustus 2014

Ketua Program Studi

Desi Dwi Kristanto, M.Ds.

Penguji

Ferdy Tanumihardjo, S.Sn., M.Ds.

Ketua Sidang

Erwin Alfian, S.Sn., M.Ds.

Pembimbing

Mohammad Rizaldi, S.T., M.Ds.

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Saya yang bertanda tangan di bawah ini:

Nama : Andrian

NIM : 10120210189

Program Sudi : Desain Komunikasi Visual

Fakultas : Seni & Desain

Universitas Multimedia Nusantara

Judul Tugas Akhir/Skripsi:

PERANCANGAN WEBSITE LITTLE TEACUP

dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan

belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas

Multimedia Nusantara maupun di perguruan tinggi lainnya.

Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan

pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali

arahan pembimbing akademik dan nara sumber.

Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya, apabila

di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam pernyataan

ini, maka saya bersedia menerima sanksi akademik berupa pencabutan

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

ii

gelar (S.Sn.) yang telah diperoleh, serta sanksi lainnya sesuai dengan

norma yang berlaku di Universitas Multimedia Nusantara.

Tangerang, 28 Agustus 2014

Andrian

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

iii

KATA PENGANTAR

Penulis sangat bersyukur karena dapat membuat sebuah Tugas Akhir dari

perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang

perancangan website Little Teacup. Penulis sangat tertarik dengan tema ini

karena penulis mengenal pemiliknya dan keunikan dari bisnis fotografi yang

dijalankannya tersebut. Little Teacup memiliki keunikan utama yaitu melalui

produknya yang bernama Baby’s Moonshine.

Keunikan yang dimiliki oleh Little Teacup patut dipromosikan dan

diketahui oleh orang-orang, terutama target dari Little Teacup. Penulis

berharap Tugas Akhir ini dapat dilihat oleh para peminat dan calon pengguna

dari jasa fotografi bayi dan kehamilan tersebut agar orang-orang diluar sana

yang belum mengetahui dapat mengenal dan mencoba menikmati jasa

fotografi yang cukup unik ini.

Penulis banyak belajar dan mengenal selama pembuatan Tugas Akhir ini

mengenai teknik-teknik pembuatan website dan mengenal lebih lanjut

mengenai makna dari media. Selain itu penulis juga dapat semakin mengenal

dan mengeksplorasi mengenai bidang fotografi dari pemilik Little Teacup.

Tidak lupa juga penulis mengucapkan banyak terima kasih kepada Bapak Desi

Dwi Kristanto, S.Ds., M.Ds. selaku Ketua Program Studi Desain Komunikasi

Visual Universitas Multimedia Nusantara, Bapak Mohammad Rizaldi, S.T.,

M.Ds. selaku Dosen Pembimbing, Agnes Larasati selaku pemilik dari Little

Teacup dan narasumber utama bagi penulis, Alm. Ayah, Ibu, dan Kakak

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

iv

kandung saya yang turut serta membantu saya dalam menyelesaikan Tugas

Akhir ini.

Tangerang, 28 Agustus 2014

Andrian

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

v

ABSTRAKSI

Semakin berkembangnya bisnis jasa fotografi saat ini memberikan peluang yang

cukup besar untuk dijadikan sumber mata pencaharian utama. Hal ini didukung

pula oleh berkembangnya kualitas dari para pendiri jasa fotografi di Indonesia dan

banyak juga yang sudah diakui di dunia internasional. Sebuah perusahaan jasa

fotografi bayi yang bernama Little Teacup akhirnya berdiri pada tahun 2009.

Karena baru adanya strategi dan media promosi yang dijalankan melalui media

sosial facebook dan Instagram saja sebelumnya, maka Little Teacup

membutuhkan website agar dapat diperkenalkan dan menarik para calon target

pasarnya yang berdomisili di Jakarta. Di tahun 2014 ini ia merencanakan untuk

menjalankan strategi promosi melalui website guna meningkatkan penjualan dan

semakin memperkenalkan bisnisnya kepada pasar.

Kata kunci : Jasa, Fotografi, Media, Website

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

vi

ABSTRACT

The continued development of photographic services business currently providing

opportunities to be a major source of livelihood. This is also supported by the

development of the quality of the founder of photography services in Indonesia

and many are already recognized internationally. A baby photography services

company named Little Teacup finally established in 2009.

Due to the presence of new media strategies and promotions that just run through

social media Facebook and Instagram before, then Little Teacup need a website

in order to introduce and attract to its target audience based in Jakarta. In 2014

they plan to run through website promotion strategies to increase sales and

further introduce the business to the market.

Keywords : Service, Photography, Media, Website

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

vii

DAFTAR ISI

HALAMAN PENGESAHAN TUGAS AKHIR................................................... I

LEMBAR .............................................................................................................. II

KATA PENGANTAR ......................................................................................... III

ABSTRAKSI .......................................................................................................... V

ABSTRACT .......................................................................................................... VI

DAFTAR ISI ...................................................................................................... VII

DAFTAR GAMBAR ............................................................................................. X

DAFTAR TABEL.............................................................................................. XII

DAFTAR LAMPIRAN .................................................................................... XIII

BAB I PENDAHULUAN ...................................................................................... 1

1.1. Latar Belakang........................................................................................... 1

1.2. Rumusan Masalah ..................................................................................... 3

1.3. Batasan Masalah ........................................................................................ 3

1.4. Tujuan Tugas Akhir ................................................................................... 4

1.5. Manfaat Tugas Akhir ................................................................................. 5

1.6. Metode Pengumpulan Data ....................................................................... 5

1.7. Metode Perancangan ................................................................................. 7

1.8. Skematika Perancangan ............................................................................. 8

BAB II TINJAUAN PUSTAKA ........................................................................... 9

2.1. Promosi ...................................................................................................... 9

2.2. Media ....................................................................................................... 13

2.3. Audiens .................................................................................................... 18

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

viii

2.4. Website .................................................................................................... 20

2.5. Desain Web ............................................................................................. 26

2.5.1. Anatomi Halaman Web ............................................................. 28

2.5.2. Grid ........................................................................................... 29

2.5.3. Keseimbangan ........................................................................... 30

2.6. Fotografi .................................................................................................. 30

BAB III METODOLOGI ................................................................................... 33

3.1. Gambaran Umum .................................................................................... 33

3.1.1. Wawancara Kepada Narasumber ........................................................... 34

3.1.2. Wawancara Kepada Target..................................................................... 40

3.2. Mind Mapping ........................................................................................ 41

3.3. Studi Visual ............................................................................................ 42

3.4. Konsep Kreatif........................................................................................ 45

BAB IV PERANCANGAN ................................................................................. 46

4.1. Pengembangan Konsep .......................................................................... 46

4.1.1. Brainstorming ......................................................................................... 46

4.1.2. Sketsa Perancangan ................................................................................ 47

4.1.3. Artefak Visual Little Teacup .................................................................. 47

4.1.4. Tipografi ................................................................................................. 49

4.2. Strategi Perancangan Website................................................................. 49

4.2.1. Konsep Sitemap ...................................................................................... 49

4.2.2. Grid Web ................................................................................................ 51

4.2.3. Plot Website ............................................................................................ 53

4.3. Konsep Visual ........................................................................................ 54

4.3.1. Ilustrasi ................................................................................................... 54

4.3.2. Button, Latar, dan Layout ....................................................................... 56

4.3.3. Warna ..................................................................................................... 58

4.4. Aplikasi Kreatif ...................................................................................... 59

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

ix

4.4.1. Website Little Teacup............................................................................. 59

4.4.2. Media Plan .............................................................................................. 65

4.4.3. Budgeting Keperluan Project ................................................................. 65

BAB V PENUTUP ............................................................................................... 67

5.1. Kesimpulan ............................................................................................. 67

5.2. Saran ....................................................................................................... 67

DAFTAR PUSTAKA .......................................................................................... 69

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

x

DAFTAR GAMBAR

Gambar 2.1. Promosi Your Studio………………………………………………...9

Gambar 2.2. Event Pemasaran Pitter Patter Potraits……………………………..11

Gambar 2.3. Presentasi dan POP Berbagai Macam Produk……………………...12

Gambar 2.4. Website Weddingku dan Spanduk Online King Foto……………...15

Gambar 2.5. Profil Media Sosial Milik Axioo di Facebook……………………..16

Gambar 2.6. Brosur Jennifer Hejna Wedding Photography……………………..16

Gambar 2.7. Spanduk Dalam Ruangan Aberdeen Photo………………………...17

Gambar 2.8. Media Promosi Shannon Confair Photography……………………19

Gambar 2.9. Hierarki Pada Wix.com…………………………………………….21

Gambar 2.10. Pengelompokan Navigasi Pada Amore…………………………...22

Gambar 2.11. Pengelompokan Visual……………………………………………22

Gambar 2.12. Elemen Navigasi………………………………………………….25

Gambar 2.13. Anatomi Halaman Web…………………………………………...28

Gambar 2.14. Grid………………………………………………………………..29

Gambar 2.15. Perspektif Pada Foto………………………………………………31

Gambar 2.16. Perbedaan Lensa Sudut Lebar Dan Jarak Jauh……………………32

Gambar 3.1. Facebook Little Teacup…………………………………………….35

Gambar 3.2. Instagram Little Teacup……………………………………………36

Gambar 3.3. Mind Mapping……………………………………………………...42

Gambar 3.4. Header WD Photoworks……………………………………………43

Gambar 3.5. Konten WD Photoworks…………………………………………...44

Gambar 3.6. Footer WD Photoworks……………………………………………44

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

xi

Gambar 4.1. Brainstorming………………………………………………………46

Gambar 4.2. Sketsa Website Little Teacup………………………………………47

Gambar 4.3. Logotype Little Teacup…………………………………………….48

Gambar 4.4. Logogram Little Teacup……………………………………………48

Gambar 4.5. Daftar Harga Little Teacup………………………………………...48

Gambar 4.6. Font Arial…………………………………………………………..49

Gambar 4.7. Site Map Little Teacup……………………………………………..49

Gambar 4.8. Grid Home………………………………………………………….51

Gambar 4.9. Grid Portfolio………………………………………………………51

Gambar 4.10. Grid Inside Portfolio………………………………………………52

Gambar 4.11. Grid Package……………………………………………………...53

Gambar 4.12. Referensi Efek Jahitan dan Kain…………………………………54

Gambar 4.13. Contoh Ilustrasi Handmade………………………………………55

Gambar 4.14. Contoh Ilustrasi Berupa Foto…………………………………….55

Gambar 4.15. Informasi Button, Latar, dan Layout…………………………….56

Gambar 4.16. Warna Utama…………………………………………………….58

Gambar 4.17. Final Halaman Utama Website Little Teacup……………………59

Gambar 4.18. Final Halaman Portfolio Website Little Teacup…………………60

Gambar 4.19. Final Halaman Dalam Portfolio Website Little Teacup…………61

Gambar 4.20. Final Halaman About Website Little Teacup……………………62

Gambar 4.21. Final Halaman Package Website Little Teacup…………………63

Gambar 4.22. Final Halaman Contact Us Website Little Teacup………………64

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

xii

DAFTAR TABEL

Tabel 3.1 Hasil Pertanyaan Wawancara Pertama……………..…..…….…….…40

Tabel 3.2 Hasil Pertanyaan Wawancara Kedua……………..…..…...….…….…41

Tabel 4.1 Media Plan……………..…..…………………………….…...…….…65

Tabel 4.2 Budgeting Keperluan Project……………………....…..….……….…66

Perancangan Website ..., Andrian, FSD UMN, 2014

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2224/1/HALAMAN AWAL.pdf · perkuliahan di Universitas Multimedia Nusantara yang bertemakan tentang perancangan

xiii

DAFTAR LAMPIRAN

LAMPIRAN A: JADWAL BIMBINGAN ........................................................ 71

LAMPIRAN B: SKETSA ................................................................................... 72

Perancangan Website ..., Andrian, FSD UMN, 2014