Panduan membuat website untuk yang ditujukan untuk pemula. Mulai dari pengenalan hosting dan domain hingga membuat website menggunakan CMS Wordpress dan website builder sitemaya.com sitemaya.com penyedia website gratis dengan fitur drag and drop website builder. Sehingga kamu bisa membuat website tanpa perlu pengetahuan coding.

1. Memahami Alur
Kerja Pembuatan
Website
Sitemaya
Mini Workshop - Day 1

2. Syahrul
CX Specialist
Graphic Designer
Jul 2012 – Dec 2013
Content Editor
Jan 2014 – Dec 2014
Sales Marketing Officer
Jan 2015 – Dec 2016
Visual Developer
Jan 2017 – Dec 2017
Video Production
Specialist
Jan 2018 – Apr 2018
Knowledge Management
Officer
May 2018 – Sep 2018
Customer Experience
Specialist
Oct 2018 – Present

3. 1. Introduction
2. CMS (Content Management System)
3. Menyusun Konten Website
4. Konsep Website Builder
5. Membuat Mockup
6. Tanya Jawab & Praktek
Yang akan kita
pelajari hari ini:

4. Introduction
Section 1 of 6

5. Pengenalan tentang Website

6. Komponen website
www.domainku.com
Hosting Domain Konten Web
Shared hosting
Dedicated Hosting
VPS
Server Fisik
.com
.net
.id
.ponpes.id
Teks / Script
Gambar
Audio
Video

7. Analogi
www.domainku.com

8. Analogi
www.domainku.com www.domainmu.id

9. Mengapa Website

11. internet users, in Indonesia (January 2022).
Indonesia’s internet penetration rate stood at 73.7 percent
of the total population at the start of 2022 (Indonesia’s
total population was 277.7 million in January 2022.)
From datareportal.com
There were 204.7 million

12. Benefit
1. Memperluas pangsa pasar
2. Memperluas jangkauan promosi dan penjualan setiap saat
3. Menyajikan informasi yang lebih lengkap dan aktual
4. Meningkatkan citra profesional
5. Menurunkan biaya operasional
6. Mempermudah komunikasi dengan calon pelanggan

13. Kenapa tetap perlu
website, kalo sudah
ada marketplace
atau sosial media?

15. SEO
websitemu.com
Sosial Media
Analitik
Pembayaran
Iklan
Dll
Dengan memiliki website kita punya
kendali penuh atas properti kita.
Memasang fitur tambahan bebas
sesuai kebutuhan.
integrasi

16. Pemanfaatan Website
1. Situs web perusahaan, bisnis, organisasi atau komunitas.
2. Portal Berita
3. Galeri foto
4. Aplikasi E-Commerce.
5. Mengelola website pribadi/ blog.
6. Situs web pembelajaran daring (Inggris: e-learning)

17. Pembuatan Website

18. Bikin Web, Coding Sendiri
&
Bikin Web, Pakai Web Builder

19. Bikin Web, Coding Sendiri
1. Membuat desain dari awal dengan Photoshop
2. Membuat aset seperti foto dan background (Slice-ing)
3. Mengubah Desain to HTML (Coding di Dreamweaver)
4. Memasukkan konten, tulisan, gambar, maupun video
5. Menambahkan fitur input data (Register & Login)
6. Website siap

20. Bikin Web, Pakai Web Builder
1. Membuat desain dari awal dengan Photoshop
2. Membuat aset seperti foto dan background (Slice-ing)
3. Mengubah Desain to HTML (Coding di Dreamweaver)
4. Memasukkan konten, tulisan, gambar, maupun video
5. Menambahkan fitur input data (Register & Login)
6. Website siap
Memilih template website
Memasukkan konten; tulisan, gambar, maupun video
Website siap
1
2
3

21. Section 2 of 6
CMS (Content
Management System)

22. Sistem manajemen konten, adalah perangkat lunak yang
digunakan untuk menambahkan atau memanipulasi isi
dari suatu situs web. Umumnya, sebuah CMS terdiri dari
dua elemen: aplikasi manajemen isi aplikasi pengiriman isi
Wikipedia
From Wikipedia
Apa itu CMS (Content
Management System)

23. Macam Macam CMS
1. Blogger
2. Drupal
3. Joomla
4. Wordpress
5. Plone
6. VBulletin
7. Moodle
8. MediaWiki
9. Osclass
10. Opencart

24. Section 3 of 6
Tahapan Membuat
Website

25. Tahapan Membuat Website
(tahap pra produksi) Dalam menyusun website ada beberapa tahapan yang
biasa saya lakukan. Jadi materi yang selanjutnya akan saya bahas,
merupakan pengalaman pribadi saya selama ini dalam pembuatan website.
1. Menentukan website yang ingin dibuat
2. Mencari referensi website sejenis
3. Menyiapkan halaman yang ingin dibuat
4. Mengisi konten dan menyiapkan aset halaman

26. Contoh:
● Website sekolah
● Website company profile
● Website jualan online
● Landing Page
● dll
Menentukan website
yang ingin dibuat
1

27. Dari referensi bisa diambil:
A. Halaman apa saja yang perlu dibuat
B. Fitur apa saja yang perlu ditambahkan
C. Konten apa saja yang perlu disiapkan
D. Referensi Layout website
Mencari referensi
website sejenis
2

28. Dari beberapa daftar website yang sudah
dikumpulkan, catat beberapa halaman yang sekiranya
wajib ada dalam sebuah website yang hendak dibuat.
Menyiapkan halaman
yang ingin dibuat
3

29. Caranya bisa gunakan prinsip ATM
A. Ambil satu referensi halaman / website
B. Inspeksi komponen yang ada di halaman tersebut
C. Tuliskan dan daftar poin-poin komponen
D. Jabarkan poin-poin dengan memberikan deskripsi
Mengisi konten dan
menyiapkan aset halaman
4

30. CONTOH
Membuat Website Sekolah

31. ● https://www.smktelkom-mlg.sch.id/
● https://sekolahsabilillah.sch.id/
● https://ic.sch.id/
● http://www.sman1yogya.sch.id/
● http://sman2-sby.sch.id/
● https://www.loyola-smg.sch.id/
● https://sma.kanisius.sch.id/
● https://sman2tangsel.sch.id/
Referensi Website Sekolah

32. Halaman apa saja yang perlu dibuat
A. Homepage
B. Profil
C. Fasilitas
D. Ekstrakurikuler
E. Prestasi
F. Berita
G. Kontak

33. Profil
websitemu.com
Homepage
Fasilitas
Prestasi
Ekstrakurikuler
Kontak
1. Contoh List kebutuhan halaman

34. Profil
websitemu.com
Homepage
Fasilitas
Prestasi
Ekstrakurikuler
Kontak
SILAT
PASKIB
dst.
1. Contoh List kebutuhan halaman

35. TEMPLATE:
https://docs.google.com/document/d/1im57hEX1bsMWv1ErwbP3keS5oGl
qDFlEi5NCg4IQsfA/edit?usp=sharing
Requirement School Website
Persiapan Konten untuk
Pembuatan Website Sekolah
Jagoan Hosting Indonesia
www.jagoanhosting.com

36. CONTOH
Membuat Website Profile (Catering)

37. ● http://nirwanacatering.com/
● https://kateringaisya.com/
● https://www.cateringmelati.com/
Referensi Website Catering

38. Halaman apa saja yang perlu dibuat
A. Homepage
B. Profil (Tentang Kami)
C. Produk/Jasa (Menu Catering)
D. Galeri
E. Berita
F. Kontak

39. Profil
websitemu.com
Homepage
Pilihan Menu
Berita
Galeri
Kontak
1. Contoh List kebutuhan halaman

40. Profil
websitemu.com
Homepage
Pilihan Menu
Prestasi
Galeri
Berita
Seafood
Olahan Daging
Olahan Sayur
1. Contoh List kebutuhan halaman
dst.

41. CONTOH
Membuat Landing Page (One Page/Sales Page)

42. ● https://ipaw.id/
● https://landingkit.co/
● https://www.sejoli.co.id/
● https://berlmember.xyz/lpdewa_snack/
● https://miraclestore.web.id/lakban-perekat-kebocoran/
● https://productlaunchdynamite.com/
● https://contentcreatorblackbook.com/
● https://listbuildingblackbook.com/
Referensi Sales Page

43. Komponen konten
1. Headline
2. Authority
3. Presuposisi & embedded
command
4. Similarity
5. Awareness
6. Product offer
7. Story behind product
From tugaskaryawan.com
8. Detail benefit
9. Pain point
10. Reason to buy
11. Testimoni / social proof
12. Detail product
13. Bonus
14. Call To Action
8. Contrast effect
9. Countdown timer
atau scarcity
10. Guarantee
11. Profile vendor atau
perusahaan
12. FAQ

44. Section 4 of 6
Konsep
Website Builder

45. websitemu.com
Sebenarnya website itu,
Kumpulan dari satu atau beberapa halaman (landing page)

46. Mengatur tata letak konten di sebuah
halaman website, kalo diibaratkan seperti:
1. menata makanan
2. di dalam wadah
3. di atas nampan.
Konsep mengatur tata letak
konten dengan Page Builder
semuanya sama.

47. 1. Makanan
Makanan adalah konten, seperti gambar, video
maupun tulisan, yang selanjutnya disebut
Module.
2. Wadah
Nanti di dalam Page Builder ada wadah konten
yang selanjutnya disebut Row & Column.
3. Nampan
Ini adalah lembar kerja kamu, alias halaman
website yang sedang kamu buat selanjutya
disebut Landing Page.
Analogi Seperti Ini

48. >
From this To this

49. 1. Row & Column
2. Module
2 komponen dasar
page builder

50. 1
Row & Column
Row = Horizontal
Column = Vertical
Dalam 1 Row bisa terdiri dari 1 column
sampai dengan 6 column.

51. Row 1
Column 1
1 Row with 1 Column

52. Row 1
Column 1 Column 1
1 Row with 2 Column

53. Row 1
Column 1 Column 1 Column 1
1 Row with 3 Column

54. 1 Row with 4 Column
1 Row with 5 Column
1 Row with 6 Column

55. 2
Module
Konten utama dari Landing Page,
contohnya seperti:
- Teks
- Gambar
- Tombol
Dan masih banyak lainnya yang bisa
dicoba sendiri.

61. LATIHAN
Temukan: Row; Column; Module

69. Section 5 of 6
Membuat
Mockup Website

70. Definisi

71. Mockup hanya sebagian kecil dari proses pembuatan interface

72. Wireframe
Kerangka dasar (layout dasar) dari
halaman yang akan kita buat.
Digunakan untuk menyusun layout,
navigasi dan organisir konten.
Tools:
Balsamiq, Sketch, Figma Dll
source

73. Mockup
Mockup adalah hasil akhir desain
yang sudah berisi informasi (
gambar, warna, & tipografi ) dan
bentuk elemen dengan tingkat
presisi tinggi. Untuk membuat hasil
desain seolah-olah terlihat nyata.
Tools:
Sketch, Figma, AdobeXD, Dll
source

74. Template Wireframe
Untuk referensi layout / penataan komponen website maupun landing page

75. Inspirasi tata letak konten (wireframe) bisa dicari dari website lain, atau
cari di pinterest.com dengan contoh kata kunci
“wireframe landing page templates”

83. Section 6 of 6
Tanya Jawab &
Praktek

84. Membuat Mockup

85. Open Figma
Figma
the collaborative interface design tool.
Download Figma

86. Day 2 - Membuat Website
dengan Sitemaya

88. THANK YOU