{"id":9986,"date":"2020-04-27T11:39:12","date_gmt":"2020-04-27T03:39:12","guid":{"rendered":"https:\/\/www.finereport.com\/en\/?p=9986"},"modified":"2025-06-23T15:22:12","modified_gmt":"2025-06-23T07:22:12","slug":"bagaimana-cara-membuat-dashboard-yang-keren","status":"publish","type":"post","link":"https:\/\/www.finereport.com\/en\/data-visualization\/bagaimana-cara-membuat-dashboard-yang-keren.html","title":{"rendered":"Bagaimana Cara Membuat Tampilan Dashboard Keren"},"content":{"rendered":"\n<p>Dalam tren <a href=\"https:\/\/www.fanruan.com\/id\/blog\/big-data-analytics\">big data<\/a> saat ini, visualisasi data di layar besar telah menjadi sebuah mode tampilan interaktif yang setiap orang kagumi. Jika kita dapat memahami dan menguasai teknologi ini lebih awal, saya percaya keahlian ini akan sangat bermanfaat untuk masa depan kita! Kita tahu bahwa dengan memakai software pembuat laporan, kita dapat membuat tampilan di layar besar. Kita dapat melakukan ini melalui layout dashboard dari satu <a href=\"https:\/\/fanruan.com\/id\/blog\/dashboard-laporan-keuangan\">laporan<\/a> atau beberapa laporan, atau layout halaman dari beberapa laporan. Jadi bagaimana caranya merancang sebuah dashboard yang keren?<\/p>\n\n\n\n<p>Gambar di bawah ini menunjukkan karakteristik dashboard yang sangat baik yang dicantumkan Stephen Few di Kompetisi Desain Grafik Dashboard 2012.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062501A.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Menurut kriteria penilaian di atas, berapa banyak poin yang dapat Anda capai dalam memvisualisasi data di layar besar Anda?<\/p>\n\n\n\n<p>Untuk dashboard, jika Anda ingin mempresentasikannya dengan sempurna, Anda memerlukan teknisi, desainer UI, dan pengusaha untuk mengkoordinasikan pekerjaan. Tapi untuk pemula dalam <a href=\"https:\/\/www.fanruan.com\/id\/blog\/cara-analisis-data\">analisis data<\/a>, bagaimana kita membuat dashboard keren kepunyaan kita sendiri?<\/p>\n\n\n\n<p>Kriteria di atas lebih umum. Berikut adalah beberapa faktor spesifik yang saya pertimbangkan ketika menggunakan software pembuat laporan&nbsp;FineReport&nbsp;untuk membuat dashboard. Jika Anda menguasai&nbsp;FineReport&nbsp;dalam membuat dashboard, artinya Anda telah menguasai keterampilan untuk membuat visualisasi data yang keren.<\/p>\n\n\n\n<p>Catatan: Semua grafik dan laporan dalam artikel ini dibuat dengan <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a>. Klik banner dibawah dan rasakan bedanya pembuatan laporan dengan <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.fanruan.com\/id\/finereport\/download-trial-b\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"https:\/\/media.finebi.com\/strapi\/Fine_Report_64b53082da.png\" alt=\"FineReport.png\"\/><\/a><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#1_Pengguna_dalam_Tampilan_Dashboard_Keren\">1. Pengguna dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#2_Tata_Letak_dalam_Tampilan_Dashboard_Keren\">2. Tata Letak dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#3_Latar_Belakang_dalam_Tampilan_Dashboard_Keren\">3. Latar Belakang dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#4_Skema_Warna_dalam_Tampilan_Dashboard_Keren\">4. Skema Warna dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#5_Grafik_dalam_Tampilan_Dashboard_Keren\">5. Grafik dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#6_Efek_Dinamis_dalam_Tampilan_Dashboard_Keren\">6. Efek Dinamis dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#7_Detail_dalam_Tampilan_Dashboard_Keren\">7. Detail dalam Tampilan Dashboard Keren<\/a><\/li><li><a href=\"#8_Judul_dalam_Tampilan_Dashboard_Keren\">8. Judul dalam Tampilan Dashboard Keren<\/a><ul><li><a href=\"#Artikel_Mengenai_Grafik_Lainnya\">Artikel Mengenai Grafik Lainnya<\/a><\/li><li><a href=\"#Bacaan_Lainnya_Tentang_Tampilan_Dashboard_Keren\">Bacaan Lainnya Tentang Tampilan Dashboard Keren<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h2><span id=\"1_Pengguna_dalam_Tampilan_Dashboard_Keren\">1. Pengguna dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Memahami pengguna membantu dalam memahami dekomposisi logika KPI untuk ditampilkan dan data. Dalam kebanyakan kasus, dashboard dipakai dalam manajemen tingkat pemimpin, sehingga ia menunjukkan lebih banyak indikator operasional pada tingkat operasional.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"2_Tata_Letak_dalam_Tampilan_Dashboard_Keren\">2. Tata Letak dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Orang dulunya membaca dari atas ke bawah, dan posisi tengah adalah yang paling menarik, sehingga konten penting harus ditempatkan di bagian atas atau tengah. Seperti yang ditunjukkan di bawah ini, kita dapat langsung menampilkan informasi indikator penting di bagian atas halaman ini. Tata letak ini adalah struktur yang paling populer dari banyak sistem laporan untuk operator. Indikator digital secara keseluruhan nampak jelas dengan sekali lihat, yang memungkinkan pembaca untuk memahami data umum dalam hitungan detik. Ini adalah cara membaca laporan dengan rasio input-to-output yang tinggi dari waktu.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062502A.png\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"3_Latar_Belakang_dalam_Tampilan_Dashboard_Keren\">3. Latar Belakang dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Dalam situasi yang berbeda, jika warna latar belakang gelap (biru, biru kehijauan, hitam), efeknya akan lebih jelas ketika dashboard ditempatkan di layar besar. Pada saat yang sama, untuk menampilkan konten dengan lebih jelas, warna antara teks dan latar belakang harus kontras, yang berarti warna teks terang.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062503A.jpg\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<p>Selain menggunakan warna latar belakang, Anda juga dapat menggunakan gambar sebagai latar belakang. Sebagai contoh, gambar berwarna gelap seperti dua gambar di bawah ini memiliki nuansa teknologi.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062504A.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062505A.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"4_Skema_Warna_dalam_Tampilan_Dashboard_Keren\">4. Skema Warna dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Berikut ini adalah skema warna umum yang dikumpulkan dari internet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062506A.jpg\" alt=\"\"\/><figcaption>Dari Google<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a> memilki banyak skema warna bawaan yang indah.<\/p>\n\n\n\n<p><p><a style=\"color: #fff; background-color: #2849f7; border: none; border-radius: 20px; width: 160px; height: 40px; font-size: 16px; line-height: 26px; display: inline-block; padding: 6px 12px; margin-bottom: 0; text-align: center;\" href=\"https:\/\/www.finereport.com\/en\/activation_ina\" target=\"_blank\" rel=\"noopener noreferrer\">Uji coba gratis<\/a><\/p>\n<p>&nbsp;<\/p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062507A.gif\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a> <\/figcaption><\/figure>\n\n\n\n<p>Nilai RGB yang spesifik dapat diperoleh melalui software pemilih warna. Terdapat berbagai sumber di internet.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"5_Grafik_dalam_Tampilan_Dashboard_Keren\">5. Grafik dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Dengan menggunakan teknik grafis seperti ECharts, D3. js, dan Highcharts, memungkinkan pembuatan grafik statis asli seperti histogram dan grafik garis untuk menampilkan data bagi pengguna dengan lebih jelas.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"6_Efek_Dinamis_dalam_Tampilan_Dashboard_Keren\">6. Efek Dinamis dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Dashboard yang sempurna memiliki karakteristik interaksi pengguna, dan apa efeknya dapat mencerminkan interaksi pengguna?<\/p>\n\n\n\n<p><strong>Scrolling<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062508A.gif\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062509A.gif\" alt=\"\"\/><figcaption>Dari FineReport<\/figcaption><\/figure>\n\n\n\n<p><p><a style=\"color: #fff; background-color: #2849f7; border: none; border-radius: 20px; width: 160px; height: 40px; font-size: 16px; line-height: 26px; display: inline-block; padding: 6px 12px; margin-bottom: 0; text-align: center;\" href=\"https:\/\/www.finereport.com\/en\/activation_ina\" target=\"_blank\" rel=\"noopener noreferrer\">Uji coba gratis<\/a><\/p>\n<p>&nbsp;<\/p><\/p>\n\n\n\n<br> <\/br>\n\n\n\n<p><strong>Tampilan real-time<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062510A.gif\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<p><strong>Linkage<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062511A.gif\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a> <\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<p><strong>Drilling<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062512A.gif\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"7_Detail_dalam_Tampilan_Dashboard_Keren\">7. Detail dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p><strong>Ikon<\/strong><\/p>\n\n\n\n<p>Menambahkan ikon ke judul, daftar, dan grafik, tidak hanya mereflesikan tema sebuah blok, tapi juga memiliki efek dekoratif.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<p><strong>Garis Pembatas<\/strong><\/p>\n\n\n\n<p>Garis pembatas membuat blok jelas terpisah dan data dapat dipresentasikan dengan jelas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.finereport.com\/en\/wp-content\/themes\/blogs\/images\/2019062513A.jpg\" alt=\"\"\/><figcaption>Dari <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/fanruan.com\/id\/finereport\">FineReport<\/a><\/figcaption><\/figure>\n\n\n\n<p><p><a style=\"color: #fff; background-color: #2849f7; border: none; border-radius: 20px; width: 160px; height: 40px; font-size: 16px; line-height: 26px; display: inline-block; padding: 6px 12px; margin-bottom: 0; text-align: center;\" href=\"https:\/\/www.finereport.com\/en\/activation_ina\" target=\"_blank\" rel=\"noopener noreferrer\">Uji coba gratis<\/a><\/p>\n<p>&nbsp;<\/p><\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"8_Judul_dalam_Tampilan_Dashboard_Keren\">8. Judul dalam Tampilan Dashboard Keren<\/span><\/h2>\n\n\n\n<p>Sebuah judul memperjelas tema. Meskipun blok jelas terpisah dan terdapat banyak grafik dinamis di halaman, tanpa judul, <a href=\"https:\/\/www.fanruan.com\/id\/blog\/apa-itu-dashboard\">dashboard<\/a> ini tidak akan sukses, karena kurangnya judul juga akan mempengaruhi keterbacaan sebuah dashboard.<\/p>\n\n\n\n<p>Saya berharap ringkasan di atas dapat membantu Anda dalam tata letak, pencocokan warna, interaksi, dll, sehingga Anda dapat membuat dashboard berkualitas tinggi yang dapat mengejutkan bos-bos Anda. Selain itu, Anda juga dapat merujuk ke gambar dashboard yang tersedia di internet, dimulai dengan imitasi. Menurut saya, desain dapat dipelajari sedikit demi sedikit dan akhirnya Anda akan menemukan cara Anda sendiri dalam mendesain.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.fanruan.com\/id\/finebi\/download-trial-b\">Cobalah\u00a0FineReport<\/a>\u00a0untuk membuat dashboard yang menakjubkan dan penggunaan pribadinya gratis loh!<\/p>\n\n\n\n<p>Follow&nbsp;<em><a href=\"https:\/\/www.facebook.com\/finereport\/\">FineReport Reporting Software<\/a><\/em>&nbsp;di Facebook untuk informasi lebih lanjut.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.fanruan.com\/id\/finereport\/download-trial-b\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"https:\/\/media.finebi.com\/strapi\/Fine_Report_64b53082da.png\" alt=\"FineReport.png\"\/><\/a><\/figure>\n\n\n\n<h3><span id=\"Artikel_Mengenai_Grafik_Lainnya\">Artikel Mengenai Grafik Lainnya<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.fanruan.com\/id\/blog\/diagram-gantt\" target=\"_blank\" rel=\"noreferrer noopener\">5 Tahap Untuk Membuat Diagram Gantt<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/apa-itu-histogram\">Cara Mudah Membuat Histogram untuk Pemula<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/diagram-garis\">Cara Mudah Membuat Diagram Garis untuk Pemula<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/boxplot\">Apa Itu Boxplot dan Bagaimana Cara Kerjanya<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/diagram-batang\">Cara Membaca Data Dalam Diagram Batang<\/a><\/p>\n\n\n\n<h3><span id=\"Bacaan_Lainnya_Tentang_Tampilan_Dashboard_Keren\">Bacaan Lainnya Tentang Tampilan Dashboard Keren<\/span><\/h3>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/contoh-visualisasi-data\">Menjelajahi Keajaiban Data: Contoh dan Pertimbangan Visualisasi Data<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.fanruan.com\/id\/blog\/panduan-visualisasi-data\">Panduan Utama Visualisasi Data Dalam Berbagai Industri<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fanruan.com\/id\/blog\/15-alat-visualisasi-data-terbaik\">15 Alat Visualisasi Data Terbaik di Tahun 2024<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.fanruan.com\/id\/blog\/apa-itu-dashboard\">Apa Itu Dashboard dan Cara Memvisualisasikan Data<\/a><\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.fanruan.com\/id\/blog\/visualisasi\">Cara Membuat Visualisasi Data yang Efektif<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.fanruan.com\/id\/blog\/jenis-jenis-visualisasi\" target=\"_blank\" rel=\"noreferrer noopener\">22 Jenis Visualisasi Untuk Meningkatkan Visualisasi Analisis Anda<\/a><\/p>\n\n\n\n<br> <\/br>\n","protected":false},"excerpt":{"rendered":"<p>Dalam tren big data saat ini, visualisasi data di layar besar telah menjadi sebuah mode tampilan interaktif yang setiap orang kagumi. Jika kita dapat memahami dan menguasai teknologi ini lebih awal, saya percaya keahlian ini akan sangat bermanfaat untuk masa depan kita! Kita tahu bahwa dengan memakai software pembuat laporan, kita dapat membuat tampilan di&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[854],"tags":[156],"yst_prominent_words":[4399,3569,2838,4380,4384,3635,4376,4397,3633,3698,3109,2827,1563],"_links":{"self":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/9986"}],"collection":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/comments?post=9986"}],"version-history":[{"count":7,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/9986\/revisions"}],"predecessor-version":[{"id":19747,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/9986\/revisions\/19747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media\/9117"}],"wp:attachment":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media?parent=9986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/categories?post=9986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/tags?post=9986"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=9986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}