IV
KONSEP PERANCANGAN
A. Ide/Gagasan Perancangan 1. Ide Desain
Adapun ide perancangan website ini memiliki keunikan tersendiri, yakni menggunakan nama Mat Bedu. Istilah Mamat / Mat identik dengan nama panggilan orang betawi, sedangkan Bedu nama orangnya. Kemudian untuk istilah dari nama tersebut diuraikan untuk menjadi lebih bermakna lagi, sehingga nama dan isi materi website ini menjadi satu kesatuan yakni MATERI BELAJAR & EDUKASI.
2. Inovasi Desain
Alasan pemilihan nama website ”Mat Bedu” (Materi Belajar dan Edukasi) menjadi daya tarik tersendiri dalam inovasi desain ini, karena ingin mengangkat karakter tokoh betawi yang diharapkan anak-anak akan mencerna apa yang disajikan dengan karakter tersebut.
B. Sasaran Desain
Dalam berusaha untuk mengefektifkan desain website yang dibuat, Target Pasar perlu ditentukan agar website bisa lebih jelas dan bisa memperoleh hasil yang masksimal.
Demografis Geografis
a. Anak-anak usia 6 s/d 12 th a. Jangka Panjang, wilayah DKI Jakarta
b. Pria & Wanita
c. Pendidikan Sekolah Dasar
d. Strata Sosial Menengah &
Menengah ke bawah
Psikografis Behaviouristik
a. Anak yang mengerti Komunikasi & Teknologi a. Anak yang tidak bisa lepas dari apa b. Anak yang Dinamis & Modern yang namanya koneksi internet
Gb 8. Sasaran Desain
C. Pendekatan Estetis Desain
Analisa dan data yang telah ditetapkan pada bab sebelumnya diuraikan/dijelaskan bertujuan untuk memaknai etnik betawi sebagai unsur grafis dan menjadi penggayaan (Styling) kemudian di olah menjadi rangkuman data yang diambil untuk menetapkan suatu keputusan dalam perancangan desain.
D. Muatan Lokal dalam Perancangan Karya Desain
Perancangan karya Desain ini adalah ingin lebih mengembangkan sebuah tema tentang budaya lokal khususnya budaya Betawi, yang dirasakan kian hari kian terpinggirkan oleh kemajuan jaman, atas dasar inilah desainer ingin mengembangkan karya grafis yang berlandaskan tradisi sebuah budaya Betawi. Kultur budaya Betawi sangat menarik untuk di kembangkan dalam website ini berkaitan dengan hal yakni Sejarah Betawi, Bahasa, Tarian, Seniman, hingga Makanan.
E. Proses Perancangan (Strategi Desain)
Ada enam tahapan proses mendesain website, namun secara garis besar tahapan tersebut bisa dikelompokkan menjadi tiga tahapan. Tahapan itu adalah sebagai berikut :
a. Pra-Produksi b. Produksi
Gb 9. Proses Perancangan
a. Pra Produksi
1) Definisi Projek
a.1 Wawancara Klien
Karena pada Projek kali ini penulis membuat website online untuk diri sendiri maka proses wawancara klien tidak dilakukan dan penulis menggunakan metode 5w + 1h.
What
Ingin membuat Website online yang unik dengan menggunakan teknologi terkini.
Where
When
Diluncurkan atau dipublikasikan pada saat pameran Tugas Akhir.
Why
Kebutuhan pribadi untuk memilih website sebagai unjuk gigi bagi penulis dalam berkarya.
Who
Target Pasar bisa dilihat pada halaman 15. How
Website ini menggunakan teknologi terkini. Penggunaan Javascript sebagai pengganti flash dalam membangun interaktifitas dengan pengunjung.
a.2 Brief Projek
Tema yang diangkat dalam website ini adalah untuk melestarikan kebudayaan betawi secara utuh dengan menampilkan ke khasannya, sehingga dapat bermanfaat bagi dunia pendidikan di tanah air.
a.3 Persona (Kepribadian Tampilan)
Website yang dibuat ingin ditampilkan dengan warna cerah sehingga sesuai dengan ide awal yaitu ingin membuat website dengan penggunaan karakter Mat Bedu.
a.4 Spesifikasi Teknis yang dibutuhkan
Ukuran : 1366 x 768 px (resolusi LCD 19 inch dan resolusi laptop
Layout : Horisontal
Warna : Kecenderungan warna hijau
Software : Adobe Photoshop & Illustrator, Notepad + Text Editor, Instant WP (web server untuk
Localhost), CMS Wordpress
Lainnya : OS Windows 7, Browser Chrome, IE8 Dan Firefox, Plugin web developer Google Chrome, ColorPic (Color Picker) Font Picker (software memilih huruf) Domain : www. matbedu.com
Hosting : kapsasitas 100mb Jenis Website : Dinamis
a.5 Timeline Projek
Merencanakan batasan waktu Projek ini agar bisa selesai tepat pada waktunya. Berikut adalah estimasi penghitungan lamanya waktu pengerjaan:
Gb 12. Timeline Projek
b. Produksi
Tahapan yang dilakukan dalam proses produksi diantaranya adalah :
1. Membuat Struktus Situs 2. Desain Visual
3. Mengembangkan Situs
4. Membangun & Mengintegrasikan Situs 5. Pengujian
1. Membuat Struktur Situs
Konten yang ingin ditampilkan selanjutnya akan dikelompokan sesuai konsep multimedia.
a. Media Teks
Penggunaan font dipilih berdasarkan karakteristik website ini. Huruf pada judul yang digunakan adalah tipe Komika Text Bold, hal ini dilakukan untuk menambah unsur personalitas dalam web. Adapun teks pada bagian konten menggunakan font san serif untuk menunjukkan kesan dinamis & tidak kaku.
b. Media Audio
Penulis akan menggunakan audio berupa musik yang memungkinkan pengunjung merasa nyaman dan tenang dan tidak menggunakan sound pada button.
c. Media Video
Tidak ada video dalam website ini mengingat tidak ada kebutuhan penulis untuk menampilkan video.
d. Media Graph/Image
Penggunaan gambar latar mengambil suasana Jakarta saat ini yang penuh dengan gedung-gedung bertingkat dan salah satu ikon kota Jakarta yakni Monas (Monumen Nasional).
Gb 13. Proses Pembuatan Background
e. Media Warna
Penggunaan warna cerah dapat memberikan suasana yang nyaman dan dapat menarik minat anak-anak untuk mengunjungi website ini.
f. Diagram Situs
MENU CATEGORY ARTIKEL
Home Home
Sambutan
Profil Profil Visi & Misi
Tujuan
Muatan Nasional Link BSE
Lokal Kebudayaan Betawi Informasi Informasi Bantuan Pendaftaran Berita Berita Jakarta Fair Festival Kemang
Kontak & Saran Kontak Kami
Nama Email Pesan Send Pencarian Pencarian Gb 15. Diagram Situs
Pemetaan pada website bertujuan agar perencanaan web akan semakin mudah dan mempermudah sistem navigasi nantinya. Dengan melakukan hal demikian maka urutan halaman akan lebih mudah dibuat dan struktur website akan semakin rapih.
Banyaknya halaman utama ialah enam halaman, diantaranya: Home, Profil, Muatan, Informasi, Berita, Kontak & Saran
Keterangan:
Home, Sebagai tampilan awal website
Profil, Informasi mengenai profil pemilik website Muatan, Menampilkan muatan Nasional & Lokal Informasi, Menampilkan Bantuan & Pendaftaran Berita, Menampilkan informasi seputar Jakarta
Kontak & Saran, Bertujuan untuk digunakan bagi pengunjung untuk memberikan komentar & saran
g. Deskripsi Diagram
h. Layout
Layout atau tata letak merupakan sebuah esensi yang penting, guna menciptakan efek keteraturan dan harmonisasi. Penggunaan layout ditentukan dengan menggunakan grid sistem dan pembagian kolom. Dalam website ini jumlah kolom yang digunakan adalah 1 kolom. Penggunaan grid sistem bertujuan agar pengunjung bisa mudah mengikuti alur baca sehingga cukup sistematis.
2. Desain Visual
3. Mengembangkan Situs
Spesifikasi Teknis yang dibutuhkan:
Ukuran : 1366 x 768px (resolusi LCD 19inch dan
resolusi Laptop)
Layout : Horisontal
Warna : kecenderungan warna gelap
Software : Adobe Photoshop dan Illustrator
- Notepad ++ (Text Editor)
- Instant WP (web server untuk localhost) - CMS Wordpress
Gb 19. Beberapa Software untuk membuat website Lainnya:
- OS Windows 7
- Browser Chrome, Firefox dan IE8 - Beberapa plugin web developer Google
Chrome
- JRuler dan Pixus (Desktop ruler) - ColorPic (Color Picker)
- Font Picker (software memilih huruf) Domain : www.matbedu.com
Hosting : kapasitas 100mb (www.iixmedia.com) Jenis Website : Dinamis
Info tambahan :
Desain website akan di translate menjadi sebuah themes yang bisa digunakan oleh CMS Wordpress.
Teknik web menggunakan HTML5 dan CSS3 dimana efisiensi gambar bisa dimaksimalkan sehingga proses load (memuat) suatu halaman bisa semakin optimal. Website ini akan ditampilkan dalam bentuk ‘One page Layout’ (Layout satu halaman) dimana semua informasi ditampilkan hanya dalam satu halaman. Kekurangan teknik ini ialah kecenderungan load yang lama jika kita
tidak memperhitungkan informasi yang ingin
ditampilkan. Kelebihannya ialah load halaman hanya satu kali sehingga web terkesan sangat cepat.
4. Membangun & Mengintegrasikan Situs a. Desain Web
Proses yang dilakukan pada tahapan ini:
1. Membuat dan menentukan Layout
2. Menentukan Warna
3. Menentukan Style yang akan digunakan
4. Membuat Tombol
5. Membuat Navigasi
b. Translate HTML
Proses pada tahap ini ialah menterjemahkan apa
yang telah di buat dalam desain dengan
menggunakan Adobe Illustrator kedalam bahasa HTML.
c. Translate Wordpress Themes
Setelah desain web di translate menjadi bahasa HTML selanjutnya bahasa HTML tersebut di sesuaikan kembali agar bisa mengikuti standar struktur themes
wordpress. Wordpress seperti CMS lainnya menggunakan bahasa PHP sehingga tingkat keamanan web lebih aman.
5. Pengujian
Menyediakan waktu untuk pengujian formal adalah
sangat penting dan idealnya penulis harus mampu mengidentifikasi permasalahan yang menjadi penghambat dalam proses pengujian dengan langkah-langkah sebagai berikut:
a. Konten – akurat, dimengerti, ejaan, tata bahasa (review yang dilakukan oleh konten kontributor / editor konten)
b. Link – review situs link yang rusak
c. Fungsi – cara situs melakukan fungsi didefinisikan dalam projek asli definisi, membuat daftar tugas dan melakukan pengujian metodis
d. Validitas – validate HTML, CMS memvalidasi e. Aksesibilitas
f. Browser / OS / Resolusi
g. Kecepatan koneksi – menggunakan Analyzer Web Page untuk mendapatkan analisa
h. Usability – kegunakan perilaku informal atau formal sesuai dengan target pasar
i. Search Engine Optimization – meninjau situs untuk markup semantik
j. Load testing – hubungi administrator server untuk membahas teknik pengujian beban
k. Keamanan – permintaan otomatis SecurityXM Pindai, review otorisasi file, tinjauan metode otentikasi, melakukan tes otentikasi
Setelah masalah ditemukan, langkah berikutnya ialah memperbaiki masalah tersebut dengan sesegera mungkin dengan memperhatikan jadwal yang telah ditetapkan.
c. Paska Produksi 1. Peluncuran Situs
Website akan diluncurkan bertepatan dengan Pameran Tugas Akhir Kelas Karyawan – Program Studi Desain Produk / Grafis dan Multimedia Fakultas Teknik Perencanaan dan Desain pada tanggal 8 – 9 Desember 2012.
2. Maintenance – Perawatan
Setelah merencanakan lamanya waktu yang dibutuhkan untuk membuat website maka langkah berikutnya ialah merencanakan perawatan yang dibutuhkan website ini yakni perawatan dari 2 sisi, melalui website dengan cara mengakses CMS Wordpress dan sisi lainnya merawat melalui hosting.
Perawatan yang dilakukan diantaranya:
Perawatan Melalui Website Perawatan Melalui Hosting
1. Membalas komentar pengunjung 1. Memperhatikan sisa ruangan kosong kapasitas hosting 2. Menghapus komentar Spam 2. Mem-banned IP address Spam
3. Domain
Gb 20. Daftar harga Domain di www.iixmedia.com
Nama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer atau internet. Nama domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai alamat IP. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contoh “wikipedia.org”. Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.
Akhirnya penulis mendapatkan domain yang bagus. Domain ini adalah domain Indonesia yang dijual di
www.pandi.or.id. Domain itu adalah www.matbedu.com. Selain
domain yang bagus harganya pun terjangkau dengan harga sekitar Rp 90 ribu rupiah per tahun.
4. Hosting
Gb 21. Daftar harga Hosting di www.iixmedia.com
Hosting adalah tempat untuk menyimpan Data di server yang nantinya akan diakses melalui website. Hosting terdiri dari 2 jenis, Hosting yang berada di dalam negeri dan Hosting yang berada di luar negeri. Hosting Luar negeri biasanya terletak di Amerika atau biasa disebut hosting USA. Sedangkan Hosting Dalam negeri disebut IIX yang terletak di gedung cyber, Kuningan Jakarta Selatan.
Keduanya memiliki kelebihan dan kekurangan. Hal yang perlu dicermati ialah jika banyak pengunjung berasal dari dalam negeri maka sebaiknya menggunakan hosting dalam negeri agar akses bisa lebih cepat dibandingkan hosting luar negeri.
