membuat desain web menggunakan FIGMA

HAI! AND WELCOME BACK

Kali ini saya akan membahas tetang cara membuat desain web dengan menggunakan Figma

sumber: diginews.id

Apa Itu Figma?

Figma adalah tool desain berupa website yang terhubung dengan cloud sehingga bisa digunakan kapanpun dan dimanapun melalui internet. Tool ini berbasis vector, sehingga akan lebih cocok untuk mendesain UI website atau mobile dan aset ilustrasi. Tetapi, Figma juga bisa digunakan untuk mengedit foto namun hanya dengan pengaturan dasar saja.

Cara membuat desaindengan Figma

1. buka halaman web/download aplikasi Figma. Jika ingin menggunakan Web ketik https://www.figma.com

begitulah tampilan jika kalian masuk Web Figma 

2. pada halaman tersebut terdapat beberapa contoh desain. Tapi karena kali ini kita akan membuat tampilan Web sendiri jadi klik New Design File. Kemudian akan muncul tampilan seperti ini

3. lalu klik menu frame kemudian pilih untuk tampilan dekstop

4. kemudian klik menu file lalu klik plugins

cari element

Vectary 3D elements 

3D icons

Material Desain Icons

5. klik icon Rectangle kemuadian tambakan Rectangle 

6. tamabahkan teks untuk nama web kalian. Sebagai contoh lihat gambar dibawah ini

*untuk mencari icon search klik plugins pilih material desain icon

7. kalian bisa mengubah warna dari rectangle dengan mengklik rectangel tersebut kemudian di sebelah kanan pilih fill kemudian kalian bisa mengubah warna Rectangle kalian.

8. kemudian tambahkan beberapa icons agar menarik dengan mengklik menu file kemudian plugins

lalu klik vectary 3D icons cari icon yang menurut kalian menarik. selain di Vectary 3D icons kalian bisa juga mencari icon di 3d icons

9. kemudian tambahkan teks sesuai dengan yang kalian mau untuk contoh kalian bisa melihat gambar diatas

10. kalian juga dapat menambahkan media sosial kalian seperti ini. Dan saya juga membuat teks seperti logo jika kalian ingin menambahkan juga kalian bisa tambahkan teks dan untuk mengubah warna huruf bisa klik fill

mungkin itu saya yang bisa dijelaskan

Thanks for coming to my blog and see you to next blog

Karakteristik User Interface

                                                                    (sumber : dewaweb.com)

User Interface (UI) adalah tampilan visual yang menjembatani sistem dengan pengguna.

Tampilan UI dirancang dengan beberapa aspek desain mulai dari Jelas dan ringkas, Familiar(mudah dipahami), Responsive, Tipografi, Pemilihan warna, Efisien, Forgiving, Menarik, Konsisten.dan itulah karakteristik dari UI. nah, untuk lebih memahami karakteristik UI maka kali ini akan dibahas satu persatu.

1. Jelas 

user bisa mengerti dan bisa menggunakan sistem kamu dengan mudah

2. Ringkas

membuat deskripsi yang ringkas. jika membuat deskripsi terlalu panjang akan membuat tampilan website menjadi berantakan dan para pengunjung akan menghabiskan waktu yanag lama untuk membaca deskripsi

3. Familiar (mudah dipahami)

Familiar disini bermakna suatu yang sudah pernah dilihat sebelumnya. Jadi kita harus mendesain Website kita harus membuat desain yang sudah familiar.

4. Resposive

Desain dalam sebuah website haruslah resposive karena desain website yang Responsive membuat pengunjung website dapat mengakses website dari berbagai perangkat. Desain yang tidak Responsive akan menyusah kan pengunjung. Jadi pastikan kalo website anda memiliki desain yang resposive.

5. Tipografi

Tipografi diperuntukan untuk mengatur jenis huruf. ada 3 langkah dalam melakukan Tipografi 

1. Mengetahui jenis Font

2. Memilih Typeface

3. Memilih Font

6. Pemilihan Warna

Dalam sebuah desain maka warna memiliki fungsi utama yaitu sebagai penarik perhatian audien.Hal ini disebabkan warna merupakan aspek yang paling mudah diingat oleh user ketika mereka melihat suatu hal yang sama 

7. Efisien 

Memastikan bahwa website dan aplikasi dapat digunakan dengan Efisien. kamu perlu mengidentifikasi bagaimana website dan Aplikasi kamu bekerja. Buat user interface yang memudahkan user untuk mencapai tujuan mereka

8. Forgiving

Menyarankan jika user mengalami website eror untuk mencoba ke halaman website lain

9. Menarik

Maksud dari menarik disini adalah interface anda menarik untuk digunakan

10. Konsisten

Konsisten dalam user interface dapat membantu user untuk mengerti pola, mereka dapat mempelajari apa kegunaan tombol,tabs,icon dan berbagai elemen lainnya pada interface tersebut