Dokumen tersebut memberikan panduan untuk membangun branding melalui website dengan menjelaskan perbedaan antara website dan blog, beberapa cara membuat website, komponen penting dalam membuat website seperti konten, fitur, desain, tata letak, dan performa, serta sumber referensi untuk desain material dan bootstrap.

1. Membangun Branding
Melalui Website

2. Hello!
I am Vincent
As a founder & CEO of helofranchise.com. I love to
share with each others.
You can find me at vincent@helofranchise.com

3. 1.
Blog vs website
Apa perbedaan website & blog?

4. Website merupakan situs url
yang kita akses sehari dengan
memasukkan protocal www.
Blog merupakan istilah didalam
website yang berupa suatu
halaman konten berisi tulisan
dengan topik spesifik yang
telah ditentukan oleh penulis.

5. Beberapa cara membuat
website
Saas Service (Software as a service)
■ Wix
■ Websitebuilder
■ Blogger
■ Etc
Personal Service
■ CMS (Wordpress, Joomla, Drupal)
■ Scratch

6. Komponen website
Komponen yang harus kita tahu dalam
membuat website

7. 1. Konten
Konten adalah raja

8. Berita
Primary
- Judul
- Gambar utama
- Deskripsi
- Nama penulis
- Total waktu setelah terbit
Additional
- Jumlah Komen
- Jumlah Like

9. Primary
- Judul
- Kategori
- Gambar Utama
- Harga
Produk
Additional
- Alamat
- Informasi Lain

10. 2. Fitur
Bantu pembaca
mengenal dan
beriteraksi

11. Widget
- Pencarian
- Postingan terakhir
- Posting paling polular
- Lain - lain
Fitur
Halaman
- Tentang Anda
- FAQ
- Kontak
Interaksi
- Komen
- Bagikan
- Likes
- Sumber: http://www.goodui.org/

12. 3. Design
Tampilan
mempengaruhi
interaksi pembaca

13. Material Design
Material design merupakan konsep
tampilan yang dikeluarkan oleh google
dengan New Visually Representative
language, yang berarti mewujudkan
visualisasi agar menyerupai bentuk
nyata baik dalam teksture, bayangan
dan pencahayaan
https://material.io/guidelines/
Design
Bootstrap
Kerangka halaman yang bagus
dan luar biasa yang
mengedapankan tampilan untuk
mobile device (Handphone,
smartphone dll.) guna
mempercepat dan mempermudah
pengembangan website
http://getbootstrap.com/

14. Material Design

15. Bootstrap

16. 4. Layout
Tempatkan
komponen sebaik
mungkin

17. UI (User Interface)
- Warna
- Tombol
- Tulisan
- Gambar / Icon

18. UX (User Experience)

19. User Journey

20. 5. Performa
Performa
mempengaruhi
mood pengunjung

21. - Hosting
- Jaringan
- Kemanan
- Etc
Performance

22. Thanks!
Any questions?
You can find me at vincent@helofranchise.com
Reference
- http://goodui.org/
- https://material.io/guidelines/
- http://getbootstrap.com/