TUGAS KELOMPOK

INTERAKSI MANUSIA DAN KOMPUTER

Dosen Pengampu : Murien Nugraheni, S.T., M.Cs

Di Susun Oleh:

Kelompok 6 – Kelas B

Nur Angga Saputro 1512620070

Ivan Adi Septian 1512620071

Jeason Ibrahim 1512620072

Wisma Jaya Laksana 1512620073

Muhammad Harits 1512620075

PENDIDIKAN TENIK INFORMATIKA DAN KOMPUTER

FAKULTAS TEKNIK
UNIVERSITAS NEGERI JAKARTA
2022
Buatlah Ringkasan mengenai materi di bawah ini beserta dengan contoh dan atau
kasusnya.

- Konsep Desain Web dan Mobile

- Prinsip Desain Web dan Mobile

A. Pengertian Web Design dan Mobile

design adalah istilah mengenai desaign visual yang diterapkan kepada media digital
yaitu website maupun mobile, design yang ditunjukan untuk pengembangan dan
styling informasi di internet untuk menyediakan fitur konsumen high-end dan
memberikan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dan
mobile dari pemrograman web maupun mobile, menekankan fitur fungsional dari
sebuah situs web atau aplikasi, serta desain posisi web dan aplikasi sebagai semacam
desain grafis.
Secara tidak langsung, website design dan aplikasi ini fokus pada tampilan, tapi tidak
akan menghilangkan fungsi utama yang sedang di design. mampu memeberikan
kenyamanan tambahan bagi pengunjung dan pembaca website maupun pembaca
aplikasi.

B. Konsep Desain Web dan Mobile terdiri dari beberapa aspek, yaitu :
1) MULTI BAHASA
Multi Bahasa merupakan salah satu fitur dimana bahasa di aplikasi yang kita buat
bisa menyesuaikan dengan bahasa di Operating System device android si User.
Sebagai contoh, jika device android si user berbahasa inggris, maka aplikasi kita
akan menjadi berbahasa inggris, dan jika device android si user berbahasa
indonesia, maka aplikasi kita bisa menyesuaikan menjadi bahasa indonesia.
2) MULTI LAYAR
Multi Layar merupakan fitur dimana Aplikasi android yang kita buat bisa berjalan
dengan baik secara desain untuk ukuran-ukuran layar yang lain/device yang
berbeda.
Android mengubah ukuran layout aplikasi Anda agar pas dengan layar perangkat
saat ini. Umumnya, ini akan berhasil.
 Dalam kasus lain, UI Anda mungkin terlihat tidak bagus dan perlu penyesuaian
untuk ukuran layar yang berbeda.
Misalnya, pada layar yang lebih besar, Anda mungkin ingin menyesuaikan posisi
dan ukuran sebagian elemen untuk memanfaatkan ruang layar tambahan, atau
pada layar yang lebih kecil, Anda mungkin perlu menyesuaikan ukuran agar
semuanya bisa pas pada layar.

3) DESIGN RENPONSIVE
Untuk membuat desain responsif pada sebuah aplikasi, salah satu caranya dengan
menyediakan desain untuk orientasi layar potrait maupun landscape.
Berikut ini terdapat beberapa aspek yang perlu diperhatikan dalam membuat
sebuah website :
a. Dapat Digunakan (Usability)
Usabilitas merupakan hal yang sangat penting dalam merancang web (web
design). Memang sangat baik jika memiliki sebuah website dinamis yang
nampak profesional dan bagus, namun jika perlu waktu yang sangat lama
untuk mendownload sebuah artikal atau penggunaan navigasinya sangat rumit
maka tidak heran jika pengguna akan “hengkang” dari website Anda dan tidak
akan kembali lagi.
b. Navigasi (Navigation)
Navigasi juga menjadi hal yang sangat penting dalam sebuah website yang
berfungsi untuk membantu pengguna (user) dalam menjelajah website kita
untuk mencari informasi yang diinginkan secara mudah. Navigasi yang bagus
mencerminkan struktur website yang sangat baik.
c. Konsep Penulisan (Writing Concept)
Teknik penulisan dalam web berbeda dengan penulisan untuk publikasi
(cetak). Waktu merupakan hal sangat penting bagi mereka yang menggunakan
Internet, sehingga para pengguna Internet tidak akan membuang waktunya
hanya untuk membaca teks yang sangat banyak sekali. Riset membuktikan
bahwa para pengguna cenderung meneliti teks dalam layar monitor.
d. Kesederhanaan (Simplicity)
Kesederhanaan merupakan hal penting dalam membuat sebuah web
profesional. Sederhana di sini bukan dalam arti tampilan sebuah situs, namun
lebih mengarah ke teknik penulisannya.
e. Mudah Diakses (Accessability)
Suatu hal yang mudah diakses ke semua orang dengan mengabaikan browser,
paltform, sistem operasi, tersambung atau putus merupakan hal yang sangat
utama untuk mempertimbangkan ketika merancang sebuah website. Anda
tidak perlu menghalangi seorang pengguna web keluar, siapa saja bisa menjadi
potensi menjadi pengunjung/ pelanggan. Setelah sebuah website mudah
diakses, membuat penggunaan website Anda akan banyak diakses oleh
pengguna/pengunjung. Mudah digunakan = Pengunjung akan kembali. Sulit
digunakan = Pengunjung akan “kapok”.
f. Kebutaan Warna (Color Blindness)
Sekitar satu dari sebelas orang mungkin tidak mampu menggunakan website
Anda berkaitan dengan beberapa format kebutaan warna (color blindness).
Yang terbaik, website Anda tidak akan nampak pada orang yang buta warna
seperti yang telah Anda rancang. Sialnya lagi, hal ini bisa jadi teks tidak
terbaca, navigasi yang sulit digunakan dan elemen lain yang tersembunyi.

Contoh Design web dan mobile yang responsive

1: Starbuck ( https://www.starbucks.com/ )
Tampilan Website :
Tampilan Mobile :

2: OPEN WEAR (https://www.open-wear.com/ )

Tampilan Website :
 Tampilan Mobile :

C. Prinsip Desain Web dan Mobile

Prinsip Desain Web dan Mobile harus banyak memerhatikan aspek penting bahwa
pertama kita harus tahu bahwa desain dan konstruksi situs web umumnya digunakan
untuk browser komputer, dan tidak kompatibel dengan perangkat mobile. Agar situs
kita bekerja dengan baik pada handset mobile, maka harus mengikuti pedoman desain
aksesibilitas untuk membangun Website mobile yang ditetapkan oleh W3C (World
Wide Web Consortium).
Cara termudah untuk membangun Situs Web mobile kita adalah memodifikasi situs
web yang ada agar kompatibel untuk handset mobile. Jika kita memutuskan untuk
melakukannya, maka akan ada perubahan besar dalam hal tata letak, desain dan
konstruksi. Berikut adalah beberapa prinsip tentang desain web mobile yang harus
Anda perhatikan sebelum melanjutkan untuk membangunnya:
• Situs Kita harus menggunakan CSS dalam penerapan tata letak untuk
memastikan kompatibilitas maksimum. Hindari menggunakan tabel.
• Sangat mudah jika situs kita dikodekan baik menggunakan XML atau
XHTML, dengan pengkodean karakter disarankan tetap menggunakan UTF-8,
kita harus mempertimbangkan bahwa perangkat mobile yang berbeda
memiliki ukuran layar yang berbeda
• Jangan lupa untuk menempatkan semua informasi yang paling penting ketika
pengguna ponsel melihat bagian atas halaman seperti pencarian situs dan
navigasi. Usahakan membuat desain situs mobile yang nyaman bagi konsumen
kita.
• Desain untuk jari. Klik target harus minimal berukuran 30-40px dan
menggunakan spasi di antara unsur-unsur untuk memudahkan kemampuan
klik.
• Hindari gambar latar belakang karena dapat mengurangi pembacaan dalam
kondisi pencahayaan tertentu. Menggabungkan gambar yang lebih kecil,
seperti ikon, ke dalam satu file dan menggunakan css untuk penggunaannya.
Hal ini akan membantu mengurangi beban load yang besar sehingga proses
tampilan akan lebih cepat. Terakhir, kurangi ukuran gambar (kompresi) dan
kecilkan file-file javascript.
• Form bisa sulit untuk digunakan pada perangkat mobile. Karena teks akan
memakan waktu untuk dapat masuk saat disubmit, alternatif lain adalah
penggunaan tombol radio dan daftar (checklist), yang dapat lebih mudah
dipilih. Posisi label di atas dan tidak sejajar disebelah kiri untuk menghemat
ruang.
Seperti yang kita ketahui, ada banyak yang perlu dipertimbangkan ketika
merancang dan membangun sebuah situs web mobile. Prinsip-prinsip desain
ponsel berbeda jika dibandingkan desain situs web konvensional. Jika kita
tidak memiliki waktu atau kesabaran untuk mempelajari praktek coding yang
baru, kita dapat mempertimbangkan untuk menggunakan jasa web designer
yang mengkhususkan dalam desain situs web mobile