IV KONSEP PERANCANGAN A. TATARAN LINGKUNGAN/KOMUNITAS Perancangan website FDSK UMB ini bertujuan sebagai media promosi dan informasi untuk para siswa sekolah SMA/sederajat yang akan segera melanjutkan kejenjang perguruan tinggi, sehingga para siswa dapat melihat berbagai informasi yang ada pada Fakultas Desain dan Seni Kreatif UMB. Website FDSK UMB juga membantu mahasiswa dalam mencari informasi seputar perkuliahan, pengumuman dan event yang ada dilingkungan Univrsitas Mercu Buana. Website FDSK juga didesain dengan konsep responsive web design untuk yang membutuhkan tampilan website yang dapat diakses melalui perangkat seperti tablet dan smartphone. Seiring perkembangan teknologi, hampir setiap orang saat ini memiliki smartphone, hal ini membuat desain pada sebuah website harus mampu menyesuaikan ukuran perangkat dimana website diakses. Namun, saat ini masih ada banyak website yang belum mendukung tampilan pada smartphone, melihat keadaan tersebut, penulis membuat desain website FDSK UMB dengan konsep responsive web design. B. TATARAN SISTEM 1. Penyebaran dan Pemanfaatan Karya Penyebaran karya dilakukan lewat akses internet yang dapat diakses secara online dari berbagai perangkat, seperti laptop, PC, tablet dan smartphone. Namun sebelum proses penyebaran, dibutuhkan domain dan hosting yang berfungsi untuk menyimpan berbagai data yang ada pada website FDSK UMB, sehingga website akan dapat diakses secara online. Penyebaran karya dapat dilakukan melalui media sosial yang dimiliki FDSK UMB, seperti melalui Fanspage Facebook, Twitter dan Instagram. Secara tidak langsung penyebaran juga dilakukan melalui situs utama Mercu Buana, yakni www.mercubuana.ac.id yang memiliki link menuju website FDSK UMB. 25
Cara penyebaran lainnya bisa dilakukan menggunakan metode beriklan di internet atau sosial media melalui jasa Facebook Ads, Instagram Ads, Google Adword, Google Adsense, atau jasa iklan lainnya. Selain itu teknik SEO (Search Engine Optimization) yang telah diterapkan oleh penulis, memungkinkan website dapat diakses melalui mesin pencari (Google, Yahoo, Bing, dll) dengan beberapa kata kunci yang telah ditargetkan. 2. Cara Kerja Karya Cara kerja website FDSK ini terbilang mudah, pengguna hanya tinggal mengakses website dari perangkat gadget masing-masing dengan nama domain FDSK UMB. Penulis juga menerapkan SEO (Search Engine Optimization) pada website FDSK UMB, agar dapat diakses lewat mesin pencari dengan beberapa kata kunci yang telah ditargetkan, diantaranya, fakultas desain dan seni kreatif, fdsk mercu buana, fakultas desain, kuliah jurusan desain di jakarta, fsrd, desain produk mercu buana, desain interior mercu buana dan dkv mercu buana. C. TATARAN PRODUK 1. Rancangan Awal (wireframe) Wireframe adalah kerangka dasar dari sebuah halaman web yang akan dirancang. Di dalam wireframe ini dibuat elemen-elemen penting dari halaman web tersebut pada posisinya masing-masing seperti elemen header, body, content, menu navigasi, logo, banner, dan footer maupun fitur-fitur lainnya yang ada dalam web yang akan dirancang. Secara visual tampilan dari wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dari masing-masing elemen dari layout halaman web. Berikut ini adalah rancangan wireframe website FDSK UMB berdasarkan perangkat gadget, yaitu melalui PC Desktop, Tablet dan Smartphone. 26
Gambar 4.1 Wireframe PC Desktop Website FDSK Mercu Buana Gambar 4.2 Wireframe Tablet Website FDSK Mercu Buana 27
2. Sitemap Sitemap atau peta situs berisi informasi link atau halaman-halaman yang ada pada suatu website. Berikut ini adalah rancangan sitemap website FDSK UMB. Gambar 4.3 Wireframe Smartphone Website FDSK Mercu Buana Gambar 4.4 Sitemap Website FDSK Mercu Buana 28
3. User Interface a) Tampilan Komputer Desktop Gambar 4.5 Halaman Depan Website FDSK Mercu Buana Pada Layar PC Desktop Pada tampilan komputer desktop, telah ditentukan beberapa breakpoint atau ukuran lebar layar, yakni resolusi lebar layar 1024 pixel, 1280 pixel, 1366 pixel, hingga 1920 pixel. Pada tampilan home, pengunjung akan melihat beberapa elemen wajib (selalu ada pada setiap halaman) sepeti, logo, banner, menu navigasi dan bagian footer. Elemen lainnya yang terlihat pada halaman home antara lain, bagian Program Studi yang memiliki akses navigasi menuju masing-masing halaman program studi. Gambar 4.6 Elemen Program Studi 29
Bagian lainnya yaitu, Area Galeri, bagian ini berisi menu navigasi menuju halaman Galeri FDSK. Gambar 4.7 Elemen Area Galeri Tepat dibawah area galeri, terdapat bagian Area Even yang memiliki menu navigasi menuju halaman Acara, dimana halaman ini berisikan mengenai informasi even, seminar, pengumuman seputar perkuliahan, info lomba, dll. Bagian ini juga disertai dengan slideshow otomatis. Gambar 4.8 Elemen Area Even 30
b) Tampilan Tablet Gambar 4.9 Halaman Depan Pada Layar Tablet Tampilan tablet memiliki ukuran resolusi lebar layar antara 600 pixel hingga 960 pixel dan mengalami banyak penyesuaian, seperti posisi logo yang berada ditengah, banner dihilangkan dan semua gambar memiliki ukuran yang lebih kecil. Saat proses coding, semua ukuran gambar dibuat menggunakan satuan persen (%), sehingga ukuran gambar akan menyesuaikan ukuran dari lebar web browser. 31
c) Tampilan Smartphone Gambar 4.10 Halaman Depan Pada Layar Smartphone Pada tampilan layar ponsel, tidak ada perbedaan yang signifikan jika dibandingkan pada layar tablet, hanya saja elemen slideshow dihilangkan, dengan alasan website akan terasa lebih lama diakses pada smartphone apabila menggunakan elemen yang menggunakan efek animasi. D. TATARAN ELEMEN 1. Header Sesuai dengan namanya, bagian ini merupakan kumpulan elemen yang ada pada posisi atas halaman web, yang terdiri dari elemen logo, banner, menu navigasi dan beberapa elemen tambahan lainnya, berikut penjelasannya. a) Logo Gambar 4.11 Logo Mercu Buana dan Logo FDSK UMB Logo yang digunakan penulis pada website FDSK UMB adalah logo Universitas Mercu Buana dan Logo FDSK UMB. Penggunaan logo Mercu Buana yang dibuat berdampingan dengan logo FDSK bertujuan agar menjelaskan bahwa identitas website Fakultas Desain dan Seni Kreatif ini 32
merupakan dari Mercu Buana, dikarenakan logo FDSK UMB belum dikenal oleh masyarakat luas. b) Banner Pada bagian header penulis menyisipkan banner dengan ukuran asli 812 x 122 pixel (pada layar laptop), penggunaan banner ini bertujuan sebagai media promosi dan informasi yang akan menyampaikan kepada pengunjung bahwa Universitas Mercu Buana telah mendapatkan akreditasi A dari BAN-PT. Banner ini hanya muncul pada layar PC Desktop, sedangkan pada layar tablet dan ponsel dihilangkan, karena tidak cukup ruang untuk penempatannya. c) Menu Navigasi Menu navigasi memiliki penyesuaian ketika diakses pada layar tablet dan smartphone, karena semakin kecilnya ukuran layar, membuat menu navigasi harus mengalami penyesuaian yang signifikan. Konten dari menu navigasi disembunyikan dan akan muncul ketika hamburger icon diklik dan logo tersebut akan berubah menjadi close icon untuk menutup konten menu navigasi. Gambar 4.12 Banner Gambar 4.13 Responsive Menu Navigasi 33
d) Sosial Media Elemen lainnya yaitu icon social media, terdapat tiga icon, diantaranya, yaitu icon Facebook, Instagram dan Twitter. Masing-masing icon tersebut memiliki eksternal link yang mengarah ke sosial media FDSK UMB. Gambar 4.14 Responsive Menu Navigasi e) Pilihan Bahasa Gambar 4.15 Icon Sosial Media Elemen terakhir pada bagian header adalah pilihan bahasa, penulis membuat website FDSK UMB ini dengan dua bahasa, yakni bahasa Inggris sebagai bahasa default yang digunakan pada website ini dan bahasa Indonesia. Menggunakan dua bahasa bertujuan agar bisa menjangkau audience yang lebih luas. 34
Gambar 4.16 Pilihan Bahasa 2. Body Elemen body atau bagian badan dari sebuah halaman website terletak setelah header, pada bagian ini umumnya berisi mengenai konten dan informasi-informasi utama yang menjadi tujuan sebuah website. Berikut ini adalah beberapa elemen yang ada pada bagian body. a) Slideshow Gambar 4.17 Slideshow Pada halaman home, penulis menempatkan gambar-gambar slideshow yang menampilkan kegiatan-kegiatan terbaru FDSK UMB, slideshow bergerak secara manual, sehingga pengunjung harus mengklik tombol next atau previous untuk melihat gambar atau informasi lainnya. 35
b) Automatic Slideshow Masih pada halaman home, pada bagian even area, penulis menempatkan gambar slideshow namun bergerak secara otomatis, sehingga pengunjung tidak bisa mengatur munculnya gambar. Gambar yang tampil pada slideshow menginformasikan mengenai even terbaru yang ada dilingkungan Universitas Mercu Buana dan pengumuman seputar perkuliahan. c) Konten Gambar 4.18 Automatic Slideshow Gambar 4.19 Konten Elemen terakhir pada bagian body adalah sebagai wadah konten yang menampilkan berbagai informasi yang ada pada FDSK UMB. 3. Footer Dan terakhir adalah elemen footer, yang terletak dibagian paling bawah halaman web. Pada website FDSK UMB, elemen footer berisikan logo program studi yang memiliki link menuju halaman masing-masing program studi, area 36
pendaftaran yang memiliki link menuju halaman pendaftaran kuliah Universitas Mercu Buana, logo Mercu Buana yang memiliki navigasi menuju halaman utama website Mercu Buana dan beberapa menu navigasi lainnya serta copyright. 4. Tipografi Penggunaan huruf pada website FDSK UMB ini, penulis menggunakan berapa font umum yang banyak dimiliki oleh sistem operasi windows, Linux ataupun Mac OS. Pada bagian menu navigasi, jenis font yang digunakan adalah Sans-Serif, pada bagian judul konten menggunakan font Trebuchet MS dan untuk isi konten, karena umumnya memiliki paragraf yang banyak, sehingga penulis menggunakan font Georgia yang merupakan jenis huruf Serif (huruf dengan kait) agar memudahkan pengunjung untuk membacanya. Gambar 4.20 Elemen Footer 5. Warna Penulis menerapkan variasi warna pada beberapa halaman dan elemen, ada pada sebagian halaman yang menggunakan scheme color, namun makna dari warna tersebut bukan berarti hanya untuk halaman tersebut, melainkan untuk memaknai keseluruhan website. berikut ini adalah penjelasan mengenai penggunaan warna pada website FDSK UMB. 37
a) Warna Biru Warna biru yang ada pada halaman program studi DKV, secara psikologi warna ini mampu merangsang pikiran yang jernih yang dapat memicu timbulnya kreativitas. b) Warna Hijau Skema warna hijau digunakan pada halaman program studi Desain Interior yang secara psikologis dapat merangsang kreativitas, penulis memaknainya sebagai mental kreativitas yang harus dimiliki oleh seorang mahasiswa, khususnya mahasiswa dibidang desain dan seni, karena kreativitas akan memicu timbulnya sebuah gagasan. c) Warna Merah Penulis menerapkan skema warna merah pada halaman program studi Desain Produk, penulis mempresentasikan warna merah sebagai keberanian seorang mahasiswa untuk menciptakan sebuah gagasan yang inovatif dan bermanfaat bagi banyak khalayak umum. d) Warna Hijau Tosca Sedangkan warna hijau tosca yang penulis gunakan pada bagian elemen footer, untuk mewakili warna dari Fakultas Desain dan Seni Kreatif Universitas Mercu Buana. 6. Layout Layout yang dirancang hanya menggunakan satu kolom dan menerapkan jenis layout responsive, yaitu penggabungan dari jenis layout fixed dan fluid. Layout ini juga disebut elastis, karena ukuran layout web yang akan selalu menyesuaikan ukuran web browser atau perangkat yang mengakses website. 38