SMAN 1 Benai - Website Sekolah
Website memberikan informasi informasi tentang sekolah sehingga dapat diakses
semua orang. Sehingga sekolah nampak memiliki fasilitas bagus dan prestasi yang bagus
Study Case
Studi kasus atau tahap perancangan website
Client : SMAN 1 Benai
Tahun : 2020
SMA Negeri 1 benai adalah sekolah menengah atas yang berada di kecamatan benai. SMA Negeri 1 benai ini berjarak lebih kurang 13 km dari Ibukota Kabupaten dan 175 km dari ibukota Propinsi Riau Pekanbaru, memiliki sarana dan prasarana yang sudah bagus sehingga telah memilki akreditasi A.
Masalah
Dikarenakan dunia teknologi yang telah maju, tetapi SMA Negeri 1 benai belum memiliki website. Padahal website sangat berguna untuk memberikan informasi informasi dan kegiatan tentang sekolah sehingga bisa diakses siapa saja.
Pengguna atau audiens
Setelah website ini selesai maka nantinya website ini berguna untuk memberikan informasi kepada calon siswa dan calon orang tua siswa bahkan yang sudah menjadi siswa siswi sekolah bahwa SMA Negeri 1 benai memiliki kegiatan kegiatan yang bagus dan memiliki sarana dan prasarana yang bagus sehingga orang tua calon siswa akan mendaftarkan anaknya ke SMA Negeri 1 Benai.
Proses
Sebelum kami membuat website, kami melakukan pertemuan awal dengan kepala sekolah untuk mengumpulkan persyaratan dan content apa saja yang akan ditampilkan seperti visi dan misi, berita sekolah, nama nama guru, contact dan sarana prasarana sekolah.
Kemudian setelah melakukan pertemuan tersebut, desainer kami dapat membuat user flow yang berguna untuk aluran pengguna dalam menggunakan sistem nantinya :
User Flow
Dari User Flow yang telah dirancang didapatkanlah beberapa 4 page yang memiliki tampilan yang berbeda yaitu :
1. Home Page
2. Profil dan kabijakan privasi Sekolah Page
3. Postingan / Kegiatan Sekolah Page
4. Tenaga Pendidik Page
Wireframe
Setelah user flow disetujui, kami melanjutkan ke proses wireframe. Dalam wireframe ini, kami menggunakan konten aktual dari mereka dan juga tata letak yang kami usulkan untuk menyajikan konten, sehingga mereka tahu bagaimana tampilan halaman. Kami menemukan proses wireframe ini sangat penting sehingga kami dan klien dapat fokus pada konten terlebih dahulu. Desainer kami merancang wireframe untuk semua halaman.
Home Page
Postingan Page
Profil dan kebijakan Page
Tenaga Pendidik Page
Color Design
Sebelum ketahap pembuatan mockup kami melakukan riset warna yang akan digunakan. Saya juga melakukan perbandingan warna dengan website sekolah lain sehingga didapatkanlah warna seperti ini:
Mockup
Setelah melmilih color untuk mockup kami meminta feedback client dan client pun setuju dengan wireframe dan color design yang telah kami rancang. Setelah beberapa umpan balik pada wireframe dalam file figma dan persetujuan mereka, kami melanjutkan ke fase mockup. Kami pun melakukan pengisian warna, gambar dan meyempurnakan tata letak tanpa melupakan arti konsep desain.
Home Page
Postingan Page
Profil Page
Kebijakan Page
Tenaga Pendidik Page
Dan didapatkanlah hasil mockup seperti diatas. Dari hasil tersebut client tidak ada melakukan revisi hanya gambar gambar saja yang harus diubah. Itupun mereka sudah menyediakan gambar untuk digunakan pada website nantinya.