Aplikasi Android Capstone

0 %

Course content

Bacaan: Latihan: Menerapkan dasar-dasar desain di Figma

Click on the "Edit" button in the top corner of the screen to edit your slide content.

About
Comments (0)

Gambaran umum

Desain visual aplikasi Anda harus mengikuti panduan branding Little Lemon. Selanjutnya, gunakan panduan gaya merek Little Lemon yang menentukan setiap aspek tampilan dan nuansa merek.

Ini termasuk jenis huruf, warna, bagaimana gambar dan foto harus digunakan, serta perangkat UI. Kit UI adalah sekumpulan file yang berisi komponen UI penting seperti ukuran font, ikon, dan dokumentasi. Anda mungkin ingin melihat kembali materi pelajaran berikut ini dari kursus Prinsip-prinsip UX dan UI sebelum memulai atau merujuknya saat Anda melanjutkan:

Setelah menyelesaikan latihan ini, Anda akan memiliki semua keterampilan untuk membuat mock-up dengan tingkat ketelitian tinggi dari aplikasi Anda berdasarkan wireframe yang Anda kembangkan. Untuk tujuan ini, beberapa gambar, font, dan panduan gaya dalam format PDF disediakan di bawah ini.

little lemon assets

Skenario

Pemilik restoran Little Lemon telah menyetujui gambar rangka untuk aplikasi mereka dan ingin Anda mengubahnya menjadi desain dengan ketelitian tinggi atau desain yang sangat mirip dengan produk akhir menggunakan panduan gaya merek mereka.

Petunjuk

Langkah 1: Tinjau panduan gaya merek

Periksa panduan gaya yang disediakan oleh pemilik Little Lemon. Ini memberikan titik awal untuk mulai bekerja.

Unduh file .fig berikut ini dari tautan di bawah ini dan impor ke dalam Figma. File ini berisi gambar rangka yang akan Anda gunakan sebagai dasar untuk latihan ini.

wireframe

Tips: Jika Anda tidak yakin bagaimana cara mengimpor file ini, silakan lihat Cara menyimpan dan mengimpor file Figma yang ada di kursus Prinsip-prinsip UX dan UI .

Sekarang setelah Anda meninjau panduan gaya merek, mari kita mulai dengan membuat gaya sesuai panduan gaya. Gaya membantu Anda menyederhanakan alur kerja Anda, menjaga teks dan warna tetap konsisten, serta menghemat waktu Anda.

Langkah 2: Buat gaya warna sesuai panduan gaya Merek

Menggunakan warna merek Little Lemon:

Buat bentuk baru di file Figma Anda dan buka Isi.Isi layer dengan # 495E57.
Klik ikonempat titik untuk memicu modal Gaya Warna.
Klik ikon+ di sudut kanan modal Color Styles.
Beri nama gaya yang Anda inginkan, dalam hal ini, Primer 1, dan klik tombolBuat Gaya.
Ulangi proses ini untuk warna lain dalam panduan gaya.

Langkah 3: Buat gaya teks sesuai panduan gaya merek

Menggunakan gaya teks merek Little Lemon:

Buat gaya teks baru dengan membuat layer teks baru dan menambahkan beberapa pengaturan. Sebagai contoh:
- Keluarga font: Teks Markazi
- Ukuran huruf: 64
- Berat font: Sedang
Klik ikon empat titik di bagian Teks untuk memicu modal teks.
Klik ikon + di sudut kanan modal Gaya Teks.
Beri nama gaya teks ini dengan nama Tampilandan klik tombolBuat Gaya.
Ulangi proses ini untuk teks lain dalam panduan gaya dengan menambahkan gaya navbar berikut: Karla 20 tebal, huruf besar.

Langkah 4: Tambahkan konten ke placeholder pada gambar rangka

Bilah navigasi atau Header harus menyertakan logo dan ikon profil. Di bagian ini:

Pilih persegi panjang logo dan ubah isian dari solid menjadi gambar.
Pilih gambar logo dari folder aset Anda dan atur agar sesuai.
Ulangi untuk profil pengguna.
Masukkan gambar restoran dari folder aset Anda dan atur isiannya. Berikan sudut yang membulat dengan mengatur radius ke 16.

Isi bagian Pahlawan adalah latar belakang, judul, subjudul, konten deskripsi, gambar restoran, dan bilah pencarian. Di bagian ini:

Pilih persegi panjang latar belakang dan ubah isian menjadi Primer 1 pada gaya warna.
Ubah teks judul, "Little Lemon", menjadi Display dan warnanya menjadi Primer 2.
Ubah teks subpos, "Chicago", ke Subpos dan warnanya menjadi putih.
Tambahkan konten berikut ini: Kami adalah restoran Mediterania milik keluarga, yang berfokus pada resep tradisional yang disajikan dengan sentuhan modern. (Ini disediakan oleh pemilik Little Lemon)
Ubah jenis huruf menjadi Teks Utama.
Masukkan gambar restoran dari folder aset Anda dan atur agar terisi. Berikan sudut yang membulat dengan mengatur radius ke 16.

Untuk kategori Menu:

Buat tombol tata letak otomatis dan duplikat sebanyak 3 kali.
Tambahkan teks Makanan Pembuka, Makanan Utama, Makanan Penutup, dan Makanan Pendamping pada tombol.

Untuk bagian Item menu:

Buat judul menu makanan, deskripsi makanan, harga, dan foto.

Tip: Buatlah sebuah komponen yang dapat digunakan kembali untuk item menu lainnya.

Kesimpulan

Bagus sekali! Anda telah menerapkan beberapa dasar-dasar desain, menambahkan konten, dan menata gambar rangka untuk membuat mock-up layar beranda dengan ketepatan tinggi. Hal ini membawa aplikasi Anda selangkah lebih dekat untuk memenuhi kebutuhan restoran Little Lemon dan pelanggannya.