Laporan Akhir Nama : Ahmad Haydar

Proyek Tengah Semester DDAP NIM : 185150400111008

Kelas : SI-D

Tahap 1: Menentukan Solusi Berdasarkan Guidelines

1. Daftar Permasalahan
Berikan Kode Masalah pada tiap permasalahan yang ditemukan pada riset terdahulu. Misal, kode WN untuk
masalah yg didapat dari hasil wawancara dan kode OB untuk masalah yg didapat dari hasil observasi.

Tabel: Daftar Permasalahan pada [Website X]

No Deskripsi Permasalahan Sumber data Kode Masalah

1 Konten tidak jelas Wawancara user (ilham, 19 th) WN-01
2 Fitur belum dikelompokan Wawancara user (gri, 20 th) WN-02
3 Tampilan pada mobile browser belum Wawancara user (Farhan,21 WN-03
responsive th)
4 Background tidak enak dilihat Observasi (19/10/2019) OB-01
5 Tidak jelas pembeda antara judul artikel Observasi (19/10/2019) OB-02
dengan isi artikelnya
6 Kurang ruang putih Observasi (19/10/2019) OB-03
2. Penetuan Solusi Berdasarkan Guidelines
Tentukan solusi terhadap permasalahan yang ditemukan sebelumnya berdasarkan Guidelines yang jelas.

Kode Deskripsi Permasalahan Deskripsi Guidelines Sumber Guidelines Solusi yg akan diterapkan
Masalah
WN-01 Konten tidak jelas Memberikan kontras yang jelas https://www.logique.co.id/blog/2 Menunjukkan website ini
untuk fungsi utama website 017/12/21/6-alasan-desain-web- adalah website penjualan
penting-bagi-perusahaan/
WN-02 Fitur belum Harus mengimplementasikan aspek https://www.academia.edu/2299 Mengelompokkan fitur
dikelompokan Unity dalam design 8947/KO6_PRINSIP_DESAIN_TEO utama,description
RI_DESAIN_LANSKAP_ARL_212 video,dan selling product
WN-03 Tampilan pada mobile Mengimplentasikan prinsip https://www.devaradise.com/id/ Membuat ukuran dari
browser belum responsive web 2014/05/pengertian-mengenal- setiap objek menjadi em
responsive arti-desain-web-responsive.html
OB-01 Background tidak enak Memberikan warna background https://www.niagahoster.co.id/bl Merubah warna
dilihat yang merepresentasikan website og/warna-efektif-desain-website/ background website
tsb. menjadi warna hitam
OB-02 Tidak jelas pembeda Penerapan prinsip Hirarki dengan https://webdesign.tutsplus.com/ Menempatkan selling
antara judul artikel membedakan ukuran atau warna articles/understanding- product pada side bar
dengan isi artikelnya teks typographic-hierarchy-- website dan memberikan
webdesign-11636 warna pada iconnya
OB-03 Tidak ada white space Penerapan teori white space yang https://idseducation.com/articles Memberikan micro white
sehingga menimbulkan sudah di ciptakan oleh para ahli /seputar-white-space-yang-perlu- space pada objek yang masi
kesan penuh dan sumpek kamu-tahu/ satu kelompok dan macro
pada website white space pada konten
yang berbeda
3. Referensi Website
Berikan screenshot referensi website lainnya 1 halaman penuh.
Halaman Utama (Homepage) Halaman Detail Artikel
Tahap 2: Menerapkan solusi desain ke dalam wireframe menggunakan sistem grid

1. Tools yang Digunakan

Photoshop cc 2019

2. Proses Redesign
Berikan screenshot proses redesign dengan tools yang digunakan.
w

Proses Redesign

3. Hasil Redesign
Berikan screenshot sebelum dan sesudah proses redesign.
l
Sebelum Redesign

Sesudah Redesign
Hasil Redesign dengan Sistem Grid (Dekstop)
Hasil Redesign dengan Sistem Grid (Tablet)
Hasil Redesign dengan Sistem Grid (Mobile)