Tugas Individu Desain Pemodelan Grafik. Pertemuan 8

  Identifikasi Grafik Pada Aplikasi Kebutuhan Berbasis Web Pengguna

Untuk memenuhi kebutuhan pengguna terhadap grafik pada sebuah aplikasi berbasis web, maka ada beberapa hal yang perlu diperhatikan pada desain website, diantaranya adalah:

1.      Penggunaan warna yang tepat

Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna (kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan.

 

2.      Teks yang mudah dibaca

Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan.

 

3.      Desain visual yang harmonis

Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun.

 

4.      Layout yang Simpel

Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemenelemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya.

 

5.      Alur yang mudah dimengerti

Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.

 

6.      Menu Navigasi yang jelas

Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website.

           

Ragam Layout Website

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

1.      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.

 

2.      Fluid

Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize).

Contoh layout fluid: gmail, yahoo mail.

 

3.      Responsive

Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya.

 

4.      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. https://forefathersgroup.com/

 

5.      Horizontal Scrolling

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

 

6.      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.

 

Format Gambar untuk Website

Format image ada beberapa jenis, yang umum untuk ditemukan adalah JPEG (JPG), GIF dan PNG juga BMP. Perbedaannya tidak dapat dilepaskan dari jenis kompresi yang digunakan untuk menyimpan data.

Semakin besar kompresi semakin sedikit data yang disimpan. Dan jika ukuran data semakin besar, akan menambah waktu yang diperlukan untuk menampilkannya pada web browser. Ini lah pertimbangan utama dalam memilih jenis format gambar yang ingin di tampilkan di dalam sebuah web.

Berikut acuan sederhananya:

1.      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)

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

3.      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

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

 

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.

1.      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. Begitu juga website Coca Cola yang menerapkan identitas brand-nya yaitu merah. Jangan menggunakan warna yang jauh berbeda dengan warna brand , karena hal itu akan membuat kesan tidak profesional dan tidak konsisten. Gunakan warna brand sebagai warna utama dalam branding usaha.  

 

2.      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.

 

3.      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.

 

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 yang diberikan dalam interaksi antara pengguna dan produk. UX Design itu proses membuat sebuah website atau aplikasi yang dibuat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna.

 

2.      User Interface

User Interface Design atau yang bahasa Indonesianya itu 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 UX dan UI

Banyak orang yang salah kaprah bahwa UI sama UX itu adalah suatu hal yang sama. Pada faktanya UX dan UI itu berbeda, namun satu sama lain saling berhubungan.

·         Pada dasarnya, 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.

 

Konsep Resolusi Pada Monitor

1.      Resolusi Layar

Resolusi Layar adalah jumlah pixel pada setiap dimensi layar monitor. Istilah dapat menjadi ambigu terutama karena resolusi yang ditampilkan dipengaruhi oleh faktorfaktor yang berbeda. Contohnya, Cathode Ray Tube (CRT), monitor layar datar (termasuk LCD) tampilan proyeksi menggunakan gambar elemen susunan tetap (pixel / piksel).

 

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.

 

3.      Aspek Rasio

Melihat persepsi mengenai “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.