Identifikasi Kebutuhan Pengguna Grafik Pada Aplikasi Berbasis Web

 

1.     Desain Website

Beberapa hal yang perlu diperhatikan pada desain website, diantaranya adalah :

 

·      Penggunaan Warna Yang Tepat

Warna sangat berpengaruh dalam desain. Warna memiliki banyak arti dan masing – masing warna memiliki karakter tersendiri. Skema warna dalam desain harus mewakili karakter.

 

·      Teks yang mudah dibaca

Teks harus mudah dibaca, hal tersebut bisa didapat dengan mengatur kontras warna teks penggunaan font enis font, ukuran font, style dan konsistensinya dalam desain. Selain font, adanya whitespace dan jarak antar teks juga harus diperhatikan.

 

·      Desain Visual Yang Harmonis

Image atau gambar juga merupakan unsur penting dalam desain. Pemilihan dan komposisi image harus sesuai dengan keseluruhan tema dan karakter desain website. 

Kualitas dan ukuran file image juga perlu diperhatikan, karena kecepatan load ditentukan besarnay ukuran file, terutama image.

·      Layout Simple

Layout dibuat sesedehana mungkin dengan meminimalisir elemen tidak penting dan memaksimalkan whitespace. Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya.

·      Alur yang Mudah Dimengerti

Layout desain website harus bisa menuntun pengunjung dan mengarahkan perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya. Alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan. 

·      Menu Navigasi yang Jelas

Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website fungsi utamanya, sebagai alat interaksi pengunjung dengan website. Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer.

Ada dua hal penting yang membuat website menjadi sukses dan mampu mendapatkan trafik dalam jumlah tinggi, konten berkualitas dan desain yang unik serta menarik. Desain website yang tidak rapi dan berantakan memengaruhi kesempatan konten dibaca oleh pengunjung situs. Pengembang harus berhati-hati dalam mengatur tata letak website. Carilah informasi sebanyak mungkin tentang cara desain web guna membantu dalam menemukan style yang tepat. 

 

2.     Ragam Layout Website

Ada beberapa macam layout desain web saat ini yang semakin menghiasi dunia web : 

·      Static 

Layout static pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang statis.
Contoh layout static: Facebook, Twitter. 

·      Fluid

Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize).
Contoh layout fluid: gmail, yahoo mail. 

·      Responsive

Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip „if„, tapi ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau smartphone. 

·      Responsive-fluid
Layout responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk ukuran. 

 

·      Horizontal Scrolling
Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk melihat content web tersebut menggunakan scroll horizontal. 

 

·      Parallax Scrolling
Layout parallax scrolling menggunakan beberapa layer dan setiap layer memiliki kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek yang menarik. 

 

 

 

3.     Format Gambar untuk Website

Beberapa acuan file gambar yang dapat dimasukkan dalam pendesainan website, diantaranya :

 

·      PNG sangat baik untuk dipergunakan pada kebanyakan web browser (IE6+ butuh sedikit sentuhan CSS untuk pengaturan transparansi). Format jenis ini sangat tepat untuk menyimpan grafik (ilustration) atau foto (kualitas tinggi). 

 

·      JPG adalah pilihan terbaik untuk menampilkan foto secara online, walau kualitasnya tidak sebagus PNG tetapi cukup bisa diterima mata manusia.

 

·      GIF sangat baik untuk menampilkan gambar grafik (jika tidak mau menggunakan PNG), tapi jangan ubah foto menjadi format GIF karena hasilnya tidak sedap dipandang mata. 

 

·      BMP bisa dikategorikan sebagai gambar tidak terkompresi, tidak disarankan untuk penggunaan pada web (menghabiskan bandwidth).

 

 

4.     Menerapkan Warna Efektif ke dalam Website

Ada beberapa hal yang harus diperhatikan dalam menerapkan warna. Berikut apa saja yang sebaiknya dilakukan dalam mengkombinasikan warna ke dalam desain website. 

A.   Gunakan Warna Brand

Warna identitas brand  merupakan hal yang penting untuk selalu diterapkan ke berbagai
media, termasuk media online seperti website sebagai bentuk branding perusahaan. Contohnya adalah Coca - Cola yang dimana dominan menggunakan warna merah sebagai warna brandnya. Jadi gunakan warna brand sebagai warna utama dalam branding usaha.

 

B.    Terapkan Psikologi Warna
Secara tidak sadar, warna mampu memberikan pengaruh kedalam pikiran seseorang. Saat
kita mengunjungi halaman website, mata akan tertarik untuk memperhatikan sesuatu
yang terlihat berbeda dan menonjol. setelah memahami beberapa penjelasan tentang teori
warna sebelumnya, dapat diterapkan  ke dalam desain website. Seperti sifat warna-warna
panas yang cerah, cukup efektif untuk menarik perhatian, jika digunakan sebagai
informasi penting, tombol, link, headline, dan lain-lain. Begitu juga dengan warna-warna
dingin yang menenangkan dapat digunakan sebagai background, text maupun paragraf
dan lain-lain. 

 

C.    Sesuaikan Warna dengan Target Pasar

Setiap konsumen memiliki ketertarikan warna yang berbeda sesuai umur maupun jenis kelaminnya. Begitu juga setiap bidang usaha akan selalu berbeda dalam menerapkan warna berkaitan dengan profesionalitas usaha. 

 

Sebagai contoh warna ceria yang tampil fun dan menyenangkan, akan lebih efektif di gunakan untuk target konsumen bayi/anak-anak maupun wanita, serta digunakan dalam bidang usaha yang lebih santai. Sangat tidak efektif, jika warna ceria tersebut digunakan untuk target konsumen serta bidang usaha yang lebih serius dan profesional, seperti usaha kontraktor, politik, akuntan, hukum dan lain-lain.

D.   Pastikan Warna Teks Kontras dengan Warna Background
Kontras teks dalam desain website jugalah penting. Teks menjadi sumber rujukan bagi
pengunjung untuk mengetahui informasi mengenai bisnis. Harus ada
kontras yang tinggi antara warna teks dan warna background. Gunakan teks warna gelap untuk background terang. Sebaliknya, gunakan warna terang untuk teks dengan background gelap. 

 

5.     Desain yang Sesuai Dengan User Experience dan User Interface 

1. User Experience 

User Experience Design atau yang biasa disebut UX Design yaitu adalah:
Proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam meningkatkan kegunaan dan kesenangan pengguna.

2. User Interface

User Interface Design atau Desain Antarmuka Pengguna adalah desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan pengalaman pengguna. UI Design adalah bagaimana suatu website atau aplikasi yang dibuat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website. 

 

Perbedaan UI dengan UX

·       User Experience adalah tentang “memahami penggunamu”. Tujuan UX adalah mencari tahu siapa mereka, apa yang mereka capai dan apa cara terbaik bagi mereka untuk melakukan “sesuatu”. UX berkonsentrasi pada bagaimana sebuah produk terasa dan apakah itu memecahkan masalah bagi pengguna. 

·       Sedangkan User Interface adalah bagaimana suatu website atau aplikasi yang di buat terlihat dan berbentuk seperti apa. Hal tersebut mencakup Layout (tata letak), Visual Design (desain visual) dan Branding. 

6.     Konsep Resolusi Pada Monitor

1.     Resolusi Layar

Resolusi Layar adalah jumlah pixel pada setiap dimensi layar monitor. Contohnya, Cathode Ray Tube (CRT), monitor layar datar (termasuk LCD) tampilan proyeksi menggunakan gambar elemen susunan tetap (pixel / piksel). Hal ini biasanya dinyatakan dalam Lebar x Tinggi, dengan satuan pixel: misalnya, “1024 x 768” yang berarti lebarnya 1024 pixel dan tingginya 768 pixel. Penggunaan istilah “Resolusi Layar” berlaku untuk susunan yang menampilkan pixel tetap seperti Plasma Display Panel (PDP), Liquid Crystal Display (LCD), Digital Light Processing (DLP). 

Resolusi Layar digunakan untuk menyebut dimensi pixel, jumlah pixel dalam masing-masing dimensi (misal, 1920 x 1080), yang tidak mencerminkan kerapatan pixel, yaitu jumlah piksel per satuan jarak atau luas area. Dalam pengukuran digital, kerapatan layar memiliki satuan pixel per inci. 

 

2.     Jumlah Piksel untuk Berbagai Resolusi

Metrik lain memperlihatkan perspektif yang sangat jelas adalah jumlah piksel. Sebuah tampilan Quad HD memiliki 3.69 juta piksel, lebih banyak 78% dibandingkan 1080p yang hanya 2,07 juta piksel, dan empat kali lipat dibanding tampilan 720p.
Untuk mengukur jumlah piksel dalam sebuah resolusi layar, misal: 1920 x 1080 berarti bahwa layar memiliki lebar terdiri dari 1920 piksel dan tinggi terdiri dari 1080 piksel, dengan total 1920 x 1080 = 2.073.600 piksel. Resolusi yang paling populer adalah: 

·  1280 x 720 (HD, 720p) 

·  1920 x 1080 (FHD, Full HD, 2K, 1080p) 

·  2560 x 1440 (QHD, WQHD, Quad HD, 1440p) 

·  3840 x 2160 (UHD, Ultra HD, 4K, 2160p) 

·  7680 x 4320 (FUHD, Full Ultra HD, 8K, 4320p) 

 

3.     Aspek Rasio

Resolusi Layar dapat dipengaruhi oleh sejumlah faktor seperti Resolusi Gambar dan Resolusi Optik. Salah satu faktor adalah bentuk persegi panjang layar, yang dinyatakan sebagai rasio dari lebar berbanding tinggi fisik. Hal ini dikenal sebagai Aspek Rasio.

Sebuah aspek rasio fisik layar dan rasio aspek pixel individu belum tentu sama. Sebuah susunan 1280 x 720 pada layar 16:9 memiliki piksel berbentuk persegi. Sedangkan susunan 1024 x 768 pada layar 16:9 memiliki piksel berbentuk persegi panjang.