Blog Post

Blog Post adalah pola desain yang digunakan untuk menampilkan halaman artikel secara penuh. Pola ini terdiri dari beberapa bagian utama seperti header, konten utama, dan blog section untuk menampilkan artikel terkait atau unggulan.

Pola ini memastikan tampilan artikel tetap rapi, mudah dibaca, dan konsisten di seluruh halaman publikasi.

Penggunaan

Gunakan Blog Post untuk menampilkan artikel, panduan, atau informasi penting yang relevan dengan pengguna.

Komponen ini membantu menyampaikan konten secara terstruktur melalui elemen visual seperti gambar utama, judul, deskripsi, dan metadata.

Anatomi

Struktur Blog Post terdiri dari beberapa elemen utama yang bekerja bersama untuk memberikan pengalaman membaca yang jelas dan terstruktur.

Header

Menampilkan kategori, judul artikel, nama penulis, tanggal rilis, dan waktu baca.

Main Content

Area utama untuk menampilkan isi artikel.

Blog Section

Menampilkan artikel terkait atau unggulan di bagian bawah halaman.

Kategori

Kategori pada Blog Post berfokus pada pengaturan layout untuk tampilan desktop dan mobile.

Desktop

Pada tampilan desktop, bagian Artikel Terkait disusun secara horizontal. Jarak antar header, isi konten utama, dan artikel terkait disarankan 32px untuk menjaga keterbacaan dan keseimbangan visual. Gunakan ukuran teks yang lebih besar pada bagian judul (heading) agar tampilan lebih menonjol dan mudah dibaca di layar lebar.

Mobile

Pada tampilan mobile, bagian Artikel Terkait disusun secara vertikal untuk menyesuaikan dengan layar yang lebih kecil. Jarak antar header, isi konten utama, dan artikel terkait disarankan 24px untuk tampilan yang rapi dan efisien.

Gunakan ukuran teks yang lebih kecil pada bagian judul (heading) agar tetap proporsional dengan ukuran layar mobile.

Cara Penggunaan yang Disarankan

Header

Bagian pembuka artikel yang menampilkan judul, kategori, dan waktu publikasi. Pastikan semua elemen mudah dibaca dan memiliki kontras warna yang cukup.

Main Content

Area utama untuk menampilkan isi artikel. Gunakan gaya penulisan yang konsisten dan ringkas untuk mencegah kelelahan membaca.

Blog Section

Tampilkan beberapa artikel terkait dalam satu deretan. Gunakan gambar, judul singkat, dan ringkasan isi untuk menarik perhatian pengguna.

Menggunakan Hierarki Yang Jelas

✅ Disarankan:

Gunakan gaya heading yang konsisten untuk membedakan judul utama, subjudul, dan isi artikel. Konsistensi ini memudahkan pembaca memahami alur informasi dan menavigasi konten.

❌ Dihindari:

Jangan gunakan ukuran atau gaya teks yang tidak konsisten antarbagian, karena dapat mengganggu fokus dan alur membaca.

Dorong Eksplorasi Pengguna

✅ Disarankan:

Tambahkan bagian seperti "Artikel Terkait" atau "Baca Juga" di akhir artikel untuk membantu pembaca menemukan konten lain yang relevan.

❌ Dihindari:

Jangan akhiri halaman tanpa memberikan tautan lanjutan atau rekomendasi bacaan berikutnya.

Penerapan

Blog Post Page

Contoh Blog Post dapat ditemukan pada halaman artikel Blog Page, yang menampilkan judul, isi konten utama, dan daftar artikel terkait di bagian bawah halaman.

Spesifikasi

Panduan jarak antar elemen, rasio gambar, dan padding untuk memastikan konsistensi visual antarkartu artikel.