UNIVERSITAS GADJAH MADA
Paduan Website UGM 2.0
Disusun oleh
DaftarIsi
Penggunaan Logo UGM HEADER
3
Nama Instansi Logo UGM
4
Menu Utama Header
5
Menu Sekunder Header
6
Laman Utama Baris Pertama - Slider
7
Banner Utama
10
Tautan dan Banner
12
Variasi Background
13
Footer Nama Instansi
15
Menu Utama Footer
16
Menu Sekunder Footer
17
Konten Aturan Pengunaan
18
Kontak
19
Jenis Konten Post
20
Galeri
22
Event
24
Dokumen
26
Protected Post
27
Contoh Layout
28
Panduan Warna
32
Contoh Kombinasi Warna Daftar Ukuran Gambar
35 36
Logo Penggunaan
- Hanya boleh menggunakan Logo Outline - Tidak Boleh menggunakan Logo Kuning
3
Header
Nama Instansi
Nama Instansi ditulis lengkap , dipersiapkan dalam bahasa inggris dan bahasa indonesia
4
Header
Menu Utama 1
Merupakan Link yang berisi informasi utama Instasi tersebut Jika informasi tidak dapat disematkan pada menu utama, informasi tersebut dapat diletakkan pada : a. Banner Utama b. Banner Samping
2
Maksimal 5 atau 6 Link pada Menu utama
3
Menu Utama Header boleh bertingkat maksimal 3 tingkat
4
2 Menu paling kiri adalah : a. Beranda / Home b. Tentang Kami / About Us
4
3
5
Header
Menu Sekunder
1
Menu Sekunder Header tidak boleh bertingkat
2
Menu paling kanan adalah menu untuk multi bahasa
3
Urutan Menu yang harus ada : a. Tentang UGM - About UGM b. Portal Akademik - Academic Portal c. IT Center - IT Center d. Perpustakaan - Library e. Penelitian - Research f. Webmail - Webmail
6
Laman Utama
Baris Pertama (Slider)
1
Baris (Row) pertama konten untuk Slider
2
Slider dapat berupa salah satu dari berikut : a. Slider informasi berita terkini b. Slider foto saja tanpa text
3
Slider utama ini diharapkan dapat memberi visualisasi kegiatan instansi yang bersangkutan
4
Proporsi Foto yang digunakan adalah 3:2
5
Untuk keseragaman diharapkan tidak memberi konten selain slider pada baris pertama website
7
Variasi Slider Opsi a: Slider berupa informasi berita terkini
8
Opsi b : Slider foto saja tanpa text
9
Laman Utama
Banner Utama
1
Banner utama berfungsi untuk menampilkan informasi utama pada unit
2
Jumlah banner utama dalam 1 laman dapat berjumlah : 6,4 atau 3
Banner utama berjumlah 3 kolom dalam 1 laman
Banner utama berjumlah 4 kolom dalam 1 laman
10
Banner utama berjumlah 6 kolom dalam 1 laman
3
Banner utama diharapkan mengikuti format berikut agar seragam diantara website-website milik UGM : 1. Background biru dengan latar logo UGM 2. Icon warna kuning 3. text warna putih
Icon warna kuning
Background biru dengan latar logo UGM
Text warna putih
11
Laman Utama 1
Tautan & Banner Tautan dan Banner adalah suatu komponen web yang berfungsi untuk menghubungkan website / aplikasi eksternal yang berhubungan dengan kerja instansi
2
Posisi Tautan atau banner ada 2 pilihan : - sisi kanan website - atau di bagian paling bawah
3
Ukuran dan desain banner harus seragam agar tampilan lebih rapi
Banner di sidebar kanan
Banner di bagian bawah
12
Laman Utama
Variasi Background
Background dapat menggunakan variasi ini :
a. Menggunakan gambar / corak pola berulang (repeatable pattern)
b. Superimpose logo UGM
13
a. Warna
14
Footer
Nama Instansi
1
Nama Instansi ditulis lengkap , dipersiapkan dalam bahasa inggris dan bahasa indonesia.
2
Disertai informasi alamat lengkap instansi dan kontak email
3
Judul nama instansi ditulis dalam format bold
Judul nama instansi ditulis dalam format bold
15
Footer
Menu Utama Footer
1
Menu utama footer berisi konten yang sama dengan menu utama pada header
2
Jika diperlukan dapat berisi link informasi penting yang belum dimuat pada menu header utama
16
Footer Menu Sekunder Footer Berisi aturan penggunaan dan kontak
17
Konten
Aturan Penggunaan Isinya dapat dilihat di :
https://docs.google.com/document/d/1-nROhewAqhG9u4UWcECJ3IA4zgAhr5j GwcJGlOYZ6OU/edit?usp=sharing
18
Konten
Kontak
1
Berisi Alamat lengkap Instansi dan posisi pada google map
2
Pesan yang terkirim dari laman ini akan dikirim ke email yang sudah didaftarkan pada backend WordPress
19
Jenis Konten
1
Post
Jenis konten ini digunakan untuk konten berita , rilis, dan informasi kegiatan.
2
Jika memungkinkan diharapkan dapat menggunakan foto yang relevan.
POST LIST
POST LIST DENGAN FOTO
20
SINGLE POST
POST ARCHIVE
21
Jenis Konten
Galeri
Jenis konten berupa foto kegiatan pada instansi
GALERI LIST
22
GALERI SINGLE
GALERI ARCHIVE
23
Jenis Konten
Event
Jenis konten berupa event pada instansi
EVENT LIST
24
EVENT SINGLE
ARCHIVE EVENT
25
Jenis Konten
Dokumen
Jenis konten berupa dokumen.
26
Protected Post Halaman bisa diproteksi dengan password atau disebut “protected post” untuk melindungi konten sensitif.
27
Contoh Layout
28
Contoh Layout
29
Contoh Layout
30
Contoh Layout
31
Panduan Warna WARNA UTAMA PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#149FC0
#073C64
#1A2C43
#121F33
#FDCB2C
FAKULTAS KEDOKTERAN PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#1C8A00
#1B7304
#19520B
#0F3B04
#BED661
FAKULTAS EKONOMIKA DAN BISNIS PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#FFAA3E
#FF6F00
#B34502
#C44005
#FFF136
FAKULTAS KEDOKTERAN HEWAN PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#B539B5
#962496
#5D105D
#4B0A4B
#DA88DA
32
FAKULTAS KEHUTANAN PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#9E5E2D
#3C1C03
#2D1B0D
#251000
#9E6F4B
PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#EFE4A6
#DDCA6C
#A49430
#908120
#675A1B
PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#ABD0EF
#8BB9DF
#3E76A5
#306592
#FFE698
FAKULTAS ISIPOL
FAKULTAS PSIKOLOGI
FAKULTAS KEDOKTERAN GIGI PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#D2B452
#BA9B1D
#8B730F
#796309
#F3E9BA
33
FAKULTAS TEKNIK PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#3452BF
#041E7E
#031863
#011352
#8BD4F9
PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#C16262
#6E0000
#570303
#480000
#ED7676
FAKULTAS HUKUM
FAKULTAS PETERNAKAN PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#BC4F2F
#791B00
#4F1200
#42160B
#C7A693
PRIMARY COLOR
PRIMARY BACKGROUND
SECONDARY BACKGROUND
TERTIARY BACKGROUND
HIGHLIGHT COLOR
#2DB36E
#006632
#134D2F
#004221
#96CE56
FAKULTAS PERTANIAN
34
Contoh Kombinasi Warna Fakultas Kedokteran
35
Daftar Ukuran Gambar
& Proporsi Maksimal
1
Slider utama (ugm.ac.id )
1140 x 500 px
2
Foto di single post
975x 560px
36
3
Gallery Thumbnail Slider 148 x 85 px
Slider Galeri Foto 975 x 560 px
37
