1. Home
  2. Docs
  3. Kurikulum Flutter Mobile Apps
  4. Tugas Week 3
  5. Tugas mockup figma

Tugas mockup figma

Sebelum masuk membahas tugas hari ini, Anda dapat terlebih dahulu melihat video berikut, untuk dapat mengetahui sedikit cara menggunakan figma.

https://youtube.com/watch?v=2HQb_9CI7fs%3Ffeature%3Dyoutu

Sebagaimana pada materi 10, sebelum memulai membangun suatu aplikasi diperlukan mockup atau desain dari aplikasi yang akan dibangun. Pada tugas kali ini, Anda diminta untuk membuat mockup dari suatu aplikasi mobile yang menampilkan daftar skill dan project dari seorang developer/programmer. (Anda dapat mencari inspirasi di behance.net, dribbble.com, pinterest.com, dan berbagai situs lainnya)

Hal yang perlu diperhatikan:

Fokus tugas ini adalah pada Bagaimana membuat mockup yang user-friendly dan Bagaimana membagi komponen-komponen yang terdapat pada suatu desain UI aplikasi mobile, bukan pada aspek bagaimana membuat desain bertaraf internasional dan dapat dijual (tentu boleh membuat desain yang indah dan semenarik mungkin).

Catatan terkait aplikasi yang akan dibuat, antara lain:

  • Target user dari aplikasi ini adalah seorang developer/programmer, dari berbagai usia, yang ingin memperlihatkan keahliannya (show-off)
  • Keahlian yang ditampilkan berupa skill programming (mulai dari bahasa pemrograman, framework, library dan lainnya) dan real life project pribadinya.
  • Tujuan aplikasi ini adalah agar user dilirik oleh perusahaan, start up, atau client untuk diajak bergabung/bekerja sama dalam mengerjakan suatu proyek.

Mockup aplikasi ini terdiri dari (minimal) 3 halaman. Kriteria dari masing-masing halaman adalah sebagai berikut:

1. Halaman Login/Register

Sesuai namanya, halaman ini merupakan halaman yang akan digunakan untuk melakukan kegiatan login/masuk ke aplikasi atau register/mendaftar ke aplikasi. Minimal 1 halaman (Halaman Login saja atau Halaman Register saja). Beberapa komponen yang harus ada pada halaman ini adalah:

  • Nama Aplikasi (bebas, boleh menggunakan Sanber App)
  • Logo/Icon Aplikasi (bebas, boleh hanya berupa bentuk kotak/lingkaran dengan background, atau bentuk lain yang dapat merepresentasikan logo)
  • Kotak input nama user / email
  • Kotak input password
  • Kotak input konfirmasi password (hanya untuk halaman register)
  • Tombol untuk login/register

Anda diperbolehkan menambahkan fitur atau komponen lain sesuai keinginan Anda.

2. Halaman About/Tentang Saya

Halaman ini berisikan informasi identitas atau profil Anda sebagai developer atau pembuat aplikasi (bukan untuk user). Data atau informasi yang digunakan pada halaman ini boleh bersifat fiktif (seperti pada data akun media sosial dan portofolio). Komponen yang harus ada dalam halaman ini adalah:

  • Foto
  • Nama Lengkap
  • Akun media sosial (minimal terdapat akun facebook, twitter, dan instagram)
  • Link portofolio (misal Github, Gitlab, atau project lain yang telah dikerjakan)

Anda boleh menambahkan fitur atau komponen lain yang Anda inginkan.

3. Halaman Daftar Skill Programming

Halaman ini berisi daftar skill pemrograman dari user, seperti bahasa pemrograman, framework / library, atau teknologi yang sudah dikuasai. Halaman ini akan menjadi halaman beranda/home dari aplikasi. Komponen yang harus ada dari halaman ini adalah:

  • Nama user
  • Daftar skill, yang dapat dibagi menjadi:
    • Bahasa Pemrograman (misal JavaScript, yang dibagi menjadi 3 tingkatan yaitu Basic, Intermediate, dan Advance)
    • Framework/Library (misal React Native, yang dibagi menjadi 3 tingkatan yaitu Basic, Intermediate, dan Advance)
    • Teknologi (misal Git, Github, Gitlab, Android Studio, dan tools lainnya yang umum digunakan oleh seorang developer)
  • Pada setiap skill di dalam daftar, memiliki informasi yang terdiri dari:
    • Nama skill dan tingkatannya (misal Basic JavaScript, Advance Java, Basic React Native, Flutter dll) .
    • Kategori (misal, Bahasa Pemrograman, Framework/Library, Technology)
    • Foto/Logo skill (gambar yang berhubungan dengan skill terkait)
    • Tingkat penguasaan skill (bisa ditunjukkan dalam persentase, mulai 0%-100%)

Anda boleh menambahkan fitur atau komponen lain yang Anda inginkan.

Jika sudah selesai mengerjakan, silahkan mengirimkan link share file figma Anda ke sanbercode.com. Link share tersebut dapat ditemukan pada bagian kanan atas, dengan menekan tombol “Share” dan klik pada bagian “copy link”. Pastikan link dapat diakses oleh semua yang memiliki link (set “Anyone with link” dan “can view”).

Apabila butuh inspirasi silahkan lihat halaman berikut ini :

Example mackup