UNIVERSITAS GADJAH MADA. Paduan Website UGM 2.0. Disusun oleh

Ukuran: px

Mulai penontonan dengan halaman:

Download "UNIVERSITAS GADJAH MADA. Paduan Website UGM 2.0. Disusun oleh"

Widya Budiono
6 tahun lalu
Tontonan:

1 UNIVERSITAS GADJAH MADA Paduan Website UGM 2.0 Disusun oleh

2 DaftarIsi 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

3 Logo Penggunaan - Hanya boleh menggunakan Logo Outline - Tidak Boleh menggunakan Logo Kuning 3

4 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.

5 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 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 4 3 5

Header Menu Sekunder 1 2 3 Menu Sekunder Header tidak boleh bertingkat Menu paling kanan adalah menu untuk multi bahasa Urutan Menu yang harus ada : a.

6 Header Menu Sekunder 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 6

Laman Utama Baris Pertama (Slider) 1 2 Baris (Row) pertama konten untuk Slider Slider dapat berupa salah satu dari berikut : a. Slider informasi berita terkini b.

7 Laman Utama Baris Pertama (Slider) 1 2 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 7

8 Variasi Slider Opsi a: Slider berupa informasi berita terkini 8

9 Opsi b : Slider foto saja tanpa text 9

10 Laman Utama Banner Utama 1 2 Banner utama berfungsi untuk menampilkan informasi utama pada unit 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.

11 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

atau banner ada 2 pilihan : - sisi kanan website - atau di bagian paling bawah 3 Ukuran dan

12 Laman Utama Tautan & Banner 1 2 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 3 Ukuran dan desain banner harus seragam agar tampilan lebih rapi Banner di sidebar kanan Banner di bagian bawah 12

13 Laman Utama Variasi Background Background dapat menggunakan variasi ini : a. Menggunakan gambar / corak pola berulang (repeatable pattern) b. Superimpose logo UGM 13

14 a. Warna 14

15 Footer Nama Instansi Nama Instansi ditulis lengkap, dipersiapkan dalam bahasa inggris dan bahasa indonesia. Disertai informasi alamat lengkap instansi dan kontak Judul nama instansi ditulis dalam format bold Judul nama instansi ditulis dalam format bold 15

16 Footer Menu Utama Footer 1 2 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 16

17 Footer Menu Sekunder Footer Berisi aturan penggunaan dan kontak 17

18 Konten Aturan Penggunaan Isinya dapat dilihat di : GwcJGlOYZ6OU/edit?usp=sharing 18

19 Konten Kontak 1 Berisi Alamat lengkap Instansi dan posisi pada google map 2 Pesan yang terkirim dari laman ini akan dikirim ke yang sudah didaftarkan pada backend WordPress 19

Jika memungkinkan diharapkan dapat menggunakan

20 Jenis Konten Post 1 2 Jenis konten ini digunakan untuk konten berita, rilis, dan informasi kegiatan. Jika memungkinkan diharapkan dapat menggunakan foto yang relevan. POST LIST POST LIST DENGAN FOTO 20

21 SINGLE POST POST ARCHIVE 21

22 Jenis Konten Galeri Jenis konten berupa foto kegiatan pada instansi GALERI LIST 22

23 GALERI SINGLE GALERI ARCHIVE 23

24 Jenis Konten Event Jenis konten berupa event pada instansi EVENT LIST 24

25 EVENT SINGLE ARCHIVE EVENT 25

26 Jenis Konten Dokumen Jenis konten berupa dokumen. 26

27 Protected Post Halaman bisa diproteksi dengan password atau disebut protected post untuk melindungi konten sensitif. 27

28 Contoh Layout 28

29 Contoh Layout 29

30 Contoh Layout 30

31 Contoh Layout 31

32 PanduanWarna WARNA UTAMA SECONDARY TERTIARY HIGHLIGHT #149FC0 #073C64 #1A2C43 #121F33 #FDCB2C FAKULTAS KEDOKTERAN SECONDARY TERTIARY HIGHLIGHT #1C8A00 #1B7304 #19520B #0F3B04 #BED661 FAKULTAS EKONOMIKA DAN BISNIS SECONDARY TERTIARY HIGHLIGHT #FFAA3E #FF6F00 #B34502 #C44005 #FFF136 FAKULTAS KEDOKTERAN HEWAN SECONDARY TERTIARY HIGHLIGHT #B539B5 # #5D105D #4B0A4B #DA88DA 32

33 FAKULTAS KEHUTANAN SECONDARY TERTIARY HIGHLIGHT #9E5E2D #3C1C03 #2D1B0D # #9E6F4B FAKULTAS ISIPOL SECONDARY TERTIARY HIGHLIGHT #EFE4A6 #DDCA6C #A49430 # #675A1B FAKULTAS PSIKOLOGI SECONDARY TERTIARY HIGHLIGHT #ABD0EF #8BB9DF #3E76A5 # #FFE698 FAKULTAS KEDOKTERAN GIGI SECONDARY TERTIARY HIGHLIGHT #D2B452 #BA9B1D #8B730F # #F3E9BA 33

34 FAKULTAS TEKNIK SECONDARY TERTIARY HIGHLIGHT #3452BF #041E7E # # #8BD4F9 FAKULTAS HUKUM SECONDARY TERTIARY HIGHLIGHT #C16262 #6E0000 # # #ED7676 FAKULTAS PETERNAKAN SECONDARY TERTIARY HIGHLIGHT #BC4F2F #791B00 #4F1200 #42160B #C7A693 FAKULTAS PERTANIAN SECONDARY TERTIARY HIGHLIGHT #2DB36E # #134D2F # #96CE56 34

35 Contoh Kombinasi Warna Fakultas Kedokteran 35

36 Daftar Ukuran Gambar & Proporsi Maksimal 1 Slider utama (ugm.ac.id ) 1140 x 500 px 2 Foto di single post 975x 560px 36

37 3 Gallery Thumbnail Slider 148 x 85 px Slider Galeri Foto 975 x 560 px 37

dokumen-dokumen yang mirip

Manual Book Mengisi Konten Website OPD Kota Bogor

Manual Book Mengisi Konten Website OPD Kota Bogor Kantor Komunikasi dan Informatika Kota Bogor 2016 1. Buka browser dengan alamat url http://kotabogor.go.id/index.php/login 2. Kemudian masukkan Username