Brand Guidelines January 2017 Version 1.0
Brand Guidelines
January 2017
Version 1.0
2017 Brand Guidelines Ver. 1.000
Brand GuidelinesIkuti guideline ini untuk menciptakan bahan pemasaran komunikasi internal dan eksternal.
2017Brand Guidelines Version 1.0 00
Tableof Content
00
0103040607091011121415
01 Introduction
02 Brand Identity DesignNew Face of PayTrenLogo Idea / PhilosophyClear SpaceBrand ColorsMonochromatic LogoSizes of LogoTagline on LogoLogo placementMisuses of logoLogo for Apps
2017 Brand Guidelines Ver. 1.000
1618192021
03 Typography for PayTrenUse in PrintUse for WebsitesTypesetting GuidesWeb Styles
222325262730
04 Visual Element Design Graphic ElementMood Photo for PayTrenScreenshotsIcons & IllustrationsDesign Matters
2017Brand Guidelines Version 1.0 01
Introduction
Selamat datang di brand guideline terbaru PayTren. Guideline ini ada untuk membuat Kita selalu luar biasa.
Ikuti guideline ini untuk menciptakan bahan pemasaran komunikasi internal dan eksternal.
Fondasi Desain Kami
Our brand is more than our logo. Skema desain ini terdiri dari sejumlah inti elemen dan prinsip-prinsip yang menggabungkan penciptaan tampilan khas dan berbeda yang akan segera dikenali sebagai PayTren.
Guideline ini akan memudahkan Anda untuk mengetahui elemen brand inti yang membantu Anda dalam merancang dan memproduksi komunikasi yang kuat dinamis dengan tingkat fleksibilitas.
Background
Identitas baru dari PayTren bertujuan untuk memperkenalkan PayTren sebagai produk yang memiliki banyak manfaat.
2017 Brand Guidelines Ver. 1.002
PayTren History
Beranjak dari potensi besar yang digunakan untuk memanfaatkan teknologi yang mutakhir, Yusuf Mansur melahirkan sebuah ide yang cemerlang untuk memberi kemudahan dalam membayar semua kebutuhan masyarakat dengan kombinasi penggunaan gadget dan kebiasaan pembayaran kewajiban.
Perusahaan ini menyediakan dan menjual teknologi atau perangkat yang dikenal sebagai pembayaran PayTren, yang dapat digunakan untuk melakukan pembayaran melalui ponsel/smartphone yang terdaftar pada komunitas Treni.
Dalam menjalankan bisnis ini, PT. Veritra Internasional Sentosa menawarkan dua kategori transaksi (kontrak) dari semua mitra Treni (komunitas Treni), yaitu Sebagai Pengguna yang menggunakan PayTren, Sebagai seorang pengusaha (pasar Co PayTren dan mengembangkan komunitas Treni).
Part 01
2017Brand Guidelines Version 1.0 03
Brand IdentityDesign
New Face of PayTren
Logo adalah elemen yang paling menonjol dalam identitas, sebuah tanda universal yang menghubungkan semua komunikasi PayTren. Ini merupakan sebuah jaminan kualitas yang menyatukan perbedaan dalam produk dan jasa.
PayTren menggunakan versi yang sama dalam cetakan, layar dan di bangunan kami. Simple. Mudah dimengerti. Tidak ada bayangan (drop shadow), tidak ada kilauan (glossy), tidak ada efek cahaya (flashy graphic effects).
Logo PayTren dibuat tebal, sederhana, graphic statement. Berikut berhubungan dengan touchpoint dan koneksi.
Logo PayTren terdiri dari dua elemen: Logogram dan logotype.
Dengan konsep yang sederhana, logo PayTren akan dipasang dengan baik. Halaman berikutnya merupakan penggunaan yang benar dalam penggunaan logo dengan baik.
LogotypeLogogram
2017 Brand Guidelines Ver. 1.004
Logo Visual Idea
Wajah baru PayTren didesain dengan mengedepankan kemudahan user.
Ide dasar dari gabungan huruf ”P” yang mewakili dari inisial PayTren.
Ditambah dengan Stilasi bentuk “uang kertas” yang mewakili fitur utama PayTren sebagai aplikasi berbasis mobile.
Dan tanda “panah kedepan” ini mewakili sifat selalu maju dan berinovasi.
Dengan begitu logogram PayTren memiliki bentuk yang simple, modern dan inovatif. Pesan ini yang ingin disampaikan PayTren kepada semua user dan membernya.
Warna dari logogram paytren yaitu “Orange” mempunyai kesan hangat bersahabat dan pengertian, dipadu dengan “Dark Grey” yang memiliki kesan mendasar dan modern.
Part 02
Dark-greyOrange
2017Brand Guidelines Version 1.0 05
The Golden Ratio
Untuk membuat proposi dan kualitas logo, kami menggunakan golden ratio.
The grid system
Untuk memfasilitasi penggunaan graphic guide
2017 Brand Guidelines Ver. 1.006
Clear Space
“Everyone needs a littlepersonal space”
Untuk memastikan versi signature PayTren dapat terlihat baik dalam setiap aplikasinya, gunakan su cient clear space- free of type, graphics, dan elemen lainnya yang membuat tampilan jadi berantakan - Untuk memaksimalkan tampilan dan impact dari identitas PayTren.
Untuk memastikan intergrity dan legibility dari logo lock-ups, area sekitarnya harus langsung dilindungi. Apabila logotype atau full name digunakan pada clear space sekitar 50%, simbol ketinggiannya harus diatur. Dalam keadaan khusus, apabila 50% clear zone tidak tersedia atau memungkinkan.
50% ClearSpace
50%
100%
2017Brand Guidelines Version 1.0 07
Coated Paper PANTONE 165 CR:255 G:103 B:27 #ff671b
Coated Paper PANTONE Black 70%
Orange / PANTONE 165 C White PANTONE Black 70%
100% 80% 60% 50% 30%70%
PayTren Style Guide
Dengan memilih “PayTren Orange” sebagai warna utama dari produk. Dan “PayTren Black 70%” sebagai warna netralnya untuk keseimbangan komposisi kontras.
Shades of Orange Shades of Grey
8
Orange merupakan warna primary dalam penggunaan identity. Pantone, CMYK, dan warna RGB akan diberikan sebagai opsi. Gunakan pilihan ini dan jangan dibuat ulang.
Brand Colors
2017 Brand Guidelines Ver. 1.008
Coated Paper PANTONE 285 C
Uncoated Paper PANTONE 285 U
R 35G 31B 32#231f20
Coated Uncoated C 90 C 70 M 48 M 30 Y 0 Y 0K 0 K 0
Coated Paper PANTONE 305 C
Uncoated Paper PANTONE 305 U
R 85G 195B 216#55c3d8
Coated Uncoated C 60 C 60 M 0 M 0 Y 7 Y 10K 0 K 0
Coated Paper PANTONE WARM RED C
Uncoated Paper PANTONE WARM RED U
R 239G 68B 61#ef443d
Coated Uncoated C 0 C 0 M 88 M 70 Y 80 Y 66K 0 K 0
Coated Paper PANTONE 116 C
Uncoated Paper PANTONE 115 U
R 249G 206B 50#f9ce32
Coated Uncoated C 0 C 0 M 12 M 12 Y 100 Y 95K 0 K 0
Coated Paper PANTONE 7479 C
Uncoated Paper PANTONE 7479 U
R 94G 187B 114#5ebb72
Coated Uncoated C 80 C 58 M 0 M 0 Y 65 Y 58K 0 K 0
Coated Paper PANTONE 382 C
Uncoated Paper PANTONE 381 U
R 186G 212B 49#bad431
Coated Uncoated C 28 C 25 M 0 M 0 Y 92 Y 84K 0 K 0
Secondary Color Palette
Warna inti yang digunakan, merupakan pencerminan dari kepribadian PayTren, cerah, tebal dan colorful.
Apabila menggunakan warna dalam cetak, penting untuk selalu menggunakan tinta Solid Pantone. Dengan cara ini, semua material akan konsisten, dan warnanya akan terlihat cerah. Warna-warna cerah ini tidak dapat diaplikasikan menggunakan cetakan CMYK standar. Gunakan hanya warna CMYK apabila benar-benar perlu.
2017Brand Guidelines Version 1.0 09
Monochromatic Logo
Dapat juga menggunakan logo dengan background dari primary palette. Hanya perpaduan 2 warna.
Logo on orange
Logo on grey
2017 Brand Guidelines Ver. 1.010
Sizes of Logo
Tidak ada ukuran yang ditentukan untuk Demand Media Logo PayTren. Skala dan proporsi ditentukan oleh ruang yang tersedia, estetik, fungsi dan visibility. Tidak ada ukuran maksimal yang ditetapkan untuk logo. Ukuran minimum dalam cetak adalah 0,8. Untuk keperluan digital, ukuran minimum yang digunakan adalah 100 pixels. 100 pixels adalah ukuran terkecil apabila menggunakan ICO. There is a speci c le for ICO’s which is 16px tall le.
Minimum size 1.38” / 100px
Minimum size 0.4” / 30px
Logo
Logogram
16px
Favicon - ICO file
“Good thingscome in small sizes.”
Tagline on Logo
Salah satu fungsi dari tagline adalah menyampaikan value tentang brand tersebut. Apabila tagline bersebelahan dengan logo, akan menyampaikan manfaat atau value tambahan.
teman setia bayar-bayar
Tagline on right
Tagline on bottom
teman setia bayar-bayar
2017Brand Guidelines Version 1.0 11
Corner
Corner
Center
Preview position
Centering the logo looks generic and predictable
Much better Much better
2017 Brand Guidelines Ver. 1.012
Logo Placement
“Everything in it’sright place”
Selalu hindari penempatan logo smack dab di tengah-tengah area.
Pada setiap format landscape atau vertikal- logo yang dipilih ditempatkan di setiap sudut posisi atau pusat selaras pada kanan atau kiri.
On Grayscale
Warna pilihan untuk logo kami adalah warna-warna cerah. Di beberapa case, logo colorful mungkin tidak dapat digunakan karena keterbatasan dalam cetak. Contohnya, kita dapat menggunakan versi abu-abu (dibuat 75% tinta hitam) atau satu warna hitam atau putih.
On Background
Logo kami juga dapat digunakan pada background image dengan kontras yang cukup. Gunakan logo full abu-abu dalam background terang, dan versi full warna putih untuk background yang gelap. Apabila menempatkan logo ke dalam imagery, pastikan untuk ditempatkan dengan rapi dalam bidang gambar untuk memungkinkan maksimum legibility dan visibilitas.
White logo on black background
Light-colored, uncluttered imagery
Do not use a color logo on a photographic image.
White logo on 50% black background50% Black logo on white background
Dark-colored, uncluttered imagery
2017Brand Guidelines Version 1.0 13
DON’T create a logo lockup with text
www.paytren.co.id
DON’T rearrange the logo elements.
DON’T change the proportions between the symbol and logotype
DON’T rotate the logo
DON’T stretch the logo DON’T create a gradient logo
DON’T mix colors from the palette DON’T use non-approved colors
DON’T outline the logo DON’T add a drop shadow to the logo
2017 Brand Guidelines Ver. 1.014
Logo Misuses
“Please don’t!”
Untuk mengatur integrity dari Logo PayTren, dan juga mempromosikan konsistensi brandnya, penting untuk mempergunakan logo yang sudah digambarkan pada guidelines.
Contoh berikut menunjukkan gambaran misuses (yang tidak boleh digunakan) pada Demand Media logo yang harus dihindari.
Apps Icon
Android app icon
IOS app icon
2017Brand Guidelines Version 1.0 15
2017 Brand Guidelines Ver. 1.016
Typography forPayTren
Part 03
Open Sans
Open Sans font yang digunakan, menggunakannya dalam tiga fungsi yaitu; Bold, Regular, & Italic.
ModernSimpleFriendlyClearElegant.
2017Brand Guidelines Version 1.0 17
Use in Print
Open Sans Bold digunakan untuk semua headlines dan judul.
Open Sans Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
Open Sans Regular digunakan untuk semua standard body-copy.
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
Open Sans Italic digunakan untuk menggaris bawahi kata.
Open Sans Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
2017 Brand Guidelines Ver. 1.018
Use for Websites
Roboto
Open Sans tidak tersedia sebagai font web, digunakan sebuah cadangan sebagai alternatif disebut Roboto.
Roboto BoldABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
Roboto MediumABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
Roboto ItalicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
2017Brand Guidelines Version 1.0 19
Typesetting Guides
Tipografi selalu dipasang di kiri. Ini untuk memberikan kesan titik awal yang konstan untuk setiap baris, membuat teks lebih mudah untuk membaca.
Typesetting headlines, harus 15% lebih besar dari ukuran jenisnya. Untuk dijumlahkan, kalikan ukuran jenis sebesar 0,15 dan menambahkan hasilnya ke typesize tersebut.
Saat menetapkan body copy, harus 25% lebih besar dari ukuran jenis. Untuk menghitung ini, kalikan ukuran jenis oleh 0,25 dan menambahkan hasilnya ke typesize tersebut.
Lebar kolom tubuh idealnya harus antara 7-9 kata-kata panjang
PAYTREN TEMAN SETIA BAYAR BAYAR 10/11.5
As dollestiatum con pratem dolupta dolor sint molessendam, idus minctas sunteni mpores et voluptiant quat hiliquam non pel minctisite oditas adis ent eicimpo riteces equisitibus arumend ererchitem quidero reperum quiatur sequias etum ni re est que endi cuptat. 10/12.5
PAYTREN TEMAN SETIA BAYAR BAYAR 15/17.25
As dollestiatum con pratem dolupta dolor sint molessendam, idus minctas sunteni mpores et voluptiant quat hiliquam non pel minctisite oditas adis ent eicimpo riteces equisitibus arumend ererchitem quidero reperum quiatur sequias etum ni re est que endi cuptat. 15/18.75
PAYTREN TEMAN SETIA BAYAR BAYAR 20/23
As dollestiatum con pratem dolupta dolor sint molessendam, idus minctas sunteni mpores et voluptiant quat hiliquam non pel minctisite oditas adis ent eicimpo riteces equisitibus arumend ererchitem quidero reperum quiatur sequias etum ni re est que endi cuptat. 20/25
2017 Brand Guidelines Ver. 1.020
Web Styles
For development, see the production ready frontend pattern called Headings
Text Color #f16639Background #ffffffFont Open Sans BoldSize 60pxWeight Bold
Text Color
Background Color
Heading 1
Text Color #444444Background #ffffffFont Open Sans BoldSize 40pxWeight Bold
Text Color
Background Color
Heading 2
Text Color #444444Background #ffffffFont Open Sans BoldSize 22pxWeight Bold
Text Color
Background Color
Heading 3
Text Color #444444Background #ffffffFont Open Sans BoldSize 20pxWeight Regular
Text Color
Background Color
Body text
2017Brand Guidelines Version 1.0 21
Visual ElementDesign
Part 04
2017 Brand Guidelines Ver. 1.022
Graphic Elements
PayTren mempunyai basic element visual graphic yang diambil dari logo basic shape.
2017Brand Guidelines Version 1.0 23
Element 1 for masking Element 2 for footer
Graphic Element 1
Element ini digunakan untuk masking foto yang biasa dipakai untuk cover dan visual post
Graphic Element 2
Element ini digunakan sebagai footer, yang bisa digunakan untuk keperluan layouting dan design.
2017 Brand Guidelines Ver. 1.024
Konsep fotografi digunakan untuk mengabadikan aktivitas sehari-hari yang berhubungan dengan gadget dan teknologi. Konsepnya untuk membuat Anda berada di dalam ruang tersebut. Tentang menceritakan cerita melalui kepribadian, interaksi dan pengalaman Anda. Untuk membuatnya terasa nyata, jujur dan terbuka.
Mood Photo for PayTren
2017Brand Guidelines Version 1.0 25
Screenshots
PayTren adalah sebuah perusahaan yang mengembangkan aplikasi mobile. Gunakan tampilan PayTren browser yang keren untuk mengimplikasikan aplikasi kami bekerja di setiap browser.
2017 Brand Guidelines Ver. 1.026
Icons & Illustrations
PayTren Icons
Icon-icon berikut digunakan untuk website kami, bukan hanya di aplikasinya saja. Icon aplikasinya akan dicover dengan Product Design Guidelines.
PayTren Icons
PayTren Illustrations
Untuk mencerminkan perusahaan secara keseluruhan dan untuk menggambarkan kepribadian brand, serangkaian icon telah dirancang untuk melakukan hal itu.
Gaya baru harus diluncurkan di semua komunikasi sehingga nada semua pemasaran literatur konsisten.
Icon harus menggambarkan main focus dari fitur yang mereka wakili. Icon harus dirancang menggunakan warna dari inti palet dan duduk di atas bentuk geometris gratis yang mencerminkan sifat bulat simbol Frontify. Penggunaan warna dan bentuk latar belakang harus dipertimbangkan sehingga tidak ada pengulangan muncul.
PayTren Illustrations
2017Brand Guidelines Version 1.0 27
Please Don’t!
Perhatikan dan ikuti guidelines untuk hasil yang terbaik.
X DON’T squeeze text inside of the icons
X DON’T place icons within other icons
X DON’T overlap icons
X DON’T add drop shadows
X DON’T rotate icons unless 90° or 45° as part of a group
CLICKHERE
2017 Brand Guidelines Ver. 1.028
Please Do...
Berikut beberapa contoh icon yang digunakan dengan baik.
V DO group icons together into compositions, but please keep to 90° or 45° rotation of icons.
V DO use them next to text or call-to-action. View
Slideshow
EventSchedule
2017Brand Guidelines Version 1.0 29
2017 Brand Guidelines Ver. 1.030
Design Matters
Jika Anda sudah membaca panduan ini, kami mengapresiasi Anda. Anda telah berbagi keyakinan dalam detail dan kualitas kami. Kami menerapkan prinsip-prinsip ini dengan waktu dan effort, namun cerita yang kami paparkan dalam semua PayTren communications akan lebih kuat untuk itu.
Jika Anda memiliki pertanyaan tambahan tentang identitas visual dan aplikasinya dalam desain, jangan ragu untuk menghubungi PayTren.
Terima kasih ☺
P. +62 22 7351 5100 (Office Hour)E. [email protected]
PayTren Official
@PaytrenOfficial
www.treni.co.idwww.paytren.co.id
paytren_official
PayTren Official
Layanan Pengaduan 24 Jam(Complaint Services 24 Hours) +62 811 2107 888
HEAD OFFICEPT. Veritra Sentosa InternasionalThe Suites Metro Blok E5 - E7Jln. Soekarno Hatta No. 693RT.006 / RW.06 Kelurahan Jatisari Kecamatan Buah Batu Bandung 40286
www.treni.co.id
www.paytren.co.id