2. Daftar Isi
Visual Branding
Penerapan Media Ker
Visual Branding & User Interface 02
Daftar Isi
Standardisasi
01
02
04
05
06
07
08
09
10
11
12
13
14
15
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Representasi Identitas
Logo
Warna Primer
Warna Sekunder
Tipografi
Grid dan Konfigurasi
Media Sekunder
Grafis Sekunder
Kartu Nama
Roll Banner
Kop Surat
Amplop Kecil
Amplop Besar
Stiker
Umbul-Umbul
Billboard
T-SHirt
Polo
Kemeja
Pin
Topi
Ballpoint
Lain-lain
36
38
42
43
User Interface
Home
Sambat 2.0
Info Malang
CCTV
Produk Icon
Icon Layanan
Web Logo
Gaya Illustrasi
Gaya Icon
Favicons
3. Standardisasi Visual
Branding dan User Interface
Standardisasi dari brand identity mendukung terciptanya konsistensi
yang dapat digunakan dalam jangka panjang, sehingga branding KER
dapat terus teringat di pikiran masyarakat. Semua peraturan dalam
penggunaan identitas visual KER dicantumkan dalam buku pedoman
sistem identitas ini secara lengkap, mulai dari logo, hingga penerapannya
ke stationery set, kaos, stiker, amplop, dan lain-lain. Diharapkan menggu-
nakan aturan yang telah dipaparkan untuk menghindari dan mencegah
kesalahan-kesalahan fatal yang dapat mengubah persepsi masyarakat
tentang branding KER, seperti kode warna, pengaturan logo dan ukuran
yang dibuat termasuk rekomendasi perancangan antarmuka aplikasi KER
Visual Branding & User Interface 03
5. Representasi Identitas
Identitas
Kota Malang
Kolaborasi dan
Keterlibatan Society
Prinsip
Smart City
Logo ker merepresentasikan semangat smart city dengan enam pilar, Tugu
dari perspektif atas sebagai Identitas Kota Malang, dan bentuk imajiner dari
sebuah rangkulan atau genggam kebersamaan. simbol bentuk kolaborasi
dalam keterlibatan masyarakat
Visual Branding & User Interface 05
6. Visual Branding & User Interface 06
Logo
Warna logo KER terdiri dari dua warna yaitu warna gradasi antara
biru ke toska. Pemilihan kedua warna tersebut dipilih cukup
memberikan kesan modern. selain itu penggunaan warna
dengan dominasi biru merupakan representasi Kota Malang
sebagai Bumi Arema
Komposisi Sekunder
Komposisi Primer
7. Visual Branding & User Interface 07
Warna Primer
Warna logo KER terdiri dari dua warna yaitu warna primer antara Kuning dengan Hitam. Pemilihan kedua warna
tersebut dipilih cukup memberikan karakter yang sangat kuat dan kontras dalam hal optis. Selain itu kombinasi
warna Kuning dan Hitam memperkuat nilai-nilai maskulin pada bentuk logo yang cenderung tegas dan minim
bentuk-bentuk dekoratif melengkung.
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
8. Warna Sekunder
Warna sekunder ini digunakan ketika dibuthkan aksentuasi pada beberapa bagian elemen atau komponen visual
sebagai bentuk Point of Interest atau highlight terhadap informasi tertentu. selain itu warna sekunder merupakan
turunan dari warna layanan / fitur dari KER
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
#154197
C:100 M:86 Y:07 K:00
R:21 G:65 B:151
Visual Branding & User Interface 08
9. Visual Branding & User Interface 09
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Thin Montserrat ExtraLight
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Typeface (rancangan karakter dari sekumpulan huruf) yang digunakan perlu memiliki standarisasi tersendiri, agar branding KER dapat berjalan dengan konsisten. Untuk menjaga
karakter logo dalam penggunaan branding KER, maka digunakan font Iskra sebagai primary font (rupa huruf utama) sebagai kebutuhan segala bentuk publikasi dari branding KER,
terutama dalam pemakaian headline suatu informasi.
Montserrat
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Medium Montserrat SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Extra Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Montserrat Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Tipografi
10. Visual Branding & User Interface 10
1 2 3 4 5 6 7 8
1
2
3
4
5
6
7
8
Konfigurasi
Konfigurasi berfungsi sebagai anatomi logo. Ketetapan konfigur-
asi logo menggunakan acuan skala karakter huruf 'X’, untuk
mengatur keseimbangan elemen visual di dalam logo. Zona yang
bersih atau kosong diciptakan untuk memastikan logo selalu
menonjol apabila disandingkan dengan gambar yang lain.
Sehingga, logo dapat terlihat lebih rapi, bersih, dan semakin jelas.
12. Produk Icon
Konfigurasi berfungsi sebagai anatomi logo. Ketetapan konfigur-
asi logo menggunakan acuan skala karakter huruf 'X’, untuk
mengatur keseimbangan elemen visual di dalam logo. Zona yang
bersih atau kosong diciptakan untuk memastikan logo selalu
menonjol apabila disandingkan dengan gambar yang lain.
Sehingga, logo dapat terlihat lebih rapi, bersih, dan semakin jelas.
13. Visual Branding & User Interface 13
Icon Layanan
Di dalam aplikasi KER terdapat beraneka ragam layanan atau fitur dengan fungsi yang berbeda pula.
dengan adanya kebutuhan dini diperlukan sebuah simbol pemintas yang sesuai dengan representasi
dari fungsi masing-masing layanan dengan tidak menghilangkan style atau gaya dari logo KER
14. Visual Branding & User Interface 14
Ker! Ker!
Web Logo
Logo KER juga harus bisa diadaptasikan dalam medium website, untuk hal ini logo dirancang
dengan komposisi landscape dengan penyesuaian ukuran Logotype bermaksud meningkatkan
readability brand name KER.
15. Visual Branding & User Interface 15
Gaya Illustrasi
Penggunaan ilustrasi untuk visualisasi tambahan diharapkan menggunakan bentuk-bentuk yang
sederhana, tidak terlalu rumit dan mempuyai kesatuan dalam branding visual KER.
direkomendasikan penggunaan style flat design yang mempunyai tone color sejenis dengan KER
16. Solid Line Solid Line
Solid Line Solid Line
Visual Branding & User Interface 16
Gaya Icon
17. Radius 100%
Version 01 Version 02
Version 03 Version 04
Radius 50% Radius 0% Radius 100% Radius 50% Radius 0%
Radius 100% Radius 50% Radius 0% Radius 100% Radius 50% Radius 0%
Favicons
Visual Branding & User Interface 17
19. Visual Branding & User Interface 19
Grafis Sekunder
Secondary graphic (grafik menengah) adalah suatu
alat visual yang unik untuk mendukung keutuhan
visual branding. Alat ini adalah bagian kunci dari
sistem identitas visual. Secondary graphic diambil dari
unsur visual Pada logo KER, yakni pengolahan
logogram dengan menye pola pengulangan / repetisi
dan diolah sedemikian rupa hingga membentuk
sebuah pola atau pattern.
Grafis sekunder ini nanti diharapkan menjadi bagian
pendukung elemen visual di beberapa dan sebagian
media sebagai strategi dalam penekanan visual brand
KER.
20. Visual Branding & User Interface 20
Penerapan Media Sekunder
Ukuran
5.5 x 9 cm (Landscape)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC / AP
Produksi
Digital Print
Offset
Jenis Font
Montserrat
Drs. Sutiaji
+62 8123456789
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
9 cm
Depan
Belakang
5.5cm
5.5cm
kontak@ker.go.id
031-2345-5673
ker.go.id
Kartu Nama
21. Visual Branding & User Interface 21
Ukuran
60 x 160 cm
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
PVC
Produksi
Digital Print
Jenis Font
Montserrat
Lorem Ipsum
Dolor Sit Amet
Lorem
Ipsum
Dolor
Sit Amet
consectetur adipiscing
elit, sed do eiusmod
tempor incididunt ut
labore et dolore magna
aliqua.modo consequa
velit esse
orum. consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea
Opsi Layout #1 Opsi Layout #2
60 cm 60 cm
160cm
Penerapan Media Sekunder
X-Banner / Roll Banner
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
kontak@ker.go.id
031-2345-5673
ker.go.id
kontak@ker.go.id
031-2345-5673
ker.go.id
22. Visual Branding & User Interface 22
Penerapan Media Sekunder
Ukuran
21 x 29.7 cm
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC / AP
Produksi
Digital Print
Offset
Jenis Font
Montserrat
Kop Surat
Hi, Ker!
Taciti sem ridiculus scelerisque sed vitae ultrices aptent ac a parturient porta
a nisl vel suspendisse tempor nec consequat condimentum parturient empor
in rutrum quis. Dictum aliquam adipiscing consectetur suspendisse hendrerit
malesuada curabitur mus augue mi et primis in ultricies a sociosqu parturient
cum hendrerit parturient dui id sapien. Scelerisque a ornare mattis at curae
dapibus nibh placerat per lacinia dignissim consequat parturient suspendisse
varius lectus a est. A purus nec duis condimentum suspendisse potenti
rutrum vivamus dignissim consectetur parturient rutrum suscipit parturient
phasellus nunc fringilla.
Quisque parturient adipiscing netus a dapibus ullamcorper suspendisse
fringilla a quis id nec a a ut vel erat at lorem quis sapien bibendum dis et vel.
Dignissim nisi vestibulum sed condimentum a in interdum a a ut netus diam
penatibus diam condimentum dolor blandit nunc ut suscipit egestas ut
commodo vestibulum dui ipsum. Vestibulum cras mollis sem acilisi ad tempor
molestie etiam hac magna uspendisse parturient mollis at magna id cubilia
vel velit sapien a. sapien a tincidunt est habitasse adipiscing onsectetur non
lobortis in vestibulum suspendisse. Adipiscing vitae vestibulum consequat
dignissim per parturient dui condimentum sociosqu molestie rutrum venena-
tis velit tincidunt.
A ullamcorper dis consectetur hac praesent elit enim cum a egestas a
parturient adipiscing dictumst faucibus mus hac justo faucibus auctor
condimentum mi id porttitor scelerisque dapibus luctus suspendisse. Leo
parturient enim senectus torquent ullamcorper vestibulum laoreet porttitor
ullamcorper a tempus ullamcorper a eu mi nascetur. Neque morbi duis
maecenas vivamus mi a consectetur metus consectetur hac ante condimen-
tum habitant condimentum.
Best Regards,
29.7 cm
21 cm
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
23. Visual Branding & User Interface 23
Penerapan Media Sekunder
Ukuran
11 x 22 cm (Landscape)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC / AP
Produksi
Digital Print
Offset
Jenis Font
Montserrat
Amplop Kecil
22 cm
22 cm
11 cm
Ker.kotamalang.go.id
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
Lorem Ipsum Dolor
Lorem Ipsum Dolor
Sit Amet, Kota Malang
Jawa Timur
09876126123
24. Visual Branding & User Interface 24
Penerapan Media Sekunder
Ukuran
23 x 33 cm (Potrait)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC / AP
Produksi
Digital Print
Offset
Jenis Font
Montserrat
Amplop Besar
Lorem Ipsum Dolor
Lorem Ipsum Dolor
Sit Amet, Kota Malang
Jawa Timur
09876126123
Lorem Ipsum Dolor
Lorem Ipsum Dolor
Sit Amet, Kota Malang
Jawa Timur
09876126123
33 cm
22 cm22 cm
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
Balai Kota Malang
Jl. Tugu No.1 Kiduldalem,
Kec. Klojen, Kota Malang,
Jawa Timur 65119
Ker.kotamalang.go.idKer.kotamalang.go.id
25. Visual Branding & User Interface 25
Penerapan Media Sekunder
Ukuran
5.5 x 9 cm (Potrait)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC / AP
Produksi
Digital Print
Offset
Jenis Font
Montserrat
Sticker
60mm x 15mm
60mm x 15mm
26. Visual Branding & User Interface 26
Penerapan Media Sekunder
Umbul-umbul
Opsi #1 Opsi #2 Opsi #3
80 cm 80 cm 80 cm
400cm
Ukuran
80 x 400 cm (Potrait)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
PVC
Produksi
Digital Print
Jenis Font
Montserrat
27. Visual Branding & User Interface 27
Penerapan Media Sekunder
Billboard
Ragam Solusi
Satu Aplikasi
Ragam Solusi
Satu Aplikasi
Ukuran
Menyesuaikan (2:1)
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
PVC
Produksi
Digital Print
Jenis Font
Montserrat
28. Visual Branding & User Interface 28
Penerapan Media Sekunder
T-Shirt
Ker.kotamalang.go.id
Front
Back
Ukuran
Menyesuaikan
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Cotton
Produksi
Screen Print
Jenis Font
Montserrat Light
29. Visual Branding & User Interface 29
Penerapan Media Sekunder
Polo Shirt
60 - 80mm
Ukuran
60-80mm
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Menyesuaikan
Produksi
Bordir
Jenis Font
-
30. Visual Branding & User Interface 30
Penerapan Media Sekunder
Kemeja
Ukuran
Lebar Logo 5 cm
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Cotton
Produksi
Screen Print
Jenis Font
-
50mm
31. Visual Branding & User Interface 31
Penerapan Media Sekunder
Pin
Ukuran
Diameter 58mm
Diameter 44mm
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
BC/AP 260
Produksi
Digital Print
Offset
Jenis Font
-
32. Visual Branding & User Interface 32
Penerapan Media Sekunder
Topi
Nama di sini
Ukuran
Menyesuaikan
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Menyesuaikan
Produksi
Bordir
Jenis Font
Montserrat Bold
33. Visual Branding & User Interface 33
Penerapan Media Sekunder
Ballpoint
Ker!
Ker!
Ukuran
Menyesuaikan
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Menyesuaikan
Produksi
Digital Print
Jenis Font
Montserrat
34. USBFlashdisk
NotepadBook Agenda
Penerapan Media Sekunder
Lain-lain
Visual Branding & User Interface 34
Ker!
Media
USB Flashdisk
Book Agenda
Notepad
Warna
C:76 M:58 Y:0 K:0
3C70EA
C:57 M:0 Y:30 K:0
41E1CD
C:0 M:0 Y:0 K:90
2D2D2D
C:0 M:0 Y:0 K:0
FFFFFF
Material
Menyesuaikan
Produksi
Digital Print
Offset
Jenis Font
Montserrat
36. Visual Branding & User Interface 36
Pada bagian home aplikasi Ker dirancang untuk bisa digunakan
sebagai super app, dengan beragam fitur dan informasi pilihan
mengenai hal-hal yang uptodate tentang Kota Malang
Home
