SlideShare a Scribd company logo
1 of 19
UI DESIGN
WITH FIGMA
KKN KELOMPOK 10
DESA GILANGHARJO
2022
“Tak Kenal Maka Tak Sayang”
Agenda
Kenapa perlu belajar UI design?
Pengenalan UI dan Figma
Hands-on Figma sebagai Tools
01
Kenapa perlu belajar UI design?
Sedang terjadi transformasi digital pada berbagai industri/perusahaan
Indonesia membutuhkan lebih dari 9 juta talenta digital pada tahun 2023,
menurut Bapak Presiden Jokowi*
Produk designer adalah 1 dari 5 profesi yang paling direkomendasikan oleh
Kemendikbud Ristek, Mas Menteri Nadiem Makarim**
7 milliar lebih manusia dengan 4 Milliar lebih pengguna smartphone tehubung ke
internet dengan beragam aplikasi/game***
02
User Interface
Apa itu UI ?
UI kepanjangan dari user interface.
User Interface adalah tampilan visual sebuah produk yang
menghubungkan sistem dengan pengguna (user). Sistem ini bisa berupa
website, aplikasi atau lainnya.
User interface atau UI adalah tampilan yang meliputi bentuk,
warna, dan tulisan yang didesain semenarik mungkin. Nah, karena user
interface adalah tampilan sebuah produk dilihat oleh pengguna, maka
harus tampak menarik. Singkatnya, user interface design itu harus
diperhatikan.
Apa Fungsi dan Seberapa Penting
User Interface
Menciptakan Kesan Pertama
bagi Pengguna
01
Meningkatkan Penjualan
dan Pertumbuhan Bisnis
04
Memberikan Pengalaman
Pengguna yang Baik
02
Meningkatkan Kualitas
Branding
05
Memudahkan Interaksi
pengguna dengan
produk
03
Meningkatkan kualitas
estetika di dalam situs
atau aplikasi.
06
Karakteristik User Interface yang baik
1. Jelas dan Ringkas
1. Desain Responsive
1. Informasi Terstruktur
1. Konsisten
1. Kontras Warna yang
Baik
1. Intuitif
03
FIGMA
Kenapa harus
menggunakan
Figma ?
Sekian dan Terima Kasih
Semoga
Bermanfaat
SESI
TANYA JAWAB

More Related Content

What's hot

Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafarisContoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
Isya Ansyari
 
Modul-Pelatihan-Microsoft-Word-2013.pdf
Modul-Pelatihan-Microsoft-Word-2013.pdfModul-Pelatihan-Microsoft-Word-2013.pdf
Modul-Pelatihan-Microsoft-Word-2013.pdf
gungunar1
 

What's hot (20)

Firewall
FirewallFirewall
Firewall
 
Pengenalan Dasar Web
Pengenalan Dasar WebPengenalan Dasar Web
Pengenalan Dasar Web
 
Presentasi materi MPLS SMK MULTIMEDIA KWU
Presentasi materi MPLS SMK MULTIMEDIA KWUPresentasi materi MPLS SMK MULTIMEDIA KWU
Presentasi materi MPLS SMK MULTIMEDIA KWU
 
Presentasi Pengenalan Jurusan TKJ SMK Darut Taqwa pada MOS 2013
Presentasi Pengenalan Jurusan TKJ SMK Darut Taqwa pada MOS 2013Presentasi Pengenalan Jurusan TKJ SMK Darut Taqwa pada MOS 2013
Presentasi Pengenalan Jurusan TKJ SMK Darut Taqwa pada MOS 2013
 
Branding.pptx
Branding.pptxBranding.pptx
Branding.pptx
 
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafarisContoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
 
Materi lengkap tentang power point
Materi lengkap tentang power pointMateri lengkap tentang power point
Materi lengkap tentang power point
 
AIJ - Materi Firewall.pptx
AIJ - Materi Firewall.pptxAIJ - Materi Firewall.pptx
AIJ - Materi Firewall.pptx
 
Proposal Penawaran Pembangunan Aplikasi Tracking Barang
Proposal Penawaran Pembangunan Aplikasi Tracking BarangProposal Penawaran Pembangunan Aplikasi Tracking Barang
Proposal Penawaran Pembangunan Aplikasi Tracking Barang
 
KD 3.10 FIREWALL JARINGAN.pptx
KD 3.10 FIREWALL JARINGAN.pptxKD 3.10 FIREWALL JARINGAN.pptx
KD 3.10 FIREWALL JARINGAN.pptx
 
Mudah membuat desain pakai Canva
Mudah membuat desain pakai CanvaMudah membuat desain pakai Canva
Mudah membuat desain pakai Canva
 
ATP-TJKT-BK 4.docx
ATP-TJKT-BK 4.docxATP-TJKT-BK 4.docx
ATP-TJKT-BK 4.docx
 
Program kerja tkj_2020-2021
Program kerja tkj_2020-2021Program kerja tkj_2020-2021
Program kerja tkj_2020-2021
 
Rpp kelas 7 semester ganjil
Rpp kelas 7 semester ganjilRpp kelas 7 semester ganjil
Rpp kelas 7 semester ganjil
 
Presentasi Informatika BAB 5 Jaringan Komputer dan Internet
Presentasi Informatika BAB 5 Jaringan Komputer dan InternetPresentasi Informatika BAB 5 Jaringan Komputer dan Internet
Presentasi Informatika BAB 5 Jaringan Komputer dan Internet
 
Peluang TKJ & Multimedia Di Dunia Usaha/Industri
Peluang TKJ & Multimedia Di Dunia Usaha/IndustriPeluang TKJ & Multimedia Di Dunia Usaha/Industri
Peluang TKJ & Multimedia Di Dunia Usaha/Industri
 
Modul-Pelatihan-Microsoft-Word-2013.pdf
Modul-Pelatihan-Microsoft-Word-2013.pdfModul-Pelatihan-Microsoft-Word-2013.pdf
Modul-Pelatihan-Microsoft-Word-2013.pdf
 
Jobsheet-Praktek-Jaringan-Komputer.doc
Jobsheet-Praktek-Jaringan-Komputer.docJobsheet-Praktek-Jaringan-Komputer.doc
Jobsheet-Praktek-Jaringan-Komputer.doc
 
Mudah Mengelola Bisnis Dengan Business Model Canvas
Mudah Mengelola Bisnis Dengan Business Model CanvasMudah Mengelola Bisnis Dengan Business Model Canvas
Mudah Mengelola Bisnis Dengan Business Model Canvas
 
Laporan tugas besar_web
Laporan tugas besar_webLaporan tugas besar_web
Laporan tugas besar_web
 

Similar to Design UI With Figma.pptx

Android umy-yogyakarta
Android umy-yogyakartaAndroid umy-yogyakarta
Android umy-yogyakarta
Widy Priasmoro
 
Bisnis plan
Bisnis planBisnis plan
Bisnis plan
ibnuelm
 
20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk
Stevie Principe
 

Similar to Design UI With Figma.pptx (20)

UI & UX kel 5.pptx
UI & UX kel 5.pptxUI & UX kel 5.pptx
UI & UX kel 5.pptx
 
Topic 1 - UI _ UX Overview.docx
Topic 1 - UI _ UX Overview.docxTopic 1 - UI _ UX Overview.docx
Topic 1 - UI _ UX Overview.docx
 
Fundamental of UI_UX - Developer Student Clubs.pptx
Fundamental of UI_UX - Developer Student Clubs.pptxFundamental of UI_UX - Developer Student Clubs.pptx
Fundamental of UI_UX - Developer Student Clubs.pptx
 
PDKT WITH UIUX DESIGN.pdf
PDKT WITH UIUX DESIGN.pdfPDKT WITH UIUX DESIGN.pdf
PDKT WITH UIUX DESIGN.pdf
 
keharusan perencanaan konstruksi mempergunakan BIM
keharusan perencanaan konstruksi mempergunakan BIMkeharusan perencanaan konstruksi mempergunakan BIM
keharusan perencanaan konstruksi mempergunakan BIM
 
Study Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdfStudy Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdf
 
UX Design.pptx
UX Design.pptxUX Design.pptx
UX Design.pptx
 
User Interface (UI) & User Experience (UX).pdf
User Interface (UI) & User Experience (UX).pdfUser Interface (UI) & User Experience (UX).pdf
User Interface (UI) & User Experience (UX).pdf
 
Anwar Saddam_KWU.pptx
Anwar Saddam_KWU.pptxAnwar Saddam_KWU.pptx
Anwar Saddam_KWU.pptx
 
Perkenalan UI dan UIX
Perkenalan UI dan UIXPerkenalan UI dan UIX
Perkenalan UI dan UIX
 
Penggunaan VR pada era digitalisasi dan modernisasi
Penggunaan VR pada era digitalisasi dan modernisasiPenggunaan VR pada era digitalisasi dan modernisasi
Penggunaan VR pada era digitalisasi dan modernisasi
 
Android umy-yogyakarta
Android umy-yogyakartaAndroid umy-yogyakarta
Android umy-yogyakarta
 
Tugas Kelompok_6_Kewirausahaan
Tugas Kelompok_6_KewirausahaanTugas Kelompok_6_Kewirausahaan
Tugas Kelompok_6_Kewirausahaan
 
GITS Webinar: How to Build UI/UX Portfolio that Stand Out
GITS Webinar: How to Build UI/UX Portfolio that Stand Out GITS Webinar: How to Build UI/UX Portfolio that Stand Out
GITS Webinar: How to Build UI/UX Portfolio that Stand Out
 
Visual Design. Penting Sangat ke?
Visual Design. Penting Sangat ke?Visual Design. Penting Sangat ke?
Visual Design. Penting Sangat ke?
 
My Future work
My Future workMy Future work
My Future work
 
Peran Strategik Manajer Produk Digital & Marketing Banking 4.0._ Training "St...
Peran Strategik Manajer Produk Digital & Marketing Banking 4.0._ Training "St...Peran Strategik Manajer Produk Digital & Marketing Banking 4.0._ Training "St...
Peran Strategik Manajer Produk Digital & Marketing Banking 4.0._ Training "St...
 
FUTURE WORK YUSRI AMELIA
FUTURE WORK YUSRI AMELIAFUTURE WORK YUSRI AMELIA
FUTURE WORK YUSRI AMELIA
 
Bisnis plan
Bisnis planBisnis plan
Bisnis plan
 
20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk
 

Recently uploaded

Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pillsAbortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
Abortion pills in Riyadh +966572737505 get cytotec
 
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
ahmadirhamni
 
TUGAS BIOTRANSFORMASI.ppt kelompok enam.
TUGAS BIOTRANSFORMASI.ppt kelompok enam.TUGAS BIOTRANSFORMASI.ppt kelompok enam.
TUGAS BIOTRANSFORMASI.ppt kelompok enam.
Monhik1
 
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
achmadwalidi444
 
2. perairan darat perairan laut subgai dan rawa
2. perairan darat perairan laut subgai dan rawa2. perairan darat perairan laut subgai dan rawa
2. perairan darat perairan laut subgai dan rawa
mcnoob1
 
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnvsagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
ademahdiyyah
 
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggiKEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
LookWWE
 

Recently uploaded (10)

Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pillsAbortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
Abortion pills in Riyadh Saudi Arabia !! +966572737505 Get Cytotec pills
 
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
persentasi tentang modul ajar kelas lima kelas enam semster 2458902569-Modul-...
 
Pertemuan kuliah 6 Reduksi data State.ppt
Pertemuan kuliah 6 Reduksi data State.pptPertemuan kuliah 6 Reduksi data State.ppt
Pertemuan kuliah 6 Reduksi data State.ppt
 
TUGAS BIOTRANSFORMASI.ppt kelompok enam.
TUGAS BIOTRANSFORMASI.ppt kelompok enam.TUGAS BIOTRANSFORMASI.ppt kelompok enam.
TUGAS BIOTRANSFORMASI.ppt kelompok enam.
 
KELOMPOK 4 asma ppok jhyfydfdrfdtfghghghh
KELOMPOK 4 asma ppok jhyfydfdrfdtfghghghhKELOMPOK 4 asma ppok jhyfydfdrfdtfghghghh
KELOMPOK 4 asma ppok jhyfydfdrfdtfghghghh
 
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
kk eko junianto.pdf ada yang terjual tapi ngecer nggak bisa mijid nggak bisa ...
 
2. perairan darat perairan laut subgai dan rawa
2. perairan darat perairan laut subgai dan rawa2. perairan darat perairan laut subgai dan rawa
2. perairan darat perairan laut subgai dan rawa
 
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnvsagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
sagdjasgfjckasbkfjhsakjkadjvjnskdjvnjkdvnv
 
Kartu Undangan Softcover + Amplop Hazelnut Foliage Hibiscus Sunny Orange✨
Kartu Undangan Softcover + Amplop Hazelnut Foliage Hibiscus Sunny Orange✨Kartu Undangan Softcover + Amplop Hazelnut Foliage Hibiscus Sunny Orange✨
Kartu Undangan Softcover + Amplop Hazelnut Foliage Hibiscus Sunny Orange✨
 
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggiKEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
KEL 1 KCKT KAI.pptx. kromatografi cair kinerja tinggi
 

Design UI With Figma.pptx

  • 1. UI DESIGN WITH FIGMA KKN KELOMPOK 10 DESA GILANGHARJO 2022
  • 2. “Tak Kenal Maka Tak Sayang”
  • 3.
  • 4.
  • 5. Agenda Kenapa perlu belajar UI design? Pengenalan UI dan Figma Hands-on Figma sebagai Tools
  • 7. Sedang terjadi transformasi digital pada berbagai industri/perusahaan Indonesia membutuhkan lebih dari 9 juta talenta digital pada tahun 2023, menurut Bapak Presiden Jokowi* Produk designer adalah 1 dari 5 profesi yang paling direkomendasikan oleh Kemendikbud Ristek, Mas Menteri Nadiem Makarim** 7 milliar lebih manusia dengan 4 Milliar lebih pengguna smartphone tehubung ke internet dengan beragam aplikasi/game***
  • 8.
  • 10. Apa itu UI ? UI kepanjangan dari user interface. User Interface adalah tampilan visual sebuah produk yang menghubungkan sistem dengan pengguna (user). Sistem ini bisa berupa website, aplikasi atau lainnya. User interface atau UI adalah tampilan yang meliputi bentuk, warna, dan tulisan yang didesain semenarik mungkin. Nah, karena user interface adalah tampilan sebuah produk dilihat oleh pengguna, maka harus tampak menarik. Singkatnya, user interface design itu harus diperhatikan.
  • 11.
  • 12. Apa Fungsi dan Seberapa Penting User Interface Menciptakan Kesan Pertama bagi Pengguna 01 Meningkatkan Penjualan dan Pertumbuhan Bisnis 04 Memberikan Pengalaman Pengguna yang Baik 02 Meningkatkan Kualitas Branding 05 Memudahkan Interaksi pengguna dengan produk 03 Meningkatkan kualitas estetika di dalam situs atau aplikasi. 06
  • 13. Karakteristik User Interface yang baik 1. Jelas dan Ringkas 1. Desain Responsive 1. Informasi Terstruktur 1. Konsisten 1. Kontras Warna yang Baik 1. Intuitif
  • 14.
  • 15.
  • 18. Sekian dan Terima Kasih Semoga Bermanfaat

Editor's Notes

  1. Analoginya seperti ini. Sebuah rumah akan dilihat dari halaman depan rumah, letak pintu utama, dan jendela. Nah, user interface adalah tampilan rumah yang Anda lihat itu. Penataan tampilan UI adalah hal lumrah pada sistem operasi, aplikasi, website, maupun blog. Sebagai contoh, Anda pasti pernah melihat tampilan menu-menu aplikasi pada smartphone Anda, bukan? Jika Anda membuka aplikasi Google Play Store, yang disebut user interface adalah sebagai berikut:
  2. Secara teknis, empat komponen dasar pembentuk user interface adalah: Tata letak – penempatan elemen UI yang digunakan Warna – warna dari desain antar muka secara umum Tipografi – kombinasi huruf yang digunakan di user interface Grafik – ikon yang digunakan sebagai ilustrasi penggunaan sistem Jadi, tampilan UI dirancang dengan desain beberapa aspek di atas. Jadi, layout, gambar logo, warna, dan typography itu penting. Dengan pemilihan yang tepat dapat mempercantik tampilan aplikasi. Nah, semua elemen yang memperindah tampilan tersebut termasuk dalam elemen UI.
  3. 1. Menciptakan Kesan Pertama bagi Pengguna Ketika datang ke sebuah toko yang etalasenya rapi, Anda pasti merasa nyaman berbelanja di situ. Sebab, bisa menemukan produk yang Anda butuhkan dengan cepat. Nah, sama seperti di toko, di aplikasi dan website, fungsi user interface adalah menciptakan kesan yang baik sehingga pengguna betah menggunakannya. Jika produk Anda memiliki UI yang baik, pengguna pasti akan menganggap bahwa website Anda ramah bagi pengunjung. Sebaliknya, apabila website atau aplikasi Anda UI-nya buruk, pengguna akan ragu untuk menggunakan atau mengunjunginya. Mereka akan memilih untuk ke website lain yang lebih baik tampilannya. 2. Memberikan Pengalaman Pengguna yang Baik Selain tampilan yang baik, tentunya produk harus mudah digunakan agar bermanfaat bagi penggunanya. Tidak hanya pada penggunaan pertama kali, tapi juga untuk pemakaian berikutnya. Itulah mengapa, fungsi user interface adalah memastikan pengalaman pengguna yang baik di setiap halaman website yang diakses. Dalam mendesain user interface, Anda bisa memperjelas letak menu, tombol, dan elemen lainnya. Dengan begitu, akan mendukung navigasi yang baik di website atau aplikasi. Pentingnya UI bagi Sebuah Produk Produk Anda harus memiliki user interface yang baik agar mampu mendukung beberapa tujuan berikut ini: 1. Memudahkan Interaksi pengguna dengan produk Pada dasarnya, user interface adalah semua elemen visual yang ada di sebuah produk. Hal itu termasuk desain layar, tombol, ikon, gambar, teks, dan semua elemen visual lainnya berperan sebagai jembatan produk dengan pengguna. UI pada sebuah produk baik aplikasi maupun website menjadi sangat penting karena dengan UI pengguna bisa berinteraksi dengan produk tersebut. Tampilan UI yang baik pastinya akan memudahkan interaksi pengguna dengan produk. Jika interaksi pengguna berjalan baik, kebutuhan dan tujuan pengguna menggunakan produk dapat terpenuhi. Tidak sampai di situ, jika pengguna merasa puas, hal itu akan meningkatkan loyalitas pengguna. Itulah mengapa produk dengan UI yang baik akan unggul dari produk yang lain. Oleh karena itu, banyak perusahaan digital mulai menciptakan solusi fitur yang elegan mudah digunakan. 2. Meningkatkan Penjualan dan Pertumbuhan Bisnis Tujuan utama setiap bisnis tentu meningkatkan penjualan dan pertumbuhan bisnis. Mengembangkan user interface adalah salah satu cara meningkatkan pertumbuhan tersebut. Desain UI dapat meningkatkan pengalaman dan kepuasan pengguna hingga pada akhirnya bisa meningkatkan jumlah pengguna. Karena UI berfokus pada kepuasan dan kesenangan pengguna, maka UI berperan penting dalam kesuksesan bisnis Anda. UI yang baik juga akan membangun reputasi produk lebih baik. Itulah mengapa UI menjadi sangat penting pada setiap produk untuk menyukseskan bisnis. 3. Meningkatkan Kualitas Branding Selain penting untuk interaksi dan pertumbuhan bisnis, kegunaan user interface adalah sebagai ciri khas sebuah produk. Sederhananya kita bisa menyebutnya sebagai branding. Misalnya website produk fashion, kuliner, dan teknologi. Contoh lainnya, yaitu tampilan sistem operasi iOS dan Android. Elemen tampilan UI yang sesuai dengan konsep produk tentu akan lebih mudah dikenal oleh pengguna. Desain UI seharusnya lebih dari sekadar visual yang cantik dan enak dipandang. Desain UI secara langsung akan mencerminkan nilai dan kualitas produk. Persaingan dagang yang semakin ketat membuat setiap perusahaan harus berlomba-lomba menciptakan tampilan yang menarik dan menyenangkan ketika digunakan.
  4. Karakteristik User Interface yang Baik beserta Contohnya Jika Anda ingin membuat aplikasi, website, blog, atau produk digital lainnya, Anda juga harus memastikan bahwa tampilan UI-nya disukai oleh pengunjung. Untuk memastikan hal itu, Anda harus mengetahui karakteristik user interface yang baik. Berikut ini kami jabarkan karakteristik apa saja yang dibutuhkan untuk membuat desain UI yang bagus. 1. Jelas dan Ringkas User interface website yang bagus haruslah jelas. Namun, Anda juga harus membuat desain yang ringkas. Jika Anda terlalu panjang membuat definisi dan penjelasan, website Anda akan akan terlihat berantakan. Pengunjung juga akan menghabiskan waktu hanya untuk membaca deskripsi dalam website Anda. Sebisa mungkin, buatlah penjelasan yang ringkas dan tidak terlalu panjang. 2. Desain Responsive Desain website yang responsif membuat pengunjung dapat mengakses website Anda di berbagai perangkat seperti PC desktop dan mobile dengan baik. Sederhananya, jika pengunjung website membuka website Anda di layar ponselnya, tampilan website Anda akan menyesuaikan resolusi ponsel Anda. Desain yang tidak responsif ini akan menyusahkan pengunjung untuk melihat isi website Anda. Terlebih website Anda merupakan website toko online. Bisa-bisa pengunjung akan langsung meninggalkan website Anda. 3. Informasi Terstruktur Pernah melihat tampilan desain yang sangat ramai dan penuh dengan informasi namun tidak tertata dengan baik? Sekarang mari bandingkan kedua gambar di bawah ini untuk mengetahui tampilan dengan informasi yang terstruktur. 4. Konsisten Konsistensi pada desain interface akan memudahkan pengguna memahami tampilan website Anda. Pengguna bisa mempelajari fungsi-fungsi tombol, icon, maupun tabs yang ada pada website Anda. Apabila desain tampilan website Anda tidak konsisten, pengguna harus mempelajari fungsi-fungsi tersebut dari awal. Beberapa halaman yang terdapat pada website sebisa mungkin memiliki desain yang tidak terlalu berbeda. Sebagai contoh, tampilan program Microsoft Office. Meskipun telah diperbarui beberapa kali, fungsi-fungsi ataupun tombol-tombol pada Microsoft Office tersebut tidak banyak berubah. Pengguna masih dapat mengetahui letak tombol print dan save dengan melihat iconnya. 5. Kontras Warna yang Baik Komponen yang sangat penting dalam desain user interface adalah warna. Pemilihan warna dalam desain user interface sangatlah penting. Website dengan warna yang hampir mirip tentu akan membuat pengguna sulit menangkap informasi yang ingin disampaikan. Misalnya, Anda memilih warna putih sebagai background, pastikan Anda menggunakan font colour yang kontras dengan putih. Jika tidak, informasi pada tampilan Anda sulit dibaca oleh pengguna. Tampilan desain UI dikatakan baik jika desain tersebut intuitif. Maksudnya, ketika mereka menggunakan produk digital Anda, mereka tidak perlu berpikir tentang apa yang mereka lakukan. Itulah mengapa seorang desainer harus memikirkan bagaimana pengguna berinteraksi dengan produk Anda dan meminimalkan waktu yang dibutuhkan untuk menggunakan produk. Dengan begitu pengguna bisa menggunakan produk Anda tanpa perlu bertanya tentang cara penggunaannya.
  5. Dari kedua tampilan tersebut, Anda tentu bisa langsung menebak tampilan mana yang lebih baik. Hal ini karena dari tampilan pertama dibuat secara ringkas, padat, dan jelas dalam menampilkan produk-produknya. Sementara itu, pada tampilan kedua, Anda melihat tampilan yang berantakan. Hal itu akan membuat pengguna bingung memilih produk.
  6. Bisa dilihat bahwa desain gambar pertama menampilkan informasi yang tidak terstruktur dan tumpang tindih. Hal itu dapat membuat pengguna kesulitan dalam menangkap informasi. Membuat tampilan UI dengan informasi yang terstruktur bisa dilakukan dengan memilih jenis dan warna font yang senada. Untuk beberapa informasi yang ditonjolkan, Anda bisa menambah ukuran font. Agar tidak tumpang tindih, Anda sebaiknya tidak memasukkan banyak elemen yang tidak terlalu penting sehingga membuat tampilan berantakan.