Paduan Website UGM 2

Paduan Website UGM 2.0

Disusun oleh

UNIVERSITAS GADJAH MADA

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

LogoPenggunaan

- Hanya boleh menggunakan Logo Outline

- Tidak Boleh menggunakan Logo Kuning

� � �

3

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

Variasi SliderOpsi a: Slider berupa informasi berita terkini

8

Opsi b : Slider foto saja tanpa text

9

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

a. Warna

14

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

Menu Sekunder FooterFooter

Berisi aturan penggunaan dan kontak

17

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

SINGLE POST

POST ARCHIVE

21

Jenis konten berupa foto kegiatan pada instansi

Jenis Konten Galeri

GALERI LIST

22

GALERI SINGLE

GALERI ARCHIVE

23

Jenis konten berupa event pada instansi

Jenis Konten Event

EVENT LIST

24

EVENT SINGLE

ARCHIVE EVENT

25

Jenis konten berupa dokumen.

Jenis Konten Dokumen

26

Protected PostHalaman 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

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

Contoh Kombinasi WarnaFakultas Kedokteran

35

Daftar Ukuran Gambar & Proporsi Maksimal

Slider utama (ugm.ac.id )

1140 x 500 px

1

Foto di single post

975x 560px

2

36

Gallery

Slider Galeri Foto975 x 560 px

Thumbnail Slider148 x 85 px

3

37