17
BAB IV
PENGALAMAN KERJA PRAKTEK
4.1. Keterlibatan Praktikan dalam Proyek Kreatif
4.1.1. Website Portal Berita Innihub
Proses Kerja
Perancangan diawali dengan proses brief desain yang bertujuan untuk merumuskan poin-poin penting pada aspek desain dalam perancangan wireframe dan template desain website. Poin-poin tersebut terangkum sebagai berikut :
1. Website portal berita Innihub adalah sebuah aplikasi web berbasis Wordpress untuk memposting berita-berita terbaru secara online.
2. Desain aplikasi memiliki satu halaman utama (homepage) yang terhubung dengan halaman-halaman khusus (sub-pages) sesuai dengan kategori.
3. Aplikasi web Innihub memiliki halaman administrasi untuk memposting berita secara mudah yang berbasis Wordpress.
4. Desain aplikasi merujuk pada referensi-referensi web portal berita online yang banyak dikunjungi dalam skala nasional (Indonesia).
5. Desain aplikasi dibuat sesederhana mungkin guna memudahkan pengguna (user) maupun admin berita dalam hal akses dan penggunaan website portal berita Innihub.
18
Setelah melakukan analisa pada brief desain, selanjutnya yang dilakukan adalah penguatan konsep dengan melakukan brainstorming (Gambar 4.1) dan sketching (Gambar 4.2) guna menentukan perancangan wireframe pada website.
Gambar 4.1 Hasil Brainstorming Brief Desain
19
Gambar 4.2 Sketsa Desain Awal
Wireframe (lihat Gambar 4.3 dan Gambar 4.4) bertujuan untuk menentukan tata
letak dalam sebuah website. Dibuat sebagai acuan desain sebelum masuk ke tahapan desain yang sebenarnya. Bentuknya sudah dalam versi digital tetapi masih berupa desain sementara.
20
Gambar 4.3 Wireframe Homepage Innihub
21
Gambar 4.4 Wireframe Halaman Baca Berita Innihub
Setelah selesai dengan wireframe, proses selanjutnya adalah mengubah acuan tersebut ke bentuk desain dengan gambar asli. Proses ini biasanya menggunakan software pengolah gambar Photoshop (lihat pada Gambar 4.5) untuk memudahkan dalam melakukan proses setelahnya yaitu mengubah format gambar PSD ke dalam bentuk coding HTML dan CSS dengan metode slicing di Photoshop (Gambar 4.6)
22
Gambar 4.5 Desain Web Menggunakan Photoshop
Gambar 4.6 Proses Slicing di Photoshop
23
Kemudian dilanjutkan dengan proses coding pemrograman ke dalam bentuk HTML dan CSS (lihat Gambar 4.7)
Gambar 4.7 Proses Coding HTML dan CSS
Dan terakhir, desain web yang sudah berbentuk HTML/CSS tersebut diaplikasikan ke dalam bentuk Wordpress (lihat Gambar 4.8) sebagai Content Management System yang dapat melakukan administrasi di dalam aplikasi web yang sudah memiliki database, salah contohnya adalah melakukan posting berita.
24
Gambar 4.8 Proses Editing Desain Web di Wordpress
Langkah terakhir yang dilakukan (Gambar 4.8) untuk menyelesaikan proyek website Innihub, yaitu dengan memasukkan desain yang sudah dibuat menjadi file HTML/CSS ke dalam aplikasi berbasis Wordpress. File HTML/CSS yang telah dibuat, digunakan sebagai acuan untuk mendesain layout pada halaman-halaman Wordpress yang akan dibuat. Proses editing dan penyesuaian desain web dari format HTML/CSS ke Wordpress cukup mudah dilakukan, karena sudah didukung dengan plugin editor antar-muka yang mampu melakukan edit secara langsung dengan hanya melakukan click-to-setting pada halaman- halaman yang diinginkan di Wordpress.
25 Hasil Akhir
Spesifikasi dan Keterangan :
Dynamic Web (Wordpress)
Tautan : http://innihub.com/
Gambar 4.9 Halaman Utama Web Innihub
26
Gambar 4.10 Halaman Baca Berita Web Innihub
Gambar 4.11 Halaman Input Berita untuk Admin Innihub
27 4.1.2. Website Profil Perusahaan T.I.C.
Proses Kerja
Seperti pada proyek web sebelumnya, perancangan diawali dengan proses brief desain terlebih dahulu untuk merumuskan poin-poin penting pada aspek
desain. Poin-poin tersebut terangkum sebagai berikut :
1. Website T.I.C. yang akan dibuat merupakan salah satu dari elemen profile perusahaan (company profile)
2. Desain website T.I.C. terdiri dari satu halaman utama (homepage) dan beberapa halaman pendukung lainnya seperti halaman About Us, halaman Contact, dan lain-lain.
3. Website T.I.C. bersifat static hanya menggunakan pemrograman HTML dan CSS untuk tampilan antar-muka tanpa ada aplikasi admin back-end di dalamnya.
4. Semua elemen teks pada website T.I.C. menggunakan bahasa inggris.
Setelah menerima brief desain tersebut, langkah yang ditempuh oleh praktikan yaitu mencari referensi-referensi web company profile dan dilanjutkan ke tahapan sketching (Gambar 4.12) dan wireframing (Gambar 4.13).
28
Gambar 4.12 Sketsa Desain Website T.I.C.
29
Gambar 4.13 Wireframe Website T.I.C.
Setelah menyelesaikan proses wireframing yang nantinya akan digunakan sebagai acuan desain. Praktikan mulai mengumpulkan aset-aset gambar dan tulisan lalu kemudian mendesain halaman-halaman web T.I.C. menggunakan Photoshop. Proses desain tersebut (lihat Gambar 4.14) nantinya akan diubah dari format PSD ke dalam bentuk HTML/CSS menggunakan metode slicing di Photoshop. (Gambar 4.15).
30
Gambar 4.14 Proses Desain Web T.I.C Menggunakan Photoshop
Gambar 4.15 Proses Slicing PSD ke HTML Web T.I.C.
Setelah dilakukan beberapa penyesuaian di sisi pemrograman HTML/CSS, maka selesai sudah proyek web company profile T.I.C. pada tahapan ini.
31 Hasil Akhir
Spesifikasi dan Keterangan :
Static Web (HTML/CSS)
Tautan : http://tic-corp.com/
Gambar 4.16 Halaman Utama Website T.I.C.
32 4.1.3. Desain Stempel T.I.C.
Proses Kerja
Gambar 4.17 Logo T.I.C.
Pada proyek ini, praktikan diberi tugas untuk membuat cap atau stempel berdasarkan logo perusahaan T.I.C. (Gambar 4.17). Pengerjaannya menggunakan software Adobe Illustrator dengan melakukan vectoring pada logo perusahaan T.I.C. (lihat pada Gambar 4.18).
Gambar 4.18 Proses Desain Stempel T.I.C.
33 Hasil Akhir
Spesifikasi dan Keterangan :
Ukuran = 3,5 cm x 3,5cm
Warna Tinta = Hijau
Gambar 4.19 Desain Stempel T.I.C. Sebelum Revisi
Gambar 4.20 Desain Final Stempel T.I.C.
34 4.1.4. Desain Stiker Kopi Coldbrew
Proses Kerja
Hasil akhir dari proyek ini yaitu membuat stiker kopi dengan merk
“Coldbrew” yang akan ditempel pada botol minuman kopi. Tetapi sebelumnya praktikan diharuskan membuat terlebih dahulu desain logo dari merk kopi tersebut secara instan dikarenakan deadline yang sangat dekat untuk membuatnya. Untuk menghemat waktu, maka praktikan mencari template logo gratis dan melakukan modifikasi pada desain logo tersebut (lihat Gambar 4.21).
Gambar 4.21 Proses Desain Logo Kopi Coldbrew
Selanjutnya dibuatkan juga mockup desain logo kopi Coldbrew saat diaplikasikan ke media botol (Gambar 4.22).
35
Gambar 4.22 Mockup Logo Kopi Coldbrew di Media Botol
Hasil Akhir
Spesifikasi dan Keterangan :
Ukuran = 9cm x 9cm
Warna = Black / White
Bahan = Sticker Vinyl
Cetak = Digital Print (finishing: cutting dan laminating glossy)
Gambar 4.23 Desain Final Stiker Kopi Coldbrew
36 4.1.5. Desain Mockup Kemasan Kopi Luwak
Proses Kerja
Dalam proyek desain ini, praktikan diberikan tugas untuk membuat mockup berbentuk softcopy gambar dari boks kemasan kopi luwak yang sudah ada
sebelumnya (Gambar 4.24). Dengan menghitung skala 1:1 pada boks tersebut, lalu membuat versi digital-nya menggunakan software Adobe Photoshop dengan ukuran yang sama.
Gambar 4.24 Foto Boks Kemasan Kopi Luwak
37 Hasil Akhir
Gambar 4.25 Desain Mockup Boks Kemasan Luwak Sebelum Revisi
Gambar 4.26 Desain Final Mockup Boks Kemasan Luwak
38 4.1.6. Desain Logo Kopi Consac
Proses Kerja
Pada proyek desain ini, praktikan diberi tugas untuk membuat logo kopi dengan merk “Consac”. Software yang digunakan yaitu Adobe Illustrator untuk menggambar beberapa logo berbentuk squirrel atau tupai (lihat Gambar 4.27).
Dan terakhir logo tersebut diaplikasikan ke dala sebuah mockup kemasan berbentuk boks sederhana dengan logo kopi Consac diatasnya.
Gambar 4.27 Proses Desain Logo Consac
Hasil Akhir
Spesifikasi dan Keterangan :
Ukuran Boks = 20cm (P) x 20cm (L) x 10cm (T)
39
Gambar 4.28 Desain Final Logo Consac
4.2. Keterlibatan Praktikan di Luar Proyek Kreatif
4.2.1. Proses Cetak
Dalam hal ini, praktikan dianjurkan mengetahui proses cetak mencetak.
Dikarenakan dalam proses desain, pengetahuan tentang hasil akhir, seperti teknik mencetak, material, dan hasil warna yang didapat haruslah dipahami dengan baik.
Maka di PT Royal Puri Global menganjurkan desainer sesekali terlibat langsung dalam proses cetak, minimal terlibat pada proses pemesanan desain yang akan dicetak seperti stiker, packaging, dan lain sebagainya.
40
Selain itu juga apabila hasil desain yang dikerjakan sudah selesai dicetak, desainer diwajibkan melakukan pengecekan hasil cetakan, apakah sesuai dengan konsep dan desain yang telah disepakati sebelumnya, ataupun adakah perubahan pada saat proses cetak mencetak. Hal ini berguna sebagai evaluasi kerja bagi seorang desainer.
4.2.2. Konten Editor
Praktikan juga didorong untuk dapat mengetahui seluk beluk tentang dunia berita, khususnya berita online. Dimana praktikan harus mempelajari banyak hal mengenai ketentuan, persyaratan, privacy di dunia media online. Praktikan diberi tanggung jawab sebagai editor berita-berita yang akan ditayangkan pada website portal berita yang sedang dikerjakan.
