Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Penggunaan Logo UGM 3
HEADER
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 35
Daftar Ukuran Gambar 36
IsiDaftar
HeaderNama Instansi
Nama Instansi ditulis lengkap , dipersiapkan dalam bahasa inggris dan bahasa indonesia
�
�
4
Menu UtamaHeader
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
Maksimal 5 atau 6 Link pada Menu utama
Menu Utama Header boleh bertingkat maksimal 3 tingkat
2 Menu paling kiri adalah :
a. Beranda / Home
b. Tentang Kami / About Us
3
4
1
2
3
4
5
Menu SekunderHeader
Menu Sekunder Header tidak boleh bertingkat
Menu paling kanan adalah menu untuk multi bahasa
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
1
2
3
6
Laman UtamaBaris Pertama (Slider)
Baris (Row) pertama konten untuk Slider
Slider dapat berupa salah satu dari berikut :
a. Slider informasi berita terkini
b. Slider foto saja tanpa text
Slider utama ini diharapkan dapat memberi visualisasi kegiatan
instansi yang bersangkutan
Proporsi Foto yang digunakan adalah 3:2
Untuk keseragaman diharapkan tidak memberi konten selain
slider pada baris pertama website
1
2
3
4
5
7
Laman UtamaBanner UtamaBanner utama berfungsi untuk menampilkan informasi utama pada unit
Jumlah banner utama dalam 1 laman dapat berjumlah : 6,4 atau 3
1
2
Banner utama berjumlah 3 kolom dalam 1 laman
Banner utama berjumlah 4 kolom dalam 1 laman
10
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
3
Background biru dengan latar logo UGM
Text warna putih
Icon warna kuning
Banner utama berjumlah 6 kolom dalam 1 laman
11
Laman UtamaTautan & Banner
Tautan dan Banner adalah suatu komponen web yang berfungsi untuk
menghubungkan website / aplikasi eksternal yang berhubungan dengan kerja
instansi
Posisi Tautan atau banner ada 2 pilihan :
- sisi kanan website
- atau di bagian paling bawah
Ukuran dan desain banner harus seragam agar tampilan lebih rapi
Banner di sidebar kanan
1
2
3
Banner di bagian bawah
12
Variasi BackgroundLaman Utama
Background dapat menggunakan variasi ini :
a. Menggunakan gambar / corak pola berulang (repeatable pattern)
b. Superimpose logo UGM
13
FooterNama Instansi
Nama Instansi ditulis lengkap , dipersiapkan dalam bahasa inggris
dan bahasa indonesia.
Disertai informasi alamat lengkap instansi dan kontak email
Judul nama instansi ditulis dalam format bold
1
2
3
Judul nama instansi ditulis dalam format bold
15
Menu Utama FooterFooter
Menu utama footer berisi konten yang sama dengan menu utama
pada header
Jika diperlukan dapat berisi link informasi penting yang belum
dimuat pada menu header utama
1
2
16
KontenAturan Penggunaan
Isinya dapat dilihat di :
https://docs.google.com/document/d/1-nROhewAqhG9u4UWcECJ3IA4zgAhr5j
GwcJGlOYZ6OU/edit?usp=sharing
18
KontakKonten
Berisi Alamat lengkap Instansi dan posisi pada google map
Pesan yang terkirim dari laman ini akan dikirim ke email yang
sudah didaftarkan pada backend WordPress
1
2
19
Jenis Konten
PostJenis konten ini digunakan untuk konten berita , rilis, dan informasi kegiatan.
Jika memungkinkan diharapkan dapat menggunakan foto yang relevan.
POST LIST POST LIST DENGAN FOTO
1
2
20
Protected PostHalaman bisa diproteksi dengan password atau disebut
“protected post” untuk melindungi konten sensitif.
27
WarnaPanduanPRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#073C64 #1A2C43 #121F33 #FDCB2C#149FC0
WARNA UTAMA
TERTIARY
BACKGROUND
#0F3B04
PRIMARY
COLOR
#1C8A00
PRIMARY
BACKGROUND
#1B7304
SECONDARY
BACKGROUND
#19520B
HIGHLIGHT
COLOR
#BED661
FAKULTAS KEDOKTERAN
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#C44005 #FFF136#FFAA3E #FF6F00 #B34502
FAKULTAS EKONOMIKA DAN BISNIS
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#962496 #5D105D#B539B5 #DA88DA#4B0A4B
FAKULTAS KEDOKTERAN HEWAN
32
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#3C1C03#9E5E2D #9E6F4B#2D1B0D #251000
FAKULTAS KEHUTANAN
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#8BB9DF #3E76A5#ABD0EF #306592 #FFE698
FAKULTAS PSIKOLOGI
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#DDCA6C#EFE4A6 #A49430 #908120 #675A1B
FAKULTAS ISIPOL
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#BA9B1D#D2B452 #8B730F #796309 #F3E9BA
FAKULTAS KEDOKTERAN GIGI
33
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#041E7E#3452BF #8BD4F9#031863 #011352
FAKULTAS TEKNIK
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#791B00#BC4F2F #C7A693#4F1200 #42160B
FAKULTAS PETERNAKAN
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#6E0000#C16262 #570303 #480000 #ED7676
FAKULTAS HUKUM
PRIMARY
COLOR
PRIMARY
BACKGROUND
SECONDARY
BACKGROUND
TERTIARY
BACKGROUND
HIGHLIGHT
COLOR
#006632#2DB36E #96CE56#134D2F #004221
FAKULTAS PERTANIAN
34
Daftar Ukuran Gambar & Proporsi Maksimal
Slider utama (ugm.ac.id )
1140 x 500 px
1
Foto di single post
975x 560px
2
36