16
BAB III
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan Koordinasi
Kedudukan dan koordinasi di Kamarupa Design Group yang dilakukan penulis dijelaskan sebagai berikut.
3.1.1. Kedudukan
Penulis ditempatkan sebagai graphic design intern bersama dua orang intern lainnya. Selama praktik kerja magang, penulis bekerja sama dengan intern lainnya maupun full time graphic designer dengan diarahkan oleh satu art director dan satu creative director. Untuk proyek bersangkutan dengan social media content maupun promotional tools, penulis biasa ditempatkan sendiri, sedangkan untuk proyek branding dan website, penulis biasa dipasangkan dengan satu intern atau full time graphic designer.
3.2. Koordinasi
Jalur koordinasi pekerjaan mulai dari klien hingga sampai ke penulis dilakukan sebagai berikut.
Gambar 3. 1 Bagan Alur Koordinasi
Penulis mendapatkan brief tergantung dengan proyeknya. Apabila proyek berupa social media content, penulis biasanya mendapatkan langsung client brief dari Account Executive. Sedangkan untuk proyek lainnya, penulis mendapatkan creative
17 brief dari Creative Director ataupun Art Director yang sudah menerjemahkan client brief dari Account Executive. Setelah mendapatkan creative brief tersebut, penulis biasanya diminta untuk mencari referensi dan moodboard terlebih dahulu, kemudian melakukan brainstorming dan diskusi bersama dengan Creative Director ataupun Art Director (tergantung proyek yang dijalani), bersama dengan partner (intern/ full time graphic designer) yang ditentukan. Dalam proses pengerjaannya, penulis dapat senantiasa berdiskusi juga dengan Creative Director/Art Director apabila menghadapi suatu kesulitan.
Setelah mendapatkan hasil yang memuaskan dan disetujui oleh Creative Director/Art Director, karya tersebut akan dikirimkan ke client oleh Account Executive. Apabila klien meminta revisi, maka revisi tersebut akan disampaikan kepada Creative Director/Art Director kemudian diterjemahkan menjadi creative brief untuk diberikan kepada penulis dan dilakukan revisinya.
3.2.1. Tugas yang Dilakukan
Proyek yang pertama kali dibuat oleh penulis ialah perancangan marketing tool berupa brosur untuk perumahan Amsterdam Jababeka.
Tabel 3.1. Tabel Pekerjaan Mingguan
No. Minggu Proyek Keterangan
1
Brosur Amsterdam Jababeka
Mendesain (layout) brosur perumahan (24 halaman)
Make Over Social Media Melanjutkan revisi IG Stories Make Over (Make Over IG Awards)
2
Brosur Amsterdam Jababeka
Mendesain (layout) brosur perumahan (24 halaman)
Make Over Social Media Mendesain IG Stories Make Over (Make Over IG Awards)
Rebranding Pyridam Farma
Melakukan Eksplorasi brand story &
bentuk logo Pyridam Farma
18 Brosur Universitas
BINUS
Revisi Layout Brosur Universitas BINUS
3 Brosur Universitas BINUS
Revisi Brosur Universitas BINUS
Kamarupa Social Media Content
Mendesain IG Feed content untuk Hari Raya Idul Adha
4 Brosur Universitas BINUS
Revisi Brosur Universitas BINUS
Kamarupa Social Media Content
Mendesain IG Feed content untuk Portfolio Kamarupa “Eye to Eye”
Kamarupa Website Content
Mendesain Website content untuk Portfolio Kamarupa “Eye to Eye”
5 Kamarupa Signage Mendesain Sign System untuk Kantor Kamarupa Group Palmerah
6 Kamarupa Social Media Content
Mendesain IG Feed content untuk Hari Raya Idul Adha
Kamarupa Signage Membuat Presentasi & Finishing Sign System Design untuk Kantor Kamarupa Group Palmerah
7 Project X Membuat template Web Design untuk
Project X Kamarupa
19 Make Over socmed/
digital banner
IG Stories Make Over (Make Over IG Awards)
8 Project X Membuat template Web Design untuk
Project X Kamarupa
Make Over socmed/
digital banner
IG Stories Make Over (Make Over IG Awards)
Make Over MUA Pick catalogue
Mendesain MUA Pick Catalogue bedasarkan guidelines MUA Pick digital banner
3.3.Uraian Pelaksanaan Kerja Magang
Penulis mengerjakan berbagai proyek selama pelaksanaan magang, diantaranya ialah social media content, branding, website, hingga promotion tools. Sebagian proyek penulis melanjutkan proyek yang sudah berjalan (on going) dan sebagian penulis mengerjakan dari awal hingga akhir. Berikut ini penjelasan proyek utama penulis selama pelaksanaan magang tersebut berlangsung.
3.3.1. Perancangan Flyer Jababeka Residence (Rotterdam)
Amsterdam Jababeka Residence merupakan proyek perumahan yang berlokasi di Cikarang. Adapun keunikan Jababeka Residence ialah merupakan proyek
perumahan yang dirancang dengan konsep kota mandiri modern yang diperuntukkan pekerja lajang dan keluarga muda. Jababeka Residence menyediakan beberapa tipe rumah modern minimalis dengan harga yang terjangkau dan fasilitas umum modern berupa jaringan koneksi internet di luar rumah, area olahraga dan jogging, serta pusat bisnis.
20 3.3.1.1.Briefing
Briefing disampaikan langsung oleh Creative Director, face-to-face dan langsung mendatangi penulis di meja penulis saat di kantor. Proyek Flyer ini merupakan proyek turunan dari brosur Amsterdam Jababeka Residence yang sebelumnya sudah dibuat oleh Kamarupa, dan merupakan materi yang sama namun dibuat lebih singkat dan padat untuk dimuat kedalam flyer lipat berukuran A4. Adapun materi yang dibutuhkan untuk ada di dalam flyer lipat ini adalah penjelasan mengenai Jababeka Residence, lokasi Jababeka Residence, tipe-tipe rumah Jababeka Residence, fasilitas yang disediakan oleh Jababeka Residence, serta cover depan dan belakang yang di dalamnya juga terdapat kontak & media sosial dari Jababeka Residence.
3.3.1.2.Brainstorming & Konsep
Dari brief tersebut, penulis melakukan brainstorming dengan diawali oleh pencarian referensi layouting brosur dan berdiskusi dengan Creative Director. Dari hasil brainstorm penulis akhirnya mendapatkan masukkan berupa bentuk layouting yang diusulkan oleh Creative Director untuk mulai membuat flyer lipat tersebut. Konsep yang dibuat adalah mengikuti brosur Jababeka Residence, yakni didominasi warna putih dengan sedikit warna biru donker & oranye, mengikuti brand color Jababeka Residence, dengan clean layout dan foto natural.
21 Gambar 3. 2 Referensi layout Flyer Jababeka Residence
Adapun referensi yang digunakan penulis seluruhnya merupakan contoh flyer lipat 3 halaman dengan mood yang clean. Photo treatment dengan saturasi yang sedikit diturunkan, serta menggunakan block sebagai background tulisan ataupun caption. Adapun mood tersebut mengikuti brosur awal yang telah dibuat oleh Kamarupa Design Group.
3.3.1.3.Sketsa
Berdasarkan referensi yang telah dicari dan hasil diskusi yang telah dilakukan Bersama dengan Creative Director, penulis mulai membuat sketsa manual kasar berupa alternatif layouting konten flyer tersebut.
22 Gambar 3. 3 Proses Sketsa Flyer Jababeka Residence
Creative Director mengusulkan kepada penulis untuk membuat flyer tersebut dengan layout dua per tiga, dimana seakan-akan terdapat grid yang membagi flyer tersebut menjadi dua kolom dan tiga baris, adapun konten yang dibuat penulis di sketsa merupakan sesuai arahan Creative Director, dimana di sisi kiri terdapat bagian perkenalan tentang Rotterdam &
Jababeka, di tengah dan bagian kanan merupakan foto unit dan deskripsi unit, sedangkan untuk bagian belakang, yakni cover belakang dan depan, serta bagian spesifikasi apat mengikuti contoh di brosur.
3.3.1.4.Proses Desain
Bedasarkan sketsa tersebut, penulis mulai membuat desain dengan digital pada program Adobe Indesign. Penulis membuat hanya satu desain digital dari tiga alternatif sketsa tersebut.
23 Gambar 3. 4 Proses Desain Flyer Jababeka Residence
Gambar di atas merupakan hasil digitalisasi dari sketsa penulis, typeface dan warna merupakan sesuai dengan guidelines Rotterdam Jababeka yang sebelumnya sudah dibuat oleh Kamarupa Desgin Group, sedangkan foto juga menggunakan foto-foto yang telah digunakan di brosur sebelumnya.
Adapun typeface yang digunakan ialah Poppins, Helvetica, dan warna yang digunakan ialah brand color Rotterdam (biru donker, oranye, dan putih).
Gambar 3. 5 Proses Desain Flyer Jababeka Residence
24 Cover belakang & depan serta spesifikasi menggunakan mood yang sama dengan brosur Jababeka Residence yang sebelumnya telah dibuat oleh Kamarupa Design Group. Adapun hal yang berubah dari cover depan dan belakang hanyalah ukuran dan layouting tulisan yang menyesuaikan dengan ukuran flyer lipat.
3.3.1.5.Final Art
Gambar 3. 6 Digitalisasi Desain Flyer Jababeka Residence
Hasil akhir merupakan soft copy flyer lipat berukuran A4 saat terbuka, dengan mengikuti guidelines Rotterdam Jababeka Residence yang sebelumnya juga dibuat oleh Kamarupa Design Group. File inilah yang kemudian akan digunakan oleh Jababeka Residence untuk diprint dan dibagikan saat launching produk.
25 Gambar 3.7 Digitalisasi Desain Flyer Jababeka Residence
Desain tersebut diterima oleh Creative Director karena sudah sesuai arahan layouting dan mengikuti guidelines dari brosur sebelumnya dan diserahkan oleh Account Executive kepada client dalam bentuk soft copy. Client pun juga menyetujui desain tersebut karena sudah sesuai dengan guidelines yang sebelumnya dan siap naik cetak.
3.3.2. Perancangan Website Template Kamarupa (Project X)
Project X merupakan salah satu proyek berjalan Kamarupa, yakni merupakan proyek perancangan template website untuk dijual kepada client yang ingin membuat website namun memiliki keterbatasan waktu (ingin cepat selesai) dan budget.
3.3.2.1.Briefing
Briefing disampaikan langsung oleh Creative Director yang mengunjungi meja penulis saat di kantor, Proyek Project X bertujuan untuk menghasilkan template website siap pakai, yang dapat digunakan oleh berbagai klien dengan berbagai bisnis, maka dari itu template harus bersifat umum
26 sehingga dapat dipakai untuk berbagai jenis kategori bisnis. Template tersebut akan memiliki sitemap umum dengan fitur-fitur yang biasa digunakan pada website korporat lainnya.
Gambar 3. 7 Sitemap Project X
Gambar di atas merupakan sitemap dari Project X yang dibuat oleh Managing Director sendiri. Sitemap selalu dibuat oleh Managing Director sendiri karena untuk pembuatan sitemap, dibutuhkan pengetahuan tentang CMS pula sehingga tidak bisa sembarang orang yang membuat sitemap tersebut. Adapun isi sitemap merupakan fitur-fitur yang dibutuhkan untuk website yang akan dibuat.
3.3.2.2.Brainstorming & Konsep
Brainstorming dimulai dengan pencarian berbagai referensi template website dari berbagai website (wix, wordpress, shopify) yang kemudian didiskusikan bersama dengan Creative Director. Penulis mengumpulkan
27 referensi-referensi tersebut di dalam satu file dan disusun. Adapun referensi yang dicari penulis merupakan referensi bedasarkan sitemap (untuk halaman news & article, gallery, dsb.)
Gambar 3. 8 Referensi Project X
Konsep dibuat simpel, diutamakan untuk mudah digunakan dan sangat bersifat general mengingat template akan ditawarkan ke berbagai jenis client dengan kategori bisnis yang berbeda-beda pula. Template website dibuat seminimalis mungkin agar mudah menyesuaikan dengan mood dan brand color perusahaan yang nanti akan memakai template tersebut.
3.3.2.3.Sketsa
Penulis membuat sketsa kasar berupa layout fitur-fitur yang akan ada pada template tersebut bedasarkan referensi & brainstorming yang telah dilewati.
Adapun fitur yang dibutuhkan ialah homepage, about us, news, products,
28 services, dan footer. Sketsa yang dibutuhkan hanyalah sketsa kasar, untuk mengetahui proporsi dan layout materi yang akan dipakai untuk didigitalisasikan nantinya.
Gambar 3. 9 Sketsa Fitur Project X
Gambar di atas merupakan sketsa untuk fitur highlighted products atau highlighted services, pada alternatif pertama di sebelah kanan akan terdapat foto yang bisa digeser, dan di bagian kiri akan terdapat nama & deskripsi produk. Apabila user mengklik atau pun menghover di bagian gambar, gambar akan berubah menuju ke gambar produk sebelum maupun selanjutnya, deskripsi pun akan berubah mengikuti gambar tersebut. Pada alternatif kedua produk maupun servis dibuat serperti list tabel dimana di kiri terdapat gambar, dan di kanan terdapat nama dan deskripsi. Tabel tersebut akan bisa tersusun tergantung berapa banyak produk maupun servis yang di highlight. Produk secara horizontal akan menggunakan kelipatan dua dan secara vertikal menyesuaikan banyaknya produk/servis yang di highlight. Pada alternatif ketiga, konsep dibuat sama dengan alternatif
29 pertama namun dengan kondisi foto landscape dan berada di kiri, sedangkan tulisan nama dan deskripsi akan berada di kanan.
Gambar 3. 10 Sketsa Fitur Project X
Gambar di atas merupakan sketsa untuk fitur latest news. Pada alternatif news dibuat seperti list tabel yang akan berjejer sebanyak tiga secara horizontal. Pada list tabel tersebut akan terdapat gambar berbentuk
30 landscape yang dilengkapi dengan judul berita yang didampingi dengan block warna di depan foto thumbnail berita tersebut. Pada alternatif kedua dibuat foto selayar penuh yang akan menjadi background dari bagian latest news yang merupakan foto dari berita utama, dan di bagian atas foto tersebut terdapat judul artikel dan sedikit body text dari artikel yang direpresentasikan oleh foto tersebut serta terdapat tombol yang menuju ke artikel berita utama tersebut. Di bagian bawah foto tersebut akan terdapat list seperti alternatif satu yang jika dihover user akan bergeser dan menampilkan list berita lainnya. Alternatif tiga mengganti berita utama menjadi tidak terlalu besar, sehingga terdapat foto berita utama di kiri, judul berita di kanan dan terdapat tombol untuk langsung menuju berita utama tersebut. Di bawahnya juga terdapat list berita lainnya seperti alternatif satu.
Gambar 3. 11 Sketsa Fitur Project X
Gambar di atas merupakan sketsa untuk homepage. Adapun homepage dibuat sangat simple, hanya menampilkan navigation bar yang melayang di bagian atas, dengan background block warna yang mendampingi. Logo akan berada di tengah block warna tersebut, dan didampingi dengan sitemap di kiri dan kanan logo tersebut. Homepage akan diberi background berupa foto produk, dan judul di depan foto serta tombol untuk menuju ke detail page foto produk tersebut.
31 3.3.2.4.Proses Design
Berdasarkan proses brainstorming dan sketsa yang telah dibuat, penulis pun memulai digitalisasi desain template tersebut dengan menggunakan Figma, software UI design berbasis website. Proses desain dimulai dengan pembuatan wireframe dan kemudian diikuti oleh pemilihan warna & foto.
Adapun hierarki type yang digunakan H1 sebesar 60pt, H2 sebesar 48pt, H3 sebesar 34pt, H4 sebesar 24pt, menu 14pt, button 18pt, dan body text 16pt.
Gambar 3. 12 Proses Design Project X menggunakan Figma
Adapun grid yang digunakan pada perancangan website ini adalah 12 column grid, dengan gutter sebesar 24 dan margin 100. Selama merancang website, kegunaan grid tersebut membantu sebagai acuan dalam merancang website yang rapi dan enak dipandang maupun digunakan. Adapun ketentuan lainnya dalam perancangan website, hendaknya ukuran foto maupun icon merupakan kelipatan 4 pixel, dan untuk icon terkecil ukuran 16 pixel.
32 Gambar di atas merupakan digitalisasi wireframe yang telah dibuat, terdapat navigation bar dengan block sebesar 1240x60 pixel dengan jarak ke atas sebanyak 80 pixel. Logo berada di tengah block tersebut didampingi dengan button sitemap di kiri dan kanan. Halaman ini nantinya akan menggunakan foto sebagai background, dan di depan foto tersebut terdapat nama produk dan deskripsi produk, serta button yang menuju ke detail page produk.
Gambar di atas merupakan digitalisasi wireframe bagian About Us. Bagian ini tidak akan menggunakan foto, melainkan hanya akan ada text. Adapun
Gambar 3. 13 Wireframe Homepage
Gambar 3. 14 Wireframe About Us
33 hierarki yang digunakan untuk judul ini menggunakan H2 (48pt) dan deskripsi menggunakan body text (16pt).
Gambar di atas merupakan digitalisasi wireframe yang telah dibuat untuk bagian highlighted products. Setiap baris terdapat dua produk, di bagian kiri merupakan foto produk dengan dimensi 312x312 px dan bagian kanan block warna untuk tulisan nama produk dan deskripsi produk dengan ukuran 312x312px. Adapun ukuran tulisan yang digunakan yakni nama produk menggunakan H4 (24pt) dan deskripsi serta button menggunakan body text (16pt).
Gambar 3. 15 Wireframe Highlighted Products
34 Gambar di atas merupakan digitalisasi wireframe yang telah dibuat untuk bagian services, di bagian kiri terdapat text untuk nama service yang menggunakan H4(24pt) dan deskripsi servis yang menggunakan body text(16pt), di bagian kanan terdapat block untuk foto dengan dimensi 640x360px, gambar tersebut dapat berubah jika user menghover maupun mengklik ke arah kiri maupun kanan. Text di kiri pun akan berubah mengikuti perubahan gambar.
Gambar di atas merupakan digitalisasi wireframe untuk bagian news.
Adapun background di belakang merupakan foto berita utama dengan Gambar 3. 16 Wireframe Highlighted Services
Gambar 3. 17 Wireframe Highlighted Services
35 dimensi 1440x900px, didampingi dengan judul berita utama yang menggunakan H2(48pt) dan tulisan artikel menggunakan body text(16pt).
List tabel di bawah merupakan list berita-berita lainnya dengan dimensi thumbnail foto 345x240px dengan judul berita di bawah foto menggunakan body text (16pt). Apabila user menghover maupun mengklik bagian dekat list berita, akan memunculkan berita-berita lainnya juga.
Gambar di atas merupakan digitalisasi wireframe untuk bagian footer.
Footer akan mengandung media sosial dan alamat serta kontak perusahaan di bagian bawah.
3.3.2.5.Final Art
Setelah pembuatan wireframe, Creative Director mengusulkan untuk penulis memperkirakan satu bidang usaha dan langsung memasukkan foto dan mood warna ke dalam template website sesuai dengan bidang usaha tersebut, maka penulis memilih untuk terlebih dahulu mencoba bidang usaha kuliner, yakni mencoba apabila website digunakan untuk website toko cupcake. Penulis memutuskan untuk menggunakan mood warna girly, yang diwakilkan oleh monokromatik warna pink, karena cupcake yang merupakan kue manis yang seringkali dibentuk dan dihias dengan menggemaskan, merupakan kegemaran wanita, mulai dari anak perempuan bahkan hingga remaja.
Gambar 3. 18 Wireframe Footer
36 Gambar 3. 19 Wireframe Footer
Gambar di atas merupakan color palette yang penulis pakai untuk menciptakan girly mood tersebut. Adapun warna yang lebih mendominasi merupakan warna pink yang paling tua, didampingi dengan warna pink dengan saturasi yang berbeda-beda lainnya. Untuk text digunakan warna putih, hitam dan abu-abu.
Gambar 3. 20 Pemilihan foto
37 Adapun foto-foto yang digunakan penulis merupakan foto-foto cupcake yang dekorasinya terlihat manis dan menarik, cenderung banyak warna pastel, untuk menyatukan dengan mood warna yang sebelumnya telah ditentukan oleh penulis. Foto-foto yang dipilih merupakan foto-foto cupcake yang juga berbeda-beda warna, untuk menghindari feeling monoton.
Gambar di atas merupakan hasil wireframe ketika sudah diberi foto dan warna, untuk homepage kali ini penulis mencoba background foto berisikan foto beberapa foto produk yang dikolase menjadi satu. Penulis melakukan ini untuk menunjukkan bahwa template ini dapat digunakan dengan implementasi kolase juga, bukan hanya dengan satu foto yang dibuat lebar sebagai background. Hal ini juga dilakukan untuk membuktikan bahwa template tersebut fleksibel.
Gambar 3. 21 Homepage
38 Gambar di atas merupakan hasil bagian About Us dengan text judul dan deskripsi yang telah diubah menjadi warna pink, menyesuaikan dengan konsep mood yang dibuat penulis. Adapun mood yang diinginkan penulis merupakan kesan girly, dan warna pink mendukung untuk mood girly tersebut.
Gambar 3. 22 About Us
Gambar 3. 23 Highlighted Products
39 Gambar di atas merupakan gambar bagian Highlighted Products setelah dimasukkan gambar dan warna. Penulis menggunakan block warna pink muda dan pink muda agar tidak terlihat monoton dan menyaruh. Body text menggunakan warna putih agar terlihat di bagian pink muda maupun tua.
Gambar di atas merupakan gambar bagian Highlighted Services setelah dimasukkan gambar dan warna. Adapun perubahan yang terjadi hanyalah sedikit saja. Pada bagian ini penulis menggunakan hanya satu warna pink tua, dan text menggunakan warna putih.
Gambar 3. 24 Highlighted Services
Gambar 3. 25 Latest News
40 Gambar di atas merupakan gambar bagian Latest News setelah dimasukkan gambar dan warna. Penulis melakukan penggelapan (penurunan exposure) pada background untuk menghindari ketidakterbacaan text yang berada di depan background tersebut. Setelah penurunan exposure, text yang berada di atas foto tersebut menjadi jauh lebih terbaca.
Gambar 3.24 Footer
Untuk bagian footer penulis menggunakan background dengan warna pink pastel dan text & icon menggunakan warna pink tua, sebagai variasi karena semua background lainya hanya menggunakan warna putih. Variasi tersebut membuat laman menjadi terlihat tidak terlalu monoton.
3.3.2.6.Revisi I
Setelah menunjukkan final art kepada Creative Director lewat Google Meeting, saya mendapatkan beberapa masukkan yang perlu kembali diperbaiki, diantaranya adalah mengubah bagian About Us, karena terlihat terlalu padat tulisan. Selain itu pada bagian News, layout dinilai agak riskan karena posisi gambar yang luas dan adanya tulisan body text yang menimpa gambar tersebut, sehingga sangat memungkinkan terjadinya kesulitan membaca body text tersebut. Selain itu, footer juga belum lengkap sesuai dengan sitemap yang ada, sehingga penulis juga diusulkan untuk mengubah layout dan melengkapi fiturnya. Lain dari itu, template disarankan untuk dicoba menjadi bidang usaha lain, untuk menguji fleksibilitas dari template website tersebut. Akhirnya saya mengubah ketiga layout bagian tersebut menjadi sebagai berikut:
Gambar 3. 26 Footer
41 Gambar 3. 27 Revisi I About Us
Bagian About Us dibuat menjadi dua kolom dengan posisi judul menggunakan H2 (48pt) di kiri dan deskripsi menggunakan body text (16pt) berada di kanan. Penulis mengubah layout menjadi seperti ini atas dasar usul Creative Director, agar bagian tersebut tidak terlihat terlalu padat dan area membaca baca tidak terlalu luas sehingga mata user tidak lelah.
Gambar 3. 28 Revisi I Latest News
Gambar di atas merupakan hasil revisi bagian Latest News yang dilakukan penulis, layout diubah menjadi seperti ini untuk menghindari kemungkinan terjadinya ketidakterbacaan pada bagian judul dan deskripsi berita utama seperti pada layout sebelum direvisi. Dengan dibuat seperti ini, tidak ada
42 tulisan yang menimpa foto, sehingga tulisan terlihat jelas di background polos.
Gambar 3. 29 Revisi I Footer
Gambar di atas merupakan perubahan yang terjadi pada bagian Footer, adapun perubahan yang terjadi ialah penulis melengkapi fitur yang dibutuhkan yakni sitemap yang menggunakan body text (16pt), dan mengubah layout menjadi compact yakni membuat logo dan alamat sejajar sehingga tidak memakan tempat seperti gambar di atas. Hal ini memnghasilkan footer yang pendek, tidak terlalu memanjang ke bawah.
3.3.2.7.Revisi II
Setelah menunjukkan revisi pertama tersebut kepada Creative Director lewat Google Meeting, akhirnya Creative Director meminta penulis untuk melakukan final touch berupa penambahan spacing pada tiap-tiap komponen fitur yang terlihat masih padat, mengubah button menjadi hanya stroke saja agar terlihat lebih clean, melakukan centering tulisan agar body text selalu berada di tengah-tengah foto, menngubah posisi logo pada navigation bar menjadi ke pinggir untuk menghindari logo yang kurang terlihat/ menyaruh, tampilan highlighted products cukup empat buah saja, serta mengubah foto menjadi foto-foto yang lebih classy. Adapun hasil akhirnya menjadi seperti berikut:
43 Gambar 3. 30 Revisi II Homepage
Penulis mengubah Navigation Bar sesuai arahan Creative Director, yakni menjadikan logo berposisi di kiri, dan di kanan button untuk sitemap, untuk menghindari penyaruhan terjadi antara logo dengan button sitemap. Penulis juga mengubah button frame menjadi hanya stroke untuk menambah kesan clean, serta mengganti H1 dengan family light, karena bold terlihat terlalu
“strong” menurut Creative Director. Penulis juga mengganti foto dengan foto yang lebih classy dan didominasi warna dark colors.
Gambar 3. 31 Revisi II About Us
Pada About Us, penulis juga melakukan perubahan berupa penggantian judul H1 menjadi family light karena menggunakan sebelumnya menggunakan bold dan terlihat terlalu “berat”, dan penulis juga mengurangi konten deskripsi, karena nantinya bagian About Us memang hanya akan mengandung sedikit konten, penulis juga menghilangkan button learn more sesuai arahan Creative Director.
44 Gambar 3. 32 Revisi II Highlighted Products
Pada Highlighted Products, penulis menghilangkan bagian pricing, dan menambahkan space dari pinggir kotak ke tulisan, sehingga terkesan lebih lega. Foto dan warna juga disesuaikan dengan mood baru, classy. Penulis juga mengubah button frame menjadi hanya stroke sesuai arahan Creative Director untuk menambah kesan clean.
Gambar 3. 33 Revisi II Highlighted Services
Pada Highlighted Services, penulis mengubah bagian foto menjadi tidak berframe dan langsung menempel pada block warna di belakang, sesuai dengan usul Creative Director, karena foto-foto di halaman lain pun full, sehingga menjadi seragam. Foto dan warna pada fitur ini juga disesuaikan
45 dengan mood baru, serta button frame yang juga dijadikan stroke seperti halaman lainnya.
Gambar 3. 34 Revisi II Latest News
Halaman Latest News berubah pada frame button yang disamakan dengan halaman lain yakni mengganti block dengan stroke untuk menambah kesan clean. Penulis juga mengubah foto menjadi foto-foto dengan nada yang sewarna, bernuansa abu coklat, serta mengubah warna sesuai dengan mood baru. Adapun mood baru menggunakan warna abu-abu.
Gambar 3. 35 Revisi II Footer
Halaman Footer hanya berubah warna menyesuaikan dengan mood yang baru. Layouting tetap sama seperti sebelum direvisi, yakni logo dan alamat serta media sosial sejajar, dengan sitemap di atas dan copyright di bawah.
Tidak banyak hal yang berubah.
46 3.3.3. Perancangan E-Catalogue Make Over MUA Pick
MUA Pick merupakan salah satu project Make Over untuk menndekati para make up artists di Indonesia agar turut menggunakan Make Over dan mensupport brand lokal. MUA Pick juga bertujuan untuk menarik make up artist yang ada di Indonesia untuk mulai memakai produk Make Over, ataupun untuk menarik make up artists yang sudah menggunakan Make Over untuk menambah produk lagi, dan untuk mencapai hal tersebut tim Make Over mempercayakan Kamarupa untuk membuat E-Catalogue tersebut dengan mengikuti guidelines E- commerce banner yang sebelumnya telah dibuat.
3.3.3.1.Briefing
Brief disampaikan oleh Account Executive melalui E-mail, untuk membuat E-Catalogue sesuai dengan guideline MUA Pick yang sebelumnya sudah dibuat, penulis diberi excel berupa data bundling yang berisi list produk yang akan ada di dalam E-catalogue tersebut.
Gambar 3. 36 Brief E-Catalogue MUA Pick
3.3.3.2.Brainstorming & Konsep
Penulis menggunakan guidelines dari Make Over berupa E- commerce banner dan referensi cover sebagai konsep visualnya. Selain itu, penulis juga mempelajari mood dari brand Make Over sendiri dengan melihat konten
47 poster & digital banner milik Make Over serta mencari referensi layout untuk katalog.
Gambar 3. 37 Moodboard Make Over
Digital banner dan poster-poster Make Over sebelumnya didominasi oleh brand color hitam dan fuschia, seringkali menggunakan swatch makeup, serta menggunakan beberapa jenis typeface yang mirip brush stroke.
48 Gambar 3. 38 E-Commerce Banner MUA Pick
Gambar di atas merupakan referensi E-Commerce Banner yang sebelumnya telah dibuat dan merupakan salah satu produk turunan program MUA Pick, dan akan menjadi guidelines penulis dalam membuat E-Catalogue. Adapun warna-warna yang digunakan merupakan brand color Make Over, yakni fuschia, hitam, dan putih. Ornament yang digunakan pada umumnya merupakan swatches dari make up yang dimiliki Make Over.
49 Gambar 3. 39 Referensi Cover
Gambar di atas merupakan referensi Cover E-Catalogue Make Over sebelumnya. Klien meminta penulis untuk membuat cover yang sejenis dengan cover tersebut, agar terlihat seragam dengan E-Catalogue Make Over lainnya. Adapun ornamen yang digunakan merupakan penggabungan dari swatches make up milik Make Over, dan ornamen-ornamen simpel seperti garis dan bulat.
3.3.3.3.Sketsa
Penulis membuat sketsa beberapa alternatif layout yang memungkinkan dan cocok dengan materi yang disediakan Make Over.
50 Gambar 3. 40 Sketsa layout E-Catalogue MUA Pick
Pada alternatif pertama, dalam satu halaman akan dimuatkan tiga bundling yang berbaris ke bawah, dan terdapat judul/ nama bundling di bagian atas halaman, sedangkan pada alternatif kedua akan dimuatkan empat bundling yang dibagi dua baris serta terdapat judul di bagian atas halaman. Untuk alternatif ketiga dan keempat, keduanya memuat dua bundling, namun untuk alternatif ketiga terdapat pembatas berupa kotak dan di alternatif keempat produk dibiarkan plong tanpa frame.
3.3.3.4.Proses Desain
Penulis diminta untuk membuat beberapa digitalisasi alternatif awal, maka bedasarkan sketsa dan referensi yang telah dibuat, penulis membuat empat alternatif layout, yakni layout satu, tiga (2 model), dan empat.
51 Gambar 3. 41 Digitalisasi E-Catalogue MUA Pick
Penulis membuat Digitalisasi pada software Adobe Illustrator, dan langsung membuat empat alternatif yang nantinya akan langsung diserahkan ke klien untuk dipilih. Adapun alternatif yang dibuat merupakan hasil digitalisasi dari sketsa kasar yang telah dibuat sebelumnya. Alternatif-alternatif tersebut akan dikirimkan kepada klien sebagai pilihan, sehingga klien dapat memilih yang diinginkan dan nantinya akan diturunkan ke konten-konten lainnya.
52 3.3.3.5.Final Art
Penulis membuat alternatif pertama, dengan isi konten tiga bundling yang membaris ke bawah dan posisi judul di bagian atas serta harga masing masing di sebelah kanan bundling. Adapun kelebihan dari layout ini ialah dapat memuat banyak konten dalam satu halaman dengan keterbacaan yang masih cukup jelas. Katalog juga terlihat rapi karena setiap bundling dibatasi oleh framenya sendiri.
Gambar 3. 42 Alternatif 1 layout E-Catalogue MUA Pick
53 Gambar 3. 43 Alternatif 2 Layout E- Catalogue MUA Pick
Sedangkan untuk alternatif kedua hanya berisikan dua bundling, tanpa frame di tiap bundlingnya, dan kedua frame tersebut dibatasi oleh sebuah garis tengah yang sama dengan frame luar. Kelebihan dari layout ini ialah keterbacaan yang sangat jelas, dan user dapat melihat gambar dengan seksama karena gambar cukup besar jika dibandingkan alternatif pertama.
Tulisan nama produk pun juga terlihat sangat jelas karena cukup besar.
54 Gambar 3. 44 Alternatif 3 Layout E-Catalogue MUA Pick
Sedangkan untuk alternatif ketiga juga hanya berisikan dua bundling, menggunakan frame di tiap bundlingnya sebagai pengganti pembatas tengah. Layout ini memiliki keterbacaan yang cukup jelas, karena hanya memuat sedikit konten. Tulisan dan gambar produk dapat terlihat dengan nyata dan cukup besar.
55 Gambar 3. 45 Alternatif 4 Layout E-Catalogue MUA Pick
Sedangkan untuk alternatif terakhir kurang lebih sama dengan alternatif kedua tetapi pembatas diganti hanya dengan menggunakan garis tipis, sebagai variasi agar berbeda dengan frame luar. Keterbacaan dan keterlihatan gambar cukup besar, konten yang dimuat tentunya lebih sedikit dari alternatif satu. Adapun nama produk dan harga juga terlihat sangat jelas karena cukup besar.
56 Gambar 3. 46 Alternatif 1 cover E-Catalogue MUA Pick
Alternatif cover menggunakan referensi dari klien dan mengikuti seperti cover E-catalogue lainnya, yang penulis ubah pada alternatif pertama yakni menggunakan frame luar yang persis dengan isi konten catalogue, yakni frame hitam dengan bercak-bercak swatch makeup yang dimainkan opacitynya sehingga menimbulkan kesan seragam, serta pergantian swatches dan dekorasi.
57 Gambar 3. 47 Alternatif 2 cover E-Catalogue MUA Pick
Alternatif cover kedua juga menggunakan referensi dari klien dan mengikuti seperti cover E-catalogue lainnya, tetapi tidak menggunakan frame, sehingga cover dibuat plong saja. Cover terlihat lebih luas dan clean, tetapi tidak terlalu sergam dengan konten, karena seluruh konten menggunakan frame hitam seperti di alternatif satu.
3.3.3.6.Revisi
Klien memilih alternatif layout kedua tetapi ingin menambahkan sedikit dekorasi agar tidak terlalu polos, sehingga penulis membuat revisi dengan menambahkan sedikit dekorasi. Adapun dekorasi yang ditambahkan merupakan ornament garis-garis yang diusulkan oleh klien. Penulis menambahkan dekorasi tersebut di pinggir halaman sehingga catalogue tidak terlalu terlihat polos.
58 Gambar 3. 48 Revisi 1 layout E-Catalogue MUA Pick
3.3.3.7.Revisi II
Klien sudah setuju dengan desain tersebut, tetapi masih ingin menambahkan konten paket bundling yang sebelumnya tertinggal. Klien juga ingin menambahkan label “buy 6 get 1” serta tulisan “one pack worth” di atas setiap pricing sehingga penulis menambahkan konten dan atribut tersebut.
59 Gambar 3.52 Revisi 2 layout E-Catalogue MUA Pick
E- Catalogue MUA Pick berakhir dengan konten 6 halaman dengan layout per halaman terdapat dua buah bundling. Di setiap halaman terdapat judul bundling dan gambar-gambar produk sesuai dengan bundlingnya. Adapun
60 cover yang dipilih oleh klien, merupakan cover alternatif 1 dan tidak mengalami perubahan.
3.3.4. Kendala yang Ditemukan
Selama praktik kerja magang, penulis menemukan beberapa kendala saat mengerjakan brief yang diberi. Adapun kendala-kendala tersebut diantaranya sebagai berikut.
• Penulis tidak fasih dalam menggunakan software Adobe Indesign
• Penulis tidak fasih dalam menggunakan software Figma
• Saat WFH, terkadang beberapa brief kurang jelas karena disampaikan secara tertulis (e-mail) sehingga terkadang bermakna ganda.
• Saat mengerjakan beberapa brief dengan file yang berat, seringkali hardware penulis kurang memadai sehingga terkadang pengerjaan menjadi lambat.
3.3.5. Solusi Atas Kendala yang Ditemukan
Untuk mengatasi kendala-kendala yang ditemukan, tentu penulis melakukan solusi agar pekerjaan tidak terhambat, adapun solusi yang dilakukan oleh penulis adalah sebagai berikut.
• Penulis mulai belajar mendalami software Adobe Indesign karena Adobe Indesign merupakan salah satu software yang sangat dibutuhkan khusunya untuk membuat katalog dan buku. Penulis mempelajari Adobe Indesign dengan bertanya kepada Creative Director ketika tidak mengetahui cara menggunakan fitur-fitur tertentu, dan juga menonton tutorial di YouTube hingga penulis bisa mengoperasikan software tersebut.
• Saat penulis diminta Creative Director untuk membuat template website, penulis sama sekali belum pernah menggunakan software Figma, sehingga penulis belajar software tersebut di rumah, dengan mencoba-coba membuat self-project, dan belajar dari website material.io serta menonton tutorial di YouTube, akhirnya penulis pun terbiasa untuk menggunakan software tersebut.
61
• Setelah pernah salah mengerjakan brief karena salah pemahaman saat membaca lewat e-mail, penulis selalu memastikan kembali pemahaman penulis akan brief tersebut dengan mengkonfirmasi brief tersebut kepada Account Exective lewat WA, penulis bertanya sampai brief tersebut menjadi sangat jelas untuk menghindari kesalahan dalam membuat desain.
• Ketika berhadapan dengan brief yang memiliki konten cukup banyak, penulis berusaha untuk membagi beberapa konten tersebut menjadi beberapa file, karena jika dilakukan sekaligus dalam satu file, software yang digunakan penulis seringkali crash, atau bahkan hardware mengalami blue screen/lag.
