Login dengan Pedoman Branding Google

Dokumen ini memberikan panduan tentang cara menampilkan tombol Login dengan Google di situs atau aplikasi Anda. Situs atau aplikasi Anda harus mengikuti panduan ini untuk menyelesaikan proses verifikasi aplikasi.

Google Identity Services SDK kami merender tombol Login dengan Google yang selalu mematuhi pedoman branding Google terbaru. Cara tersebut direkomendasikan untuk menampilkan tombol Login dengan Google di situs atau aplikasi Anda. Jika tidak dapat menggunakan opsi tombol yang dirender Google, Anda dapat merender elemen tombol HTML, mendownload aset branding kami yang telah disetujui, atau memilih membuat tombol Login dengan Google kustom.

Elemen Tombol HTML Render

Kami menyediakan konfigurator HTML yang memungkinkan Anda menyesuaikan tampilan tombol Login dengan Google. Selanjutnya, Anda dapat mendownload cuplikan HTML dan CSS yang akan merender tombol di situs Anda.

Buat Elemen Tombol HTML

  
  

Download Ikon Merek yang Telah Disetujui Sebelumnya

Selain menggunakan tombol gambar kustom, Anda dapat mendownload tombol Login dengan Google yang telah disetujui dan disediakan dalam format PNG dan SVG untuk semua platform.

Tombol gambar yang disediakan tersedia dalam mode standar dan ikon serta menyertakan opsi gaya di bawah ini:

  • Tema : Terang, Netral, Gelap
  • Bentuk : Rectangular, Pil
Berikut ini dua contohnya:
Tema Tombol Deskripsi
Ringan Contoh Login dengan tombol Google persegi panjang standar dengan tema terang Login dengan tombol Google persegi panjang standar dengan tema terang
Gelap Contoh Login dengan tombol Google berbentuk pil tema gelap standar Tombol login dengan Google bentuk pil tema gelap standar
Download Ikon Brand yang Telah Disetujui Sebelumnya

Mode Tombol yang Didukung

Ringan

tombol Login dengan Google berbentuk bulat bertema terang

tombol Login dengan Google berbentuk persegi terang

pil bertema terang berbentuk tombol Login dengan Google

tombol Login dengan Google berbentuk persegi panjang bertema terang

Gelap

Tombol Login dengan Google berbentuk bulat bertema gelap

tombol Login dengan Google berbentuk persegi gelap

pil bertema gelap berbentuk tombol Login dengan Google

tombol Login dengan Google berbentuk persegi panjang bertema gelap

Netral

Login dengan tombol Google berbentuk bulat bertema netral

Tombol Login dengan Google berbentuk persegi netral

pil bertema netral berbentuk tombol Login dengan Google

Login dengan tombol Google berbentuk persegi panjang bertema netral

Membuat Tombol Login dengan Google kustom

Penggunaan Google Identity Services SDK kami atau salah satu opsi lain yang dibahas di bagian sebelumnya sangat direkomendasikan karena akan memungkinkan pengguna Google mengidentifikasi merek Google dengan lebih mudah. Semakin mudah pengguna mengidentifikasi tombol tindakan, semakin besar kemungkinan mereka untuk berinteraksi dengannya.

Namun, jika Anda perlu menyesuaikan tombol agar cocok dengan desain aplikasi, ikuti panduan berikut.

Ukuran

Anda dapat menskalakan tombol sesuai kebutuhan untuk berbagai perangkat dan ukuran layar, tetapi Anda harus mempertahankan rasio aspek agar logo Google tidak direntangkan.

Teks

Untuk mendorong pengguna mengklik tombol tersebut, sebaiknya gunakan teks pesan ajakan (CTA) "Login dengan Google", "Daftar dengan Google", atau "Lanjutkan dengan Google". Harus jelas bagi pengguna bahwa mereka login ke aplikasi Anda atau mendaftar ke aplikasi Anda dengan kredensial Google mereka, bukan mendaftar atau registrasi untuk Akun Google di aplikasi Anda.

Warna

Status default tombol ditampilkan di bawah ini. Tombol tersebut harus selalu menyertakan warna standar untuk "G" Google.

Tema Contoh
Ringan pil bertema terang berbentuk tombol Login dengan Google Isi: #FFFFFF
Goresan: #747775 | 1px | di dalam
Font: #1F1F1F | Roboto Medium | 14/20
Gelap pil bertema gelap berbentuk tombol Login dengan Google Isi: #131314
Goresan: #8E918F | 1px | di dalam
Font: #E3E3E3 | Roboto Medium | 14/20
Netral pil bertema netral berbentuk tombol Login dengan Google Isi: #F2F2F2
Goresan: Tanpa goresan
Font: #1F1F1F | Roboto Medium | 14/20

Font

Font tombolnya adalah Roboto Medium, sebuah font TrueType. Untuk menginstal, download font Roboto terlebih dahulu, dan ekstrak paket download. Di Mac, cukup klik dua kali Roboto-Medium.ttf, lalu klik "Install Font". Di Windows, tarik file ke folder "My Computer" > "Windows" > "Fonts".

Padding

Android Padding kiri 12 piksel sebelum logo Google, padding kanan 10 piksel setelah logo Google, dan padding kanan 12 piksel setelah teks Login dengan Google
iOS Padding kiri 16 piksel sebelum logo Google, padding kanan 12 piksel setelah logo Google, dan padding kanan 16 piksel setelah teks Login dengan Google
Web (seluler + desktop) Padding kiri 12 piksel sebelum logo Google, padding kanan 10 piksel setelah logo Google, dan padding kanan 12 piksel setelah teks Login dengan Google
Referensi Referensi padding tombol Login dengan Google

Logo Google di tombol "Login dengan Google"

Apa pun teksnya, Anda tidak dapat mengubah ukuran atau warna logo "G" Google. Versi ini harus versi warna standar dan muncul di latar belakang putih. Jika Anda perlu membuat logo Google ukuran kustom sendiri, mulailah dengan ukuran logo apa pun yang disertakan dalam paket download.

Ikon Google G

Desain tombol salah

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Anjuran

Gunakan panduan desain Google Material 3 untuk batas tombol dan skema warna.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Larangan

Gunakan ikon atau logo Google saja tanpa batas tombol dan tanpa teks untuk menunjukkan tindakan pengguna.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Anjuran

Gunakan warna merek Google untuk ikon Google pada mode gelap, terang, dan netral.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Larangan

Gunakan versi monokrom Google "G" untuk tombol tersebut.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Anjuran

Pilih tombol dalam mode warna yang tepat untuk aksesibilitas dan keterlihatan yang sama.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Larangan

Tempatkan ikon "G" Google warna standar pada latar belakang berwarna selain terang, gelap, atau netral.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Anjuran

Tetap gunakan Google "G" dengan padding dan ukuran tetap.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Larangan

Buat ikon Anda sendiri untuk tombol tersebut.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Anjuran

Gunakan "G" Google saja untuk tombol tindakan jika diperlukan.

contoh gambar hal-hal yang boleh dan tidak boleh dilakukan
Larangan

Gunakan istilah "Google" saja di tombol untuk mewakili tindakan Login dengan Google.

Praktik Terbaik Login dengan Branding Google

Opsi login dengan Google dan login pihak ketiga lainnya

Tombol Login dengan Google harus ditampilkan setidaknya sama jelasnya dengan opsi login pihak ketiga lainnya. Misalnya, tombol harus kurang lebih berukuran sama dan memiliki bobot visual yang sama.

Panduan Lainnya

Jika Anda meminta cakupan tambahan, lakukan dengan otorisasi inkremental (Android, iOS, web), yang hanya meminta pengguna untuk memberikan otorisasi saat pengguna mulai berinteraksi dengan fitur yang memerlukan akses API.

Jika Anda meminta cakupan YouTube, gunakan tombol YouTube.

Jika Anda menggunakan layanan game Google Play, lihat juga pedoman branding layanan game Google Play.

Dilarang menggunakan merek Google dengan cara-cara yang tidak tercakup dalam dokumen ini tanpa persetujuan tertulis sebelumnya dari Google (lihat Pedoman Penggunaan Fitur Merek Google oleh Pihak Ketiga untuk informasi lebih lanjut).