4) Membuat UI Component Dengan Basic Shapes | Tutorial Figma 2023

00:08:14
https://www.youtube.com/watch?v=2fFtOUYG2RU

Summary

TLDRVideo ini mengajarkan cara menggunakan basic shapes dalam desain UI menggunakan Vigma. Pembicara menjelaskan berbagai bentuk dasar seperti rectangle, ellipse, dan polygon, serta bagaimana bentuk-bentuk ini digunakan untuk membuat elemen desain seperti tombol dan foto profil. Contoh praktis ditunjukkan dengan membuat tombol 'Get Started' dan elemen profil pengguna, serta menekankan pentingnya memahami grafik desain sebelum mendalami UI design. Video ini juga menyarankan untuk mencari inspirasi desain di dribble.com.

Takeaways

  • 🎨 Basic shapes adalah fondasi desain UI.
  • 🖱️ Rectangle digunakan untuk membuat tombol.
  • 👤 Ellipse sering digunakan untuk foto profil.
  • 📏 Ukuran tombol standar adalah 40-60px tinggi.
  • 📝 Teks dapat ditambahkan di atas bentuk dasar.
  • 🔄 Duplikasi elemen memudahkan desain.
  • 📚 Pelajari grafik desain sebelum UI design.
  • 🌐 Dribble.com adalah sumber inspirasi desain.
  • ⭐ Bintang digunakan untuk rating dalam aplikasi.
  • 🖥️ Vigma memungkinkan desain dan prototyping.

Timeline

  • 00:00:00 - 00:08:14

    Dalam sesi ini, kita mempelajari tentang basic shapes dalam Vigma, termasuk rectangle, line, arrow, ellipse, dan polygon. Basic shapes ini digunakan untuk membangun tampilan desain yang menarik, seperti button dan elemen UI lainnya. Contoh yang diberikan adalah button 'Create Account' yang dibuat menggunakan rectangle dan teks. Selain itu, kita juga belajar cara mengatur ukuran dan posisi elemen, serta pentingnya penggunaan basic shapes dalam UI design. Selanjutnya, kita membuat elemen lain seperti ellipse untuk foto profil dan menambahkan teks untuk nama dan email. Akhirnya, kita juga membuat elemen rating menggunakan bintang, menunjukkan bagaimana basic shapes dapat digunakan dalam berbagai konteks dalam desain UI.

Mind Map

Video Q&A

  • Apa itu basic shapes dalam desain UI?

    Basic shapes adalah bentuk dasar seperti rectangle, ellipse, dan polygon yang digunakan untuk membangun elemen desain.

  • Bagaimana cara membuat tombol di Vigma?

    Anda dapat membuat tombol dengan menggunakan rectangle dan menambahkan teks di atasnya.

  • Apa fungsi dari ellipse dalam desain UI?

    Ellipse sering digunakan untuk foto profil atau ikon menu.

  • Mengapa penting untuk mempelajari grafik desain sebelum UI design?

    Memahami grafik desain membantu dalam memahami elemen-elemen yang ada dalam UI design.

  • Di mana saya bisa mendapatkan inspirasi desain?

    Anda bisa mengunjungi dribble.com untuk melihat berbagai desain menarik.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
id
Auto Scroll:
  • 00:00:01
    [Musik]
  • 00:00:07
    Oke people with the spirit of learning
  • 00:00:09
    Sebelumnya kita telah mempelajari cukup
  • 00:00:12
    banyak hal sekarang akan kita lanjutkan
  • 00:00:14
    kepada bagian materi basic shapes nah di
  • 00:00:19
    vigma Ini Mereka menyediakan basic shape
  • 00:00:22
    seperti rectangle Line arrow ellipse
  • 00:00:25
    Polygon dan juga seterusnya dimana dari
  • 00:00:28
    save save ini yang kecil seperti ini
  • 00:00:31
    kita akan gunakan untuk membangun sebuah
  • 00:00:34
    tampilan desain yang menarik Jadi
  • 00:00:37
    sebenarnya kalau kita buka dribble.com
  • 00:00:39
    lagi misalnya kita lihat nih salah satu
  • 00:00:42
    halaman login ya di sini kita lihat dari
  • 00:00:48
    kumpulan desain ini Itu dimulai dari
  • 00:00:52
    basic shape seperti rectangle sebagai
  • 00:00:55
    contoh button hijau ini atau button call
  • 00:00:58
    to action cte itu gabungan dari
  • 00:01:00
    rectangle dengan teks tool yang sudah
  • 00:01:03
    kita pelajari sebelumnya oke
  • 00:01:06
    jadi maupun desainnya seperti apa itu
  • 00:01:08
    pasti akan dimulai dengan basic shape
  • 00:01:11
    seperti rectangle Line arrow ellipse dan
  • 00:01:14
    juga seterusnya dan akan kita pelajari
  • 00:01:16
    kali ini well kita seleksi dulu semua
  • 00:01:20
    layernya kita hapus saja kita start new
  • 00:01:23
    ya bersih Lalu kita coba di sini bikin
  • 00:01:27
    rectangle seperti ini lalu kita klik aja
  • 00:01:31
    dia akan memiliki default ukuran 100
  • 00:01:34
    kali 100 pixel di sini kita bisa lihat
  • 00:01:37
    kalau kita klik pada layer rectangle itu
  • 00:01:42
    di sebelah kanan ada propertiesnya tapi
  • 00:01:44
    kalau kita UNK ya kita nggak klik sama
  • 00:01:47
    sekali dia hilang jadi kita klik lalu di
  • 00:01:51
    sini kita ubah W ini lebarnya HD ini
  • 00:01:54
    tingginya dan ini posisinya dan posisi
  • 00:01:57
    ini itu akan sangat bermanfaat sekali
  • 00:02:00
    nantinya ketika kita masuk kepada UI
  • 00:02:03
    animation menggunakan prototype
  • 00:02:06
    ya jadi di vigma tuh bisa design bisa
  • 00:02:08
    bikin Prototype bisa juga inspek untuk
  • 00:02:11
    developer dan itu perjalanannya masih
  • 00:02:13
    panjang banget jadi santai aja nah di
  • 00:02:17
    bagian rectangle satu ini bisa kita atur
  • 00:02:20
    misalnya untuk
  • 00:02:21
    lebarnya itu 200 dan untuk tingginya
  • 00:02:26
    Standar Button itu mungkin sekitar 55 eh
  • 00:02:29
    sorry 40 sampai 60 kita pakai 55 aja
  • 00:02:33
    Nah di sini bisa kita lihat bahwa kita
  • 00:02:37
    sudah punya wujud seperti button lalu
  • 00:02:41
    kita perlu tambahkan teks saja kita
  • 00:02:43
    masuk ke Text Tool atau tekan t pada
  • 00:02:46
    keyboard kita klik aja di sini misalnya
  • 00:02:49
    kita beri nama
  • 00:02:52
    create account Oke misalnya kita ingin
  • 00:02:55
    pengguna ini membuat akun baru misalnya
  • 00:02:59
    Create new account seperti ini lalu kita
  • 00:03:03
    letakkan di tengah
  • 00:03:04
    Oke jadi seperti ini Nah kalau kita zoom
  • 00:03:09
    out well kurang lebih kita sudah
  • 00:03:11
    memiliki sebuah button hanya saja
  • 00:03:13
    desainnya masih kurang menarik ya karena
  • 00:03:16
    akan di sini kita masih belajar dasar
  • 00:03:18
    dulu selanjutnya
  • 00:03:21
    kita grup aja
  • 00:03:23
    kita grup dan kita Letakkan di sini
  • 00:03:27
    Oke untuk save selanjutnya
  • 00:03:31
    dimana kita akan coba untuk membuat
  • 00:03:34
    sebuah ellips ya biasanya elips ini
  • 00:03:38
    digunakan untuk foto profile untuk icon
  • 00:03:41
    menu pada dashboard atau untuk
  • 00:03:45
    komponen-komponen lainnya pada UI design
  • 00:03:47
    Nah kalau bulat ini kan dipakai foto
  • 00:03:50
    profile Lalu ada tepografinya ya seperti
  • 00:03:53
    gendow terus ada email addressnya tapi
  • 00:03:56
    kalau rectangle tuh emang seringnya
  • 00:03:58
    digunakan sebagai UI card komponen ya
  • 00:04:01
    ini card ya atau kartu Lalu ada text
  • 00:04:05
    file juga ada button cte dan Saran saya
  • 00:04:09
    untuk teman-teman yang baru memperdalam
  • 00:04:11
    UI us design itu pelajarin dulu Grafik
  • 00:04:14
    desain setelah itu pelajari juga ada
  • 00:04:17
    elemen apa saja yang ada yang tersedia
  • 00:04:20
    di UI design Nah untuk Bullet juga tuh
  • 00:04:24
    seperti ini kita bisa lihat ya jadi
  • 00:04:27
    digunakan untuk menu sebuah
  • 00:04:30
    tambahkan foto Pro jadi banyaklah dari
  • 00:04:34
    basic shape ini untuk digunakan apa saja
  • 00:04:36
    di dalam sebuah UI design sebagai contoh
  • 00:04:39
    tadi kita gunakan sebagai foto profil
  • 00:04:42
    oke Atau mungkin di sini kita ganti dulu
  • 00:04:46
    create accountnya misalnya
  • 00:04:49
    get started aja get started lalu kita
  • 00:04:53
    letakkan di tengah seperti ini dan
  • 00:04:55
    bagian Bullet ini bisa kita kecilin Nah
  • 00:04:59
    untuk mengecilkannya itu nggak harus
  • 00:05:00
    lewat sebelah kanan jadi tekan shift aja
  • 00:05:03
    pada keyboard lalu kita kecilin seperti
  • 00:05:05
    ini agar ukurannya proporsional Tapi
  • 00:05:07
    kalau nggak ditekan shift dia bakal
  • 00:05:09
    kayak gini kalau tekan shift dia bakalan
  • 00:05:12
    lebih proposional
  • 00:05:14
    Oke kita atur ke 60
  • 00:05:18
    Nah sebagai contoh kita letakkan di
  • 00:05:21
    sebelah kiri sini lalu kita tambahkan
  • 00:05:23
    teks ya kita tambahkan teks misalnya di
  • 00:05:27
    sini tadi namanya
  • 00:05:28
    Nina Bobo
  • 00:05:31
    oke lalu kita duplikat
  • 00:05:34
    dan Kasih email misalnya Nina Bobo
  • 00:05:38
    gmail.com
  • 00:05:40
    well kita sudah dapat gambaran foto
  • 00:05:43
    profile juga ada nama ya ini bisa kita
  • 00:05:47
    seleksi semua lalu kita grup dan di sini
  • 00:05:50
    ada button bisa kita rename Nih misalnya
  • 00:05:53
    button CDI lalu yang bagian atas ini
  • 00:05:57
    kita rename sebagai user profil
  • 00:06:03
    well udah kelihatan ya bentuknya seperti
  • 00:06:05
    apa tampilan desain kita I know ini
  • 00:06:07
    masih jelek banget tapi saya janji kita
  • 00:06:10
    akan bikin yang lebih menarik lagi untuk
  • 00:06:12
    sekarang yang penting teman-teman tahu
  • 00:06:14
    cara penggunaan basic shapesnya itu
  • 00:06:17
    seperti apa Ya kurang lebih seperti ini
  • 00:06:19
    oke
  • 00:06:21
    well yang terakhir saya mau kasih contoh
  • 00:06:24
    ya jadi di basic shape itu ada start
  • 00:06:26
    biasanya start ini digunakan untuk
  • 00:06:28
    rating kalau teman-teman pakai aplikasi
  • 00:06:30
    Traveloka atau go-jek itu kan suka kasih
  • 00:06:33
    rating kepada
  • 00:06:35
    drivernya Nah di sini kita coba Bikin
  • 00:06:38
    jadi untuk ukuran bintangnya nggak usah
  • 00:06:41
    terlalu besar mungkin 32 aja
  • 00:06:43
    lalu kita duplikat lagi
  • 00:06:47
    Nah jadi seperti ini kita bisa kasih
  • 00:06:51
    rating kepada si Nina ini mungkin Nina
  • 00:06:54
    ini sudah apa namanya sudah membantu
  • 00:06:58
    kita mengerjakan sebuah Project dan kita
  • 00:07:01
    ingin kasih rating ya Kita kasih teks
  • 00:07:04
    lagi
  • 00:07:05
    [Musik]
  • 00:07:06
    give Nina
  • 00:07:10
    nah kurang lebih seperti ini
  • 00:07:12
    jadi ada foto profilnya ada menu
  • 00:07:17
    ratingnya di mana kita kasih rating
  • 00:07:19
    Apakah bintang 2 atau bintang 5 setelah
  • 00:07:22
    itu harusnya ini bukan get started ya
  • 00:07:25
    red now Oke seperti itu
  • 00:07:29
    nah dan ini bukan halaman get start
  • 00:07:33
    Harusnya kita ganti Misalnya di sini
  • 00:07:35
    halaman rating
  • 00:07:37
    oke
  • 00:07:38
    well beginilah basic penggunaan basic
  • 00:07:41
    shapes dari software pigment dimana kita
  • 00:07:44
    akan lebih sering lagi menggunakan ini
  • 00:07:46
    untuk membuat tampilan yang magnifice
  • 00:07:49
    kalau kita lihat di dribble kalau butuh
  • 00:07:52
    inspirasi desain buka aja trible.com Itu
  • 00:07:55
    banyak banget desain yang menarik yang
  • 00:07:56
    bisa kita jadikan bahan belajar ke
  • 00:07:59
    depannya sebagai seorang
  • 00:08:07
    [Musik]
Tags
  • Vigma
  • desain UI
  • basic shapes
  • rectangle
  • ellipse
  • tombol
  • foto profil
  • grafik desain
  • inspirasi desain
  • dribble.com