PERANCANGAN DESAIN WEBSITE OSANA
INTERNATIONAL BAGI CV NUKEGRAPHIC
INDONESIA
Laporan Magang
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds)
Nama : Tirza Rapaday Resnawa
NIM : 00000019537
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
PENGESAHAN LAPORAN KERJA MAGANG
PERANCANGAN DESAIN WEBSITE OSANA
INTERNATIONAL BAGI CV NUKEGRAPHIC INDONESIA
OlehNama : Tirza Rapaday Resnawa NIM 00000019537
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Tangerang, 7 Desember 2020
Mengetahui, Ketua Program Studi
Penguji
iii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
DALAM PENYUSUNAN LAPORAN KERJA MAGANG
Dengan ini saya:
Nama : Tirza Rapaday Resnawa
NIM : 00000019537
Program Studi : Desain Komunikasi Visual Menyatakan bahwa saya telah melakukan kerja magang;
Nama Perusahaan : CV Nukegraphic Indonesia
Divisi : UI/UX Design Intern
Alamat : Ruko Golden 8 Blok D/28-29, Tangerang
Periode Magang : 1 Juli 2020 s/d 30 September 2020 Pembimbing Lapangan : Egar Astawiguna
Laporan kerja magang ini merupakan hasil karya saya sendiri, dan saya tidak melakukan plagiat. Semua kutipan karya ilmiah orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah saya sebutkan sumber kutipannya serta saya cantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti melakukan kecurangan/penyimpangan baik dalam pelaksanaan kerja magang maupun penulisan laporan kerja magang, maka saya bersedia menerima sanksi dinyatakan tidak lulus untuk mata kuliah magang yang telah saya tempuh.
Tangerang, 7 Desember 2020
iv
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan yang Maha Esa atas karunia dan rahmat-Nya, sehingga penulis dapat menyelesaikan praktik kerja magang pada CV Nukegraphic Indonesia serta penulisan laporan “Perancangan Desain Website Osana International Bagi CV Nukegraphic Indonesia” dengan baik dan tepat waktu, sebagai syarat kelulusan dan memperoleh gelar Sarjana Desain (S.Ds.).
Sebagai mahasiswa desainer grafis, penulis tertarik pada interface design karena melihat banyaknya website dan aplikasi yang semakin berkembang pada masa ini. Tidak ingin menyia-nyiakan apa yang sudah dipelajari sepanjang perkuliahan mengenai interface design, penulis menggunakan kesempatan kerja magang untuk dapat mempelajari lebih dalam mengenai UI dan UX design.
Penulisan laporan kerja magang ini bertujuan untuk menjadi inspirasi dan memberikan wawasan bagi pembaca mengenai bidang web design serta menjadi pemenuhan salah satu syarat kelulusan untuk memperoleh gelar Sarjana Desain (S.Ds.).
Selama proses kerja magang, selain memperluas wawasan penulis mengenai
web design dan memperkaya pengalaman penulis di dunia kerja, penulis juga
belajar untuk bekerjasama dan berkoordinasi dengan sesama rekan kerja. Bagaimana penulis juga akhirnya belajar untuk mengolah brief menjadi sebuah desain yang komunikatif dan sesuai dengan keinginan klien.
Penulis juga ingin mengungkapkan rasa syukur dan terima kasih kepada orang-orang yang telah mendukung dan membantu penulis selama proses kerja magang berlangsung. Ucapan terima kasih penulis sampaikan kepada:
1. CV Nukegraphic Indonesia yang telah memberikan kesempatan bagi penulis untuk menjalankan proses kerja magang
2. Egar Astawiguna, selaku supervisor lapangan yang telah membimbing dan mengarahkan penulis selama periode kerja magang.
3. Kerin Dela, selaku mentor yang telah membantu dan memeberikan teladan bagi penulis selama proses kerja magang di Nukegraphic. 4. Seluruh tim Nukeraphic yang dengan ramah menerima dan mendukung
v
5. Mohammad Rizaldi, S.T., M.Ds., selaku Ketua Program Studi Desain Komunikasi Visual Universitas Multimedia Nusantara.
6. Nadia Mahatmi, M.Ds., selaku Dosen Pembimbing yang telah membimbing penulis dalam proses penulisan laporan kerja magang. 7. Keluarga dan semua pihak yang tidak dapat disebutkan satu-persatu,
namun telah memberikan dukungan yang terbaik bagi penulis.
Tangerang, 7 Desember 2020
vi
ABSTRAKSI
Website menjadi salah satu media yang mudah diakses dari berbagai macam platform. Sehingga web design menjadi bidang yang cukup diminati, karena
desainer ditantang untuk membuat desain yang tidak hanya menarik namun juga fungsional pada segala jenis platform. CV Nukegraphic menjadi salah satu perusahaan yang berfokus pada web design and development, terutama dalam perancangan corporate dan e-commerce website. Pengalaman selama bertahun-tahun juga menjadikan CV Nukegraphic memiliki standardisasi website yang baik dan dipercaya oleh banyak perusahaan-perusahaan lain. Beberapa kendala yang dialami selama praktik kerja magang adalah kurangnya pengetahuan mengenai dunia UI/UX design; terutama pada website, tidak terbiasa dengan
software-software yang baru pertama kali digunakan, dan kesulitan dalam berkomunikasi.
Namun melalui praktik kerja magang ada banyak pengetahuan dan pemahaman baru mengenai UI/UX design yang tidak pernah dipelajari sebelumnya di masa perkuliahan. Bahkan tidak hanya itu, praktik kerja magang juga memperkaya kemampuan untuk menguasai berbagai software desain dan menjadi sarana untuk melatih kemampuan berkomunikasi dan bekerjasama dengan rekan kerja yang lain.
vii
DAFTAR ISI
PENGESAHAN LAPORAN MAGANG ... ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG ... iii
KATA PENGANTAR ... iv
ABSTRAKSI ... vi
DAFTAR ISI ... vii
DAFTAR GAMBAR ... ix
DAFTAR TABEL ... xi
DAFTAR LAMPIRAN ... xii
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Maksud dan Tujuan Kerja Magang ... 1
1.3. Waktu dan Prosedur Pelaksanaan Kerja Magang ... 2
BAB II GAMBARAN UMUM PERUSAHAAN ... 4
2.1. Deskripsi Perusahaan ... 4
2.2. Struktur Organisasi Perusahaan ... 7
BAB III PELAKSANAAN KERJA MAGANG ... 10
3.1. Kedudukan dan Koordinasi ... 10
3.2. Tugas yang Dilakukan ... 10
3.3. Uraian Pelaksanaan Kerja Magang ... 12
3.3.1. Proses Pelaksanaan ... 12
3.3.2. Kendala yang Ditemukan ... 47
3.3.3. Solusi Atas Kendala yang Ditemukan ... 47
BAB IV PENUTUP ... 49
4.1. Kesimpulan ... 49
viii
ix
DAFTAR GAMBAR
Gambar 2.1. Logo CV Nukegraphic ... 4
Gambar 2.2. Tampilan Website Eka Hospital ... 5
Gambar 2.3. Tampilan Website BIC ... 5
Gambar 2.4. Tampilan Website Ayana Residence ... 6
Gambar 2.5. Tampilan Website Logam Mulia ... 6
Gambar 2.6. Tampilan Website Passion Jewerly ... 7
Gambar 2.7. Tampilan Website Indolinen ... 7
Gambar 2.8. Bagan Struktur Organisasi CV Nukegraphic ... 8
Gambar 3.1. Bagan Alur Koordinasi CV Nukegraphic ... 10
Gambar 3.2. Information Architecture ... 14
Gambar 3.3. Desain Homepage Pertama Sentry ... 15
Gambar 3.4. Gambaran Grid System yang Salah ... 16
Gambar 3.5. Gambaran Grid System yang Sesuai ... 17
Gambar 3.6. Revisi Pertama Homepage Sentry ... 18
Gambar 3.7. Gambaran Feedback Desain Homepage Sentry ... 19
Gambar 3.8. Finalisasi Homepage Sentry ... 20
Gambar 3.9. Sketsa Awal Halaman About Us ... 21
Gambar 3.10. Digitalisasi Halaman About Us ... 22
Gambar 3.11. Hasil Revisi Halaman About Us ... 23
Gambar 3.12. Hasil Awal Tampilan Mobile Version ... 24
Gambar 3.13. Tampilan Final Mobile Version ... 25
Gambar 3.14. Existing Website M&S GmbH ... 26
Gambar 3.15. Referensi Website dari Klien ... 27
x
Gambar 3.17. Perbaikan Desain ... 28
Gambar 3.18. Hasil Akhir Desain Homepage ... 29
Gambar 3.19. Halaman About Us ... 30
Gambar 3.20. Desain Product Thumbnail ... 31
Gambar 3.21. Halaman Contact Us ... 31
Gambar 3.22. Flowchart dan Halaman Shopping Cart Sebelum Revisi ... 32
Gambar 3.23. Flowchart dan Halaman Shopping Cart Setelah Revisi ... 33
Gambar 3.24. Tampilan Prototype Desain... 34
Gambar 3.25. Existing Website Osana ... 35
Gambar 3.26. Referensi Website dari Klien ... 35
Gambar 3.27. Desain Awal Homepage ... 36
Gambar 3.28. Alternatif Typeface Pertama ... 37
Gambar 3.29. Alternatif Typeface Kedua ... 37
Gambar 3.30. Revisi Desain Homepage Osana ... 38
Gambar 3.31. Hasil Akhir Homepage Osana
...
39Gambar 3.32. Desain Awal Halaman Konten ... 40
Gambar 3.33. Halaman Konten Setelah Revisi... 41
Gambar 3.34. Desain Awal Contact Us ... 42
Gambar 3.35. Contact Us Setelah Revisi ... 42
Gambar 3.36. Desain Awal Our Projects ... 43
Gambar 3.37. Our Projects Setelah Revisi ... 43
Gambar 3.38. Desain Halaman What We Do ... 44
Gambar 3.39. Desain Awal About Us ... 45
xi
DAFTAR TABEL
xii
DAFTAR LAMPIRAN
LAMPIRAN A: SURAT PEMBEKALAN MAGANG... xii
LAMPIRAN B: SURAT PENGANTAR MAGANG ... xiii
LAMPIRAN C: SURAT PENERIMAAN MAGANG ... xiv
LAMPIRAN D: KARTU KERJA MAGANG ... xv
LAMPIRAN E: KEHADIRAN KERJA MAGANG ... xvi
LAMPIRAN F: LAPORAN REALISASI KERJA MAGANG ... xxi
LAMPIRAN G: PENILAIAN KERJA MAGANG... xxii
LAMPIRAN H: LEMBAR VERIFIKASI LAPORAN MAGANG ... xxiii
LAMPIRAN I: SURAT SELESAI MAGANG ... xxv
LAMPIRAN J: DESAIN ASSET ST. TOMS ... xxvi
LAMPIRAN K: DESAIN ASSET PICKPACK GADGET ... xxvii
