BAB III
KONSEP PERANCANGAN
A. Konsep Karya
Praktis dan dapat dibawa ke manapun menjadi keunggulan yang ditawarkan oleh laptop dan smartphone. Tidak hanya untuk komunikasi atau sekedar browsing laptop dan smartphone memiliki beragam fitur yang bermanfaat bagi manusia, baik yang memudahkan pekerjaan manusia hingga sebagai sarana hiburan yang bisa selalu tersedia dan dapat dinikmati kapan saja. Layanan fitur-fitur tersebut dikemas ke dalam website yang dapat di akses secara bebas. Memiliki pasar yang begitu potensial dengan target audiens yang luas, sebuah website dapat menjangkau beragam kalangan baik tua hingga muda, golongan ekonomi menengah hingga atas.
Hal tersebut menjadi pertimbangan dalam ide membuat website agar menjadi lebih baik dan siap untuk digunakan pengguna siapa saja, kapan saja, berbagai kalangan umur dan tempat di seluruh Indonesia bahkan dunia.
Dalam pembuatan sebuah website terdapat tahapan penting yang perlu dilalui yaitu pembuatan user interface(UI) dan user experience (UX). User interface meliputi pembuatan desain website secara tampilan yang baik, enak dilihat namun tetap nyaman untuk dilihat. Mengolah warna, typography hingga layout komponen website menjadi inti dari desain user interface. Sedangkan user experience adalah mengenai pembuatan konsep dari alur kerja sebuah website yang membuat pengguna nyaman, mudah menggunakannya dan menjadi favorit
commit to user
pengguna hingga menguntungkan dari segi bisnis baik untuk pengguna dan khususnya pengembang website tersebut. Maka dari itu, dalam sebuah website, user interface dan user experience sangat berkaitan. Diawali dengan melakukan riset kepada calon pengguna hingga memulai proses pembuatan desain prototype.
Berikut beberapa langkah-langkah pembuatan sebuah prototype website di antaranya:
1. Riset Pengguna (User Research)
Bagan 3.1 Perancangan Prototype Website (Sumber: Dokumen pribadi penulis, 2020 Riset Pengguna
(User Research)
Pemilihan Perangkat Lunak
(software)
Pembuatan User Flowmap
Pembuatan Low Fidelity Design
Ujicoba Testing
Pembuatan Prototype
Pembuatan High Fidelity Design
Publikasi
commit to user
Riset Pengguna dalam pembuatan sebuah website dilakukan setelah menentukan topik permasalahan yang akan dibuat penyelesaiannya sebagai sebuah website yang ditujukan bagi pengguna dan juga pembuat. Data yang dicari dari proses riset adalah pengetahuan tentang kebiasaan pengguna seperti usia, kebiasaan, selera, dan apa yang menjadi kebutuhan pengguna.
pemilihan warna, pemilihan jenis typopgrafi, penempatan komposisi layout, pembuatan alur kerja website dan semua hal yang berkaitan dengan sistem keseluruhan sebuah website itu nantinya.
2. Pemilihan Perangkat Lunak (Software)
Tahapan selanjutnya adalah desain, hal yang perlu diperhatikan yaitu mempersiapkan perangkat lunak (software) yang akan digunakan untuk bekerja.
Umumnya akan digunakan 2 software untuk membuat design webiste yakni untuk pembuatan komponenkomponen visual dari website dan pembuatan prototype website.
Penulis menggunakan perangkat lunak dari product Adobe Creative Suits yaitu Adobe Illustrator sebagai sofware pembuat kebutuhan ilustrasi maupun icon dan Adobe XD untuk membuat User Interface dan prototype website, karena memiliki kelebihan bisa digunakan di sistem operasi Windows maupun Mac OS dan penulis sudah terbiasa dengan sofware tersebut.
commit to user
3. Pembuatan User Flowchart
Gambar 3.1 contoh Flowchart pada desain website (Sumber: medium.com, 2018)
Flowchart merupakan sebuah diagram yang berisi tahapan alur (user flow) yang harus dilakukan pengguna dalam menggunakan website untuk mendapatkan suatu informasi atau suatu hal yang diinginkan. User flow yang mudah dan praktis akan memiliki dampak positif kepada pengguna yang akan merasa nyaman saat mengoprasikan webiste, dan tentunya juga pengguna akan merasakan pengalaman yang baik serta menyenangkan saat menggunakan sebuah website.
Pada website juragankost.id yang merupakan website pelayanan, user flow yang sederhana dan efisien sangat penting karena akan memberikan kemudahan dan kenyamanan pada saat pengguna mengoprasikan Webiste yang ditujukan untuk beragam kalangan.
commit to user
4. Pembuatan Low Fidelity Design
Gambar 3.2 contoh Low Fidelity Design pada webiste (Sumber: dribbble.com, 2018)
Low Fidelity Design merupakan versi sederhana dari desain yang akan kita buat. Biasanya, low fidelity design berupa sketsa awal dari desian yang dibuat manual di kertas. Tujuan dari low fidelity design adalah untuk mencari umpan balik awal dari sebuah desain yang telah dibuat sebelum melangkah ke proses high fidelity design dan masih berfokus kepada tatanan layout.
commit to user
5. Pembuatan High Fidelity Design
Gambar 3.3 contoh High Fidelity Design pada webiste (Sumber: gravitatedesign.com, 2018)
High Fidelity Design lebih menyerupai desain yang telah jadi, high fidelity design lebih berfokus kepada fungsi interaksi dan desain yang akan ditampilkan. Dalam proses ini, desainer lebih berfokus kepada user flow yang akan dibuat serta mengamati hambatan apa yang terjadi sebelum berlanjut ke tahap prototyping.
6. Pembuatan Prototype
Gambar 3.4 proses pembuatan prototype pada website (Sumber: xfive.co, 2017)
commit to user
Setelah pembuatan user flow dan penyusunan layout yang digunakan sudah sesuai, mulailah proses pembuatan prototype dan penyempurnaan desain dari proses low-fi dan high-fi.
7. Ujicoba (Testing)
Pada tahapan ini, hasil protoype yang sudah dikerjakan akan diuji guna mengetahui hal apa saja yang masih harus dibenahi, bug yang terjadi, dan semua sudah berfungsi secara optimal. Setelah pengujian sebuah prototype memiliki hal yang harus dibenahi, maka pada proses ini hasil prototype tersebut dilakukan penyempurnaan.
8. Publikasi
Gambar 3.5 Contoh iklan website mamikost.com (Sumber: projects.co.id/, 2017)
Sesuai dengan tujuan awal agar sebuah website dapat dijangkau oleh masyarakat luas, perlu dilakukan upaya publikasi dan promosi nantinya. Promosi dan publikasi ini bisa dilakukan dengan cara memanfaatkan iklan baik di media cetak, media elektronik dan media digital. Iklan di media cetak bisa dilakukan
commit to user
dengan penggunaan poster yang dimuat di surat kabar atau juga dengan flyer yang dibagikan langsung kepada masyarakat pada saat promosi dilakukan. Sedangkan melalui media digital bisa memanfaatkan fitur iklan pada media sosial seperti Facebook, Instagram, dan Twitter hingga pada akhirnya nanti dapat dijangkau dan digunakan oleh masyarakat saat mengeklik iklan tersebut.
B.
Konsep Perancangan
Menurut Kamus Besar Bahasa Indonesia (KBBI), definisi perancangan yaitu proses, cara, perbuatan merancang. Merancang yaitu mengatur segala sesuatu sebelum bertindak, mengerjakan, atau merencanakan (kbbi.web.id; diakses tanggal 16 Juni 2020 pukul 09.44))
Sebuah perancangan berisi tahapan-tahapan atau proses yang harus dilakukan, hal pertama yang dilakukan yakni riset mengenai permasalahan apa yang akan diselesaikan, menentukan solusi dan membuat strategi yang bertujuan pada penyelesaian suatu masalah tersebut. Dalam perancangan sebuah desain terdapat berbagai variasi strategi guna mencapai sebuah solusi yang diinginkan, berikut merupakan strategi dalam perancangan desain website juragankost.id
1. Strategi Kreatif
Dalam sebuah perancangan, kreativitas merupakan hal penting sebagai sebuah bumbu dalam pembuatan karya, guna memperindah sebuah desain dan juga menarik minat pengguna untuk menggunakan website dan juga mencapai tujuan pembuatan karya. Adapun strategi kreatif meliputi:
commit to user
a. Gaya Desain
Gaya desain yang digunakan yakni gaya desain minimalist, clean atau sederhana dan bersih. Gaya desain tersebut digunakan karena disesuaikan dengan user persona dan gaya desain yang tengah menjadi tren dan cocok untuk segala usia bagi penggunanya.
Gambar 3.6 Contoh design minimalist clean website (Sumber: designbeep.com, 2020)
b. USP (Unique Selling Prepossition)
Juragankost.id memberikan dan menawarkan informasi yang akurat sesuai kebutuhan penggunanya karena bersumber langsung daripemilik kost yang mengupload data kost yang mereka tawarkan dan dikurasi oleh team juaragankost.id sebelum di approve ke website juragankost.id.
Memiliki fitur untuk pembayaran yang mudah dan diskusi ke platform commit to user
lain seperti whatsapp jika ingin berdiskusi lebih lanjut oleh pemilik kost.
Selain itu, tampilan menarik juga menjadi daya tarik tanpa mengurangi fokus dari fungsi website tersebut.
2. Strategi Visual
a. Strategi Visual Secara Umum
1) Menggunakan warna gradasi sebagai warna utama sebagai corak warna utama untuk mengutamakan prinsip sederhana, berwibawa dan modern serta menambah ornament visual untuk menambah nilai estetika pada desain
2) Penggunaan typeface dan font yang membuat user nyaman pada saat menggunakan website juragankost.id sehingga informasi dan pelayanan dapat tersampaikan dengan optimal.
3) Menggunakan user flow yang sederhana dan ringkas guna memudahkan pengguna dalam mengoprasikan juragankost.id.
4) Menggunakan beberapa icon dan ilustrasi untuk memudahkan user untuk mengidentifikasi fitur dan menu tersedia serta agar pesan atau informasi yang disampaikan bias lebih jelas dan tidak membosankan 5) Menampilkan desain website yang disesuaikan dengan kebutuhan
pengguna, menyeimbangkan sisi fungsi dan sisi estetis dari desain juragankost.id yang membuat website ini menarik
b. Strategi Visual Verbal
Pesan verbal merupakan pesan yang berupa kata-kata dan disampaikan melalui media tertentu. Dalam sebuah produk digital, pesan verbal berupa
commit to user
proses UX Writter di mana semua text masuk ke dalamnya. Pada website juragankost.id, terdapat beberapa hal yang masuk ke dalam UX Writter di antaranya pada
1) Judul (Headline)
Dengan penekanan ukuran huruf yang paling besar, headline merupakan elemen verbal yang paling penting dan menonjol.
Terletak di bagian paling atas dan tentunya menjadi daya tarik pertama yang dibaca oleh pengguna. Pada website juragankost.id headline digunakan untuk menunjukan judul dari informasi dan layanan yang akan ditampilkan.
2) Teks Inti (bodycopy)
Bagian dari visual yang berisi uraian detail atau merupakan inti dari teks disebut dengan bodycopy. Bodycopy bisa diartikan sebagai penjelas dari headline, yang menjelaskan uraian dari headline dan tentunya lebih panjang dari headline. Bodycopy di website juragankost.id berisi deskripsi, uraian, atau keterangan yang secara detail ditampilkan sebagai informasi. Bahasa yang digunakan merupakan bahasa Indonesia yang tidak terlalu baku mengingat agar pengguna juga tidak terlalu tegang dan merasa enyoy atau santai saat membacanya, namun tentunya tetap menggunakan bahasa yang singkat dan jelas agar mudah dipahami.
commit to user
c. Strategi Non Visual Verbal 1) Logo
Logo merupakan identitas visual utama yang memiliki nilai-nilai tertentu dari sebuah perusahaan, brand, maupun organisasi tertentu.
Dengan melihat logo, perusahaan, brand, maupun organisasi mudah dikenali antara satu dengan yang lainnya. Sebuah logo diciptakan sebagai identitas visual utama. Dalam website juragankost.id, logo website memiliki konsep yang mewakilkan website tersebut. Logo website juaragankost.id merujuk pada bentuk rumah sebagai hunian, huruf “J” pada tengah logo yang berasal dari inisial brand juaragnkost.id dan di kemas dalam icon gps yang menandakan hunian dari juragan kost dapat dicari dengan mudah.
a) Konfigurasi Logo
Gambar 3.7 Konfigurasi logo Juaragankost.id Sumber: raikudesign.com 2019
b) Color Guide
Gambar 3.8 Color Guide logo Juaragankost.id Sumber: Dokumentasi pribadi penulis, 2020 c) Grid commit to user
Gambar 3.9 Grid logo Juaragankost.id Sumber: Dokumentasi pribadi penulis, 2020 d) Scale
Gambar 3.10 Logo Scale Juaragankost.id Sumber: Dokumentasi pribadi penulis, 2020 2) Icon
Gambar 3.11 Contoh Icon Sumber: www.androidcentral.com, 2020
commit to user
Icon merupakan sebuah tanda visual yang mewakilkan sebuah benda nyata, ide, gagasan yang ada. Dalam sebuah website. Oleh karena itu, pemilihan ukuran icon yang akan digunakan juga penting agar tetap nyaman dilihat. Dalam pembuatan icon sendiri, terdapat beberapa gaya desain, di antaranya solid style, outline style, filled line style, dan flat style dan detail icon. Dan tentunya dalam setiap gaya desain memiliki karakteristiknya masingmasing. Penulis menggunakan gaya desain detail icon dan outline yang sedikit disesuaikan untuk icon yang digunakan di website juragankost.id, dengan gaya desain yang minimalist dan clean hal tersebut menjadi alasan penulis memilih gaya desain tersebut.
3) Tipografi
Merupakan perpaduan antara ilmu seni dan teknik mengatur tulisan, agar maksud serta arti tulisan dapat tersampaikan dengan baik secara visual kepada pembaca. Tipografi juga dikenal dengan seni rupa huruf (type design), yakni karya atau desain yang menggunakan huruf sebagai elemen utama. Setiap jenis huruf memiliki karakter yang berbeda, pemilihan huruf harus menyesuaikan kebutuhan penyampaian informasinya dan topik atau hal yang ingin disampaikan. Untuk itu, untuk website juragankost.id, penulis menggunakan font Open Sans dari Googlefont yang memiliki karakter clean, minimalist, dan elegan. Font ini termasuk 38 dalam kategori typeface Sans Serif. serta memiliki license open source yang
commit to user
dapat digunakan untuk keperluan komerisan atau non komersial Bentuk dan karakter dari font Opensans ini divisualisasikan seperti:
Gambar 3.12 Font Glyphs Sumber: fonts.google.com, 2020 4) Warna
Warna merupakan elemen penting dari sebuah desain, warna dapat memberikan kesan dan ciri khas terhadap suatu desain dengan karakteristiknya yang unik. Pemilihan warna yang tepat bisa mendukung penyampaian pesan yang akan disampaikan kepada pengguna. Maka dari itu, warna yang digunakan dalam website juragankost.id sebagai berikut:
a) Warna Primer
(1) Warna Biru muda
Warna arti biru mudah diyakini bisa merangsang kemampuan berkomunikasi, ekspresi artistic dan juga sebagai simbol kekuatan. Berdasarkan cara pandang ilmu psikologi warna biru tua mampu merangsang pemikiran yang jernih dan biru muda membantu menenangkan pikiran dan meningkatkan konsentrasi. Wanra biru muda menjadi main color atau warna utama pada juragankost.id agar
commit to user
penggunanya dapat lebih konsentrasi dan nyaman saat mencari informasi yang pengguna cari.
Gambar 3.13 warna biru mudah perancangan Sumber: Dokumentasi pribadi penulis, 2020
(2) Warna Gradasi Biru muda
Penambahan gradasi untuk menambah nilai estetik agar desain tidak datar dan memiliki volume penekanan yang tidak terlalu dilihat namun bisa dirasakan akan membuat desain semakin terasa elegant, minimalist, dan clean
Gambar 3.14 Warna gradasi biru mudah perancangan Sumber: Dokumentasi pribadi penulis, 2020
(3) Warna Putih, Alice Blue dan Abu-abu
Warna Putih, Alice Blue dan Abu-abu dalam webiste juragankost.id dimaksudkan sebagai white space atau area kosong sebagai salah satu elemen dari desain. Area kosong ini agar mata tidak lelah saat membaca maupun
commit to user
menggunakan website ini. Warna ini juga memberi kesan minimalis dan clean.
Gambar 3.15 Warna putih perancangan Sumber: Dokumentasi pribadi penulis, 2020
Gambar 3.16 Warna Alice Blue perancangan Sumber: Dokumentasi pribadi penulis, 2020
Gambar 3.17 Warna Abu abu perancangan Sumber: Dokumentasi pribadi penulis, 2020 b) Warna Sekunder
(1) Warna Orange
Warna kuning digunakan sebagai warna aksen pada perancangan website, warna ini digunakan di beberapa
commit to user
atribut pada website juragankost.id seperti pada tombol atau atribut tertentu guna fokus mata pengguna dapat terarah.
Gambar 3.18 Warna Orange perancangan Sumber: Dokumentasi pribadi penulis, 2020
3. Perancangan Media a. Strategi Utama
Perancangan desain website juragankost.id menggunakan perangkat lunak Adobe XD untuk proses prototyping, dan menggunakan Adobe Illustrator untuk kebutuhan ilustrasi dan icon. Desain yang dirancang sesuai dengan ukuran layar dari default untuk laptop yang berukuran Width 1440px untuk webiste dan Height minimal 900px atau sesuai kebutuhan page. Hal ini dikarenakan menurut penulis pengguna dari laptop di Indonesia itu banyak dan mencakup segala usia juga berbagai kalangan. Berikut beberapa bagian utama dari perancangan desain website juragankost.id, di antaranya:
1) Landing Page (Home)
Landing Page adalah tampilan awal dari sebuah website, di page ini umumnya paling banyak memiliki konten karna sebagai page utama dari sebuah website, dan pada juragankost.id landing page menjadi halaman utama dari website ini
commit to user
2) About Us
Abous Us adalah sebuah halaman pada website yang berisikan konten tentang infomasi data dari pemilik website sepeti riwayat perusahaan, visi, misi perusahaan, dan lain-lain.
3) Contact Us
Page contact us tentunya berisikan tentang informasi terperinci mengenai kontak dari website tersebut agar dapat di hubungi dengan mudah jika pengguna memiliki suatu pertanyaan khusus yang tidak tersedia di FAQ.
4) Download App
Pada page download app Berisikan tentang informasi untuk versi mobile atau android, namun pada juaragan kost fitur menu ini masih bersifat “coming soon” atau “segera datang” penulis tetap menyediakan fitur ini karna secara tidak langsung memeprkenalkan juragankost.id versi app sehingga dapat memperkenalnya pengguna sejak dini.
5) Fidelity Design Frequently Asked Question (FAQ )
Sebagai website yang masih baru dan layanan yang belum begitu banyak dikenali pengguna, website juragankost.id menyediakan menu FAQ yang memiliki kepanjangan dari Frequenly Asked Question yang berisi kumpulan pertanyaan beserta jawaban yang sering ditanyakan oleh pengguna. Tanpa perlu menghubungi costumer service terlebih dahulu, pengguna dapat mencari pertanyaan
commit to user
yang sesuai dengan hal-hal yang kurang dipahami atau ingin ditanyakan terkait website di menu ini. Form Cari kost
6) Form Pencari kost
Untuk menu ini terdapat di landing page dan merupakan menu utama dimana pengguna ingin menemukan informasi yang mereka cari mengenai kost, terdapat beberapa fitur lain selain pencari kost.
Seperti rental mobil, jasa angkut, laundry, catering, dan furniture namun pada saat ini fitur ini masih dalam pengembangan.
7) Log-In
Pada dimana pengguna untuk masuk dengan akun yang sudah mereka punya dan mengisikan data mereka karna dengan menggunakan akun agar pengguna dapat mengakses semua fitur website dan memiliki data diri.
8) Sign-Up
Berbeda dengan Log-in, Sign-Up bagi pengguna juragankost.id yang belum memiliki akun bisa membuat akun dan mengisi data di page ini.
9) Karir
Page karir adalah page untuk pengguna yang ingin berkarir bersama juragankost.id, page ini penting karna usia juragankost.id sedniri yang masih muda, disini terdapat info lowongan pekerjaan bagi juragankost.id sesuai yang diminati pelamarnya
10) Bergabung Jadi Mitra commit to user
Tidak semua pengunjung juragankost.id bertujuan untuk mencari kost, tapi juga dapat untuk mempromosikan kostnya, fitur ini bagi pemilik kost yang ingin bergabung menjadi mitra bersama juragankost.id
11) Chat Page
Sebuah page untuk mengobrol atau berdiskusi antara pengguna dan pemiliki kost agar semua sesuai dengan apa yang di rencanakan atau harapkan.
12) Bergabung Jadi Mitra
Tidak semua pengunjung juragankost.id bertujuan untuk mencari kost, tapi juga dapat untuk mempromosikan kostnya, fitur ini bagi pemilik kost yang ingin bergabung menjadi mitra bersama juragankost.id
13) Payment Page
Payment page merupakan page untuk pengguna mengurus data dan pembayaran agar semua data informasi dan pembayaran berjalan dengan baik.
14) Note Page
Berbeda dengan payment page, Note page adalah page dimana status pembayaran berada, biasanya juga terdapat inromasi terperinci untuk pembayaran dan waktu jatuh tempo masa pembayaran berlangsung sebelum kadaluarsa.
commit to user
b. Media Pendukung
Dalam rangka promosi dan memperkenalkan website juragankost.id pada calon pengguna, diperlukan beberapa media pendukung untuk menjelaskan website dan menarik perhatian dari calon pengguna hingga pada akhirnya calon pengguna akan menggunakan website tersebut.
Beberapa media yang akan digunakan untuk mendukung kegiatan promosi website juragankost.id ialah:
1) Poster
Poster yang dibuat untuk menarik minat calon pengguna ini akan dimuatkan di media cetak seperti surat kabar dan majalah dan media digital seperti media sosial. Menggunakan tampilan yang menarik, diharapkan calon pengguna dapat tertarik untuk menggunakan website juragankost.id ini.
2) Roll Banner
Dalam kegiatan promosi, roll-banner dapat ditempatkan di dekat kegiatan promosi langsung. Memiliki tingkat keterbacaan yang tinggi dan ukuran yang tidak terlalu memakan tempat, roll-banner merupakan media promosi yang fleksibel dan efisien.
3) Merchandise
Salah satu upaya untuk menarik calon pengguna dapat juga dengan memberikan hadiah karena semua orang akan senang diberikan hadiah. Juga untuk membuat calon pengguna teringat dengan website
commit to user
juragankost.id. Beberapa merchandise yang akan dibuat adalah pin, stiker, dan kaos.
4) Iklan Social Media
Penggunaan media sosial di Indonesia yang tinggi, membuat iklan di media sosial menjadikan beriklan di media sosial sangat efektif dan dapat menjangkau segmentasin yang luas.
4. Referensi Perancangan
Perancangan desain website Juragankost.id menggunakan berbagai referensi visual website design dari sumber yang beragam seperti thebestdesign, Behance dan dribbble. Berikut beberapa referensi visual guna menunjang perancangan desain antarmuka website Juragankost.id
Gambar 3.19 Referensi perancangan Design Website Juragankost.id Sumber: thebestdesigns.com/, 2020
commit to user
Gambar 3.20 Referensi perancangan Design Website Juragankost.id Sumber: dribbble.com/, 2020
Gambar 3.21 Referensi perancangan Design Website Juragankost.id Sumber: dribbble.com/, 2020
commit to user
Gambar 3.22 Referensi perancangan Design Website Juragankost.id Sumber: dribbble.com/, 2020
5. Estimasi Biaya Produksi
Estimasi biaya pembuatan desain website design dan media pendukung promosi Juragankost.id yaitu:
N o
Prediksi Ukura n
Jumla h
Satuan Total
1. Desain Website (Prototype)
- 1 Paket - Rp.
20.000.000,-
2. Domain website
- 3
Tahun
Rp.2.000.000 ,-
Rp.2.000.000 ,- 3. baju XS, S,
M, L
50 pcs Rp.60.000,- Rp.
3.000.000,- 4. X-banner 25 x
40 cm
10pcs Rp. 50.000,- Rp. 500.000,-
commit to user
5. poster 42 x29,7
100 pcs
Rp.2.000,- Rp. 200.000,-
6. Pin 5.8 cm 100pcs Rp. 2.300,- Rp. 230.000,- 7. Iklan
1080px x 1080px
30 hari Rp.
2.000.000,-
Rp.
2.000.000,-
8. Iklan twitter 1080px x 1080px
30 hari Rp.
1.000.000,-
Rp.
1.000.000,-
9. Iklan Facebook
1080px x 1080px
30 Hari Rp.
1.000.000,-
Rp.
1.000.000,-
10 Bill Board (Advertistin
g)
10m x 5m
60 hari Rp.
18.000.000,-
Rp.
8.000.000,-
11 Topi M
(50-60 cm)
100pcs Rp.35.000 Rp.
3.500.000,-
12 Totebag 60cm x 70cm
100pcs Rp.5,000,- Rp.5,00,000,-
TOTAL Rp. 55.430.000,-
commit to user
6. Pra Produksi dan Produksi a. Pra Produksi
Proses sebelum produksi yaitu dilakukan pengumpulan informasi tentang Juragankost.id, target market yang dituju, wawancara dengan team Juragankost.id terkait dan pencarian referensi mengenai website sejenis.
Proses riset pengguna ini untuk menentukan layout, gaya desain, serta konten yang disajikan dalam website guna meningkatkan kepuasan dan kenyamanan pengguna dalam menggunakan website juragankost.id.
b. Produksi
Berikut adalah beberapa hal yang digunakan sebagai acuan dalam perancangan desain website Juragankost.id:
1) Perangkat Lunak
a) Adobe Illustrator CC 2020
Perangkat lunak ini digunakan untuk membuat segala kebutuhan desain seperti pembuatan desain ilustrasi, dan icon.
b) Adobe XD 2020
Adobe XD 2020 merupakan perangkat lunak untuk keperluan desain antarmuka dan pembuatan prototype. Penulis menggunakan perangkat lunak ini sebagai pengolahan desain antarmuka serta proses pembuatan prototype.
2) User Flow
User flow merupakan komponen penting dalam pembuatan desain antarmuka, yakni sebagai acuan dalam pembuatan halaman/screen.
commit to user
User flow berisi acuan untuk pengguna dalam menyelesaikan suatu tugas dalam sebuah website. Berikut merupakan user flow dari website Juragankost.id :
Gambar 3.23 User Flow website Juragankost.id Sumber: Dokumentasi probadi penulis, 2020
3) Low Fidelity Design berupa wireframe
Proses setelah pembuatan user flow adalah pembuatan low fidelity design. Dalam hal ini, penulis membuat low fidelity design langsung dalam bentuk wireframe digital agar pengerjaan lebih ringkas karena low-fi ini merupakan proses sketsa dari layout tampilan website yang akan dibuat. Low fidelity design nantinya akan menjadi acuan pembuatan high fidelity design yang menyerupai desain utuh. Berikut adalah tampilan low fidelity design yang telah penulis buat:
commit to user
a) Low-fidelity Design Lanidng Page
Gambar 3.24 low fidelity Landing Page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
b) Low-fidelity Design About Us
Gambar 3.25 Low fidelity about us Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
c) Low-fidelity Design Contact Us
Gambar 3.26 Low fidelity contact us Juragankost.id Sumber: Dokumen pribadi penulis, 2020
d) Low-fidelity Design Download App
Gambar 3.27 Low fidelity comingsoon app. Juragankost.id Sumber: Dokumen pribadi penulis, 2020
e) Low-fidelity Design Frequently Asked Question (FAQ )
commit to user
Gambar 3.29 Low fidelity FAQ. Juragankost.id Sumber: Dokumen pribadi penulis, 2020
f) Low-fidelity Chat Page
Gambar 3.30 Low fidelity chat page. Juragankost.id Sumber: Dokumen pribadi penulis, 2020
g) Low-fidelity Career Page commit to user
Gambar 3.31 Low fidelity career page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
h) Low-fidelity Search Result
Gambar 3.32 Low fidelity search result page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
i) Low-fidelity Detail Result
Gambar 3.33 Low fidelity detail result page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
j) Low-fidelity Log-In Page
Gambar 3.34 Low fidelity log-in page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
k) Low-fidelity Sign-Up Page
Gambar 3.35 Low fidelity sign up page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
l) Low-fidelity Verification Page
Gambar 3.36 Low fidelity vericication page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
m) Low-fidelity payment step one Page
Gambar 3.37 Low fidelity payment step one Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
n) Low-fidelity payment step two Page
Gambar 3.38 Low fidelity payment step two Juragankost.id Sumber: Dokumen pribadi penulis, 2020
o) Low-fidelity Note Page
Gambar 3.39 Low fidelity payment step one Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
4) Pembuatan High Fidelity Design
Gambar 3.40 Proses Pembuatan High Fidelity dengan Adobe XD 2020 Sumber: Dokumen pribadi penulis, 2020
Setelah low fidelity design selesai dikerjakan, proses selanjutnya adalah pembuatan high fidelity design yang merupakan desain yang sudah jadi. Proses perancangan desain disesuaikan dengan low fidelity design dan mempercantik tampilan tanpa mengurangi sisi keterbacaan dan kenyamanan dari pengguna
5) Proses Prototyping
Gambar 3.41 Proses Prototyping dengan Adobe XD 2020 Sumber: Dokumen pribadi penulis, 2020
commit to user
Setelah desain selesai dikerjakan, langkah yang dilakukan yaitu membuat prototype. Pengerjaan desain dan proses prototype bisa dikatakan tidak sama, karena ada beberapa bagian dari desain yang harus ditata ulang agar sesuai dengan prototype yang dikehendaki.
Dari proses pembuatan low fidelity design hingga proses prototype, penulis menggunakan perangkat lunak Adobe XD 2020.
6) Pengujian Desain Antarmuka
Sebelum desain dikatakan selesai, dilakukan pengujian terhadap user flow, dan tentunya desain qwbsite agar mengetahui apa saja yang masih kurang dan perlu diperbaiki
7) Pembuatan Media Promosi Pendukung
Media pendukung yang digunakan untuk mempromosikan website juaragankost.id mengikuti design guide dari aplikasi seperti warna, logo, icon, serta tipografi. Media yang digunakan sama seperti yang dijelaskan di atas yaitu Baju, totebag, roll-banner, flayer, iklan di Billboard, dan merchandise seperti pin dan juga topi, serta iklan di media sosial seperti Facebook, Instagram, dan Twitter.
commit to user
C. Visualisas Karya
1. Karya Utama Desain Website Juragankost.id a) Landing Page
Gambar 3.42 Landing Page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
b) Design About Us
Gambar 3.43 About us Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
c) Lo-fidelity Design Contact Us
Gambar 3.44 Contact us Juragankost.id Sumber: Dokumen pribadi penulis, 2020
d) Download App Page
Gambar 3.45 Download app page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
e) Frequently Asked Question (FAQ ) page
Gambar 3.46 FAQ page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
f) Chat Page
Gambar 3.47 Chat page. Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
g) Career Page
Gambar 3.48 Career page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
h) Search Result
Gambar 3.49 Search result page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
i) Detail Result
Gambar 3.50 Detail result page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
j) Log-In Page
Gambar 3.51 Log-in page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
k) Sign-Up Page
Gambar 3.52 Sign up page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
l) Verification Page
Gambar 3.53 Vericication page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
m) Payment Step One Page
Gambar 3.54 Payment step one Juragankost.id Sumber: Dokumen pribadi penulis, 2020
n) Payment Step Two
Gambar 3.55 Payment step two Juragankost.id Sumber: Dokumen pribadi penulis, 2020
commit to user
o) Note Page
Gambar 3.56 Note Page Juragankost.id Sumber: Dokumen pribadi penulis, 2020
2. Karya Pendukung a. Roll Bannner
commit to user
Gambar 3.57 Roll Banner Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 60x160cm Media : MMT
Elemen Desain : Logo, Headline, Subheadline Teknik : Digital imaging
b. Baju
Gambar 3.58 Baju Polo Juragankost.id Sumber: Dokumen pribadi penulis, 2020 Ukuran : - Ukuran S : 43 cm X 60 Cm ( Lebar x Panjang)
- Ukuran M : 48 cm x 65 cm ( Lebar x Panjang) - Ukuran L : 50 cm x 68 cm ( Lebar x Panjang) - Ukuran XL : 52 cm x 72 cm ( Lebar x Panjang) Media : Kaos Polo
Elemen Desain : Logo, Headline Teknik : Clothing Printing
commit to user
c. Pin
Gambar 3.59 Pin Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 5,8cm Media : PIN
Elemen Desain : Logo, Headline Teknik : Digital imaging
d. Poster
Gambar 3.60 Poster Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : A3
Media : Art Paper 150gram
commit to user
Elemen Desain : Logo, Headline, Ilustrasi, Subheadline Teknik : Digital Printing
e. Iklan Instagram
Gambar 3.61 Iklan instagram Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 1080px x 1080px Media : Digital
Elemen Desain : Logo, Headline, Ilustrasi, Subheadline Teknik : Digital Imaging
f. Iklan Twitter
commit to user
Gambar 3.62 Iklan Twitter Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 1080px x 1080px Media : Digital
Elemen Desain : Logo, Headline, Ilustrasi, Subheadline Teknik : Digital Imaging
g. Iklan Facebook
commit to user
Gambar 3.63 Iklan Fcebook Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 1080px x 1080px Media : Digital
Elemen Desain : Logo, Headline, Ilustrasi, Subheadline Teknik : Digital Imaging
h. Totebag
commit to user
Gambar 3.64 Totebag Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 60cm x 80cm Media : Kain
Elemen Desain : Logo, Headline Teknik : Digital Printing
i. Bill Board
Gambar 3.65 Iklan Billboard Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : 6 meter x 12 meter
commit to user
Media : MMT
Elemen Desain : Logo, Headline, Ilustrasi, Subheadline Teknik : Digital Printing
j. Topi
Gambar 3.66 Topi Juragankost.id Sumber: Dokumen pribadi penulis, 2020
Ukuran : M 50cm x 60cm Media : Topi
Elemen Desain : Logo, Headline, Teknik : Digital Printing
commit to user
