RANGKUMAN BAB 4 KARYA DESAIN

C. Keterbacaan

Keterbacaan pada UI/UX merujuk pada kemampuan pengguna untuk membaca dan memahami teks atau konten yang ditampilkan pada tampilan antarmuka pengguna. Keterbacaan yang baik sangat penting dalam desain UI/UX karena memastikan bahwa pengguna dapat dengan mudah membaca dan memahami informasi yang ditampilkan pada layar. Antarmuka pengguna harus mudah dibaca dan dimengerti. Warna, tipografi, dan ukuran huruf yang tepat dapat membantu memudahkan keterbacaan antarmuka pengguna.

40918 d. Efisiensi

75168 Antarmuka pengguna harus dirancang untuk memudahkan pengguna dalam menyelesaikan tugas dengan efisien dan cepat. Proses navigasi dan interaksi harus mudah dipahami dan mudah dilakukan oleh pengguna.

Berikut beberapa hal yang dapat dilakukan dalam desain Ul untuk meningkatkan efisiensi.

1) Menempatkan elemen penting di tempat yang mudah diakses

Elemen yang umum digunakan atau penting seperti tombol aksi atau menu navigasi harus ditempatkan di tempat yang mudah diakses oleh pengguna.

2) Menerapkan prinsip tindakan langsung

Prinsip tindakan langsung berarti memberikan tindakan atau respons cepat terhadap aksi pengguna. Dalam desain UI, prinsip ini dapat diterapkan dengan menampilkan feedback yang cepat dan jelas saat pengguna melakukan aksi tertentu.

3) Menerapkan konsistensi dalam tampilan

Konsistensi dalam tampilan antarmuka pengguna dapat membantu pengguna lebih mudah menavigasi dan menggunakan aplikasi atau situs web. Misalnya, menggunakan ikon yang konsisten dan label yang jelas pada tombol aksi atau menu navigasi.

4) Menghilangkan elemen yang tidak perlu

Elemen yang tidak perlu atau kurang penting dapat mengganggu dan membuat pengguna kehilangan fokus. Oleh karena itu, dalam desain Ul penting untuk menghilangkan elemen yang tidak diperlukan dan mempertahankan tampilan yang sederhana.

5) Menyediakan fitur pencarian

Fitur pencarian dapat membantu pengguna menemukan informasi yang dibutuhkan dengan cepat dan mudah. Penting untuk menempatkan fitur pencarian di tempat yang mudah diakses oleh pengguna.

e. Responsif

Prinsip responsif dalam UI/UX mengacu pada kemampuan desain untuk beradaptasi dengan berbagai perangkat dan ukuran layar yang berbeda. Ini sangat penting karena pengguna bisa mengakses aplikasi atau situs web dari berbagai perangkat, seperti desktop, laptop, tablet, dan ponsel pintar, sehingga tampilan dan interaksi antarmuka harus disesuaikan dengan perangkat tersebut.

f. Keindahan

Prinsip keindahan dalam UI/UX merujuk pada cara desain antarmuka pengguna disusun dan dirancang untuk menciptakan tampilan menarik serta estetis. Prinsip ini membantu meningkatkan kualitas desain dan membuat aplikasi atau situs web lebih menarik bagi pengguna. Berikut beberapa prinsip keindahan yang dapat diterapkan dalam desain UI/UX.

1) Simplicity (kesederhanaan)

Desain harus bersifat sederhana, dengan elemen yang minimalis, tetapi tetap menarik dan efektif. Hal ini memastikan tampilan yang bersih dan mudah dipahami oleh pengguna.

2) Harmony (keselarasan)

Elemen desain seperti warna, tata letak, dan jenis huruf harus bekerja secara harmonis Beux untuk menciptakan keselarasan dalam desain. Hal ini dapat membantu meningkatkan kesan enger visual yang kuat dan mudah diingat.ame

104

Elemen: Karya Desain

3) Balance (keseimbangan)

Desain harus seimbang, baik secara visual maupun fungsional. Hal ini dapat dicapai dengan menyusun elemen desain secara simetris atau asimetris bergantung pada tujuan dan preferensi desainer.

4) Proportion (proporsi)

Proporsi elemen desain seperti ukuran dan tata letak harus sesuai tujuan desain. Hal ini memastikan tampilan yang seimbang dan tidak terlalu membebani mata pengguna.

2. Faktor yang memengaruhi UI/UX design

UI/UX design dipengaruhi oleh berbagai faktor berikut.

a. Tujuan, setiap desain harus mempertimbangkan tujuan dan target penggunanya. Dengan tujuan yang jelas, desainer dapat menentukan elemen desain yang perlu dimasukkan serta bagaimana mengarahkan fokus pengguna.

b. Konteks, konteks penggunaan aplikasi atau situs web berperan penting dalam memengaruhi desain UI/UX. Sebagai contoh, desain untuk aplikasi medis akan berbeda dengan desain untuk aplikasi permainan.

c. Teknologi, teknologi yang digunakan untuk mengembangkan aplikasi atau situs web juga memengaruhi desain UI/UX. Ini dapat membatasi atau memungkinkan desainer untuk menerapkan elemen desain tertentu.

d. Kebutuhan pengguna, pengguna memiliki kebutuhan yang berbeda-beda. Desain harus mempertimbangkan kebutuhan ini agar aplikasi atau situs web dapat digunakan dengan mudah dan intuitif.

e. Psikologi pengguna, psikologi pengguna juga harus dipertimbangkan dalam desain UI/UX. Misalnya, pengguna memiliki preferensi visual yang berbeda-beda dan reaksi emosional terhadap warna dan tata letak.

f. Persaingan, desainer juga harus mempertimbangkan desain dari pesaing yang sudah tersedia atau produk sejenis. Hal ini memungkinkan desainer untuk menghasilkan desain yang lebih baik dan inovatif.

g. Tren, tren desain juga dapat memengaruhi desain UI/UX. Desainer harus memantau tren dan mempertimbangkan beberapa hal seperti cocok dengan tujuan dan target penggunaan desain atau tidak.

3. Langkah umum penerapan UI/UX design

UI/UX design dapat diterapkan dalam berbagai jenis produk digital, seperti situs web, aplikasi mobile, dan perangkat lunak desktop. Berikut langkah-langkah umum dalam menerapkan UI/UX design.

a. Research (riset)

b. Wireframing

c. Design

d. Prototype

e. Testing

f. Implementation (implementasi)

g. Evaluation (evaluasi)

4. Contoh penerapan UI/UX design

Pendidikan Antikorupsi

Contoh penerapan UI/UX design pada produk digital dijelaskan sebagai berikut.

a. Aplikasi Gojek

Adapun mengenai aplikasi Gojek diuraikan sebagai berikut.

1) UI Gojek

Desain antarmuka Gojek dirancang agar ramah dan mudah digunakan. Desainnya membuat pengguna merasa dekat dan nyaman dengan layanan yang tersedia. Sebagai contoh, Gojek menggunakan ikon yang memudahkan pengguna untuk berinteraksi dengan aplikasi.

Desain Komunikasi Visual

105

Tanggung jawab

Mengerjakan setiap tugas dengan sungguh- sungguh agar memperoleh hasil yang maksimal menunjukkan sikap tanggung jawab peserta didik.

Jika ingin memesan GoRide, pengguna hanya perlu klik ikon motor. Untuk memesan makanan, klik ikon sendok garpu. Ikon-ikon ini memudahkan pengguna untuk mengenali dan menggunakan fitur-fitur Gojek dengan cepat. Selain itu, desain tampilan untuk fitur-fitur seperti GoRide, GoCar, dan GoSend serupa, sehingga pengguna bisa lebih mudah dan cepat beradaptasi dengan aplikasi.

2) UX Gojek

Gojek menawarkan banyak fitur populer seperti GoRide (ojek motor), GoCar (taksi mobil), dan GoFood (pesan antar makanan). Gojek telah diunduh lebih dari 142 juta kali dan bekerja sama dengan 2 juta pengemudi. Pengalaman pengguna di Gojek dibuat sangat sederhana dan intuitif. Misalnya, untuk memesan GoRide, pengguna cukup klik ikon motor, lalu mengisi lokasi tujuan dan penjemputan. Aplikasi secara otomatis menampilkan rincian perjalanan dan biaya. Semua ini memungkinkan pengguna memesan layanan dengan mudah dan cepat, tanpa banyak usaha.

b. Google

Adapun mengenai Google diuraikan sebagai berikut

1) UI Google

Antarmuka Google sangat sederhana dan mudah digunakan. Ketika membuka halaman awal Google Search, pengguna akan melihat latar belakang putih dengan kolom pencarian di tengahnya. Desain ini memungkinkan pengguna fokus langsung pada pencarian tanpa gangguan. Tampilan minimalis Google membantu pengguna menyelesaikan tugas mereka dengan cepat dan efisien. Berbeda dengan mesin pencari lain yang penuh dengan konten, Google menjaga tampilannya tetap bersih dan sederhana.

Desain Google didominasi oleh ruang kosong dengan tata letak yang konsisten. Warna yang digunakan juga minimalis, dengan putih sebagai warna dasar dan biru sebagai warna dominan untuk elemen penting seperti link dan tombol. Konsistensi warna ini membuat pengguna mudah mengenali fungsi-fungsi di Google. Selain itu, desain UI Google responsif, yang berarti tampilan tetap baik di berbagai perangkat, baik desktop maupun mobile. Pengguna bisa menggunakan layanan Google di mana saja dan kapan saja dengan kualitas tampilan yang tetap optimal.

2) UX Google

Istilah discoverability dalam dunia UX memiliki arti pengguna dapat menggunakan keseluruhan layanan atau menyelesaikan kebutuhan tanpa perlu petunjuk khusus. Fitur-fitur Google mudah dipelajari, sehingga pengguna bisa cepat menyelesaikan kebutuhannya. Misalnya, jika ingin mengetahui perkiraan cuaca, pengguna hanya perlu mengetik "perkiraan cuaca hari ini" dan Google langsung menampilkan informasi yang relevan. Sederhana dan efisien, itulah yang membuat Google unggul sebagai mesin pencari.

Google juga memiliki desain adaptif, yang berarti hasil pencarian disesuaikan dengan konteks kata kunci. Misalnya, jika mencari "Indonesia," Google akan menampilkan berita, peta, dan gambar terkait Indonesia. Namun, jika mencari "IHSG," Google akan menampilkan informasi terkait saham karena itu adalah istilah keuangan. Desain ini memastikan pengguna mendapatkan hasil yang relevan dan cepat.

Proses pencarian di Google sangat cepat dan minim kesalahan. Misalnya, saat mencari “kucing,” Google akan menampilkan jutaan hasil dalam hitungan detik. Namun, jika kata kunci yang dimasukkan tidak masuk akal, Google akan memberi tahu pengguna bahwa tidak ada hasil yang sesuai. Ini menjadikan pengalaman pengguna di Google sangat nyaman dan memuaskan.

Latihan

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Mengapa penataan antarmuka UI/UX perlu konsisten?

2. Jelaskan prinsip dasar Ul dalam hal kesederhanaan!

106

Elemen: Karya Desain

3. Apa yang Anda ketahui mengenai jenis huruf sans serif?

4. Sebutkan langkah-langkah umum dalam menerapkan UI/UX design!

5. Mengapa tren dapat memengaruhi faktor UI/UX design?

B. Web & App Design

Web design adalah proses menciptakan tampilan visual dan fungsionalitas situs web. Ini melibatkan berbagai elemen, seperti tata letak, warna, jenis huruf, gambar, navigasi, dan interaksi pengguna. Tujuan dari desain web adalah untuk menghasilkan tampilan yang menarik dan mudah digunakan bagi pengguna. Sebaliknya, desain aplikasi (app design) adalah proses yang berfokus pada pembuatan antarmuka pengguna (UI) dan pengalaman pengguna (UX) dari aplikasi mobile. Desain ini mencakup aspek seperti tata letak, warna, jenis huruf, gambar, navigasi, serta interaksi pengguna dengan aplikasi di perangkat mobile seperti smartphone atau tablet.bsp

sulis napneb selain

dewelledmua eb

Web Design

Q

Database

JELE

Sumber: https://www.indoapps.id/

eineid

Gambar 4.2 Web & app design

Walaupun web design dan app design memiliki beberapa kesamaan, keduanya berbeda dalam hal teknologi dan pengalaman pengguna. Situs web biasanya diakses melalui desktop atau laptop, sementara aplikasi mobile dirancang khusus untuk perangkat mobile. Karena itu, desain web dan desain aplikasi mobile harus mempertimbangkan perbedaan dalam ukuran layar serta cara pengguna mengakses dan memanfaatkan informasi. Namun, tujuan utama keduanya adalah sama, yaitu menciptakan pengalaman pengguna yang baik dan mudah digunakan. Desainer perlu memahami kebutuhan pengguna dan menciptakan desain yang intuitif serta menarik, baik untuk situs web maupun aplikasi mobile.

1. Kategori web design

Berikut dijelaskan mengenai kategori web design.

a. Desain statis

gaers Desain web statis adalah jenis desain web yang menggunakan halaman web individual yang meanup tidak berubah saat diakses oleh pengguna. Setiap halaman memiliki tampilan dan konten yang tetap, tanpa adanya interaksi pengguna. Desain web statis umumnya untuk membuat situs web sederhana seperti situs web brosur atau katalog online. Situs web statis relatif lebih mudah dan lebih murah untuk dikembangkan daripada situs web dinamis atau responsif. Namun, kelemahan dari desain web statis adalah tidak adanya inter-aktivitas dengan pengguna serta kurangnya kemampuan untuk menyesuaikan tampilan situs web dengan ukuran layar yang berbeda dan perangkat yang berbeda.

Walaupun demikian, situs web statis masih dimanfaatkan untuk keperluan tertentu dan mungkin poo menjadi pilihan yang tepat, terutama bagi pemilik bisnis kecil yang memerlukan situs web dengan biaya terjangkau. Namun, bagi bisnis yang ingin meningkatkan pengalaman pengguna dan memperluas jangkauannya, desain web dinamis atau responsif mungkin menjadi pilihan yang lebih baik.

Desain Komunikasi Visual

107

Penilaian Sumatif

Pindai QR Code untuk soal digital

1. Berilah tanda silang (x) huruf a, b, c, d, atau e pada jawaban yang paling benar!

1. Elemen, visual seperti tata letak, warna, tipografi, dan ikon adalah bagian dari ....

a. UX design

c. penelitian pengguna

e. peta situs

b. Ul design

d. pengujian kegunaan

2. Berikut ini yang tidak termasuk dalam ruang lingkup UX design yaitu ....

a. penelitian pengguna

d. pemilihan warna dan ikon

b. pembuatan wireframes

e. pembuatan peta situs

c. pengujian kegunaan

3. Cara desain UI/UX dapat meningkatkan efisiensi pengguna, yaitu dengan

a. menambahkan banyak langkah dalam proses navigasi

b. menyederhanakan proses navigasi pengguna

c. menggunakan animasi yang kompleks untuk setiap tindakan

d. menampilkan banyak informasi di setiap halamán

e. membuat pengguna mencari fungsi tersembunyi

4. Jenis huruf yang biasanya digunakan untuk menampilkan kode atau teks dengan format yang seragam adalah

a. Serif

c. Monospace

e. Script

b. Sans-Serif

d. Italic

5. Berikut ini yang membedakan jenis huruf Serif dari jenis huruf Sans-Serif, yaitu

a. Serif memiliki garis tambahan di ujung setiap karakter, sedangkan Sans-Serif tidak

b. Serif adalah jenis huruf dengan lebar karakter yang sama

c. Sans-Serif memiliki garis tambahan di ujung setiap karakter, sedangkan Serif tidak

d. Serif hanya digunakan dalam desain antarmuka pengguna modern

e. Sans-Serif digunakan untuk menampilkan kode atau teks yang memerlukan format seragam

6. Maksud dari psikologi warna dalam desain UI/UX adalah

a. penggunaan warna yang mengubah bentuk elemen desain

b. pengaruh warna terhadap emosi dan mood pengguna

c. pemilihan warna yang hanya menarik secara estetika

d. menyesuaikan warna dengan ukuran layar perangkat

e. menentukan warna berdasarkan kebutuhan teknis

7. Fokus utama dari web design adalah ....mo

a. membuat aplikasi yang dapat diunduh di smartphone

b. mengembangkan antarmuka pengguna untuk perangkat mobile

c. menciptakan tampilan visual dan fungsionalitas situs web

d. mendesain aplikasi khusus untuk tablet

e. mengoptimalkan aplikasi untuk berbagai sistem operasi

8. Faktor dalam melakukan usability testing pada UI/UX design adalah

HOTS

a. memilih sample yang tidak mewakili target pengguna

b. tidak memperhatikan lingkungan dan situasi pengguna saat menggunakan aplikasi atau situs web

c . tidak memberikan instruksi yang jelas kepada pengguna saat melakukan pengujian

d. menggunakan metode pengujian yang tidak sesuai tujuan pengujian

e. memperhatikan kebutuhan dan keinginan pengguna serta melakukan pengujian dengan metode yang sesuai tujuan pengujian

118

Elemen: Karya Desain

9. Teknik yang digunakan dalam responsive design untuk mengatur tata letak elemen-elemen dalam grid fleksibel adalah

HOTS

a. flexible images

b. grid system

c. media queries

d. responsive typography

e. fluid layout

10. Berikut ini kelemahan utama dari desain web statis adalah

a. memerlukan waktu dan sumber daya lebih untuk dikembangkan

b. tidak dapat menyesuaikan tampilan dengan ukuran layar yang berbeda

c. tidak memungkinkan pengguna berinteraksi dengan situs web

d. hanya dapat digunakan untuk situs web berskala besar

e. tidak mendukung penggunaan gambar dan video

11. Pernyataan berikut yang merupakan dampak positif UI/UX design yang bagus adalah ....

a. meningkatkan tingkat kepuasan pengguna dan menurunkan tingkat churn rate

b. menurunkan pengguna aktif dan menurunkan performa aplikasi atau situs web

c. menurunkan nilai perusahaan dan menurunkan kepercayaan investor

d. menurunkan jumlah pengunjung dan menurunkan keuntungan bisnis

e. tidak terdapat dampak yang signifikan

12. Prinsip keindahan dalam UI/UX bertujuan untuk

a. membuat desain antarmuka pengguna lebih rumit dan sulit dipahami

b. mengabaikan keseimbangan dan harmoni dalam desain

c. menonjolkan elemen visual yang tidak relevan

d. membuat desain yang terlalu penuh dengan elemen visual

e. menciptakan tampilan yang estetis dan menarik bagi pengguna

13. Fungsi call-to-action pada website adalah

a. meningkatkan traffic website

b. menarik perhatian pengunjung website

c. memperjelas tujuan dari website

d. meningkatkan kecepatan loading website

e. memberikan efek animasi pada tampilan website

14. Salah satu keunggulan desain web dinamis adalah kemampuannya untuk menambahkan fitur interaktif. Contoh fitur interaktif yang dimaksud adalah HOTS

a. menampilkan gambar statis

b. mengisi formulir kontak dan menulis komentar

c. memuat halaman web lebih cepat

d. menampilkan teks dan gambar yang sama di semua perangkat

e. mengubah warna latar belakang halaman web

15. Perbedaan utama antara Ul dan UX Design adalah

a. UI design berfokus pada alur interaksi pengguna, sedangkan UX design berfokus pada aspek visual

b. UI design lebih menekankan pada pengujian kegunaan, sementara UX design pada estetika produk

c. UI design berfokus pada aspek visual dan estetika, sedangkan UX design pada alur interaksi dan kemudahan penggunaan

d. UX design hanya berfokus pada penelitian pengguna, sementara UI design berfokus pada navigasi produk

e. UI design mengatur struktur situs web, sementara UX design memilih warna dan ikon

II. Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Jelaskan pengertian UI/UX design!

2. Jelaskan yang dimaksud prinsip responsif pada UI/UX!

HOTS

3. Sebutkan beberapa prinsip keindahan yang dapat diterapkan dalam desain UI/UX!

4. Sebutkan keuntungan desain web yang responsif!

5. Mengapa desain web dinamis memiliki manfaat dalam bisnis online?

Nilai

Catatan

Guru

Paraf

Orang Tua

Soal Remidi

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Jelaskan perbedaan antara UI dan UX design!

2. Sebutkan jenis-jenis font populer yang digunakan untuk desain web!

3. Jelaskan mengenai desain layout pada situs web!

4. Apa yang Anda ketahui mengenai iconography?

5. Jelaskan langkah pertama dalam penerapan web dan app desain! HOTS