Case Study : UI Website KMTNTF

Didi Ruhyadi
3 min readOct 13, 2019

Website merupakan hal yang sangat penting dalam perwajahan suatu komunitas atau organisasi. Tidak seperti sosial media (facebook, instagram, twitter, line, dll.) website lebih bersifat dinamis karena elemen dalam website dapat di desain sedemikian rupa sesuai kebutuhan dan tema yang diusung. Kelebihan lainnya adalah user dapat melihat konten pada website tanpa log-in atau mempunyai akun terterntu sehingga website dinilai lebih terbuka dalam publikasinya.

Dalam tulisan kali ini saya akan membahas desain UI (user-interface) atau tampilan muka pengguna pada website KMTNTF (Keluarga Mahasiswa Teknik Nuklir dan Teknik Fisika) yang bersifat naratif ketimbang teknis pembuatannya. Untuk implementasi desain UI menjadi live-website akan dibahas dikemudian waktu.

Pada periode ini kabinet KMTNTF mengusung tema “Senar Kolaborasi” yang mempunyai pengertian bahwa : Tiap senar mempunyai nada khasnya masing-masing. Apabila dimainkan secara bersamaan, maka akan tercipta harmoni melodi yang indah.

Logo Official Kabinet Senar Kolaborasi | Dok. INTEL

Pemilihan warna dan kesesuain tema website dengan logo atau media publikasi lainnya mempunyai nilai penting dalam pembuatan website. Hal ini dikarenakan agar terjadi keserasian antara website dengan bidang publikasi KM lainnya, misal pada publikasi LINE.

Publikasi Media LINE | Dok. INTEL

Kesan simple, ikon gambar ditengah, headline hijau tosca ditambah bayangan dibelakangnya merupakan ciri dari desain media publikasi LINE. Memakai ciri ini pada desain website sehingga terdapat keserasian antara berbagai media publikasi.

Home Page

Home page atau landing page merupakan tampilan website pertama yang akan user lihat ketika user membuka website. Pemilihan warna dan desain home page mengikuti desain logo dan publikasi LINE. Jenis font yang digunakan adalah Montserrat yang merupakan tipe sans-serif.

Logo kabinet diapit oleh dua logo : UGM dan KMTNTF, yang bermakna menaungi. Disebelah kirinya terdapat headline nama kabinet dan pengertian singkat dari nama tersebut. Dibawahnya terdapat kolom event yang akan diselenggarakan dalam waktu dekat, hal ini bertujuan agar user dapat mengetahui event terdekat KM.

Kolom News & Article berisi berita dan artikel terbaru yang di post di website. Dilanjut dengan Bidang & Biro yang berisi info bidang dan biro yang bernaung dibawah KM. Dan kolom terakhir berisi akun sosial media lain seperti : LINE, Instagram, dan email. Hal ini memungkinkan user dapat mem-follow dan mengetahui info lebih lanjut pada akun sosial media tersebut.

News Page

News page atau post page merupakan halaman website yang berisi post admin. Desain dari news page sangat simple dimana terdapat headline berita atau artikel dilanjut dengan tanggal rilis dilanjut dengan foto berita dan bagian isi berita pada bawahnya.

Pada bagian bawah isi berita terdapat kolom berita lainnya sehingga user dapat mengikuti berita lebih banyak tentang KM.

About Page

About Page berisi info tentang visi-misi, arti lambang dan susunan kabinet senar kolaborasi. About page dapat memberi user gambaran tentang ciri dan motif dari kabinet senar kolaborasi secara menyeluruh.

Design won’t save the world, but damn sure makes it look good

--

--