Perancangan dan Tutorial Desain UI Aplikasi Tracer Study Menggunakan FIGMA (Dekstop)

Perancangan dan Tutorial Desain UI Aplikasi Tracer Study Menggunakan FIGMA (Dekstop)

Sri Indah Maharaningsih   Agustus 28, 2021   Comment  

Berikut Perancangan dan Tutorial Desain UI Tracer Study Menggunakan Figma (Dekstop)  :

1. Download aplikasi figma terlebih dahulu atau bisa juga kunjungi website        berikut  https://www.figma.com/file/BXJSOT2AKO5XkUbZnUHaXt/TracerSTudy?node-id=0%3A1

2. Buka aplikasi figma, kemudian buat file baru dengan klik tombol + di sebelah kanan atas

3. Membuat Frame Website

Kemudian membuat frame terlebih dahulu, karena kita akan membuat desain website, maka  kamu bisa klik tombol frame di pojok kiri atas seperti gambar berikut.

 

   selanjut nya di sebelah kanan anda bisa pilih jenis frame yang ingin anda gunakan, karena saya ingin membuat dekstop, maka saya memilih frame dekstop.

4. Ganti Nama File

Anda dapat ganti nama file sesuai desain yang anda buat, tampilan seperti berikut

 

5. Pilih Ukuran Dekstop

Pilih ukuran dekstop, bisa juga menyesuaikan dengan laptop yang anda gunakan.

6. Membuat Tampilan Login

Disini kita sudah mulai mendesain UI aplikasi yang kita buat yaitu tracer study, langkah pertama kita membuat tampilan login terlebih dahulu

Pertama, kita mebuat header dan menu-menu yang akan di tampilkan di login, anda dapat klik button yang berada di kanan atas dan pilih menu-menu sesuai yang di butuhkan di aplikasi tracer study, seperti gambar berikut.

7. Membuat Tampilan Form Pertanyaan Alumni

Di tampilan ini alumni akan mengisi data dan menjawab pertanyaan yang sudah disediakan, guna dapat mengetahui profil alumni. Berikut tampilan nya:

8. Membuat dashboard

Di tampilan dashboard ini, admin atau petugas dapat melihat hasil pertanyaan dari alumni dan dapat mengupdate pertnyaan alumni. Berikut tampilan dashboard aplikasi tracer study :

8. Membuat Isi Submenu Dashboard

Berikut gambar isi submenu pada dashboard tracer study :

gambar 8.1. diatas adalah isi submenu dari hasil pertanyaan

                     

                   

Gambar 8.2. adalah gambar dari submenu pertanyaan

                 Gambar 8.3. adalah gambar dari submenu akun login alumni

 

Gambar 8.4. adalah gambar dari submenu akun login admin

Demikian tutorial dan hasil perancangan dari saya, semoga bermanfaat bagi teman-teman. Terima kasih...

Smart City

Smart City

Sri Indah Maharaningsih   Juni 04, 2021   Comment  

 Smart city merupakan wilayah kota yang telah mengintegrasikan teknologi informasi dan komunikasi dalam tata kelola sehari-hari, dengan tujuan untuk mempertinggi efisiensi, memperbaiki pelayanan publik, dan meningkatkan kesejahteraan warga.

Implementasi IoT dalam mewujudkan smart city bisa beraneka ragam, dibatasi hanya oleh imajinasi dan kemampuan dari para pengembangnya. Hilman menyebutkan lima contoh penerapan IoT yang lazim ditemui dalam konsep smart city akhir-akhir ini:

1. Smart lighting. Tak hanya bisa diterapkan pada lampu penerangan jalan, namun juga untuk lampu lalu lintas. “Dengan smart lighting, bisa dipantau mana lampu yang sedang rusak. 

2. Smart parking. Solusi ini bisa digunakan warga untuk mempermudah mencari tempat parkir. Pengguna bisa memesan lebih dulu tempat parkir sebelum tiba di lokasi. 

3. Waste management. Volume sampah di suatu tempat penampungan bisa dipantau dari jarak jauh.

4. Connected manhole. Solusi ini berguna untuk memantau temperatur gorong-gorong yang berada di bawah tanah.

5. Smart electricity. Penyedia layanan listrik bisa mengetahui langsung data pemakaian listrik pengguna tanpa harus mengirim petugas untuk memeriksa di tempat.