Semester 3 : Desain Antarmuka Mobile

bySamuel -
0

  Brief Perkuliahan

Pada pertemuan kali ini kita akan belajar mengenai apa itu desain antarmuka dan bagaimana cara membuat antarmuka yang baik sesuai dengan guideline yg ada.


Free book for You

Understanding layout

Layout is the visual arrangement of elements. It directs attention to the most important information on the screen and makes it easy for users to take action. 
Product layouts must adapt to fit different screen sizes and form factors including mobile, tablet, foldable, and large-screen devices. When creating a layout, consider how the spacing and the parts of layout work together. Material layout guidelines apply to products built for Android and the web.

Takeaways


  • Column: one or more vertical blocks of content within a pane
  • Fold: on foldable devices, a flexible area of the screen or, on dual-screen devices, a hinge that separates two displays
  • Margin: the space between the edge of the screen and any elements inside of it
  • Multi-window mode: enables multiple apps to share the same screen simultaneously
  • Pane: a layout container that houses other components and elements within a single app. A pane can be: fixed, flexible, floating, or semi permanent
  • Spacer: the space between two panes
  • Window size class: opinionated breakpoint, the window size at which a layout needs to change to match available space, device conventions, and ergonomics

Pertemuan 2 : Styles dan Elevation 

Materi Pertemuan 2 - Styles


Website: m3.material.io

Styles

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.  
Downlaoad Materi : Styles (Lihat)

Materi Pertemuan 2 - Elevation



Elevation

Elevation is the relative distance between two surfaces along the z-axis    
Materi Ekevation  : Lihat


 Materi Pertemuan 3 : Icon dan Motion

Icons

Icons can be used to represent common actions. Material Symbols are a set of variable icon fonts created at seven weights across three different styles. 

Takeaways


  • Icons are small graphics used to symbolize common actions, files, devices, and directories
  • Material Symbols are variable icon fonts, a new font format containing multiple stylistic variations
  • Stylistic variations that can be dynamically customized include: weight, fill, optical size, and grade
  • Symbols are provided as a set of static icons generated from those variable icon fonts
  • They are available as SVGs, gstatic, and icon fonts, accessed via the Material Symbols Figma plugin or on Google Fonts

Materi Icon : Icon (Lihat

Motion

Use motion to make a UI expressive and easy to use  

Takeaways


  • Easing is meant to be expressive; use Emphasized easing as the default
  • Motion tokens for easing and duration have been introduced to help with consistent motion implementation
  • Since transitions are the most common type of motion and are closely tied to usability, their design and implementation should be a top priority in your product
  • Consider implementing a reduced motion setting to accommodate accessibility needs.
Materi Pertemuan 4 : Shape dan Typhography
Shape 

Shape

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular 

Takeaways


  • Circular or pill shaped components use the fully rounded corner style rather than a fixed mapping to ½ of the dp value of the component. This ensures the shape remains circular even if the component scales. 

  • The default shape family is rounded
  • By default, shape styles are applied symmetrically on all corners, but asymmetric styles can be defined for a container’s corners at top, bottom, start, or end
Materi Shape : Shape (Lihat)

Typography
Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.  

Takeaways


  • Variable fonts are a new technology offering more typographic control  
  • There are five key type styles: Display, headline, title, body, and label
  • Design tokens help scale typography decisions across devices, including font, line height, size, tracking, and weight

Materi Pertemuan 5 : Action, Communication, containment dan Navigation, Selection, text Input




 

Actions

Action components help people achieve an aim.  

 

Communication

Communication components provide helpful information.  


Containment

Containment components hold information and actions – including other components like buttons, menus, or chips.  


Navigation, Selection, text Input


Navigation

Navigation components help people move through the UI.  

Selection

Selection components let people specify choices.  

Text inputs

Text input components let people enter and edit text.  

Materi Pertemuan 6-8 : Kosong (latihan sendiri dan UTS)

Materi Pertemuan 9 : Basic Figma



Figma Panel

Dalam Figma, panel adalah bagian dari antarmuka pengguna yang menyediakan berbagai fungsi dan alat untuk membantu Anda mengelola elemen desain, properti, dan alat lainnya. Ada beberapa panel yang dapat Anda temui dalam Figma, dan setiap panel memiliki fungsinya masing-masing.  

Takeaways


  • Layers (Lapisan): Panel Layers berfungsi untuk mengelola semua elemen desain dalam proyek Anda. Anda dapat melihat struktur hierarki dari elemen yang ada, seperti grup, gambar, teks, dan bentuk. Panel ini memungkinkan Anda untuk mengatur, menyembunyikan, menggabungkan, atau menggandakan lapisan dengan mudah.
  • Assets (Aset): Panel Assets memuat komponen, gaya, dan warna yang digunakan di seluruh desain Anda. Di panel ini, Anda dapat membuat dan mengatur komponen berbagi (shared component) yang memudahkan Anda dalam memperbarui elemen desain secara konsisten di seluruh proyek.
  • Design (Desain): Panel Design adalah tempat Anda mengatur properti dan atribut desain dari elemen yang dipilih, seperti ukuran, warna, jenis huruf, pengaturan margin, padding, dan lain-lain. Anda dapat dengan mudah mengedit atribut desain elemen melalui panel ini.
  • Prototype (Prototipe): Panel Prototype memungkinkan Anda membuat tautan antar halaman dan mengatur transisi serta interaksi antara elemen desain. Di sini, Anda bisa membuat prototipe interaktif dan simulasi pengalaman pengguna (user experience) yang realistis.
  • Code (Kode): Panel Code menyajikan kode CSS dari elemen desain yang dipilih. Ini sangat bermanfaat bagi para pengembang yang ingin melihat kode CSS secara langsung dari desain yang dibuat dalam Figma.
  • Comment (Komentar): Panel Comment memungkinkan kolaborasi tim dengan memberikan komentar pada elemen desain atau pada area tertentu di halaman. Ini memudahkan tim untuk berdiskusi dan memberikan umpan balik secara efisien.
  • Library (Pustaka): Panel Library memungkinkan Anda menyimpan dan mengakses pustaka komponen berbagi (shared component) yang dapat digunakan di berbagai proyek Figma. Pustaka ini memastikan konsistensi dan efisiensi dalam desain Anda.

Figma Tutorial : Device Frames and Scrolling

Figma Frame

Di Figma, "frame" adalah elemen penting yang digunakan untuk membungkus dan mengelompokkan elemen desain dalam suatu area yang terdefinisi. Frame adalah wadah berbentuk persegi panjang yang berfungsi untuk membantu Anda mengatur, mengelola, dan memposisikan elemen desain secara terstruktur. Frame juga dapat berperan sebagai dasar bagi pembuatan prototipe dan tautan antar halaman.  

Takeaways


  • Membuat Frame: Untuk membuat frame, klik ikon "Frame" di toolbar atau tekan tombol "F" pada keyboard. Setelah itu, seret dan buat frame pada area desain Anda.
  • Ukuran Frame: Saat Anda membuat frame, Anda dapat menentukan ukurannya dengan menggeser dan menarik sudut frame. Anda juga dapat mengubah ukuran frame dengan memasukkan nilai lebar dan tinggi di panel Design (desain).
  • Menambahkan Elemen: Setelah membuat frame, Anda dapat menambahkan elemen desain seperti teks, gambar, ikon, dan bentuk ke dalamnya. Elemen-elemen ini akan terorganisir dengan baik dalam frame.
  • Hierarki: Frame juga memungkinkan Anda membuat struktur hierarki dalam desain Anda. Anda dapat menambahkan frame ke dalam frame lain, sehingga membentuk tata letak atau layout yang lebih kompleks.
  • Prototipe dan Interaksi: Frame berperan penting dalam pembuatan prototipe dan pengaturan tautan antar halaman. Anda dapat menetapkan tautan pada elemen di dalam frame untuk membuat aliran prototipe yang interaktif.
  • Scroll Frame: Figma juga mendukung frame dengan gaya scroll, yang memungkinkan Anda membuat tampilan yang lebih panjang daripada kanvas desain Anda. Saat pengguna melihat prototipe Anda, mereka dapat menggulir frame tersebut.
Figma Best Practice : Use Frames 



Materi Pertemuan 10 : Auto Layout and Component


Auto Layout

Auto Layout adalah salah satu fitur unggulan di Figma yang memudahkan desainer dalam menciptakan desain responsif dan tata letak yang fleksibel. Dengan menggunakan Auto Layout, Anda dapat membuat elemen desain menyesuaikan secara otomatis ketika ukuran atau kontennya berubah, seperti pada desain tampilan perangkat berbeda atau saat menambahkan atau mengurangi konten.  

Takeaways


  • Responsif dan Fleksibel: Dengan Auto Layout, Anda dapat membuat desain responsif yang dapat menyesuaikan diri dengan berbagai ukuran layar dan perangkat, termasuk tampilan desktop, tablet, dan ponsel.
  • Pengaturan Perilaku: Anda dapat menentukan perilaku Auto Layout, seperti bagaimana elemen desain akan diposisikan, diatur, atau diperbesar secara otomatis ketika ada perubahan.
  • Pengaturan Margin dan Padding: Auto Layout memungkinkan Anda untuk menentukan margin dan padding otomatis untuk elemen desain. Ini membantu menjaga jarak antara elemen saat ukuran atau konten berubah.
  • Simetri dan Alur: Anda dapat menggunakan fitur "Swap Instance" di Auto Layout untuk dengan cepat mengganti elemen dengan alternatifnya tanpa merusak tata letak keseluruhan.
  • Nested Auto Layout: Anda dapat menggabungkan beberapa Auto Layout dalam satu frame untuk menciptakan tata letak yang lebih kompleks dan interaktif.
  • Pembaruan Otomatis: Saat Anda menambahkan atau menghapus elemen dalam Auto Layout, tata letak secara otomatis disesuaikan dan diperbarui.
  • Interaktif dalam Prototipe: Auto Layout berfungsi dengan baik dalam pembuatan prototipe yang interaktif, karena tata letak akan menyesuaikan diri dengan perubahan konten atau ukuran.

Still Using Groups For UI Design in Figma ? Try Frames and auto-layout instead! Here Why

 
Component : The Basic

Components

Figma Components adalah fitur kunci dalam Figma yang memungkinkan Anda membuat, menyimpan, dan mengelola elemen desain yang dapat digunakan kembali secara efisien dalam proyek Anda. Komponen adalah potongan desain yang dapat digunakan berulang kali tanpa perlu membuat ulang setiap kali Anda membutuhkannya. Ketika Anda mengubah satu komponen, semua instansi (instance) komponen tersebut akan terupdate secara otomatis.  

Takeaways


  • Reusabilitas: Anda dapat membuat komponen dari elemen desain seperti tombol, ikon, header, footer, dan lainnya. Ketika Anda membutuhkan elemen yang sama di tempat lain dalam desain, Anda hanya perlu menambahkan instance dari komponen tersebut, dan perubahan yang Anda lakukan pada satu instance akan teraplikasi pada semua instance lainnya.
  • Konsistensi Desain: Dengan menggunakan komponen, Anda dapat memastikan konsistensi gaya dan tampilan di seluruh proyek. Jika ada perubahan pada komponen, perubahan tersebut akan tercermin secara otomatis pada seluruh instansi komponen di desain Anda.
  • Pengaturan Overrides: Ketika menggunakan komponen, Anda dapat menggunakan fitur Overrides untuk mengganti atribut tertentu pada setiap instance tanpa mempengaruhi komponen utama. Misalnya, Anda dapat mengganti teks atau warna pada tombol komponen tanpa mengubah desain tombol asli.
  • Pustaka Desain: Komponen dapat digunakan dalam pustaka desain (Design System), yang memungkinkan tim desain untuk berkolaborasi dengan lebih efisien dan memastikan konsistensi desain di seluruh proyek.
  • Pembuatan Prototipe: Komponen memudahkan dalam pembuatan prototipe yang interaktif dan dinamis. Anda dapat menetapkan tautan dan interaksi pada instance komponen untuk menciptakan pengalaman pengguna yang lebih menarik.
  • Varian (Variants): Figma juga mendukung fitur Variants di dalam komponen, yang memungkinkan Anda menciptakan berbagai variasi dari suatu komponen dalam satu tempat.

Materi Pertemuan 11 : Variants


 

Variants

Figma Variants adalah fitur yang memungkinkan Anda menciptakan dan mengelola berbagai variasi dari suatu komponen desain dalam satu tempat. Dengan menggunakan Variants, Anda dapat menciptakan komponen dengan berbagai atribut atau gaya yang berbeda, dan menggabungkan semua variasi tersebut dalam satu komponen tunggal.  

Takeaways


  • Atribut yang Bervariasi: Dalam satu komponen Variants, Anda dapat menetapkan atribut yang berbeda, seperti warna, teks, ukuran, dan elemen lainnya. Ini memungkinkan Anda menciptakan berbagai variasi gaya desain tanpa perlu membuat banyak komponen terpisah.
  • Pengelolaan yang Efisien: Dengan Variants, Anda dapat mengelola semua variasi komponen dalam satu tempat. Jika ada perubahan pada suatu atribut, Anda hanya perlu mengubahnya sekali, dan semua variasi akan terupdate secara otomatis.
  • Responsif dan Fleksibel: Variants memungkinkan Anda menciptakan desain yang responsif dan fleksibel dengan cepat. Anda dapat membuat variasi untuk berbagai ukuran dan tipe perangkat dengan mudah.
  • Interaksi dengan Komponen Lain: Variants dapat digunakan bersama dengan fitur Auto Layout dan Component Overrides di Figma. Ini memungkinkan Anda membuat desain yang lebih kompleks dan interaktif dengan tata letak yang dinamis.
  • Pustaka Desain yang Konsisten: Dengan menggunakan Variants dalam pustaka desain (Design System), Anda dapat memastikan konsistensi gaya dan atribut di seluruh proyek desain Anda.
  • Prototyping yang Lebih Cepat: Dengan Variants, Anda dapat membuat prototipe yang lebih cepat dan efisien. Anda dapat menggunakan Variants untuk menciptakan berbagai interaksi dan animasi di komponen desain Anda.

Materi Pertemuan 12 : Interactive Component



Interactive Components 

Interactive Components adalah fitur canggih terbaru dalam Figma yang memungkinkan Anda menciptakan desain interaktif yang lebih dinamis dan menarik. Fitur ini memungkinkan Anda menambahkan tindakan dan animasi ke dalam desain Anda, sehingga menciptakan pengalaman pengguna yang lebih realistis dan menyenangkan.  

Takeaways


  • Interaksi Antar Komponen: Dengan Interactive Components, Anda dapat menambahkan tautan antar komponen, sehingga saat pengguna berinteraksi dengan satu komponen, itu akan mempengaruhi perilaku komponen lainnya. Misalnya, ketika pengguna mengklik tombol, bagian lain dari desain dapat berubah atau berpindah.
  • State (Kondisi) Interaktif: Anda dapat membuat berbagai state atau kondisi interaktif pada komponen, seperti Hover, Pressed, Focused, atau Active state. Setiap state dapat memiliki perubahan atribut dan animasi yang berbeda untuk menciptakan feedback visual saat pengguna berinteraksi dengan desain.
  • Jenis Interaksi: Figma menyediakan berbagai jenis interaksi yang dapat Anda tambahkan, termasuk tautan ke frame lain, overlay (layer tumpang tindih), perubahan instance komponen, dan navigasi antar halaman dalam prototipe.
  • Animasi: Interactive Components memungkinkan Anda membuat animasi yang lebih halus dan kompleks. Anda dapat mengatur perubahan atribut, posisi, skala, dan opasitas elemen untuk menciptakan animasi yang menarik.
  • Pembuatan Prototipe yang Lebih Lanjut: Dengan fitur ini, Anda dapat menciptakan prototipe yang lebih interaktif dan dinamis. Ini membantu Anda untuk menguji dan mendemonstrasikan desain Anda dengan lebih baik kepada tim dan klien.
  • Pengelolaan yang Mudah: Interactive Components memungkinkan Anda untuk mengelola interaksi dan animasi secara terpusat dalam satu tempat, sehingga memudahkan Anda dalam mengatur dan memodifikasi desain interaktif Anda.

Materi Pertemuan 13 : Component Properties



Component Properties

Di Figma, "Component Properties" mengacu pada pengaturan dan atribut yang menentukan bagaimana sebuah komponen berperilaku dan tampil ketika digunakan dalam desain. Properti ini dapat disesuaikan dan disesuaikan untuk menciptakan komponen yang dapat digunakan kembali dan merespons perubahan secara konsisten di seluruh proyek desain Anda.  

Takeaways


  • Instance Overrides: Saat Anda menggunakan komponen dalam desain Anda, Anda dapat mengganti propertinya untuk membuat perubahan tertentu pada instance tersebut tanpa mempengaruhi komponen utama. Misalnya, Anda dapat mengubah teks, warna, atau gambar pada instance komponen.
  • Constraints: Constraints menentukan bagaimana komponen harus merespons ketika ukuran frame atau layout tempatnya berada berubah. Anda dapat mengatur constraints untuk arah horizontal dan vertikal untuk menentukan bagaimana komponen tersebut akan melebar dan menyesuaikan ukuran.
  • Autolayout: Auto Layout memungkinkan Anda menciptakan komponen yang responsif dan adaptif. Dengan Auto Layout, Anda dapat mengatur tata letak elemen-elemen dalam komponen untuk menyesuaikan secara otomatis berdasarkan perubahan konten atau ukuran.
  • Variants (Varian pada Komponen): Figma memperkenalkan Variants dalam Komponen, yang memungkinkan Anda menciptakan variasi dari suatu komponen dalam komponen master yang sama. Variants berguna ketika Anda memiliki beberapa state atau gaya desain untuk satu komponen tunggal.
  • Interactive Components: Seperti yang disebutkan sebelumnya, Interactive Components memungkinkan Anda menambahkan interaktivitas dan animasi ke dalam desain Anda. Anda dapat menentukan bagaimana komponen merespons saat pengguna berinteraksi dengannya, seperti saat dihover, diklik, atau interaksi lainnya.
  • Pengaturan Komponen Utama: Pengaturan komponen utama, seperti nama, deskripsi, dan tag, dapat diedit dalam properti komponen. Memberi nama dan mengorganisir komponen dengan baik membantu Anda mengelola dan menemukannya dengan mudah di pustaka komponen.
  • Mengatur dan Menyusun: Anda dapat mengatur komponen dengan mengelompokkannya ke dalam folder dan menyusunnya dalam komponen lain. Ini membantu menciptakan pustaka komponen yang terstruktur dan terorganisir dengan baik untuk proyek desain Anda.
  • Constraints dan Resizing: Komponen dapat memiliki perilaku resizing yang diatur sebagai "Fixed", "Horizontal", "Vertical", atau "Horizontal and Vertical". Ini menentukan bagaimana komponen beradaptasi dengan perubahan ukuran kontainer tempatnya berada.

Materi Pertemuan 14 : Prototyping and Transitions


Figma Prototype

Figma Prototype adalah fitur dalam aplikasi desain Figma yang memungkinkan Anda untuk membuat prototipe interaktif dari desain Anda. Dengan menggunakan fitur ini, Anda dapat menghadirkan desain Anda dalam bentuk yang lebih hidup dan berinteraksi, sehingga memungkinkan Anda untuk menguji dan mendemonstrasikan alur kerja, interaksi, dan pengalaman pengguna secara lebih realistis.  

Takeaways


  • Linking (Tautan): Anda dapat menambahkan tautan antara frame (lembar desain) untuk menciptakan aliran kerja dan navigasi yang interaktif. Dengan menambahkan tautan, Anda dapat menentukan bagaimana pengguna akan berpindah dari satu halaman atau tampilan ke tampilan lainnya.
  • Interaksi: Anda dapat menentukan interaksi apa yang terjadi ketika pengguna berinteraksi dengan elemen desain, seperti tombol, ikon, atau gambar. Misalnya, Anda dapat menetapkan tindakan yang akan terjadi ketika pengguna mengklik tombol atau mengarahkan kursor pada elemen tertentu.
  • Animation (Animasi): Figma Prototype memungkinkan Anda menambahkan animasi ke dalam prototipe Anda. Anda dapat membuat elemen bergerak, perubahan atribut, atau perubahan tampilan lainnya untuk menciptakan pengalaman yang lebih menarik dan responsif bagi pengguna.
  • Transitions (Transisi): Anda dapat menentukan jenis transisi yang akan digunakan ketika berpindah dari satu frame ke frame lainnya. Beberapa jenis transisi yang tersedia termasuk fade, slide, push, dan lainnya.
  • Preview: Anda dapat melihat prototipe Anda dalam mode preview untuk menguji bagaimana interaksi dan animasi berfungsi. Mode preview memungkinkan Anda untuk mengalami prototipe Anda seperti pengguna sebenarnya.
  • Sharing (Berbagi): Setelah Anda selesai membuat prototipe, Anda dapat membagikannya dengan tim Anda atau klien untuk mendapatkan masukan dan umpan balik. Anda dapat membagikan tautan prototipe yang dapat diakses langsung dari browser.

Materi Pertemuan 15 : Creating Styles


Style

Untuk membuat style di Figma, Anda dapat menggunakan fitur "Styles" (Gaya) yang memungkinkan Anda membuat dan mengatur gaya elemen desain secara konsisten di seluruh proyek Anda. Dengan menggunakan Styles, Anda dapat dengan mudah memperbarui atribut desain, seperti warna, teks, efek, dan lainnya, secara keseluruhan. 




Easiest way to generate color palette in Figma 


How I make UI color palettes 
PERTEMUAN 16 - UAS

Sebelum mengerjakan teman-teman wajib membuat page didalam Figma. Kemudian setiap page di rename, menjadi Soal 1, Soal 2, dan seterusnya.

 

Soal 1 : Duplikasi desain pada link ini
Soal 2 : Buatkan prototype soal 1, prototype akan dinilai berdasarkan tingkatan (Basic, Medium, Intermediate) dan akan mendapatkan poin yang berbeda tergantung hasil yang teman-teman buat.

 

Perhatikan activity instructions ketika akan melakukan submit project. Selamat mengerjakan.
















































Tags:

Posting Komentar

Lebih baru Lebih lama