BAB IV PENGALAMAN KERJA PRAKTEK

Ukuran: px

Mulai penontonan dengan halaman:

Download "BAB IV PENGALAMAN KERJA PRAKTEK"

Bambang Wibowo
6 tahun lalu
Tontonan:

1 BAB IV PENGALAMAN KERJA PRAKTEK 4.1. Keterlibatan Praktikan dalam Proyek Kreatif 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. 17

2 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 18

3 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. 19

4 Gambar 4.3 Wireframe Homepage Innihub 20

Gambar 4.4 Wireframe Halaman Baca Berita Innihub Setelah selesai dengan wireframe, proses selanjutnya adalah mengubah acuan tersebut ke bentuk desain dengan gambar asli.

5 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) 21

6 Gambar 4.5 Desain Web Menggunakan Photoshop Gambar 4.6 Proses Slicing di Photoshop 22

7 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. 23

8 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 halamanhalaman yang diinginkan di Wordpress. 24

9 Hasil Akhir Spesifikasi dan Keterangan : Dynamic Web (Wordpress) Tautan : Gambar 4.9 Halaman Utama Web Innihub 25

10 Gambar 4.10 Halaman Baca Berita Web Innihub Gambar 4.11 Halaman Input Berita untuk Admin Innihub 26

11 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). 27

12 Gambar 4.12 Sketsa Desain Website T.I.C. 28

13 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). 29

14 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. 30

15 Hasil Akhir Spesifikasi dan Keterangan : Static Web (HTML/CSS) Tautan : Gambar 4.16 Halaman Utama Website T.I.C. 31

16 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. 32

17 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. 33

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.

18 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). 34

19 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 35

20 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 36

21 Hasil Akhir Gambar 4.25 Desain Mockup Boks Kemasan Luwak Sebelum Revisi Gambar 4.26 Desain Final Mockup Boks Kemasan Luwak 37

22 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) 38

Dikarenakan dalam proses desain, pengetahuan tentang hasil akhir, seperti teknik mencetak, material, dan hasil warna yang didapat

23 Gambar 4.28 Desain Final Logo Consac 4.2. Keterlibatan Praktikan di Luar Proyek Kreatif 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. 39

24 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 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. 40

dokumen-dokumen yang mirip

PEMBUATAN WEB PORTAL BERITA DAN WEB PROFIL PERUSAHAAN SERTA PROYEK DESAIN GRAFIS LAINNYA PT ROYAL PURI GLOBAL

LAPORAN KERJA PRAKTEK PEMBUATAN WEB PORTAL BERITA DAN WEB PROFIL PERUSAHAAN SERTA PROYEK DESAIN GRAFIS LAINNYA PT ROYAL PURI GLOBAL Diajukan sebagai syarat untuk menyelesaikan mata kuliah Kerja Praktek