WORKSHOP DESAIN WEB

Design Low-Fidelity Web

Nama Dosen Pengampu :

Ibu Yesta Medya Mahardika S.Tr.Kom., M.T.

Dikerjakan oleh :
Nama : George Winston Kalim
NRP : 3123600022
Kelas : 1 D4 Teknik Informatika A
Tujuan

Tujuan dalam pembelajaran desain low-fidelity apps ini adalah mempelajari tentang wireframe
yang menjadi desain awal dalam pembuatan website atau aplikasi. Tujuan lainnya adalah
mahasiswa mampu menerapkan pembelajaran ini untuk mengaplikasikan wireframe dalam
membuat desain awal website.

Tugas

1. Buat tiga desain wireframe yang halamannya saling berhubungan(link).

2. Buat user flownya terlebih dahulu.
3. Ceritakan apa saja yang bisa dilakukan user pada setiap halaman.

User Flow

User melihat profile User melihat contoh

User membuka Web
Web Project

User melihat User mengirimkan

User melihat detail
Informasi Kontak pesan pada Web
Project
Web

Selesai
1. User membuka Web

• Header, dalam header terdapat beberapa komponen, yaitu logo, nomor telepon, email,
dan navigation bar.
• Navigation bar, berfungsi sebagai navigasi untuk mengarahkan user ke halaman yang
diingikan
• Title, Berfungsi sebagai judul Website.
• Description, berisi dekripsi singkat mengenai profile website tersebut.

Ketika user membuka website ini, user akan diarahkan ke halaman Home. Disini user dapat
melihat profile dan banyak informasi mengenai perusahaan dengan detail, baik dari layanan
yang ditawarkan hingga project – project yang telah dikerjakan oleh perusahaan tersebut.
2. User melihat profile Web

• Logo, ditampilkan logo sebagai indentitas dari perusahaan / website

• Services, dalam web ini ditampilkan layanan – layanan yang ditawarkan oleh perusahaan
kepada user.
• Video, Web ini juga menampilkan video mengenai profile dari perusahaan yang bergerak
di bidang Desain Website dan Aplikasi, juga Manajemen SEO.
• Footer, terletak di bagian paling bawah webite, berisi nomor telepon, email, dan halaman
– halaman website yang dapat dikunjungi user.
3. User melihat contoh Project

• Thumbnail Project, berfungsi sebagai

gambaran umum dari project yang telah
dikerjakan.
• Date, menunjukkan tanggal project
tersebut dibuat.
• Project Title, sebagai judul dari Project
yang telah dikerjakan.
• Button View Project, berfungsi sebagai
tombol untuk mengarahkan user ke
halaman Project yang ingin dilihat oleh
user.

User yang tertarik dengan salah satu

project yang ditampilkan bisa melihat
detail mengenai project tersebut dengan
klik tombol View Project, kemudian user
akan diarahkan menuju halaman detail
project.

4. User melihat detail Project.

• Project Title, menujukkan judul Project yang ditampilkan.
• Category, menunjukkan kategori project yang ditampilkan.
• Client Description, menampilkan deskripsi dari client project tersebut, ditampilkan logo,
brief (deskripsi singkat), dan background (latar belakang) dari client.
• Website Design, menampilkan desain website dari project yang dikerjakan, ditampilkan
Initial concept (konsep awal) dari desain web dan hasil akhirnya.
• App Design, menampilkan desain aplikasi mobile dari project tersebut.
• SEO, menampilkan penjelasan SEO Maintenance dari project yang ditampilkan, bagian
ini menampilkan bagaimana pemeliharaan Search Engine Organizer dari project tersebut.
• Performance, menampilkan performa dari website yang dikerjakan dalam project
tersebut, bagian ini menunjukkan kecepatan loading dari website project tersebut.
• Button All Enquiries, jika user tertarik untuk bekerja sama dengan perusaahaan untuk
mengerjakan suatu project, maka user dapat menghubungi perusahaan melalui button ini.
• Button Design Projects, jika user ingin melihat project – project lain dari perusahaan ini,
user dapat menggunakan button ini.

Dalam halaman detail project ini, User dapat melihat berbagai informasi mengenai project
yang ingin dilihat oleh User. Mulai dari Client, gambaran umum, desain project, hingga
SEO Maintenance dan performa Project tersebut. Jika user ingin bekerja sama dengan
perusahaan ini untuk membuat suatu project website atau mobile application, user dapat
menggunakan Button All Enquiries, kemudian akan diarahkan ke halaman Contacts. Jika
user ingin melihat project lain dari perusahaan ini, user dapat mengguakan Button Design
Projects.
5. User melihat informasi kontak Web

• Contacts, berisi segala informasi untuk

menghubungi perusahaan, Baik dari lokasi
kantor perusahaan, media sosial, nomor
telepon, email, hingga jam kerja.
• Message, berfungsi agar user dapat
mengirimkan informasi contact dan pesan
kepada perusahaan untuk mempermudah
komunikasi.

Dalam halaman Contacts, user dapat melihat informasi kontak dari peruahaan pemilik Web,
halaman ini dapat digunakan user untuk menhubungi perusahaan untuk merencanakan kerja
sama. Disediakan juga section message untuk user dapat mengirim pesan ke perusahaan.

6. User mengirim pesan pada Web

Pada halaman Contacts, terdapat section messsage yang dapat digunakan oleh user untuk
mengirimkan pesan. User dapat menginputkan nama, email, nomot telepon, perusahaan
user, dan pesan yag ingin dikirimkan ke perusahaan pemilik web. Dengan ini komunikasi
antara perusahan web dengan user dapat berjalan lebih mudah. Setelah mengisi nama, email,
nomor telepon, perusahaan user, dan pesan, user dapat mengklik button Send Message untuk
mengirimkan pesan ke web.
Berikut tampilan seluruh halaman dan alurnya :

Berikut tautan figma wireframe website :

https://www.figma.com/file/NB58RbeCKlloJYqExWyps8/Untitled?type=design&node-
id=0%3A1&mode=design&t=N8WNbAiwz7KTBrnS-1
Berikut tautan website yang saya gunakan sebagai referensi :
https://edge.studio/