@Buat gambar Buatkan desain folo diagram roadmap untuk membuat aplikasi web mulai dari user persona, wireframe, implementasi, deploy

Buat prompt yang dapat digunakan di ChatGPT, DALL·E, Midjourney, Ideogram, atau model AI lain untuk menghasilkan diagram timeline yang modern, colorful, mudah dibaca, dan cocok untuk poster HD.

---

Prompt Profesional (Landscape Infographic)

Prompt:

Create a premium HD infographic in landscape (16:9) format with a clean, modern corporate design.

Theme: Program Generasi Terampil 2026 – Rancangan Kegiatan & Timeline

Style:

• Modern flat infographic
• Colorful but elegant
• White background with subtle gradient
• High readability
• Professional UNICEF + university style
• Minimalist design
• Vector illustration
• Sharp typography
• Presentation quality

Layout

Build a horizontal timeline across the page consisting of 7 connected milestones, each represented by a colorful rounded rectangle with icons.

Timeline:

1. Agustus
   • Revisi Modul GEDSI
   • Revisi Tools Evaluasi
   • icon: document + checklist
   • color: green
2. Agustus–September
   • Persiapan Implementasi
   • Kick-off Program
   • Koordinasi BAPPEDA & Dinas Pendidikan
   • icon: meeting
   • color: blue
3. September
   • Baseline Study
   • icon: analytics
   • color: purple
4. September–Oktober
   • Training of Trainers
   • Guru & Mentor
   • icon: trainer
   • color: orange
5. Oktober–November
   • Game Innovation Training
   • Gaming Hackathon
   • icon: game controller
   • color: red
6. Oktober–Desember
   • Implementasi Program
   • Mentoring
   • Career Guidance
   • Monitoring
   • icon: implementation
   • color: teal
7. Desember
   • Demo Day
   • Joint Monitoring
   • FGD Integrasi Program
   • icon: trophy + presentation
   • color: dark blue

Under each milestone

Display a rounded information card containing:

• Output number
• Main activities
• Short description
• Important notes

Use concise text with maximum 5 bullet points.

Bottom Section

Add a legend using colorful icons:

• Preparation
• Coordination
• Baseline
• Training
• Innovation
• Implementation
• Evaluation
• Sustainability

Graphic Elements

Include:

• curved connecting arrows
• colorful circles
• modern icons
• shadow cards
• rounded rectangles
• dotted connectors
• timeline path
• minimalist illustrations of teachers, students, digital learning, innovation, mentoring, monitoring, and collaboration

Color Palette

• Blue (#2563EB)
• Green (#22C55E)
• Orange (#F59E0B)
• Purple (#7C3AED)
• Cyan (#06B6D4)
• Red (#EF4444)
• Navy (#1E3A8A)

Typography

Large bold title

Section headers inside colored rounded pills

Body text highly readable

Plenty of white space

Grid-based alignment

Quality

Ultra HD

4K resolution

Print ready

Vector style

Clean infographic

Corporate presentation quality

Easy to read from a distance

Professional annual project roadmap.

---

Alternatif Layout (Flow Diagram)

Jika ingin tampil lebih modern daripada timeline biasa, gunakan prompt berikut:

Design a colorful flow diagram roadmap instead of a traditional timeline. Arrange seven large rounded boxes connected by thick curved arrows from left to right. Each stage has a unique color, icon, title, short description, and output. Use large white cards, subtle shadows, colorful gradients, and modern flat illustrations. The overall appearance should resemble a McKinsey consulting infographic combined with a UNICEF annual report, emphasizing clarity, hierarchy, and visual storytelling. The infographic must be extremely easy to read, spacious, and suitable for A3 landscape poster printing.

Prompt ini biasanya menghasilkan diagram yang lebih menarik secara visual daripada timeline linear biasa, dengan alur yang jelas dan mudah dipahami.

Administrasi Sekolah

 

https://www.youtube.com/watch?v=wXHiEK8Vvcg

https://www.yefriharyanto.id/p/aplikasi-generator.html

https://www.yefriharyanto.id/2026/01/source-code-aplikasi-administrasi-guru-untuk-satu-sekolah.html

https://www.youtube.com/watch?v=7l7pf9ll-9M

Membuat Dashboard

 

https://www.youtube.com/watch?v=Tz5pJsIlUVQ

https://csvjson.com/csv2json

https://github.com/harismuj/Visualisasi-Data-Penjualan/blob/main/penjualan%20barang.csv

https://www.kaggle.com/datasets/dinishalikha/dataset-penjualan?select=Dataset.xlsx

https://ebaguslearning.id/pelatihan-microsoft-excel/

https://egistubagus.myr.id/catalog/dataset-ini-untuk-membuat-dashboard-with-ai-html-bentuk-file-csv?

https://www.youtube.com/watch?v=XB9pW0Z4QJ0

https://www.youtube.com/watch?v=GCVAb_HRWuA

https://www.youtube.com/watch?v=v5knvEIVegY

Tolong analisa data ini dan berikan insight. Berikan saya metriks yang akan saya gunakan untuk dashboard.

Generate dashboard dari data ini. Gunakan html dan javascript. Hasilnya harus bisa di download

Berikut hasil analisis awal dari dataset penjualan barang.csv beserta rekomendasi metrik yang layak ditampilkan pada dashboard.

Buatkan aplikasi dashboard Business Intelligence menggunakan HTML5, CSS3, Bootstrap 5, JavaScript ES6, Chart.js, ApexCharts, DataTables, SheetJS (xlsx), html2canvas, dan jsPDF.

Dashboard harus berupa SINGLE HTML FILE (tidak menggunakan framework seperti React atau Vue) sehingga cukup dibuka di browser tanpa proses build.

Sumber data berasal dari file JSON dengan struktur seperti berikut:

tanggal

nama.pembeli

nama.barang

kuantum

nominal

Contoh data:

{

"tanggal":"2020-01-02",

"nama.pembeli":"TOKO HERUNIAWATI",

"nama.barang":"BERAS",

"kuantum":1000,

"nominal":9840000

}

Dashboard harus membaca file csvjson.json secara otomatis menggunakan fetch().

==================================================

DESAIN

==================================================

Gunakan desain modern seperti:

Microsoft Power BI

Google Looker Studio

Metabase

Tableau

Gunakan warna:

Primary : #2563EB

Secondary : #14B8A6

Warning : #F59E0B

Danger : #EF4444

Background : #F8FAFC

Card putih dengan shadow.

Rounded border radius 12px.

Responsive.

Dark mode.

Glassmorphism untuk KPI Card.

Animasi loading.

==================================================

HEADER

==================================================

Judul Dashboard

Logo

Tanggal terakhir update

Filter:

Tahun

Bulan

Produk

Customer

Reset Filter

Export Excel

Export PDF

Download PNG

==================================================

KPI CARD

==================================================

Hitung otomatis:

Total Revenue

Total Quantity

Total Transaction

Total Customer

Total Product

Average Order Value

Average Quantity

Highest Transaction

Lowest Transaction

Growth Revenue

Growth Transaction

==================================================

VISUALISASI

==================================================

1 Revenue Trend

Line Chart

Bulanan

Daily

Weekly

==================================================

2 Product Contribution

Donut Chart

Persentase omzet

Persentase quantity

==================================================

3 Top 10 Product

Horizontal Bar

Revenue

==================================================

4 Top 10 Customer

Horizontal Bar

Revenue

==================================================

5 Revenue by Customer

Treemap

==================================================

6 Monthly Growth

Column Chart

Growth %

==================================================

7 Pareto Customer

Bar + Line

80/20 Rule

==================================================

8 Pareto Product

Bar + Line

80/20 Rule

==================================================

9 Scatter Plot

X = Quantity

Y = Revenue

Bubble = Transaction

==================================================

10 Heatmap

Penjualan Harian

==================================================

11 Calendar Sales

==================================================

12 Sankey Diagram

Customer → Product

==================================================

TABEL

==================================================

Gunakan DataTables.

Kolom:

Tanggal

Customer

Produk

Quantity

Revenue

Fitur:

Search

Sorting

Pagination

Export CSV

Export Excel

Copy

Print

==================================================

ANALISIS

==================================================

Buat panel Insight otomatis.

Contoh:

Produk paling laris.

Customer terbesar.

Customer baru.

Customer tidak aktif.

Produk dengan growth tertinggi.

Produk dengan growth terendah.

Kontribusi Top 10 Customer.

Kontribusi Top 10 Product.

Average Revenue per Customer.

Average Revenue per Transaction.

==================================================

FITUR

==================================================

Semua grafik harus saling terhubung (cross filtering).

Klik grafik akan memfilter grafik lain.

Semua KPI berubah mengikuti filter.

Loading spinner.

Toast notification.

Fullscreen chart.

Download chart PNG.

Print Dashboard.

==================================================

EXPORT

==================================================

Sediakan tombol:

Download Dashboard HTML

Export Excel

Export PDF

Export PNG

==================================================

KODE

==================================================

Gunakan kode yang rapi.

Pisahkan fungsi menjadi:

loadData()

calculateMetrics()

renderKPIs()

renderCharts()

renderTable()

applyFilter()

downloadPDF()

downloadPNG()

downloadExcel()

Gunakan modular JavaScript.

Tambahkan komentar pada setiap fungsi.

==================================================

OUTPUT

==================================================

Hasil akhir berupa SATU FILE HTML lengkap yang siap dijalankan secara offline.

Tidak boleh menggunakan backend.

Tidak boleh membutuhkan instalasi.

Semua library menggunakan CDN.

Semua chart harus interaktif.

Semua angka menggunakan format Rupiah Indonesia.

Semua tanggal menggunakan format Indonesia.

Dashboard harus terlihat profesional setara Power BI atau Tableau.

Ringkasan Dataset

Metrik	Nilai
Jumlah transaksi	1.289
Periode data	2 Jan 2020 – 9 Apr 2021
Jumlah pelanggan	171
Jumlah produk	5
Total kuantitas terjual	2.236.497
Total omzet	Rp24.877.315.332

---

Insight Utama

1. Penjualan sangat didominasi oleh Beras

Produk	Omzet	Kontribusi
Beras	Rp20,67 M	83,1%
Gula	Rp2,68 M	10,8%
Daging	Rp1,16 M	4,6%
Migor	Rp303 Jt	1,2%
Tepung	Rp66 Jt	0,3%

Insight

• Omzet perusahaan sangat bergantung pada Beras.
• Penurunan penjualan Beras akan sangat mempengaruhi total pendapatan.
• Produk selain Beras masih memiliki peluang untuk ditingkatkan melalui cross selling.

---

2. Pelanggan Besar Mendominasi

Beberapa pelanggan dengan omzet terbesar:

Pembeli	Omzet
TOKO ENGKON	Rp2,05 M
TOKO AIDI K.	Rp1,96 M
TOKO ENDANG SUSILAWATI	Rp1,39 M
TOKO DEWI AFRITA	Rp969 Jt

Insight

Ada indikasi bisnis menggunakan model B2B Distributor karena terdapat pelanggan dengan transaksi sangat besar.

Dashboard perlu mampu mengidentifikasi:

• Top Customer
• Customer yang mulai menurun pembeliannya
• Customer baru
• Customer tidak aktif

---

3. Penjualan Berfluktuasi setiap Bulan

Bulan dengan omzet tertinggi:

Bulan	Omzet
Juni 2020	Rp3,59 M
Mei 2020	Rp2,59 M
Februari 2020	Rp2,41 M
November 2020	Rp2,07 M

Terlihat adanya fluktuasi yang cukup tinggi.

Dashboard perlu menampilkan:

• Tren omzet
• Growth bulanan (MoM)
• Growth tahunan (YoY jika data bertambah)

---

4. Jumlah Transaksi Tidak Selalu Sejalan dengan Omzet

Contoh:

• Mei 2020 hanya memiliki sekitar 30 transaksi, tetapi omzet mencapai Rp2,59 M.
• Hal ini menunjukkan adanya transaksi dengan nilai sangat besar (bulk order).

Dashboard sebaiknya menampilkan:

• Average Order Value (AOV)
• Omzet per transaksi
• Kuantitas per transaksi

---

KPI Dashboard yang Direkomendasikan

A. Executive KPI

Tampilkan sebagai kartu (Card)

• Total Omzet
• Total Transaksi
• Total Kuantitas Terjual
• Total Customer
• Total Produk
• Average Order Value
• Average Quantity per Transaction

---

B. Sales Performance

Visual:

• Line Chart

Metrik:

• Omzet per bulan
• Kuantitas per bulan
• Jumlah transaksi per bulan
• Growth MoM

---

C. Product Performance

Visual:

• Bar Chart
• Pareto Chart

Metrik

• Omzet per produk
• Kuantitas per produk
• Jumlah transaksi per produk
• Kontribusi (%)

Tambahkan:

• Top Selling Product
• Lowest Selling Product

---

D. Customer Performance

Visual

• Bar Chart

Metrik

• Top 10 Customer
  
  
• Revenue per Customer
• Jumlah transaksi per customer
• Average transaksi per customer

Tambahkan:

• Customer Ranking
• Customer Contribution

---

E. Sales Distribution

Visual

• Pie / Donut Chart

Menampilkan:

• Pangsa omzet tiap produk

Saat ini kemungkinan tampil seperti:

Beras      ██████████████████████████ 83%

Gula       ███                       11%

Daging     █                         5%

Migor                               1%

Tepung                             <1%

---

F. Trend Dashboard

Visual

Line Chart

Menampilkan:

• Revenue
• Quantity
• Transaction

Filter:

• Tahun
• Bulan

---

G. Customer Analysis

Visual

Scatter Plot

Sumbu X

Jumlah transaksi

Sumbu Y

Omzet

Ukuran bubble

Total kuantitas

Dengan demikian dapat diketahui:

• High Value Customer
• Frequent Customer
• Customer Potensial

---

H. Product Matrix

Visual

Bubble Chart

X = Jumlah transaksi

Y = Omzet

Bubble = Kuantitas

---

I. Growth Dashboard

Menampilkan:

• Growth omzet
• Growth kuantitas
• Growth transaksi
• Growth customer

Per bulan.

---

Filter Dashboard

Sebaiknya dashboard memiliki filter:

• Tahun
• Bulan
• Produk
• Customer
• Rentang tanggal

---

Insight Bisnis yang Dapat Dimonitor

Dashboard akan lebih bermanfaat apabila menampilkan indikator berikut:

• Produk dengan pertumbuhan tercepat
• Produk yang mulai menurun
• Pelanggan terbesar
• Pelanggan yang tidak membeli selama >30 hari
• Pelanggan baru
• Kontribusi omzet Top 10 Customer
• Pareto 80/20 Customer
• Pareto Produk
• Average nilai transaksi
• Average pembelian per customer
• Omzet harian
• Omzet bulanan
• Target vs Realisasi (jika target tersedia)

---

Rekomendasi Layout Dashboard (Looker Studio / Power BI)

Header (KPI Cards)

• Total Omzet
• Total Transaksi
• Total Kuantitas
• Total Customer
• AOV
• Growth Bulanan

Baris 1

• Tren Omzet Bulanan (Line Chart)
• Tren Kuantitas Bulanan

Baris 2

• Top 10 Produk
• Top 10 Customer

Baris 3

• Kontribusi Produk (Donut/Pie)
• Pareto Customer

Baris 4

• Detail transaksi (tabel interaktif)

Dengan struktur ini, dashboard dapat digunakan baik untuk pemantauan operasional harian maupun pengambilan keputusan strategis terkait penjualan, pelanggan, dan portofolio produk.

Bisa. Saya dapat membuat dashboard interaktif berbasis HTML + JavaScript yang berjalan tanpa server (offline) dan dapat langsung dibuka di browser. Dashboard akan membaca data JSON yang Anda unggah (csvjson.json) .

Fitur Dashboard

Dashboard akan memiliki tampilan modern seperti Power BI.

KPI Cards

• Total Omzet
• Total Transaksi
• Total Customer
• Total Produk
• Total Kuantitas
• Average Order Value (AOV)

Visualisasi

• 📈 Tren Penjualan Bulanan
• 📊 Penjualan per Produk
• 🍩 Kontribusi Produk
• 👥 Top 10 Customer
• 📅 Heatmap Penjualan Harian
• 📦 Top Produk
• 💰 Omzet per Customer
• 📈 Growth MoM
• Pareto Customer (80/20)
• Pareto Produk

Filter

• Tahun
• Bulan
• Produk
• Customer
• Rentang Tanggal

Tabel

• Seluruh transaksi
• Search
• Sorting
• Pagination
• Export CSV
• Export Excel

Tombol Download

• Download Dashboard (.html)
• Download Grafik PNG
• Download PDF
• Export Excel

---

Teknologi

Dashboard dibuat menggunakan

• HTML5
• CSS3
• Bootstrap 5
• Chart.js
• ApexCharts
• DataTables
• SheetJS (Export Excel)
• html2canvas
• jsPDF

Sehingga cukup membuka file HTML tanpa instalasi apa pun.

---

Tampilan

--------------------------------------------------------
 SALES DASHBOARD
--------------------------------------------------------

[ Total Sales ] [ Customer ] [ Qty ] [ AOV ] [ Produk ]

--------------------------------------------------------
Revenue Trend
(Line Chart)
--------------------------------------------------------

Product Sales           Product Contribution
Bar Chart               Donut Chart

--------------------------------------------------------

Top Customer            Pareto Customer

--------------------------------------------------------

Sales Table

--------------------------------------------------------

---

Output yang akan saya buat

Saya akan menghasilkan 1 file HTML lengkap berisi sekitar 1.500–2.500 baris kode, yang mencakup:

• dashboard responsif,
• seluruh grafik interaktif,
• filter dinamis,
• export Excel,
• export PNG,
• export PDF,
• tombol download,
• dan seluruh data langsung tertanam sehingga dapat dijalankan secara offline.

Karena ukuran kode tersebut melebihi batas panjang jawaban ChatGPT, saya tidak dapat mengirimkan seluruh file HTML dalam satu respons.

Saya dapat membuatnya sebagai file .html yang siap diunduh, sehingga Anda cukup membuka file tersebut di browser dan dashboard langsung berfungsi.

Membuat Landing Page

 

Untuk membuat desain landing page yang efektif, berikut daftar pertanyaan yang dapat digunakan saat tahap requirement gathering dengan klien atau stakeholder.

1. Informasi Umum

1. Apa nama produk, layanan, atau program yang akan dipromosikan?
2. Apa tujuan utama landing page?
   • Branding
   • Registrasi
   • Penjualan
   • Pengumpulan leads
   • Download aplikasi
   • Informasi program
3. Siapa target pengguna utama?
4. Apa masalah yang ingin diselesaikan oleh produk/layanan tersebut?
5. Apa keunggulan utama dibanding kompetitor?

2. Tujuan Bisnis

6. Apa indikator keberhasilan landing page?
7. Berapa target pengunjung per bulan?
8. Berapa target konversi yang diharapkan?
9. Apa tindakan yang diinginkan setelah pengunjung membuka halaman?

3. Target Pengguna

10. Siapa pengguna utama?
11. Berapa rentang usia pengguna?
12. Apa latar belakang pengguna?
13. Apa kebutuhan utama mereka?
14. Apa kendala atau pain point yang mereka hadapi?

4. Konten Hero Section

15. Apa headline utama yang ingin ditampilkan?
16. Apa subheadline yang mendukung?
17. Apa Call To Action (CTA) utama?
18. Apakah diperlukan video promosi?
19. Apakah tersedia foto atau gambar utama?

Contoh CTA:

• Daftar Sekarang
• Mulai Gratis
• Download Aplikasi
• Hubungi Kami
• Gabung Program

5. Informasi Produk/Layanan

20. Apa deskripsi singkat produk?
21. Apa manfaat utama yang diperoleh pengguna?
22. Fitur apa saja yang ingin ditampilkan?
23. Apakah ada demo atau screenshot aplikasi?
24. Apakah tersedia studi kasus penggunaan?

6. Struktur Halaman

25. Menu apa saja yang diperlukan?

Contoh:

• Home
• Tentang Kami
• Fitur
• Keunggulan
• Testimoni
• FAQ
• Kontak

26. Apakah membutuhkan single page atau multi page?
27. Apakah perlu navigasi sticky menu?

7. Fitur dan Keunggulan

28. Apa fitur utama yang ingin ditonjolkan?
29. Apa manfaat setiap fitur?
30. Apakah terdapat diagram alur kerja?
31. Apakah terdapat integrasi dengan sistem lain?

8. Testimoni dan Bukti Sosial

32. Apakah ada testimoni pengguna?
33. Apakah ada logo mitra atau pelanggan?
34. Apakah ada statistik keberhasilan?
35. Apakah ada sertifikasi atau penghargaan?

9. Call To Action

36. Berapa banyak CTA yang akan ditampilkan?
37. Apa tujuan CTA utama?
38. Apakah CTA mengarah ke:

• Form Registrasi
• WhatsApp
• Email
• Marketplace
• Aplikasi Mobile

10. Formulir

39. Apakah diperlukan form pendaftaran?
40. Data apa saja yang harus diisi pengguna?

Contoh:

• Nama
• Email
• Nomor HP
• Instansi
• Kota

41. Apakah perlu validasi data?
42. Apakah data masuk ke CRM atau database?

11. Desain Visual

43. Apa warna utama brand?
44. Apakah sudah memiliki logo?
45. Apakah memiliki brand guideline?
46. Gaya desain yang diinginkan:

• Corporate
• Modern
• Minimalis
• Edukatif
• Startup
• Government
• Futuristik

47. Apakah membutuhkan ilustrasi?
48. Apakah membutuhkan icon khusus?
49. Apakah tersedia foto resmi?

12. Konten Multimedia

50. Apakah membutuhkan video profil?
51. Apakah membutuhkan galeri foto?
52. Apakah membutuhkan animasi?
53. Apakah membutuhkan infografis?

13. SEO dan Marketing

54. Kata kunci utama yang ditargetkan?
55. Apakah membutuhkan blog?
56. Apakah akan digunakan untuk iklan Google Ads?
57. Apakah akan digunakan untuk Meta Ads?

14. Teknis

58. Domain yang digunakan?
59. Hosting yang digunakan?
60. Apakah landing page harus mobile responsive?
61. Apakah perlu integrasi Google Analytics?
62. Apakah perlu integrasi Google Tag Manager?
63. Apakah perlu integrasi Meta Pixel?

15. Kompetitor dan Referensi

64. Siapa kompetitor utama?
65. Landing page mana yang menjadi referensi?
66. Bagian apa yang disukai dari referensi tersebut?
67. Bagian apa yang tidak disukai?

16. Khusus Landing Page Aplikasi

68. Platform aplikasi:

• Web
• Android
• iOS

69. Apakah tersedia screenshot aplikasi?
70. Apa fitur unggulan aplikasi?
71. Apakah tersedia demo akun?
72. Apakah ada link download aplikasi?
73. Apakah tersedia video tutorial?

17. Khusus Program Pendidikan (PKK, PKW, Double Track, Pervekt, PPDB)

74. Apa tujuan program?
75. Siapa sasaran peserta?
76. Apa manfaat yang diperoleh peserta?
77. Bagaimana alur pendaftaran?
78. Apakah ada jadwal pelaksanaan?
79. Apakah ada mitra penyelenggara?
80. Apakah tersedia data capaian program?
81. Apakah tersedia dokumentasi kegiatan?
82. Apakah terdapat sertifikat atau penghargaan bagi peserta?

Daftar pertanyaan di atas dapat dijadikan template wawancara requirement landing page sebelum membuat sitemap, wireframe, UI/UX, dan prototype desain.

Studi Kasus: Pembuatan Landing Page Aplikasi PKK (Peningkatan Kompetensi Kerja)

Latar Belakang

Dinas Pendidikan Provinsi Jawa Timur mengembangkan aplikasi PKK (Peningkatan Kompetensi Kerja) untuk memfasilitasi pelaksanaan pelatihan keterampilan bagi siswa SMA Double Track. Aplikasi ini digunakan untuk pendaftaran peserta, manajemen pelatihan, monitoring kegiatan, sertifikasi, dan pelaporan program.

Saat ini informasi program masih tersebar di berbagai media sehingga calon peserta kesulitan memahami manfaat program dan proses pendaftaran. Oleh karena itu diperlukan sebuah landing page yang informatif, menarik, dan mampu meningkatkan jumlah pendaftar.

---

Tujuan Landing Page

1. Memperkenalkan Program PKK.
2. Menjelaskan manfaat program kepada calon peserta.
3. Menampilkan fitur utama aplikasi.
4. Menunjukkan capaian program.
5. Mengumpulkan data calon peserta.
6. Meningkatkan jumlah pendaftaran online.

---

Target Pengguna

Segmen	Deskripsi
Siswa SMA	Peserta Program Double Track
Alumni SMA	Pencari kerja
Guru Pendamping	Monitoring peserta
Sekolah	Mitra pelaksana
Dinas Pendidikan	Monitoring program

---

Tugas Tim UI/UX

Buatlah desain landing page berdasarkan kebutuhan berikut:

Pertanyaan Requirement

Informasi Program

1. Apa nama program?
2. Apa tujuan program?
3. Siapa penyelenggara program?
4. Siapa target peserta?

Hero Section

5. Apa headline utama?
6. Apa subheadline?
7. Apa CTA utama?

Contoh:

Tingkatkan Kompetensi Kerja dan Raih Karier Impianmu

Bergabunglah dalam Program PKK untuk mendapatkan pelatihan, sertifikasi, dan peluang kerja.

[Daftar Sekarang]

---

Informasi Program

8. Apa manfaat yang diperoleh peserta?
9. Berapa lama pelatihan berlangsung?
10. Apakah peserta memperoleh sertifikat?

---

Fitur Aplikasi

11. Fitur apa yang ingin ditampilkan?

Contoh:

• Registrasi Online
• Dashboard Peserta
• E-Learning
• Sertifikat Digital
• Monitoring Pelatihan
• Pelaporan Program

---

Statistik Program

12. Data capaian apa yang tersedia?

Contoh:

• 25.000 Peserta
• 500 Sekolah
• 1.000 Pelatihan
• 95% Tingkat Kelulusan

---

Testimoni

13. Apakah tersedia testimoni alumni?
14. Apakah tersedia video testimoni?

---

FAQ

15. Bagaimana cara mendaftar?
16. Apakah program gratis?
17. Siapa yang dapat mengikuti program?

---

Struktur Landing Page

HOME
│
├── Hero Banner
│
├── Tentang Program
│
├── Manfaat Program
│
├── Fitur Aplikasi
│
├── Alur Pendaftaran
│
├── Statistik Program
│
├── Testimoni Alumni
│
├── FAQ
│
├── Form Pendaftaran
│
└── Footer

---

Wireframe Sederhana

+------------------------------------------------+
| LOGO                     MENU                  |
+------------------------------------------------+

| HERO BANNER                                   |
| Tingkatkan Kompetensi Kerja Anda              |
| [Daftar Sekarang]                             |
+------------------------------------------------+

| TENTANG PROGRAM                               |
+------------------------------------------------+

| MANFAAT PROGRAM                               |
| [Icon] [Icon] [Icon] [Icon]                   |
+------------------------------------------------+

| FITUR APLIKASI                                |
| Dashboard | Sertifikat | E-Learning           |
+------------------------------------------------+

| ALUR PENDAFTARAN                              |
| 1 → 2 → 3 → 4                                 |
+------------------------------------------------+

| STATISTIK PROGRAM                             |
| 25000 | 500 | 1000 | 95%                      |
+------------------------------------------------+

| TESTIMONI                                     |
+------------------------------------------------+

| FAQ                                           |
+------------------------------------------------+

| FORM PENDAFTARAN                              |
+------------------------------------------------+

| FOOTER                                        |
+------------------------------------------------+

---

Deliverable yang Harus Dibuat Mahasiswa

Analisis

• User Persona
• User Journey
• Requirement Landing Page

Desain

• Sitemap
• Wireframe
• Mockup High Fidelity
• Prototype Interaktif

Implementasi

• HTML5
• CSS3
• Bootstrap 5
• JavaScript

Output Akhir

• Landing Page Responsive
• Tampilan Desktop
• Tampilan Mobile
• Form Registrasi
• Integrasi WhatsApp CTA

---

Kriteria Penilaian

Aspek	Bobot
Analisis Kebutuhan	20%
UI/UX Design	25%
Responsiveness	20%
Implementasi HTML/CSS	20%
Interaktivitas JavaScript	10%
Presentasi	5%

Studi kasus ini cocok digunakan untuk mata kuliah Web Programming, UI/UX Design, atau Project Based Learning dengan fokus pada pembuatan Landing Page Aplikasi PKK.

Pertamina Talent Candidate

Product Requirement Document

Pertamina Karir

https://drive.google.com/file/d/1xQmlufXe944vuIBUNd2JaoGh5uJsDGeh/view?usp=drive_link

https://drive.google.com/file/d/1eUQ3dzPV5FKEgv_lw6j0F7dlmzpCCF9Y/view?usp=drive_link

https://drive.google.com/file/d/185kv9Pv4f_s54QIrvPYXuAN-G__tiE5d/view?usp=drive_link

https://drive.google.com/file/d/1RA8rDNXQ3KtEZrcVegjaxS4fB9vP-x5L/view?usp=drive_link

https://drive.google.com/file/d/1yGs4Fdu4KZv6jTVbzmyeC2XhXvFxal9c/view?usp=drive_link

Database

https://drive.google.com/file/d/1wiFO9pLgUQ1-1f8QmAGirRoq7qeyCEf4/view?usp=drive_link

https://drive.google.com/file/d/1lR1VeUNwEFVDkA7DXjd0aKB9eY17J-nQ/view?usp=drive_link

Dalam proses rekrutmen perusahaan besar seperti Pertamina Careers, istilah Shortlisted, Talent Candidate, dan Talent Pool biasanya menunjukkan posisi kandidat dalam proses seleksi. Namun, perlu diingat bahwa definisi persisnya dapat berbeda antar periode rekrutmen dan anak perusahaan Pertamina.

1. Shortlisted

Arti: Kandidat telah lolos tahap penyaringan awal dan masuk daftar kandidat yang akan diproses lebih lanjut.

Posisi dalam proses:

Pendaftaran
    ↓
Seleksi Administrasi
    ↓
SHORTLISTED
    ↓
Tes / Assessment
    ↓
Wawancara

Maknanya:

• Dokumen dan kualifikasi dinilai sesuai dengan persyaratan.
• Kandidat dipilih dari banyak pelamar untuk mengikuti tahapan berikutnya.
• Belum menunjukkan kelulusan akhir.

---

2. Talent Candidate

Arti: Kandidat telah menunjukkan kompetensi yang sesuai dan dianggap layak untuk direkrut apabila ada kebutuhan posisi.

Posisi dalam proses:

Administrasi
    ↓
Tes Kompetensi
    ↓
Wawancara
    ↓
TALENT CANDIDATE
    ↓
Menunggu kebutuhan formasi

Maknanya:

• Kandidat telah memenuhi standar yang ditetapkan.
• Belum tentu langsung mendapatkan penawaran kerja.
• Dapat diprioritaskan untuk posisi yang sesuai di masa mendatang.

---

3. Talent Pool

Arti: Kumpulan kandidat potensial yang telah lulus atau hampir lulus proses seleksi dan disimpan untuk kebutuhan rekrutmen berikutnya.

Posisi dalam proses:

Seleksi Lengkap
    ↓
Lulus Standar Kompetensi
    ↓
TALENT POOL
    ↓
Pemanggilan Saat Ada Kebutuhan

Maknanya:

• Profil kandidat disimpan dalam database perusahaan.
• Kandidat dapat dipanggil kembali tanpa mengulang seluruh proses seleksi.
• Tidak ada jaminan akan direkrut.

---

Perbedaan Singkat

Status	Posisi Seleksi	Peluang Rekrutmen
Shortlisted	Lolos penyaringan awal	Sedang
Talent Candidate	Kandidat dinilai memenuhi kompetensi	Tinggi
Talent Pool	Sudah masuk database kandidat potensial	Tinggi, tergantung kebutuhan formasi

Urutan yang Umum Terjadi

Pada banyak program rekrutmen, alurnya sering kali seperti berikut:

Pelamar
   ↓
Seleksi Administrasi
   ↓
Shortlisted
   ↓
Tes Kompetensi & Assessment
   ↓
Wawancara
   ↓
Talent Candidate
   ↓
Talent Pool
   ↓
Job Offer / Penempatan

Namun pada beberapa rekrutmen, Talent Candidate dan Talent Pool dapat digunakan dengan makna yang hampir sama atau bahkan saling menggantikan, tergantung kebijakan perusahaan pada periode tersebut.

Jika Anda melihat status ini di akun rekrutmen Pertamina, saya dapat membantu menginterpretasikan peluang dan posisi Anda dalam proses seleksi jika Anda menyebutkan status terakhir yang muncul di dashboard rekrutmen.