E-LEARN STMIK - Website Pengumpulan Tugas
Website ini digunakan untuk informasi memepermudah pengumpulan tugas tugas atau ujian dari mahasiswa yang
diberikan dosen atau tenaga laboran sehingga mudah dinilai dan didata.
Study Case
Studi kasus atau tahap perancangan website
Website E- LEARN STMIK
Tahun : 2020
Masalah
Seluruh sekolah ataupun universitas pasti memberikan tugas untuk siswa siswi atau mahasiswanya. Namun, masih banyak sekolah atau universitas belum memanfatkan teknologi yaitu membuat sistem aplikasi penguploadan file file tugas. Dalam pengumpulan file file tugas, sekolah atau universitas masih saja dilakukan secara manual dan dalam bentuk kertas. Tentu ini memiliki banyak sekali kekurangan karena jika data penilaian tenaga laboran hilang maka tenaga laboran akan bingung memberikan nilai kepada mahasiswa.
Pengguna atau Audiens
Seiring berkembangnya teknologi yang semakin maju, maka diperlukan sebuah sistem aplikasi client server. Client server merupakan sebuah paradgima dalam teknologi informasi yang merujuk pada cara mendistribusikan aplikasi kedalam dua belah pihak yaitu pihak client dan pihak server. Berdasarkan Teknik client server dirancanglah sebuah sistem aplikasi yang dapat berinterasi dengan pengguna dalam mengupload file file tugas yang diberikan tenaga laboran dengan tujuan mempermudah proses penilaian, pembuatan dan pendataan pengumpulan tugas. Maka sebab itu pengguna atau audiens dari sistem ini adalah Mahasiswa
Proses
Sebelum kami membuat website, kami melakukan perancangan user flow agar sistem dirancang menggunakan tahapan SDLC. User flow ini dibuat tidak terhindar dari analisis data tentunya agar pengguna atau mahasiswa nantinya benar benar mudah dalam menggunakan sistem.
User Flow
Dari user flow telah dirancang dan didapatkanlah 2 page :
1. Home Page ( Landing Page)
2. Contact Page
Wireframe
Setelah merancang user flow kami melakukan meeting sesama kami agar perancangan ini fix dan tidak ada kesalahan lagi. Kalaupun ada, revisi nya tidak jauh dari perancangan yang telah dibuat.
Home Page
Contact Page
Color Design
Sebelum ketahap pembuatan mockup kami melakukan riset warna yang akan digunakan. Saya juga melakukan perbandingan warna dengan website lain sehingga didapatkanlah warna seperti ini:
Icon dan ilustrasi Design
Kami juga melakuakan edit icon bulat dan didalamnya ada icon line dari situs icon88.com. Lalu kami juga memilih ilustrasi yang memiliki warna sesuai dengan color dari desain yang telah dirancang, didapatkanlah sebagai berikut :
Mockup
Setelah melmilih color untuk mockup kami melakukan pendapat dari seluruh tim dan wireframe dan color design yang telah kami rancang disetujui. 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
Contact 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.