1. Pendahuluan
1.1 Pengertian Proyek Web
Proyek web adalah serangkaian aktivitas terencana untuk membuat sebuah website dari tahap:
ide → desain → pengembangan → pengujian → publikasi
1.2 Tujuan Perancangan Proyek Web
Perancangan bertujuan agar:
- Proyek terstruktur
- Tidak asal coding
- Waktu & biaya terkendali
- Hasil sesuai kebutuhan user
2. Mengapa Perlu Perancangan?
Tanpa perancangan:
- Koding acak
- Sering bongkar ulang
- Tidak selesai
- UI berantakan
- Fitur tidak sesuai
Dengan perancangan:
- Jelas alur kerja
- Jelas target
- Minim error
- Profesional
3. Tahapan Umum Proyek Web
Model sederhana (SDLC mini):
- Analisis kebutuhan
- Perancangan sistem
- Desain UI/UX
- Implementasi (coding)
- Testing
- Deployment
- Maintenance
4. Tahap 1 – Analisis Kebutuhan
4.1 Identifikasi Masalah
Tanya:
- Website untuk siapa?
- Masalah apa yang diselesaikan?
- Target user siapa?
Contoh:
Website untuk:
- Profil prodi
- UMKM
- Portofolio
- Jurnal kampus
4.2 Kebutuhan Fungsional
Apa yang bisa dilakukan sistem?
Contoh:
- User bisa login
- User bisa isi form
- Admin bisa input data
4.3 Kebutuhan Non-Fungsional
Kualitas sistem:
- Aman
- Cepat
- Mudah digunakan
- Mobile friendly
5. Tahap 2 – Perancangan Struktur Website
5.1 Sitemap
Peta halaman website.
Contoh:
Home
├── Tentang
├── Produk
│ ├── Detail Produk
├── Kontak
└── Login
5.2 User Flow
Alur pengguna:
Contoh:
User → Home → Produk → Detail → Beli → Konfirmasi
6. Tahap 3 – Wireframe & Mockup
6.1 Wireframe
Sketsa kasar layout.
Isi:
- Header
- Menu
- Konten
- Footer
Tidak perlu warna, hanya struktur.
6.2 Mockup
Versi visual:
- Warna
- Font
- Logo
- Gambar
Tools:
- Figma
- Canva
- Adobe XD
7. Tahap 4 – Perancangan Konten
Konten meliputi:
- Teks
- Gambar
- Video
- Data
Prinsip:
- Relevan
- Ringkas
- Tidak plagiarisme
- Ramah SEO
8. Tahap 5 – Perancangan Teknologi
Stack sederhana (Web Fundamental):
| Komponen | Teknologi |
|---|---|
| Struktur | HTML |
| Tampilan | CSS |
| Interaksi | JavaScript |
| Backend (opsional) | PHP |
| Database | MySQL |
9. Tahap 6 – Perancangan Database (Opsional)
Contoh tabel user:
| Field | Tipe |
|---|---|
| id | int |
| nama | varchar |
| varchar | |
| password | varchar |
10. Tahap 7 – Perancangan UI/UX
Prinsip dasar:
- Konsisten
- Simpel
- Kontras warna baik
- Tidak membingungkan
Golden rules:
User tidak boleh berpikir keras
11. Studi Kasus Lengkap
Proyek: Website Profil Prodi Informatika
Analisis:
Target: calon mahasiswa
Fitur:
- Profil prodi
- Dosen
- Kurikulum
- Kontak
Sitemap:
Home → Tentang → Dosen → Kurikulum → Kontak
Wireframe:
Header
Menu
Slider
Konten
Footer
Teknologi:
HTML + CSS + JS
12. Dokumen Proyek Web (Penting untuk Dosen)
Mahasiswa wajib membuat:
- Proposal proyek
- Latar belakang
- Tujuan
- Sitemap
- Wireframe
- Teknologi
- Timeline
- Pembagian tugas
13. Timeline Proyek (Gantt Sederhana)
| Minggu | Aktivitas |
|---|---|
| 1 | Analisis |
| 2 | Desain |
| 3 | Coding |
| 4 | Testing |
| 5 | Presentasi |
14. Pembagian Peran Tim
| Role | Tugas |
|---|---|
| Project Manager | Koordinasi |
| UI Designer | Layout |
| Frontend | HTML/CSS |
| Backend | Logic |
| Tester | Uji sistem |
15. Risiko Proyek Web
| Risiko | Solusi |
|---|---|
| Tidak selesai | Scope kecil |
| Konflik tim | Role jelas |
| Error banyak | Testing |
| Waktu mepet | Timeline |
16. Best Practice Proyek Web Mahasiswa
✔ Mulai dari sederhana
✔ Dokumentasi rapi
✔ Pakai Git (opsional)
✔ Konsisten desain
✔ Presentasi jelas
