BUKU DIKTAT PRAKTIKUM
MATA KULIAH INTERAKSI MANUSIA DAN KOMPUTER SEMESTER 3 (TIGA)
KODE MODUL TIK 3017
PENYUSUN:
Tikaridha Hardiani S.Kom., M.Eng
PROGRAM STUDI TEKNOLOGI INFORMASI FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ‘AISYIYAH YOGYAKARTA
TAHUN 2021
HALAMAN PENGESAHAN
BUKU DIKTAT PRAKTIKUM
MATA KULIAH INTERAKSI MANUSIA DAN KOMPUTER SEMESTER 3 (TIGA)
KODE MODUL TIK 3017
PENYUSUN:
Tikaridha Hardiani S.Kom., M.Eng
DISAHKAN:
DI YOGYAKARTA SEPTEMBER 2021
DISAHKAN 20 SEPTEMBER 2021 KETUA PRODI
Zahra Arwananing Tyas S.Kom., M.Cs
DISIAPKAN OLEH
DOSEN PENANGGUNG-JAWAB MK
Tikaridha Hardiani S.Kom., M.Eng
KATA PENGANTAR
Assalamu’alaikum Warohmatullahi Wabaroktuh
Alhamdullilah, atas berkat rahmat Allah SWT Yang Maha Kuasa dengan didorongkan oleh keinginan luhur memperluas wawasan mengenai Interaksi Manusia dan Komputer, maka buku diktat praktikum matakuliah ini dibuat untuk memudahkan mahasiswa S1 Teknologi Informasi dalam mengikuti rangkaian praktikum.
Demikian penyusunan modul matakuliah ini, semoga wawasan yang diperoleh dari modul ini akan bermanfaat bagi kemajuan Islam, kemajuan mahasiswa S1 Teknologi Informasi dan menjadi amal sholeh.
Terima kasih kami ucapkan kepada semua pihak yang telah membantu dan mendukung pembuatan modul ini.
Wassalamu’alaikum Warohmatullahi Wabaroktuh
Yogyakarta, September 2021
Penyusun
DAFTAR ISI
HALAMAN PENGESAHAN ... 2
KATA PENGANTAR... 3
DAFTAR ISI... 4
DAFTAR GAMBAR ... 5
BAB I PENDAHULUAN ... 8
A. DESKRIPSI MODUL ... 8
B. DESKRIPSI PEMBELAJARAN ... 8
D. CAPAIAN PEMBELAJARAN LULUSAN (CPL) YANG DIBEBANKAN PADA MATA KULIAH ... 9
E. CAPAIAN PEMBELAJARAN MATA KULIAH (CPMK) ... 10
F. KEMAMPUAN AKHIR TIAP TAHAPAN BELAJAR (Sub-CPMK) ... 10
G. KORELASI CPMK DENGAN SUB-CPMK ... 11
H. METODE PENILAIAN DAN KESELARASAN DENGAN CPMK ... 11
I. BASIS EVALUASI DAN KOMPONEN EVALUASI ... 11
J. BAHAN KAJIAN (MATERI PEMEBLAJARAN) ... 12
K. TIM DOSEN ... 12
L. DAFTAR SUMBER BELAJAR DAN REFERENSI ... 12
M. DAFTAR PUSTAKA ... 13
BAB II PRAKTIKUM ... 14
A. PENDAHULUAN ... 14
B. CAPAIAN PEMBELAJARAN MATA KULIAH ... 14
C. ALAT DAN BAHAN ... 14
D. DAFTAR TILIK/PROSEDUR ... 15
E. FORMAT LAPORAN PRAKTIKUM ... 15
F. EVALUASI DAN PENILAIAN PRAKTIKUM ... 18
BAB III BAHAN AJAR PRAKTIKUM ... 22
PERTEMUAN 1 DESAIN GUI ... 22
PERTEMUAN 2 DESAIN GUI APLIKASI ... 29
PERTEMUAN 3 DESAIN GUI APLIKASI 2 ... 33
PERTEMUAN 4 DESAIN WEB ... 35
PERTEMUAN 5 Desain Web 2 ... 55
PERTEMUAN 6 PROTOTYPING ... 68
DAFTAR PUSTAKA ... 73
Dix, Alan et.al, 2004, Human-Computer Interaction, Prentice Hall ... 73
Galitz, W.O., The Essential Guide to User Interface Design : An Introduction to GUI Design, Principles, and Techniques, John Wiley & Sons ... 73
Santosa, P. Insap, 2010, Inteaksi Manusia dan Komputer Edisi 2, Andi Yogyakarta ... 73
DAFTAR GAMBAR
Gambar 3.1 Software Desain Interface 23
Gambar 3.2 Tampilan awal Figma 24
Gambar 3.3 Tampilan Log in 24
Gambar 3.4 Beranda Figma 25
Gambar 3.5 Lembar kerja Figma 25
Gambar 3.6 Tools Figma 26
Gambar 3.7 Platform desain 27
Gambar 3.8 Frame Phone 27
Gambar 3.9 Screenshot Aplikasi 28
Gambar 3.10 Frame ukuran Desktop 1440 x 1024 41
Gambar 3.11 Tombol Layout Grid 41
Gambar 3.12 Pengaturan Layout Grid 1 42
Gambar 3.13 Pengaturan Layout Grid 2 42
Gambar 3.14 Tampilan Layout Grid 43
Gambar 3.15 Tampilan Wireframe 44
Gambar 3.16 Tombol Hide Layout Grid 44
Gambar 3.17 Wireframe tanpa Layout Grid 45
Gambar 3.18 Warna 45
Gambar 3.19 Typeface 45
Gambar 3.20 Plugin Feather Icons 46
Gambar 3.21 Icon yang digunakan 46
Gambar 3.22 Berita PSTI 1 47
Gambar 3.23 Berita PSTI 2 47
Gambar 3.24 Berita PSTI 3 48
Gambar 3.25 Berita PSTI 4 48
Gambar 3.26 Logo Footer 49
Gambar 3.27 Header 50
Gambar 3.28 Background Tulisan 50
Gambar 3.29 Tampilan Home 51
Gambar 3.30 Menambahkan shadow 52
Gambar 3.31 Halaman Profesional Qur’ani 52
Gambar 3.32 Halaman Kabar Berita 53
Gambar 3.33 Footer 54
Gambar 3.34 Tampilan Home yang diubah 61
Gambar 3.35 Mengedit Tombol Navigasi 62
Gambar 3.36 Menambahkan Ruler 62
Gambar 3.37 Menambahkan Foto 63
Gambar 3.38 Menambahkan Rectangle dan Judul 64
Gambar 3.39 Menambahkan Teks Paragraf 64
Gambar 3.40 Menambahkan Tombol 1 65
Gambar 3.41 Menambahkan Tombol 2 66
Gambar 3.42 Tampilan Footer 66
Gambar 3.43 Panel Properties 68
Gambar 3.44 Arah Panah Prototype 69
Gambar 3.45 Koneksi Anak Panah 69
Gambar 3.46 Tombol Run 70
Gambar 3.47 Options Prototype 71
Gambar 3.48 Hasil Prototype 71
VISI, MISI DAN TUJUAN PROGRAM STUDI PROGRAM STUDI TEKNOLOGI INFORMASI
FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ’AISYIYAH YOGYAKARTA
A. Visi
“Menjadi Program Studi pilihan dan unggul di bidang Teknologi Informasi berwawasan kesehatan berdasarkan nilai-nilai Islam Berkemajuan”.
B. Misi
1. Menyelenggarakan pendidikan, penelitan, pengadian kepada masyarakat dalam bidang teknologi informasi berwawasan kesehatan dan berdasarkan nilai-nilai Islam Berkemajuan untuk mencerdaskan kehidupan bangsa.
2. Menjadi pusat pengembangan pemikiran Islam dalam bidang teknologi informasi yang berwawasan kesehatan.
C. Tujuan
1. Terwujudnya program studi yang unggul dalam bidang teknologi informasi kesehatan dan peran kemanusiaan berlandaskan nilai-nilai islam.
2. Terwujudnya pendidikan teknologi informasi yang menghasilkan lulusan berakhlak mulia, menguasai ilmu pengetahuan dan teknologi, profesional, berjiwa enterpreneur, dan berperan dalam memajukan kehidupan bangsa.
3. Terwujudnya karya-karya penelitian dalam bidang teknologi informasi kesehatan yang dapat menjadi sumber informasi ilmiah bersifat aplikatif dan menjadi rujukan dalam pemecahan masalah.
4. Terselenggaranya pengabdian pada masyarakat yang berbasis teknologi informasi berorientasi pada pemberdayaan dan pencerahan.
5. Terwujudnya tata kelola program studi yang baik dan bersih.
BAB I
PENDAHULUAN
A. DESKRIPSI MODUL
Modul ini berisi tentang materi praktikum interaksi manusia dan komputer yang dibuat untuk menuntun mahasiswa dalam menjalankan perkuliahan dari matakuliah interaksi manusia dan komputer. Modul ini diperuntukkan bagi mahasiswa Program Studi Teknologi Informasi semester 3. Modul ini memberikan pengalaman belajar sebanyak 2 sks dengan rincian: 1,5 sks Teori dan 0,5 sks praktikum.
B. DESKRIPSI PEMBELAJARAN
Aktifitas Pembelajaran
▪ Kuliah di kelas
Aktivitas pembelajaran dalam rangka memahami suatu informasi pengetahuan secara jelas. Mahasiswa akan mengikuti berbagai metode perkuliahan yang diampu oleh dosen team teaching.
▪ Praktik keterampilan
Aktivitas ini merupakan aktivitas pembelajaran dalam rangka memahami sesuatu informasi secara mantap. Mahasiswa diberi kesempatan untuk praktik menggunakan teori dengan cara simulasi di kelas.
▪ Diskusi Kelompok
Diskusi ini dilakukan dengan peserta seluruh mahasiswa dalam kelompok tiap kelas. Tujuan aktivitas pembelajaran ini adalah untuk belajar mengemukakan pendapat dalam suatu kelompok.
▪ Penugasan
Penugasan dilaksanakan pada materi yang diperlukan pembahasan lebih mendalam dengan harapan mahasiswa memiliki waktu lebih banyak dengan belajar mandiri melalui berbagai referensi.
C. TOPIC TREE
D. CAPAIAN PEMBELAJARAN LULUSAN (CPL) YANG DIBEBANKAN PADA MATA KULIAH
S1 Bertakwa kepada Tuhan Yang Maha Esa dan mampu menunjukkan sikap religius.
S4 Berperan sebagai warga negara yang bangga dan cinta tanah air, memiliki nasionalisme serta tanggung jawab pada negara dan bangsa.
S11 Menjadi pribadi Islami berbasis Al Qur’an dan Sunnah sesuai dengan paham Muhammadiyah.
S16 Berkarya dalam bidang teknologi informasi kesehatan berdasarkan nilai- nilai islam berkemajuan.
PP13 Menguasai dan dapat mengintegrasikan solusi berbasis teknologi informasi secara efektif pada suatu organisasi.
PP16 Menguasai metode/teknik untuk menganalisis, pemodelan, spesifikasi kebutuhan, kualitas, verifikasi, validasi dan perancangan Perangkat Lunak.
KU7 Mampu membangun komunikasi dan kerjasama dengan masyarakat.
KK7
Mampu merancang dan mengembangkan metode/teknik dan algoritma untuk berbagai keperluan seperti Network, Mobile Computing, Intelligent Systems, Information Management, Algorithms and Complexity, Human Computer Interaction.
E. CAPAIAN PEMBELAJARAN MATA KULIAH (CPMK)
Setelah mempelajari dan menyelesaikan mata kuliah ini, mahasiswa mampu:
CPMK 1 Mahasiswa mampu menjelaskan dimensi teoritis terkait faktor manusia dalam penerimaan antar muka komputer.
CPMK 2 Menerapkan teori dan konsep-konsep user centred design (UCD) pada proses pengembangan sistem aplikasi.
CPMK 3 Mahasiswa mampu menganalisis dampak dari antar muka yang baik dalam penerimaan dan optimalisasi kinerja dari sistem informasi.
CPMK 4 Mahasiswa mampu menganalisis, merancang dan mengevaluasi antara muka berdasarkan prinsip-prinsip User Centered Design (UCD)
F. KEMAMPUAN AKHIR TIAP TAHAPAN BELAJAR (Sub-CPMK)
Sub CPMK 1 Mahasiswa mampu Memahami dan memiliki wawasan tentang konsep dasar dan prinsip IMK
Sub CPMK 2 Mahasiswa mampu memahami aspek-aspek manusia yang berhubungan dengan IMK
Sub CPMK 3 Mahasiswa mampu memahami kerangka kerja dan konsep interaksi dan komputer
Sub CPMK 4 Mahasiswa mampu memahami kebergunaan
Sub CPMK 5 Mahasiswa mampu memahami dan menjelaskan manipulasi langsung
Sub CPMK 6 Mahasiswa mampu memahami dan menjelaskan antarmuka berbasis menu
Sub CPMK 7 Mahasiswa mampu menguraikan dialog berbasis teks Sub CPMK 8 Mahasiswa mampu menerangkan piranti interaksi Sub CPMK 9 Mahasiswa mampu membangun perancangan tampilan
Sub CPMK 10 Mahasiswa mampu menjelaskan lingkungan fisik dan ergonomic Sub CPMK 11 Mahasiswa mampu menganalisis evaluasi dan website
G. KORELASI CPMK DENGAN SUB-CPMK
CPMK 1 CPMK 2 CPMK 3 CPMK 4
Sub CPMK 1 √
Sub CPMK 2 √
Sub CPMK 3 √
Sub CPMK 4 √
Sub CPMK 5 √
Sub CPMK 6 √
Sub CPMK 7 √
Sub CPMK 8 √
Sub CPMK 9 √
Sub CPMK 10 √
Sub CPMK 11 √
H. METODE PENILAIAN DAN KESELARASAN DENGAN CPMK
Metode Penilaian CPMK 1 CPMK 2 CPMK 3 CPMK 4 dst
Praktikum √
Tugas √
Team based Project √
Ujian Tengah Semester (UTS) √
Ujian Akhir Semester (UAS) √
I. BASIS EVALUASI DAN KOMPONEN EVALUASI
No. Basis Evaluasi Komponen Evaluasi
Deskripsi Bobot
(%) 1. Aktivitas
Partisipatif
- Mahasiswa melakukan
praktikum pada CPMK 4.
25
2. Hasil Proyek - Membuat video desain
aplikasi dan desain website 25
Sub total
3. Kognitif/
Pengetahuan
Tugas 20
Ujian Tengah Semester
15
Ujian Akhir Semester
15
Sub total Total 100
J. BAHAN KAJIAN (MATERI PEMEBLAJARAN)
PERTEMUAN KE BAHAN KAJIAN/MATERI PEMBELAJARAN
1 Pendahuluan IMK
2 Faktor Manusia
3 Kerangka Kerja dan Paradigma Interaksi
4 Kebergunaan
5 Manipulasi Lansung
6 Antarmuka Berbasis Menu
7 Dialog Berbasis Teks
8 Piranti Interaksi
9 Perancangan Tampilan
10 Lingkungan Fisik dan Ergonomik
11 Evaluasi dan Website
K. TIM DOSEN
Tim Dosen dan Asisten Praktikum untuk praktikum Interaksi Manusia dan Komputer sebagai berikut:
1. Tikaridha Hardiani S.Kom., M.Eng 2. LM. Ma’rifatun
L. DAFTAR SUMBER BELAJAR DAN REFERENSI
1. Santosa, P. Insap, 2010, Inteaksi Manusia dan Komputer Edisi 2, Andi Yogyakarta
2. Dix, Alan et.al, 2004, Human-Computer Interaction, Prentice Hall 3. Galitz, W.O., The Essential Guide to User Interface Design : An
Introduction to GUI Design, Principles, and Techniques, John Wiley &
Sons
4. Jennifer Preece, Yvonne Rogers, and Helen Sharp, 2002 Interaction Design: Beyond Human-Computer Interaction, John Wiley
M. DAFTAR PUSTAKA
1. Hendriana, Yana, & Nugraheni, Murien, 2016, Modul Interaksi Manusia dan Komputer, Prodi Teknik Informatika, UAD, Yogyakarta
2. Hardiani, Tikaridha. 2020. Modul Interaksi Manusia dan Komputer, Prodi Teknologi Informasi, UNISA, Yogyakarta.
BAB II PRAKTIKUM
A. PENDAHULUAN
Mata kuliah Interaksi Manusia dan Komputer (IMK) membahas dasar konsep dan praktis tentang interaksi manusia dan komputer, model interaksi, perancangan dan implementasi antar-muka manusia dan komputer. Mahasiswa diharapkan mahasiswa mempunyai pemahaman tentang human cognition, memori manusia, penyelesaian masalah, bahasa serta apa dan bagaimana keterkaitan hal-hal tersebut dalam merancang dan mengembangkan sistem interaktif. Materi yang terdapat dalam mata kuliah ini yaitu: Antarmuka manusia dan komputer, interaksi manusia dan komputer, Aspek-aspek manusia, Aspek-aspek komputer dalam IMK, Model interaksi manusia dengan sistem interaktif, Model interaksi manusia dengan sistem interaktif, Ergonomik, ragam dialog dan teknik evaluasi. Metode pembelajaran yang digunakan yaitu small group discussion, brainstorming, collaborative learning, project based learning. Metode evaluasi mata kuliah ini yaitu ujian tertulis, responsi praktikum, dan penilaian team based project.
B. CAPAIAN PEMBELAJARAN MATA KULIAH
a. Mahasiswa mampu menjelaskan dimensi teoritis terkait factor manusia dalam penerimaan antar muka komputer.
b. Menerapkan teori dan konsep-konsep user centred design (UCD) pada proses pengembangan sistem aplikasi.
c. Mahasiswa mampu menganalisis dampak dari antar muka yang baik dalam penerimaan dan optimalisasi kinerja dari sistem informasi.
d. Mahasiswa mampu menganalisis, merancang dan mengevaluasi antara muka berdasarkan prinsip-prinsip User Centered Design (UCD).
C. ALAT DAN BAHAN
1. Komputer atau Laptop 2. Jaringan Internet
3. Aplikasi Figma (Dekstop atau Web) 4. Aplikasi Zoom Meeting
5. Aplikasi Browser (Chrome atau MS Edge)
D. DAFTAR TILIK/PROSEDUR
1. Setiap mahasiswa wajib hadir (kehadiran 100 %)
2. Mahasiswa yang ijin karena sakit harus disertai surat keterangan sakit dari dokter atau bila berhalangan hadir karena sebab lain, harus disertai surat ijin
3. Datang 15 menit sebelum praktikum dimulai
4. Letakkan tas dan benda-benda lain yang tidak diperlukan dalam praktikum pada tempat yang telah disediakan
5. Dilarang melakukan aktivitas makan dan minum di dalam laboratorium 6. Bila terjadi kesalahan atau kecelakaan kerja segera lapor kepada
instruktur praktikum
7. Setelah praktikum selesai, bersihkan semua alat-alat yang telah digunakan dan kembalikan pada tempat semula
8. Buatlah laporan praktikum dan kumpulkan paling lambat 1 minggu setelah acara praktikum
9. Laporan praktikum dikumpulkan dengan cara mengunggah di e-learning 10. Sebelum meninggalkan laboratorium, matikan semua komputer dan
rapikan meja dan kursi.
E. FORMAT LAPORAN PRAKTIKUM
Laporan praktikum mengikuti cara penulisan sebagai berikut : 1. Halaman judul
a. Judul praktikum
b. Logo UNIVERSITAS ‘AISYIYAH YOGYAKARTA c. Tahun Ajaran
d. Nama Mata Kuliah e. Semester
f. Praktikum ke g. Nama
h. NIM
Contoh format:
2. Halaman isi
A. Judul praktikum
Merupakan label yang terdiri dari tidak lebih dari 15 kata dan mencerminkan semua hal yang dilakukan, jelas, singkat, dan informatif.
B. Tujuan
Berisi pernyataan kalimat yang menjelaskan tujuan acara praktikum yang dilakukan.
C. Landasan teori
Berisi telaah materi seputar acara parktikum yang telah dikerjakan. Wajib disertakan
acuan/ sitasi yang relevan dari sumber ilmiah terpercaya sesuai dengan kaidah baku penulisan sistem nama dan tahun. Tidak diperkenankan mensitasi Wikipedia atau blog atau plagiatisme.
D. Hasil dan pembahasan
1. Hasil, berupa sajian data praktikum berupa tabel atau gambar. Judul tabel diletakkan pada atas tabel sedangkan judul gambar diletakkan dibawah gambar.
2. Pembahasan, berisi uraian singkat dan ilmiah dari hasil praktikum serta dibandingkan dengan teori yang relevan.
E. Kesimpulan
Berupa pernyataan (paragraf) yang merupakan kesimpulan dari hasil dan pembahasan yang disesuaikan dengan tujuan praktikum.
F. Daftar pustaka
Berisi pustaka acuan yang digunakan dalam penyusunan laporan praktikum dengan APA 6th Style.
Format Penulisan : 1. Kertas : HVS A4
2. Jenis Huruf : Times New Roman 12 pt
3. Margin Atas : 2,5 cm Bawah : 2,5 cm Kiri : 3,5 cm Kanan : 2,5 cm
4. Mengikuti kaidah Bahasa Indonesia yang baik dan benar sesuai EBI (Ejaan Bahasa Indonesia)
5. Paragraph/badan laporan diketik dengan rata kanan kiri.
6. Tanda titik, koma, titik koma, dan titik dua diketik menempel pada kata sebelumnya dan setelahnya diberi jarak satu ketukan spasi.
7. Listing code program diketik dengan jenis huruf Courier New 11 pt. l. Jarak/spasi antar baris dalam laporan adalah 1,5.
8. Penggunaan kata asing dan istilah-istilah dicetak miring (italic).
9. Nama File dan format file wajib NamaMataKuliah_Praktikum[urutan praktikum].pdf (Contoh : SP_Praktikum1.pdf
10. File Format Bisa diunduh di E-Learning
F. EVALUASI DAN PENILAIAN PRAKTIKUM 1. Penilaian Softskills
No Aspek Pengamatan
Skor
Kurang Cukup Baik Sangat Baik
1 2 3 4
1 Menghargai teman yang berbicara 2 Tidak menyontek dalam mengerjakan
praktikum
3
Mahasiswa menyalakan video jika tatap muka online khususnya presentasi dan tanya jawab real time.
4 Respon dalam pembelajaran Jumlah Skor Rata-rata
Keterangan:
Sangat Baik (SB)
Skor 4 selalu, apabila selalu melakukan sesuai pernyataan. =
Baik (B) Skor 3 sering, apabila sering melakukan sesuai pernyataan = dan kadang-kadang tidak melakukannya.
Cukup (C) Skor 2 kadang-kadang, apabila kadang-kadang melakukan = dan sering tidak melakukannya.
Kurang Skor 1 tidak pernah, apabila tidak pernah melakukannya =
2. Penilaian Hardskill
No Aspek Pengamatan
Skor
Kurang Cukup Baik Sangat Baik
1
Pengoperasian system/aplikasi.
Kemahiran dalam mengoperasikan software/system/aplikasi
Keterangan:
3. Penilaian Laporan Praktikum
SKOR PENILAIAN ASPEK PENGAMATAN
Sangat Baik (SB) 90
=
Judul: ditulis lengkap; sesuai dengan panduan dan kegiatan praktikum
Tujuan: ditulis lengkap, sesuai dengan panduan dan kegiatan praktikum
Dalsar teori: relevan dengan judul praktikum dan kegiatan praktikum; dilengkapi dengan adanya sitasi
Metode: ditulis lengkap dan relevan dengan kegiatan praktikum di laboratorium
Hasil: ditulis secara lengkap dan relevan dengan hasil kegiatan praktikum
Pembahasan: mengacu pada 4 pustaka yang relevan dengan judul praktikum; 3 pustaka yang menjadi acuan dalam pembahasan sesuai dengan yang tercantum dalam daftar pustaka
Kesimpulan: menjawab tujuan praktikum dan relevan dengan pembahasan dalam laporan
2 Teliti dan tepat. Ketelitian dan ketepatan dalam praktikum
Jumlah skor Rata-rata
SangatBaik (SB) Skor 4 selalu, apabila selalu melakukan sesuai = pernyataan.
Baik (B) Skor 3 sering, apabila sering melakukan sesuai = pernyataan
dan kadang-kadang tidak melakukannya.
Cukup (C) Skor 2 kadang-kadang, apabila kadang-kadang = melakukan dan sering tidak melakukannya.
Kurang Skor 1 tidak pernah, apabila tidak pernah = melakukannya
Daftar pustaka: terdiri dari 4 pustaka berbahasa indonesia dan 1 pustaka berbahasa inggris
Baik (B)
85-89 =
Judul: tidak ditulis lengkap, tetapi sesuai dengan panduan dan kegiatan praktikum
Tujuan: tidak ditulis lengkap, tetapi sesuai dengan panduan dan kegiatan praktikum
Dasar teori: relevan dengan judul praktikum dan kegiatan praktikum, tetapi tidak dilengkapi dengan sitasi
Metode: ditulis secara lengkap (alat, bahan dan cara kerja), teta wpi tidak relevan dengan praktikum di laboratorium Hasil: tidak ditulis secara lengkap, tetapi relevan dengan kegiatan praktikum
Pembahasan: mengacu pada 4 pustaka yang relevan dengan judul praktikum; 2 pustaka yang menjadi acuan dalam pembahasan sesuai dengan yang tercantum dalam daftar pustaka
Kesimpulan: menjawab tujuan praktikum, tetapi tidak relevan dengan pembahasan dalam laporan
Daftar pustaka: terdiri dari 2 pustaka berbahasa indonesia dan 1 pustaka berbahasa inggris
Cukup (C)
80-84 =
Judul: ditulis lengkap, tetapi tidak sesuai dengan panduan dan kegiatan praktikum
Tujuan: ditulis lengkap; tetapi tidak sesuai dengan acara praktikum
Dasar teori: tidak relevan dengan judul praktikum dan acara praktikum tetapi dilengkapi dengan sitasi
Metode: tidak ditulis lengkap (alat, bahan dan cara kerja), tetapi sesuai dengan realita di laboratorium
Hasil: ditulis secara lengkap tetapi tidak relevan dengan kegiatan praktikum
Pembahasan: ditulis lengkap; disertai dengan acuan 3 pustaka yang relevan dengan judul praktikum; 1 pustaka yang menjadi acuan dalam pembahasan sesuai dengan yang tercantum dalam daftar pustaka
Kesimpulan: menjawab tujuan praktikum; kesimpulan tidak relevan dengan data hasil praktikum tetapi relevan dengan
pembahasan
Daftar pustaka: terdiri dari 2 pustaka berbahasa indonesia
Kurang (K)
75-79 =
Judul: tidak ditulis lengkap dan tidak sesuai dengan panduan serta kegiatan praktikum
Tujuan: tidak ditulis lengkap dan tidak sesuai dengan acara praktikum
Dasar: teori tidak relevan dengan judul praktikum dan acara praktikum dan tidak dilengkapi dengan sitasi
Metode: tidak ditulis lengkap dan tidak sesuai dengan realita di laboratorium
Hasil: tidak ditulis secara lengkap dan tidak relevan dengan kegiatan praktikum
Pembahasan: ditulis lengkap; tetapi tidak disertai dengan acuan pustaka yang relevan dengan judul praktikum
Kesimpulan: tidak menjawab tujuan praktikum dan kesimpulan tidak relevan dengan data hasil praktikum dan pembahasannya
Daftar pustaka: terdiri dari 1 pustaka berbahasa indonesia
BAB III
BAHAN AJAR PRAKTIKUM PERTEMUAN 1
DESAIN GUI
1. Tujuan Praktikum
1. Mahasiswa mampu memahami aspek-aspek GUI
2. Materi
A. GUI (Graphic User Interface)
GUI adalah suatu sistem yang membuat para pengguna atau user bisa berinteraksi dengan suatu perangkat komputer yang digunakan oleh si user tersebut. GUI sendiri dapat dikendalikan menggunakan beberapa macam alat input, seperti mouse, keyboard, touchscreen, konsol dan lain sebagainya.
GUI berfungsi untuk mempermudah user menggunakan sebuah software dalam komputer dan Smartphone. Dengan GUI kita bisa hanya dengan meng-klik tanpa harus mengetik.
B. Software
Ada banyak software yang bisa digunakan untuk mendesain sebuah interface, diantaranya adalah Figma, Adobe XD, Adobe Illustrator, Photoshop, Coreldraw, Affinity Designer. Beberapa diantaranya memang dikhususkan untuk membuat sebuah tampilan interface aplikasi dan website seperti Figma dan Adobe XD. Software desain interface ditunjukkan pada gambar 3.1
Gambar 3.1 Software Desain Interface
C. Figma
Figma adalah sebuah software desain berbasis web dan aplikasi desktop yang digunakan untuk mendesain sebuah tampilan antarmuka pengguna dan prototipe. Figma mudah dipelajari karena tampilannya yang sederhana dan tools yang sedikit.
3. Aktivitas Mahasiswa
Buka browser lalu ketikkan www.figma.com. Tampilan awal Figma ditujukkan pada gambar 3.2.
Gambar 3.2 Tampilan awal Figma
Selanjutnya klik tombol Log in lalu klik Continue with Google. Tampilan Log In ditunjukkan pada gambar 3.3.
Gambar 3.3 Tampilan Log in
Setelah berhasil Log in maka akan masuk ke beranda Figma. Tampilan beranda figma ditunjukkan pada gambar 3.4
Gambar 3.4 Beranda Figma
Untuk mulai mendesain klik menu New design file. Berikut adalah halaman lembar kerja pada figma. Tampilan lembar kerja Figma ditunjukkan pada gambar 3.5
Gambar 3.5 Lembar kerja Figma
Tools pada figma tidak banyak seperti pada kebanyakan software desain.
Tools yang ada hanyalah tools-tools penting untuk kebutuhan mendesain interface. Tampilan tools Figma ditunjukkan pada gambar 3.6.
Gambar 3.6 Tools Figma Keteranngan:
• Main menu, digunakan untuk kembali ke beranda figma dan lain-lain
• Move tool, terdapat dua tools didalamnya, yaitu Move dan Scale
• Region tool, terdapat dua tools didalamnya, yaitu Frame dan Slice
• Shape tool, terdapat tujuh tools didalamnya, yaitu Rectangle, Line, Arrow, Ellipse, Polygon, Star, Images
• Drawing tool, terdapat dua tools didalamnya, yaitu Pen dan Pencil
• Text tool
• Hand tool
• Add Comment
Untuk mulai mendesain sebuah interface, kita perlu membuat sebuah frame, frame inilah yang akan menjadi kertas kita untuk mendesain. Caranya dengan meng-klik tools Frame atau menekan tombol F pada keyboard, pada sisi sebelah kanan layar akan muncul macam-macam ukuran frame yang dapat digunakan untuk mendesain sebuah interface, seperti Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media dan Figma Community.
Tampilan platform desain ditunjukkan pada gambar 3.7.
Gambar 3.7 Platform desain
Pilih frame Phone dengan ukuran iPhone 11 Pro Max. Untuk mengganti ukuran, posisi, lengkungan, warna, efek dan export terdapat di sisi sebelah kanan, dan sebelah kiri untuk mengunci, menyembunyikan, merubah letak frame diatas atau dibawah frame lainnya dan mengganti nama frame.
Tampilan frame phone ditunjukkan pada gambar 3.8.
Gambar 3.8 Frame Phone
4. Tugas
1. Re-desain Aplikasi PMB UNISA, E-Library UNISA atau SIMPTT UNISA (Pilih salah satu). Aplikasi yang akan di re-desain ditunjukkan pada gambar 3.9.
Gambar 3.9 Screenshot Aplikasi
2. Dikerjakan secara kelompok, 1 kelompok beranggotakan 3-5 orang
5. Referensi
1. Hendriana, Yana, & Nugraheni, Murien, 2016, Modul Interaksi Manusia dan Komputer, Prodi Teknik Informatika, UAD, Yogyakarta.
2. Hardiani, Tikaridha. 2020. Modul Interaksi Manusia dan Komputer, Prodi Teknologi Informasi, UNISA, Yogyakarta.
PERTEMUAN 2 DESAIN GUI APLIKASI
1. Tujuan Praktikum
• Mahasiswa mampu memahami aspek-aspek Desain GUI Aplikasi.
2. Materi Praktikum A. User Interface
Antarmuka pemakai (User Interface) merupakan mekanisme komunikasi antara pengguna (user) dengan sistem. User interface yang ada untuk berbagai sistem, dan menyediakan cara:
• Input, memungkinkan pengguna untuk memanipulasi sistem.
• Output, memungkinkan sistem untuk menunjukkan efek manipulasi pengguna.
B. Jenis-jenis User Interface
User Interface ada dua jenis, yaitu:
1. Graphical User Interface (GUI): Menggunakan unsur-unsur multimedia (seperti gambar, suara, video) untuk berinteraksi dengan pengguna.
2. Text-Based: Menggunakan syntax/rumus yang sudah ditentukan untuk memberikan perintah.
Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI memberikan keuntungan seperti:
1. Mudah dipelajari oleh pengguna yang pengalaman dalam menggunakan komputer cukup minim.
2. Berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi.
3. Akses penuh pada layar dengan segera untuk beberapa macam tugas/keperluan.
C. Karakteristik GUI
1. Window; beberapa window bisa tampilkan informasi-informasi berbeda sekaligus pada layar.
2. Icon; mewakili informasi yang berbeda seperti icon untuk file, icon folder atau icon untuk program tertentu.
3. Menu; menawarkan perintah-perintah yang disusun dalam menu tanpa harus mengetik.
4. Pointing; alat penunjuk seperti mouse untuk memilih pilihan pada layar.
5. Graphic; gambar yang bisa dicampur dengan teks pada display yang sama untuk menyajikan informasi
D. Tipe-tipe Interaksi Dengan User
1. Direct manipulation – pengoperasian secara langsung: interaksi langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Contoh: Video games. Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat. Kekurangan: Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek.
2. Menu selection – pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan. Misalnya saat klik kanan dan memilih aksi yang dikehendaki. Kelebihan: User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah. Kekurangan: Tidak ada logika AND atau OR.
Perlu ada struktur menu jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding command language.
3. Form fill-in – pengisian form: Mengisi area-area pada form. Contoh: Stock control. Kelebihan: Masukan data yang sederhana. Mudah dipelajari Kekurangan: Memerlukan banyak tempat di layar. Harus menyesuaikan dengan form manual dan kebiasaan user.
4. Command language – perintah tertulis: Menuliskan perintah yang sudah ditentukan pada program. Contoh: operating system. Kelebihan: Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa diterapkan pada terminal yang murah. Kombinasi perintah bisa dilakukan.
Misal copy file dan rename nama file. Kekurangan: Perintah harus dipelajari dan diingat cara penggunaannya, tidak cocok untuk user biasa.
Kesalahan pakai perintah sering terjadi. Perlu ada sistem pemulihan kesalahan. Kemampuan mengetik perlu.
5. Natural language – perintah dengan bahasa alami: Menggunakan bahasa alami untuk mendapatkan hasil. Contoh: search engine di Internet.
Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat), misalnya kata kunci yang kita tentukan untuk dicari oleh search engine. Ada kebebasan menggunakan kata-kata. Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan maka akan memerlukan banyak pengetikan.
E. Warna
Ada dua hal yang harus diperhatikan oleh seorang designer saat membuat UI, yaitu user dan interface. UI yang baik akan membantu user. Dan, UI yang baik akan membuat user nyaman menggunakannya. Kriteria yang penting dari sebuah UI adalah tampilan yang menarik. Desainer UI: harus punya jiwa seni, selera pengguna dan dapat meyakinkan programmer bahwa rancangannya dapat diimplementasikan dengan tools. Desainer harus membuat dokumentasi rancangannya. cara dokumentasi adalah dengan sketsa pada kertas, penggunaan piranti prototype GUI dan penjelasan tekstual.
Secara garis besar warna dapat dikategorikan menjadi tiga kelompok yaitu warna dingin (biru, hijau, ungu), warna panas (merah, pink, oranye, kuning), dan warna netral (hitam, putih, abu-abu, coklat).
Teori pemilihan warna:
1. Monochromatic; Teknik pemilihan warna menggunakan satu warna dominan/kuat. Teknik ini menimbulkan suasana minimalistik dan harmonis secara keseluruhan.
2. Analogous; Hampir sama dengan monochromatic, hanya saja ditambahkan aksen warna tambahan yang diambil dengan cara menggeser warna di palet.
3. Complementary/Kontras; Memadukan warna yang kontras atau berlawanan untuk menimbulkan kesan “mengundang” yang tegas.
Misalkan warna dominan yang digunakan adalah biru, maka bisa dipilih warna pink sebagai warna sekunder.
4. Split-complementary; Teknik ini merupakan pengembangan dari teknik complementary. yang membedakan adalah digunakannya tambahan warna dari turunan masing-masing warna dominan. Sebagai contoh,
warna utama nya adalah biru dan merah muda, maka tambahan warna nya diambil dari turunan biru dan merah muda.
5. Triadic; Teknik ini menggunakan tiga warna yang masing-masing sama kuatnya (bukan turunan satu sama lain). Misalkan kita menggunakan warna biru sebagai warna utama, hijau sebagai warna konten (grafik, ikon, dll), dan pink sebagai tombol.
3. Aktivitas Mahasiswa
a. Mahasiswa mempresentasikan hasil praktikum satu untuk di-review
b. Mahasiswa melanjutkan dan melengkapi desain aplikasi pada praktikum satu
4. Tugas
a. Mahasiswa melanjutkan dan melengkapi desain aplikasi yang sudah dipilih
5. Referensi
1. Hendriana, Yana, & Nugraheni, Murien, 2016, Modul Interaksi Manusia dan Komputer, Prodi Teknik Informatika, UAD, Yogyakarta
2. Hardiani, Tikaridha. 2020. Modul Interaksi Manusia dan Komputer, Prodi Teknologi Informasi, UNISA, Yogyakarta.
PERTEMUAN 3 DESAIN GUI APLIKASI 2
1. Tujuan Praktikum
• Mahasiswa mampu memahami aspek-aspek Desain GUI Aplikasi.
2. Materi Praktikum
Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Sistem menu adalah daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa kalimat/kumpulan kata-kata.
Ada 2 jenis sistem menu yang pertama Sistem menu datar. Adalah suatu program aplikasi ditampilkan lengkap dan menggunakan kalimat-kalimat yang cukup panjang. Pada sistem menu datar pemilihan menu dapat dilakukan dengan 2 cara yaitu:
1. Menggunakan selector dari setiap pilihan yang tersedia. Cara ini bermaksud memudahkan pengguna dalam melakukan pilihan, pada setiap pilihan biasanya disertakan suatu selector yang dapat berupa huruf, angka atau campuran keduanya.
2. Penggunaan tanda terang (highlight). Tanda terang dapat digerakkan pada semua pilihan yang ada dilayar dengan cara menggunakan bantuan tombol arah atau menggunakan bantuan mouse, menempatkan tanda terang ke suatu pilihan yang diinginkan, kemudian pengguna harus menekan tombol enter atau mengklik mouse untuk mengkonfirmasi pilihannya.
3. Aktivitas Mahasiswa
a. Mahasiswa mempresentasikan hasil praktikum dua untuk di-review
4. Tugas
a. Mahasiswa melanjutkan dan menyelesaikan desain aplikasi praktikum dua
5. Referensi
1. Hendriana, Yana, & Nugraheni, Murien, 2016, Modul Interaksi Manusia dan Komputer, Prodi Teknik Informatika, UAD, Yogyakarta
2. Hardiani, Tikaridha. 2020. Modul Interaksi Manusia dan Komputer, Prodi Teknologi Informasi, UNISA, Yogyakarta.
PERTEMUAN 4 DESAIN WEB
1. Tujuan Praktikum:
▪ Mahasiswa mampu memahami prinsip-prinsip dalam mendesain website.
▪ Mahasiswa mampu mendesain sebuah website menggunakan Figma.
2. Materi Praktikum:
A. Merumuskan Tujuan Membuat Website
Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut:
• Website marketing, berfungsi sebagai media presentasi dan pemasaran.
• Website costumer service, berfungsi sebagai media untuk melayani konsumen.
• Website e-Commerce, berfungsi sebagai media transaksi online.
• Website informasi/berita, berfungsi sebagai media informasi berita.
a. Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.
b. Menentukan target pengunjung
Meskipun suatu website mampunyai sifat terbuka dalam arti sebuah website bebas dikunjungi oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada penggunaan hardware dan aplikasi browser yang berbeda dengan setiap pengunjung.
c. Menentukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tetntunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang terorganisasi
dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing, dan pemeliharaan website tersebut.
B. Desain Website
Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling pentingdalam menentukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki suatu kesatuan desain bias dikatakan memiliki kesamaan tema dalam halaman-halaman webnya.
Hal ini penting dalam hal estetika maupun segi navigasi. Kesamaan desain yang biasanya dipertahankan antara lain kesamaan jenis font yang digunakan, warna, tombol navigasi (menu) letak menu dan lain sebagainya.
Karena itu sangatlah penting bagi seorang web designer untuk mengetahui aturan-aturan yang berlaku dalam mendisain suatu website. Hal ini diperlukan agar design web dari website yang akan dibangun tidak terkesan sekedarnya.
a. Untuk membangun suatu website yang baik seorang web designer sebaiknya memperhatikan prinsip-prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip-prinsip yang perlu diperhatikan antara lain:
• Unik, Yang dimaksud dengan unik dalam mendesign suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain.
• Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus betul-betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang digunakan.
• Simple, Banyak dari seorang web designer yang memegang prinsip
“Keep it simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
• Semiotic, Arti semiotic adalah ilmu yang mempelajari tentang tanda- tanda. Dalam hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti ketika melihat tanda dan gambar yang terlihat dalam gambar yang ada dalam suatu website.
• Ergonomic, Ergonomic dalam mendesign suatu website adalah kepunyaan yang akan didapatkan pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari informasi.
• Focus, Focus adalah hierarki prioritas dari pesan yang akan disampaikan. Dengan adanya focus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dahulu
harus dibaca atau dilihat.
• Konsistensi, konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen-elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut.
b. Hal-hal yang perlu diperhatikan oleh seorang web designer untuk mencapai prinsip ini adalah:
• Pemilihan ukuran fonts yang tepat sehingga mudah dibaca.
• Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informatif.
C. Elemen-Elemen Desain
Design grafis khususnya dalam halaman-halaman web terdiri dari beberapa elemen sebagai berikut (Ariesto Hadi Sutopo, 2002):
a. Teks adalah bagian paling utama untuk menampilkan informasi.
b. Grafik atau image merupakan elemen yang dapat membantu menjelaskan informasi. Dengan penggunaan grafik maupun image orang lebih mudah memahami suatu pesan.
c. Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi merupakan daya tarik yang mudah diingat pengunjung.
d. Video dapat merupakan hasil suatu rekaman dengan kamera video, HP, maupun hasil pengolahan komputer.
e. Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta memberikan kenyamanan bagi pengunjung yang mendengarkannya.
f. Interaktif link dapat menggunakan button yang berupa teks,symbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
D. Konsep Desain
a. Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada dasarnya mengikut prinsip design grafis secara umum. Oleh karena itu alangkah baiknya jika dalam mendesain halaman
tampilan website juga memperhatikan prinsip design. Prinsip-prinsip design tesebut adalah:
• Komunikatif, prinsip komunikatif berhubungan dengan identitas, isi pesan, serta audiens.
• Estetis, fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.
• Ekonomis, design web harus memperhatikan faktor ekonomis dalam arti ukuran file yang digunaka. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website.Untuk mendapatkan design yang komunikatif, estetis, dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman-pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen-elemen layout.
b. Pedoman yang dimaksud adalah:
Kesatuan, elemen-elemen layout dari halaman harusditempatkan sedemikian rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman
• Balance elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan secara keseluruhan.
• Kontras, diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen layout.
• Kontinyuitas, informasi lebih dimengerti oleh pengguna bila mempunyai aliran-aliran yang baik, sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian yang lain.
Kontinyuitas dapat dibuat dengan membuat halaman-halaman yang mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
E. Pembuatan Layout
Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout:
• Membuat sketsa design, Seorang designer bisa saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu membuat sketsa diatas kertas. Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layout design dengan menggunakan software.
• Membuat layout design, Banyak software yang dapat digunakan untuk membuat layout. Salah satu diantaranya adalah Macromedia, proses ini dikerjakan setelah pembuatak sketsa design. Namun terkadang pembuatan layout merupakan proses pertama kali dikerjakan , membagi gambar menjadi potongan-potongan kecil, proses ini diperlukan untuk meng-optotimize waktu download.
• Membuat animasi, animasi diperlukan untuk menghidupkan atau menjadikan website lebih interaktif.
• Membuat HTML, Setelah merapikan layout design lengkap dengan tombol, image, teks, script HTML, hal yang perlu dilakukan adalah membuat layout ke dalam format HTML.
➢ Usability: atribut kualitas yang menjelaskan atau mengukur seberapa mudah penggunaan suatu antar muka (interface). Kata “Usability” juga merujuk pada suatu metode untuk meningkatkan kemudahan pemakaian selama proses desain.
➢ Learnability: mengukur tingkat kemudahan melakukan tugas-tugas sederhana ketika pertama kali menemui suatu desain.
➢ Efficiency: mengukur kecepatan mengerjakan tugas tertentu setelah mempelajari desain tersebut.
➢ Memorability: melihat seberapa cepat pengguna mendapatkan kembali kecakapan dalam menggunakan desain tersebut ketika kembali setelah beberapa waktu.
➢ Errors: melihat seberapa banyak kesalahan yang dilakukan pengguna, separah apa kesalahan yang dibuat, dan semudah apa mereka mendapatkan penyelesaian.
➢ Satisfaction: mengukur tingkat kepuasan dalam menggunakan desain.
Dalam salah satu alertbox-nya, Jakob Nielsen menyebutkan sepuluh kesalahan yang paling banyak terjadi dalam desain web yang bertentangan dengan teori Usability. Sepuluh kesalahan tersebut adalah:
▪ Bad Search (sistem pencarian yang buruk).
▪ PDF Files for Online Reading (menggunakan format PDF untuk halaman yang dibaca online).
▪ Not Changing the Color of Visited Links tidak mengganti warna dari link yang sudah dikunjung.
▪ Non-Scannable Text : teks yang susah dibaca sekilas.
▪ Fixed Font Size : ukuran font yang tidak bisa diubah.
▪ Page Titles With Low Search Engine Visibility Title Page yang diberi indeks rendah oleh Search Engine.
▪ Anything That Looks Like an Advertisement segala hal yang terlihat seperti iklan.
▪ Violating Design Conventions : melanggar kesepakatan desain.
▪ Opening New Browser Windows membuka jendela browser baru.
▪ Not Answering Users’ Questions tidak menjawab pertanyaan pengguna.
1. Aktivitas Mahasiswa
a. Mahasiswa mengikuti langkah-langkah praktikum.
2. Langkah Praktikum
Disini kita akan me-redesign website PSTI UNISA. Sebelum memulai mendesain sebuah interface, kita terlebih dahulu membuat wireframe dan menyiapkan komponen-komponen desainnya, seperti ilustrasi, logo, icon, gambar, warna dan typeface yang akan digunakan dan dimasukkan ke dalam desain website.
A. Wireframe
Tujuan dari wireframing adalah untuk menghemat waktu mendesain dan revisi pada project web, memberikan gambaran website dan dapat memudahkan developer. Berikut adalah tahapan pembuatan wireframe:
a. Buat frame baru pada figma dengan ukuran Desktop 1440 x 1024.
Tampilan frame desktop ditunjukkan pada gambar 3.10.
Gambar 3.10 Frame ukuran Desktop 1440 x 1024
b. Klik tambahkan Layout grid. Tampilan tombol layout grid ditunjukkan pada gambar 3.11.
Gambar 3.11 Tombol Layout Grid
c. Klik tombol Layout grid settings yang muncul di sebelah kiri, kemudian ubah Grid menjadi Columns. Tampilan pengaturan layout grid ditunjukkan pada gambar 3.12.
Gambar 3.12 Pengaturan Layout Grid 1
d. Ubah Count menjadi 12, Type menjadi Center, Width menjadi 72 dan Gutter menjadi 24. Tampilan pengaturan layout grid columns ditunjukkan pada gambar 3.13.
Gambar 3.13 Pengaturan Layout Grid 2
e. Layout grid berfungsi sebagai pembatas dan patokan kita dalam mendesain. Area yang disilang merah merupakan area safezone, artinya isi atau konten webiste kecuali gambar dan komponen yang mempercantik tampilan tidak boleh berada didalam area tersebut, harus
berada didalam layout. Tampilan layout grid yang sudah ditambahkan ditunjukkan pada gambar 3.14.
Gambar 3.14 Tampilan Layout Grid
f. Tambahkan Rectangle dengan ukuran 1440 x 120 kemudian letakkan pada bagian paling atas frame dan ganti namanya menjadi “Header”.
(Catatan: header ini akan digunakan juga ke dalam desain sebagai patokan dalam membuat tombol menu), kemudian tambahkan lagi beberapa rectangle yang akan menjadi fondasi desain. Tampilan wireframe dengan layout grid ditunjukkan pada gambar 3.15.
Gambar 3.15 Tampilan Wireframe
g. Untuk menghilangkan layaout grid tanpa menghapusnya agar kita bisa melihat wireframe atau desain dengan jelas, tekan tombol mata pada menu Layout grid. Tampilan tombol hide layout grid ditunjukkan pada gambar 3.16 dan hasilnya ditunjukkan pada gambar 3.17.
Gambar 3.16 Tombol Hide Layout Grid
Gambar 3.17 Wireframe tanpa Layout Grid
B. Komponen Desain
a. Warna bisa dicari di www.colorhunt.co. Warna yang digunakan pada desain ditunjukkan pada gambar 3.18.
Gambar 3.18 Warna
b. Typeface. Typeface yang digunakan pada desain ditunjukkan pada gambar 3.19.
Gambar 3.19 Typeface
c. Icon
Icon bisa diinstall lewat plugin pada Figma, Feather Icons dan 3D icon bisa download di sini www.free3dicon.com. Plugin icon dan 3D icon yang digunakan pada desain ditunjukkan pada gambar 3.20 dan gambar 3.21.
Gambar 3.20 Plugin Feather Icons
Gambar 3.21 Icon yang digunakan
d. Gambar bisa diunduh melalui website PSTI UNISA Program Studi Teknologi Informasi | Teknologi Informasi (unisayogya.ac.id). Gambar berita PSTI ditunjukkan pada gambar 3.22, gambar 3.23, gambar 3.24 dan gambar 3.25.
Gambar 3.22 Berita PSTI 1
Gambar 3.23 Berita PSTI 2
Gambar 3.24 Berita PSTI 3
Gambar 3.25 Berita PSTI 4
e. Logo bisa didownload melalui website PSTI UNISA Program Studi Teknologi Informasi | Teknologi Informasi (unisayogya.ac.id). Logo yang digunakan pada footer ditunjukkan pada gambar 3.26.
Gambar 3.26 Logo Footer
C. Mendesain
a. Setelah semua komponen yang diperlukan siap, maka kita bisa langsung mendesain. Gunakan frame pada wireframe dan headernya, kita bisa langsung mengcopy nya. Kemudian hapus warna pada header agar transparan, lalu isikan menu-menu dan logonya. Letakkan logo ditengah-tengah header, kemudian untuk menu pada kiri dan kanan diberi jarak 46 pixel dan grup agar mudah diubah letaknya dan beri warna #9D9D9D, kemudian sejajarkan posisinya dengan logo agar berada di tengah-tengah header lalu rapatkan masing-masing menu ke ujung dari layout grid. Tampilan header ditunjukkan pada gambar 3.27.
Gambar 3.27 Header
b. Untuk pemanis, tambahkan teks Program Studi “Enter” Teknologi Informasi dengan ukuran 288 pixel, hapus Fillnya, tambahkan Stroke dengan tebal 1 pixel, kemudian letakkan teks rapat ke frame sebelah kiri. Tampilan background tulisan ditunjukkan pada gambar 3.28.
Gambar 3.28 Background Tulisan
c. Masukkan teks salam dengan ukuran 18 pixel dan beri warna #9D9D9D, teks Program Studi Teknologi Informasi dengan ukuran 48 pixel dan beri warna hitam dan dibuat tebal, teks penjelasan prodi TI dengan ukuran 18 dan beri warna hitam, buat tombol menggunakan rectangle dengan corner radius 6 dan beri warna # 79B4B7, isi rectangle tersebut dengan
“Baca selengkapnya” dan beri tanda panah ke kanan, kemudian beri warna keduanya # F8F0DF. Masukkan icon 3D, atur dengan rapi
sehingga menjadi satu komponen, lalu grup icon 3D tersebut. Atur jarak antara teks salam dan icon 3D dari header sebesar 56 pixel dan jarak antara teks salam dan teks lainnya sebesar 24 pixel. Tampilan home ditunjukkan pada gambar 3.29.
Gambar 3.29 Tampilan Home
d. Dalam mendesain web, kita bisa bebas memberikan ukuran panjang karna web digunakan dengan cara discroll ke bawah. Buat rectangle dengan ukuran 1440 x 484 pixel dan diberi jarak 56 pixel dari tombol Baca selengkapnya dan beri warna # 79B4B7. Masukkan teks Profesional Qur’ani dengan ukuran 64 pixel, beri warna # F8F0DF dan letakkan di tengah frame. Kemudian tambahkan dua rectangle dengan ukuran 360 x 424 dan beri warna # 79B4B7 dan tambahkan efek shadow dengan pengaturan X = 0, Y = 0, Blur = 20, Spread = 0 dan Opacity = 15%. Tambahkan icon dan teks ke dalam masing-masing rectangle dan rapikan. Beri jarak antara kedua rectangle dengan teks Profesional Qur’ani sebesar 56 pixel dan jarak masing-masing rectangle sebesar 165 pixel. Grup kedua rectangle tersebut kemudian letakkan di tengah frame. Tampilan menambahkan shadow dan halaman professional Qur’ani ditunjukkan pada gambar 3.30 dan gambar 3.31.
Gambar 3.30 Menambahkan shadow
Gambar 3.31 Halaman Profesional Qur’ani
e. Tambahkan rectangle dengan ukuran 1440 x 1223, beri warna #79B4B7 dan beri jarak 165 pixel dari rectangle diatasnya. Masukkan teks Kabar Berita dengan ukuran 64 pixel, beri warna #F8F0DF dan beri jarak dari ujung atas rectangle sebesar 56 pixel. Tambahkan satu rectangle dengan ukuran 768 x 843 dan tiga rectangle dengan ukuran 264 x 264 dan beri warna #F8F0DF, susun rectangle yang kecil secara vertikal dengan jarak masing-masing sebesar 26 pixel lalu grup dan letakkan rapat ke sebelah kanan layout grid. Letakkan rectangle yang besar rapat ke sebelah kiri layout grid dan sejajarkan dengan rectangle kecil.
Masukkan gambar, teks dan icon pada masing-masing rectngle dan rapikan seperti pada gambar. Beri warna biru pada teks Admin dan Artikel, Berita agar terlihat seperti sebuah link yang dapat di klik.
Tambahkan tombol Selengkapnya yang diambil dari tombol Baca selengkapnya diatas, ubah ukurannya menjadi 24 pixel dan beri warna hitam, ubah juga tebal dari anak panahnya menjadi 4 dan ubah beri warna hitam, atur jarak tombol dari rectangle diatasnya sebesar 56 pixel dan ke ujung rectangle dibawahnya 56 pixel. Tampilan halaman kabar berita ditunjukkan pada gambar 3.32.
Gambar 3.32 Halaman Kabar Berita
f. Terakhir untuk Footer, letakkan logo UNISA di kiri atas rapat dengan ujung layout grid dan beri jarak dari rectangle diatasnya sebesar 130 pixel, kemudian masukkan teks dan tombol seperti pada website PSTI UNISA, bagi menjadi tiga kolom dengan jarak setiap komponen ke bawahnya sebesar 24 pixel, kecuali jarak teks dibawah logo unisa sebesar 56 pixel, jarak kolom dibagi menjadi 4 layout grid pada kolom
pertama, 3 layout grid pada kolom kedua dan 3 layout grid pada kolom ketiga dan atur agar menjadi rapi seperti pada gambar dibawah.
Kemudian tambahkan rectangle dengan ukuran 1440 x 100 pixel dan beri warna #79B4B7 dan letakkan dipaling bawah dari frame, beri jarak dari logo diatasnya sebesar 78 pixel. Tambahkan teks copyright dan logo facebook, twitter, google+, instagram dan wifi, beri warna #FEFBF3 pada logo dan sesuaikan ukurannya kemudian rapikan seperti pada gambar. Tampilan halaman footer ditunjukkan pada gambar 3.33.
Gambar 3.33 Footer
3. Tugas
a. Membuat desain web sekolah atau kampus, jenjangnya bebas.
PERTEMUAN 5 Desain Web 2
1. Tujuan Praktikum
• Mahasiswa mampu memahami prinsip-prinsip dalam mendesain website.
• Mahasiswa mampu mendesain sebuah website menggunakan Figma.
2. Materi Praktikum
A. Merumuskan Tujuan Membuat Website
Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut:
• Website marketing, berfungsi sebagai media presentasi dan pemasaran.
• Website costumer service, berfungsi sebagai media untuk melayani konsumen.
• Website e-Commerce, berfungsi sebagai media transaksi online.
• Website informasi/berita, berfungsi sebagai media informasi berita.
d. Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.
e. Menentukan target pengunjung
Meskipun suatu website mampunyai sifat terbuka dalam arti sebuah website bebas dikunjungi oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada penggunaan hardware dan aplikasi browser yang berbeda dengan setiap pengunjung.
f. Menentukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tetntunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang terorganisasi
dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing, dan pemeliharaan website tersebut.
B. Desain Website
Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling pentingdalam menentukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki suatu kesatuan desain bias dikatakan memiliki kesamaan tema dalam halaman-halaman webnya.
Hal ini penting dalam hal estetika maupun segi navigasi. Kesamaan desain yang biasanya dipertahankan antara lain kesamaan jenis font yang digunakan, warna, tombol navigasi (menu) letak menu dan lain sebagainya.
Karena itu sangatlah penting bagi seorang web designer untuk mengetahui aturan-aturan yang berlaku dalam mendisain suatu website. Hal ini diperlukan agar design web dari website yang akan dibangun tidak terkesan sekedarnya.
c. Untuk membangun suatu website yang baik seorang web designer sebaiknya memperhatikan prinsip-prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip-prinsip yang perlu diperhatikan antara lain:
• Unik, Yang dimaksud dengan unik dalam mendesign suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain.
• Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus betul-betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang digunakan.
• Simple, Banyak dari seorang web designer yang memegang prinsip
“Keep it simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
• Semiotic, Arti semiotic adalah ilmu yang mempelajari tentang tanda- tanda. Dalam hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti ketika melihat tanda dan gambar yang terlihat dalam gambar yang ada dalam suatu website.
• Ergonomic, Ergonomic dalam mendesign suatu website adalah kepunyaan yang akan didapatkan pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari informasi.
• Focus, Focus adalah hierarki prioritas dari pesan yang akan disampaikan. Dengan adanya focus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dahulu
harus dibaca atau dilihat.
• Konsistensi, konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen-elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut.
d. Hal-hal yang perlu diperhatikan oleh seorang web designer untuk mencapai prinsip ini adalah:
• Pemilihan ukuran fonts yang tepat sehingga mudah dibaca.
• Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informatif.
C. Elemen-Elemen Desain
Design grafis khususnya dalam halaman-halaman web terdiri dari beberapa elemen sebagai berikut (Ariesto Hadi Sutopo, 2002):
g. Teks adalah bagian paling utama untuk menampilkan informasi.
h. Grafik atau image merupakan elemen yang dapat membantu menjelaskan informasi. Dengan penggunaan grafik maupun image orang lebih mudah memahami suatu pesan.
i. Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi merupakan daya tarik yang mudah diingat pengunjung.
j. Video dapat merupakan hasil suatu rekaman dengan kamera video, HP, maupun hasil pengolahan komputer.
k. Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta memberikan kenyamanan bagi pengunjung yang mendengarkannya.
l. Interaktif link dapat menggunakan button yang berupa teks,symbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
D. Konsep Desain
c. Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada dasarnya mengikut prinsip design grafis secara umum. Oleh karena itu alangkah baiknya jika dalam mendesain halaman
tampilan website juga memperhatikan prinsip design. Prinsip-prinsip design tesebut adalah:
• Komunikatif, prinsip komunikatif berhubungan dengan identitas, isi pesan, serta audiens.
• Estetis, fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.
• Ekonomis, design web harus memperhatikan faktor ekonomis dalam arti ukuran file yang digunaka. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website.Untuk mendapatkan design yang komunikatif, estetis, dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman-pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen-elemen layout.
d. Pedoman yang dimaksud adalah:
Kesatuan, elemen-elemen layout dari halaman harusditempatkan sedemikian rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman
• Balance elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan secara keseluruhan.
• Kontras, diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen layout.
• Kontinyuitas, informasi lebih dimengerti oleh pengguna bila mempunyai aliran-aliran yang baik, sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian yang lain.
Kontinyuitas dapat dibuat dengan membuat halaman-halaman yang mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
E. Pembuatan Layout
