Brand Guidelines for PayTren

Version 1.0

Brand Guidelines

January 2017

2017

00

Brand Guidelines Ikuti guideline ini untuk menciptakan bahan pemasaran komunikasi internal dan eksternal.

Brand Guidelines Ver. 1.0

Brand Guidelines Version 1.0

Table of Content

2017

01 02

00

Introduction

00

Brand Identity Design

01

New Face of PayTren

03

Logo Idea / Philosophy

04

Clear Space

06

Brand Colors

07

Monochromatic Logo

09

Sizes of Logo

10

Tagline on Logo

11

Logo placement

12

Misuses of logo

14

Logo for Apps

15

2017

00

03 04

Typography for PayTren

16

Use in Print

18

Use for Websites

19

Typesetting Guides

20

Web Styles

21

Visual Element Design

22

Graphic Element

23

Mood Photo for PayTren

25

Screenshots

26

Icons & Illustrations

27

Design Matters

30

Brand Guidelines Ver. 1.0

Brand Guidelines Version 1.0

2017

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.

Introduction

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 eksibilitas.

Background Identitas baru dari brand kami bertujuan untuk memperkenalkan PayTren sebagai produk yang memiliki banyak manfaat.

01

02

2017

Brand Guidelines Ver. 1.0

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

Brand Guidelines Version 1.0

2017

03

New Face of PayTren Logo kami adalah elemen yang paling menonjol dalam identitas kami, sebuah tanda universal yang menghubungkan semua komunikasi PayTren. Ini merupakan sebuah jaminan kualitas yang menyatukan perbedaan dalam produk dan jasa.

Brand Identity Design

Kami 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 (ashy graphic eects).

Logo kami dibuat tebal, sederhana, graphic statement.

Berikut berhubungan dengan touchpoint dan koneksi.

Logo kami terdiri dari dua elemen: Logogram dan logotype.

Dengan konsep yang sederhana, logo kami akan dipasang dengan baik. Halaman berikutnya merupakan penggunaan yang benar dalam penggunaan logo kami dengan baik.

Logogram

Logotype

2017

04

Brand Guidelines Ver. 1.0

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.

Orange

Dark-grey

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

Brand Guidelines Version 1.0

The Golden Ratio Untuk membuat proposi dan kualitas logo, kami menggunakan golden ratio.

The grid system Untuk memfasilitasi penggunaan graphic guide

2017

05

2017

06

Brand Guidelines Ver. 1.0

Clear Space

100%

“Everyone needs a little personal space�

50%

50% Clear Space

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.

Brand Guidelines Version 1.0

2017

Brand Colors

07

Coated Paper PANTONE 165 C R:241 G:102 B:57 #f16639

Orange merupakan warna primary dalam penggunaan identity. Pantone, CMYK, dan warna RGB akan diberikan sebagai opsi. Gunakan pilihan ini dan jangan dibuat ulang.

Shades of Orange

100%

Coated Paper PANTONE Black 70% R:241 G:102 B:57 #f16639

Shades of Grey

80%

Orange / PANTONE 165 C

60%

100%

White

80%

60%

PANTONE Black 70%

PayTren Style Guide Kami memilih “PayTren Orange” sebagai warna utama dari produk. Dan “PayTren Black 70%” sebagai warna netralnya untuk keseimbangan komposisi kontras.

2017

08

Brand Guidelines Ver. 1.0

Secondary Color Palette

Coated Paper PANTONE 285 C

Coated Paper PANTONE 305 C

Coated Paper PANTONE WARM RED C

Uncoated Paper PANTONE 285 U

Uncoated Paper PANTONE 305 U

Uncoated Paper PANTONE WARM RED U

R 35 G 31 B 32 #231f20

R 85 G 195 B 216 #55c3d8

R 239 G 68 B 61 #ef443d

Coated C 90 M 48 Y0 K0

Uncoated C 70 M 30 Y0 K0

Coated C 60 M0 Y7 K0

Uncoated C 60 M0 Y 10 K0

Coated C0 M 88 Y 80 K0

Uncoated C0 M 70 Y 66 K0

Coated Paper PANTONE 116 C

Coated Paper PANTONE 7479 C

Coated Paper PANTONE 382 C

Uncoated Paper PANTONE 115 U

Uncoated Paper PANTONE 7479 U

Uncoated Paper PANTONE 381 U

R 249 G 206 B 50 #f9ce32

R 94 G 187 B 114 #5ebb72

R 186 G 212 B 49 #bad431

Coated C0 M 12 Y 100 K0

Uncoated C0 M 12 Y 95 K0

Coated C 80 M0 Y 65 K0

Uncoated C 58 M0 Y 58 K0

Coated C 28 M0 Y 92 K0

Uncoated C 25 M0 Y 84 K0

Warna inti yang digunakan, merupakan pencerminan dari kepribadian kami, cerah, tebal dan colorful.

Di halaman ini, Anda telah melihat oranye dan abu-abu dalam logo.

Logo PayTren dapat muncul dalam satu dari enam warna-warna cerah.

Seperti yang bisa Anda lihat, warna kami yang gunakan cerah. Apabila menggunakan warna dalam cetak, penting untuk selalu menggunakan tinta Solid Pantone. Dengan cara ini, semua material kami 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.

Brand Guidelines Version 1.0

2017

Monochromatic Logo

Logo on orange

Anda dapat juga menggunakan logo dengan background dari primary palette.

Logo on grey

09

2017

10

Logo

Brand Guidelines Ver. 1.0

Sizes of Logo

“Good things come in small sizes.”

Minimum size 1.38” / 100px

Logogram

Minimum size 0.4” / 30px

Favicon - ICO file

16px

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.

Brand Guidelines Version 1.0

2017

Tagline on Logo

Tagline on right

Salah satu fungsi dari tagline adalah menyampaikan value tentang brand tersebut. Apabila tagline bersebelahan dengan logo, akan menyampaikan manfaat atau value tambahan.

11

teman setia bayar-bayar

Tagline on bottom

teman setia bayar-bayar

2017

12

Corner

Brand Guidelines Ver. 1.0

Logo Placement

“Everything in it’s right place�

Center

Kami ingin menghindari 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.

Corner

Preview position

Centering the logo looks generic and predictable

Much better

Much better

Brand Guidelines Version 1.0

2017

On Grayscale

50% Black logo on white background

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 degan rapi dalam bidang gambar untuk memungkinkan maksimum legibility dan visibilitas.

13

White logo on 50% black background

White logo on black background

Light-colored, uncluttered imagery

Dark-colored, uncluttered imagery

Do not use a color logo on a photographic image.

2017

14

Brand Guidelines Ver. 1.0

Logo Misuses www.paytren.co.id

DON’T create a logo lockup with text

DON’T change the proportions between the symbol and logotype

“Please don’t!”

DON’T rearrange the logo elements.

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

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

Brand Guidelines Version 1.0

Apps Icon

Android app icon

IOS app icon

2017

15

16

2017

Brand Guidelines Ver. 1.0

Typography for PayTren

Part 03

Brand Guidelines Version 1.0

Open Sans font yang kami gunakan. Kami menggunakannya dalam tiga fungsi yaitu; Bold, Regular, & Italic.

2017

Modern Simple Friendly Clear Elegant.

17

18

2017

Brand Guidelines Ver. 1.0

Open Sans Bold

Use in Print

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

Open Sans Bold digunakan untuk semua headlines dan judul.

Open Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

Open Sans Regular digunakan untuk semua standard body-copy.

Open Sans Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

Open Sans Italic digunakan untuk menggaris bawahi kata.

Brand Guidelines Version 1.0

2017

Use for Websites

Roboto Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

Roboto Open Sans tidak tersedia sebagai font web, kami menggunakan sebuah cadangan sebagai alternatif disebut Roboto.

Dengan Open Sans, kami menggunakan bold, regular dan italic untuk headlines body copy dan highlight kata-kata.

Roboto Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

Roboto Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)

19

20

2017

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

Brand Guidelines Ver. 1.0

Typesetting Guides TipograďŹ 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

Brand Guidelines Version 1.0

Web Styles For development, see the production ready frontend pattern called Headings

2017

Heading 1

Heading 2

Heading 3

Body text

21

Text Color #f16639 Background #ffffff Font Open Sans Bold Size 60px Weight Bold

Text Color #444444 Background #ffffff Font Open Sans Bold Size 40px Weight Bold

Text Color #444444 Background #ffffff Font Open Sans Bold Size 22px Weight Bold

Text Color #444444 Background #ffffff Font Open Sans Bold Size 20px Weight Regular

Text Color Background Color

Text Color Background Color

Text Color Background Color

Text Color Background Color

22

2017

Brand Guidelines Ver. 1.0

Visual Element Design

Part 04

Brand Guidelines Version 1.0

2017

23

Graphic Elements PayTren mempunyai basic element visual graphic yang diambil dari logo basic shape.

Element 1 for masking

Element 2 for footer

24

2017

Brand Guidelines Ver. 1.0

Graphic Element 1 Element ini digunakan untuk masking photo yang biasa dipakai untuk cover dan visual post

Graphic Element 2 Element ini digunakan sebagai footer, yang bisa digunakan untuk keperluan layouting dan design.

Brand Guidelines Version 1.0

Mood Photo for PayTren Konsep fotograďŹ 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.

2017

25

26

2017

Brand Guidelines Ver. 1.0

Screenshots PayTren adalah sebuah perusahaan yang mengembangkan aplikasi mobile. Gunakan tampilan PayTren browser yang keren untuk mengimplikasikan aplikasi kami bekerja di setiap browser.

Brand Guidelines Version 1.0

2017

Icons & Illustrations

PayTren Icons

PayTren Icons Icon-icon berikut digunakan untuk website kami, bukan hanya di aplikasinya saja. Icon aplikasinya akan dicover dengan Product Design Guidelines.

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 ďŹ tur 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

27

2017

28

Please Don’t!

X DON’T squeeze text inside of the icons CLICK HERE

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

Brand Guidelines Ver. 1.0

Perhatikan dan ikuti guidelines untuk hasil yang terbaik.

Brand Guidelines Version 1.0

2017

Please Do...

V DO group icons together into compositions, but please keep to 90° or 45° rotation of icons.

Berikut beberapa contoh icon yang digunakan dengan baik.

V DO use them next to text or call-to-action.

29

View Slideshow Event Schedule

30

2017

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 eort, 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 â˜ş

Brand Guidelines Ver. 1.0

Contact Parahyangan Business Park, The Suites Blok E5-E7 Jl. Soekarno Hatta No.693 Bandung P. +6222 7351 5100 (jam kerja) E. care@paytren.co.id

www.treni.co.id www.paytren.co.id