GSM Ker!

1. Standardisasi Visual Branding & User Interface Ker!

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 menggunakan 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

4. Visual Branding & User Interface 04 Visual Branding

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 / ﬁtur 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 Tipograﬁ

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 konfigurasi 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.

11. Penerapan Media Ker! Visual Branding & User Interface 11

12. Produk Icon Konﬁgurasi berfungsi sebagai anatomi logo. Ketetapan konﬁgur- 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 ﬁtur 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 ﬂat 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

18. Media Sekunder Visual Branding & User Interface 18

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 condimentum 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

35. Visual Branding & User Interface 35 User Interface

36. Visual Branding & User Interface 36 Pada bagian home aplikasi Ker dirancang untuk bisa digunakan sebagai super app, dengan beragam ﬁtur dan informasi pilihan mengenai hal-hal yang uptodate tentang Kota Malang Home

37. Visual Branding & User Interface 37

38. Fitur Sambat 2.0 Visual Branding & User Interface 38 Screen 1 Screen 2 Screen 3 Screen 4

41. Screen 13 Screen 14 Screen 15 Screen 16 Fitur Sambat 2.0 Visual Branding & User Interface 41

42. Screen 1 Screen 2 Screen 3 Screen 4 Fitur Info Ngalam 2.0 Visual Branding & User Interface 42

43. Screen 1 Screen 2 Screen 3 Screen 4 Screen 5 Visual Branding & User Interface 43 Fitur CCTV

GSM Ker!

GSM Ker!

Recommended

More Related Content

What's hot

What's hot(20)

Similar to GSM Ker!

Similar to GSM Ker!(11)

More from UTERO INDONESIA (utero.id)

More from UTERO INDONESIA (utero.id)(20)

GSM Ker!