BEST PRACTICES WEBSITE DESIGN FOR GOVERMENT DENNY INDRAYANA
BEST PRACTICES WEBSITE DESIGN FOR GOVERMENT DENNY INDRAYANA SETYADI, ST. , M. DS. SEPULUH NOPEMBER INSTITUTE OF TECHNOLOGY (ITS)
“ Tidak pernah ada kata terlambat untuk sesuatu yang lebih baik ” anonymous
“ Bukan tujuan utama menjadi seorang pemenang, melainkan memiliki tujuan utama adalah ciri seorang pemenang “” Dan Bagi Pemerintah, maka tidak ada yang tujuan yang lebih utama, selain memberikan pelayanan yang utama bagi warganya
BEST OF THE BEST WEBSITE DESIGN COMPETITIONS : Terbaik dari yang terbaik Kompetisi Desain Website 7 Kriteria Penilaian webawards. org 1. 2. 3. 4. 5. 6. 7. Design Ease of use Copywriting Interactivity Use of technology Innovation Content
BEST OF THE BEST WEBSITE DESIGN COMPETITIONS : 4 Kriteria Penilaian awwwards. com 1. 2. 3. 4. Design Usability Creativity Content
BEST OF THE BEST WEBSITE DESIGN COMPETITIONS : 3 Kriteria Penilaian CSSDesign. Awards 1. 2. 3. Creative Design Code & Function UX & Content
BEST OF THE BEST WEBSITE DESIGN COMPETITIONS : 5 Kriteria Penilaian webby awards 1. 2. 3. 4. 5. Content Structure & Navigation Visual Design Overall Experience Functional & Interactivity
WHY DESIGN MATTER ? DESAIN BUKAN PERSOALAN TAMPILAN (WARNA, GAMBAR, ILUSTRASI, FOTO/ ILUSTRASI, TYPOGRAFI) SAJA DESAIN MERUPAKAN PERSOALAN PENGUNJUNG MEMBERIKAN PERSEPSI +/KEPADA SEBUAH INSTANSI DESAIN MERUPAKAN PERSOALAN PENGUNJUNG MENYUKAI DAN TIDAK MENYUKAI (LIKE OR DISLIKE)
WHY DESIGN MATTER ? DESAIN ADALAH PERSOALAN PENGUNJUNG TERTARIK DENGAN SEBUAH INSTANSI UNTUK MELAKUKAN HAL BERSAMA ATAUPUN BERSAMA MELAKUKAN SEBUAH AKSI
DESAIN ADALAH PERSOALAN PENGUNJUNG MEMPEROLEH PENGALAMAN MENELUSURI (INLINK & BACKLINK) SEBUAH INFORMASI/LAYANAN YANG DISEDIAKAN OLEH SEBUAH WEBSITE
DESAIN ADALAH PERSOALAN PENGUNJUNG MENJADI BAGIAN DARI INSTANSI TERSEBUT BAIK SEBAGAI KONTRIBUTOR MAUPUN SEBAGAI PENGIKUT DARI WEBSITE TERSEBUT
MODEL PENGGUNJUNG WEBSITE Pengunjung Website yang dengan tujuan yang pasti mencari sebuah informasi dalam sebuah konten website. Pengunjung Website yang dengan tidak disengaja hadir, melalui perantara inlink atau backlink baik melalui website lain maupun mesin pencari (google, yahoo) Pengunjung website yang berkunjung kembali karena tujuan tertentu Pengunjung website yang dengan setia menerima informasi kembali atau berkunjung setiap saat diminta atau teringat akan kebutuhan informasi.
POLA INTERAKSI PENGUNJUNG DENGAN TAMPILAN WEBSITE : GAMBAR : POLA ARAH PANDANG RETINA) MATA USER MELIHAT TAMPILAN WEBSITE.
SCANNING TAMPILAN WEBSITE POLA SCANNING TAMPILAN VISUAL ADALAH POLA YANG DIGUNAKAN PENGUNJUNG DALAM MENENTUKAN BAGIAN YANG MEREKA INGINKAN ATAU BUTUHKAN
APA POLA SCANNING WEBSITE BERIKUT ?
SCANNING TAMPILAN WEBSITE Jika gambar tidak Mengkomunikasikan pesan, potensi pengunjung pergi semakin besar Artinya, pengunjung tidak langsung berkehendak utk membaca PENGUNJUNG AKAN MELAKUKAN SCANNING INFORMASI DALAM WAKTU YANG SANGAT SINGKAT, DAN WAKTU YANG SINGKAT TERSEBUT HARUS BENAR-BENAR MEMBERIKAN JAWABAN YANG TEPAT BAGI MEREKA TENTANG SEBUAH SIKAP TENTANG APAKAH SAYA AKAN MENELUSURI ATAU SAYA TINGGALKAN.
SCANNING TAMPILAN WEBSITE Informasi singkat yg langsung berkaitan dengan apa yang mereka butuhkan. Pengunjung membaca teks secara tahapan. Judul > Sub Judul > Isi Pengunjung lebih mudah membaca bagan tahap Pengunjung harus segera mencari kecocokan judul dengan tujuannya
HAL YANG HARUS DIHINDARI : MEMBUAT PENGUNJUNG BERPIKIR Tersesat dalam halaman web Tidak tahu cara menggunakan navigasi Tidak to the point terhadap kebutuhan Ketidakjelasan tombol dan navigasi Kerumitan informasi ditemukan Bahasa –bahasa yang asing bagi pengunjung
WHAT FIRST THINGS SIAPA PENGUNJUNG WEBSITE ANDA ? FIRST Bayangkan anda berbicara kepada orang yang tidak anda ketahui identitasnya. Maka anda hanya melakukan tebakan. Alat yang digunakan adalah User Personas, yakni sebuah kartu yang berisi profil dan perilaku calon pengunjung website anda Jumlah User personas yang digunakan menyesuaikan rentang pengguna website anda
APA TUJUAN MEREKA DATANG KE SEBUAH WEBSITE ? KEUNTUNGAN YANG DIPEROLEH PENGUNJUNG WEBSITE
WEBSITE = PELAYANAN LAYAKNYA MENERIMA SEORANG TAMU 1. KITA HARUS MENDAHULUI MENYAPA TAMU BUKAN SEBALIKNYA. 2. KITA HARUS MENYATAKAN KESEDIAAN KITA UTK MEMBANTU, BUKAN MENUNGGU TAMU MENYATAKAN PERTANYAAN APA YANG MEREKA BUTUHKAN 3. JIKA BENAR TAWARAN KITA DITERIMA, MAKA KITA AKAN MEMPERSILAHKAN TAMU KITA UNTUK MENGGUNAKAN FASILITAS KITA 4. JIKA SALAH MAKA KITA AKAN BERUPAYA MENJELASKAN KEMANA TUJUAN YANG BENAR DARI TAMU TERSEBUT 5. SETELAH MEREKA MENEMUKAN SESUATU YANG MEREKA CARI, KITA SELALU HARUS MEMASTIKAN APAKAH MASIH ADA YANG DAPAT KITA BANTU SELAIN ITU. 6. SETELAH MEREKA SELESAI DAN MEMUTUSAKAN MENYUDAHI WAKTU KUNJUNGAN, MAKA KITA DENGAN SENYUMAN MEMBERI TANDA UCAPAN TERIMAKASIH TELAH BERKUNJUNG, DAN SEMOGA KAMI DAPAT MEMBANTU LAGI DI LAIN WAKTU.
ELEMEN DESAIN WEBSITE 1. Gambar a. Fotografi b. Ilustrasi c. Video d. Gambar bergerak (gif. Looping) 2. Tipografi atau huruf 3. Layout : atau tempat teks dan gambar dalam halaman 4. Warna 5. Tombol 6. Navigasi : struktur atau peta halaman atau dikenal juga dengan information architecture 7. Header dan Footer
KRITERIA GAMBAR : BAGUS RAMAH DAN NAMPAK BERSAHABA T 1. Mengkomunikasikan sebuah pesan khusus 2. Memberikan makna tertentu ( ramah, indah, nyaman, senang, gembira, dlsb. ) 3. Menggunakan teknik gambar (fotografi) yang tepat. Setiap jenis teknik memiliki arti yang berbeda 4. Mencerminkan citra atau identitas dari pemilik/pengelola website
Gambar/foto suasana yang indah memberikan persepsi yang menyenangkan, serta menghadirkan gambaran pengalaman bagi pengunjung website dan sangat mudah untuk diingat. BERSIH DAN TERASA NYAMAN
TO BE CONNECTED, IS OUR PRIORITY NOW Bergabung Bersama Kami > 1. 635 warga telah bergabung bersama untuk bertukar pikiran dan membawa perubahan read more + Gambar/foto yang diberikan sebuah Pesan akan memberikan efek yang sangat positif dalam memberikan pemahaman menyeluruh terhadap informasi utama sebuah website. - Gambar tanpa Pesan hanya memberikan gambar yang indah tanpa kesan
Trend Fotografi MENANGKAP CAHAYA MATAHARI Gaya Foto : 1. Munculnya pendaran (pancaran) sinar matahari ke arah kamera langsung 2. Warna-warna hangat seperti merah, orange, jingga dominan 3. Menggunakan fokus objek atau orang dengan latar belakang blur (kabur)
Trend Fotografi SELFIE Meskipun tidak formal, namun gaya selfie memberikan kesan yang ramah tidak kaku, serta menyenangkan. Pemerintahan butuh meremajakan citranya. Meskipun formal, namun tetap mengikuti perkembangan.
Trend Fotografi WIDE ANGLE (PANORAMA) Trend menggunakan area lebar memberikan kesan yang luas, terbuka, mengajak, memberikan peluang, dlsb.
Trend Fotografi : Aerial Photo Trend pengambilan gambar dari udara memberikan kesan dramatis, besar, luas, keseluruhan, lengkap, menyeluruh. Gaya gambar ini memberikan sebuah state of art sebuah keseriusan atau komitmen.
Foto Dokumentasi TANPA EKSPRESI, YANG PENTING KELIHATAN SPANDUK EKSPRESIF, FOTO HARUS MENGGAMBARKAN AKSI, REAKSI
Panduan Fotografi 1. Setiap foto hendaknya memiliki sebuah cerita dibaliknya 2. Jika terkendala dengan suasana ruang yang kurang representatif, gunakan teknik Depth of Fields atau Bokeh atau Ruang tajam sempit/luas. 3. Jangan menggunakan foto milik orang lain. Pelanggaran Hak Cipta akan mengancam eksistensi instansi 4. Gunakan pencahayaan natural/alam untuk outdoor, atau pergunakan teknik Bokeh (Ruang Tajam Sempit/luas) untuk foto dalam ruangan. 5. Foto Dokumentasi berbeda dengan Foto seni. Lakukan keduanya. 6. Rencanakan atau anggarkan sedikit waktu, tenaga serta dana untuk menciptakan foto berlkualitas baik.
WARNA
TEMA
Panduan Tema 1. Tema adalah benang merah yang menghubungkan antar elemen desain. Warna, foto, typo, komposisi dan lainnya. 2. Tema merupakan sebuah kata sifat yang menerangkan bagaimana kesan yang dihasilkan oleh sebuah desain. 3. Tema harus menyesuaikan dengan penggunanya. 4. Beberapa contoh tema seperti : CLEAN, GREEN, COMFORT, WARM, GLAMOUR, SMART. 5. Perbanyak perbendaharaan tema visual melalui beberapa desain website yang ada. 6. Sebuah tema dapat berganti tiap tahun atau periode waktu tertentu, dan berfungsi memberikan kesan up to date di benak pengunjung website.
ILUSTRASI
Panduan Ilustrasi 1. Ilustrasi berfungsi untuk menyederhanakan sebuah informasi teks yang panjang menjadi sebuah informasi visual yang sederhana dan mudah untuk diingat atau dipahami. 2. Jenis ilustrasi yang paling populer saat ini adalah Ilustrasi Infografis, yakni ilustrasi tentang sebuah proses, langkah ataupun cerita. 3. Gaya Ilustrasi yang paling populer saat ini adalah gaya vektor, yakni ilustrasi yang menyederhanakan bentuk dari sebuah gambar. 4. Seperti fotografi, Hak Cipta juga melekat pada karya ilustrasi, oleh karenanya hukumnya haram untuk menggunakan ilustrasi milik orang lain tanpa ijin.
TIPOGRAFI
Panduan Tipografi 1. Gunakan Jenis huruf yang disediakan oleh Google (Free), dikenal dengan sebutan google font. 2. Gunakan tidak lebih dari 5 jenis huruf untuk keseluruhan halaman. Idealnya sebuah website hanya berisi 3 jenis huruf yang berbeda. 1 huruf untuk headline, 1 huruf untuk sub headline, dan 1 huruf untuk isi. 3. Hindari penggunaan huruf umum seperti Times News Roman, Courier new, Comic Sans. 4. Pilihlah spasi yang sesuai dengan layout halaman web. 5. Pergunakan prinsip kontras warna antara huruf dan background. Jika background gelap, font terang dan sebaliknya.
1. RESEARCH 1. Tentukan Audiens (prospektif pengunjung) Website, melalui User Personas. 2. Pelajarilah setiap User Personas, untuk mengetahui GOAL atau Tujuan yang diharapkan oleh pengguna. 3. Lakukan Studi mendalam, baik melalui FGD ataupun wawancara dengan beberapa audiens 4. Lakukan beberapa dokumentasi baik berupa foto atau video untuk mendukung perilaku atau karekteristik audiens 5. Lakukan Brainstorming antar pengelola website dan stakeholder (rekan sejawat, divisi lain, masyarakat) untuk memperoleh inside (harapan serta kebutuahan) target audiens
2. PLAN STRUCTURE 1. Pelajari Menu atau konten yang telah ada didalam website 2. Kembangkan konten-konten yang diperoleh dari studi sebelumnya 3. Susunlah sebuah Information Architecture atau sering dikenal juga dengan struktur navigasi halaman 4. Lakukan ujicoba menggunakan kertas. Paper Prototyping, untuk memperoleh gambaran struktur navigasi yang menyeluruh. 5. Lakukan sebuah FGD dari hasil paper prototype kepada pengelola website serta stakeholder 6. Tentukan platform/ bahasa pemrograman sesuai dengan hasil paper prototype. Beberapa platform seperti css, wordpress, atau database mysql.
3. WRITE CONTENT 1. Kembangkan sebuah rencana perbaharuan konten selama periode waktu tertentu, untuk menjaga up to date data 2. Buatlah sebuah pedoman penggunaan gaya bahasa yang konsisten 3. Lakukan sebuah workshop penulisan konten bagi kontributor berita, dan libatkan semua pihak untuk berkontibusi.
4. DESIGN UX 1. Buatlah sketsa wireframe (skesta pensil) untuk semua halaman yang akan dibuat. 2. Lakukan berulang kali dan buatlah alternatif 3. Pilihlah alternatif yang paling representatif untuk digunakan dibuatkan digital prototype 4. Buatlah sebuah digital prototype.
5. DESIGN GRAPHICS 1. Rencanakan sebuah tema visual 2. Implementasikan tema visual kedalam beberapa elemen desain lain seperti : gambar, foto, huruf, komposisi, warna, dll. 3. Lakukan perbaikan secara berkelanjutan bekaitan dengan gambar, foto, teks, dan beberapa elemen visual lainnya.
6. DEVELOP WEBSITE 1. Proses Pembuatan website dengan software webdesain. 2. Lakukan ujicoba website offline untuk memperoleh hasil terbaik 3. Lakukan ujicoba website dengan berbagai platform browser : mozilla firefox, Internet explorer, Google Chrome. 4. Buatlah peta produksi dan pedoman standar bahasa pemrograman 7. LAUNCH 8. UP TO DATE
Denny Indrayana Setyadi Phone : 081. 732. 0595 Email : dennyits@yahoo. com Jurusan Desain Produk Industri INSTITUT TEKNOLOGI SEPULUH NOPEMBER – ITS Laboraturium Design Computer Graphic Interface
- Slides: 46