1

PENGANTAR
UI/UX DESIGN

Praktikum Internet dan Bisnis ICT

2 Kata “desain” adalah kata baru yang indonesiakan
Apa itu design?
Kenali design terlebih dahulu
Praktikum Internet dan Bisnis ICT
dari bahasa inggris: design. Sebetulnya kata
“rancang” atau “merancang” adalah terjemahan
yang dapat digunakan. Namun dalam
perkembangannya kata “desain” menggeser makna
kata “rancang” karena kata tersebut tidak dapat
mewadahi kegiatan, keilmuan, keluasan dan pamor
profesi atau kompetensi Desainer ( Sachari, 2000).
Melalui kajian etimologi, diketahui bahwa Design
berasal dari bahasa latin yaitu: designare yang
berarti: membuat, membentuk, menandai,
menunjuk. Pengertian Design sendiri dalam Kamus
Oxford adalah Rencana atau gambar yang dibuat
untuk memperlihatkan tampilan dan fungsi dari
bangunan, pakaian, atau objek lainnya sebelum
benar-benar dibuat. Selain itu, oxford juga
mencantumkan opsi definisi lain untuk desain, yaitu:
“corak dekoratif”.
Sementara itu ketika diserap dan digunakan oleh
Bahasa Indonesia, berdasarkan KBBI makna Design
menjadi: 1. kerangka bentuk; rancangan, 2. motif;
pola; corak.
3

Praktikum Internet dan Bisnis ICT

Analogi UI & UX
4

Praktikum Internet dan Bisnis ICT

Analogi UI & UX
5

Singkatnya, user experience adalah bagaimana

pengalaman pengguna dalam
User Experience berinteraksi/menggunakan produk digital Anda.
Pengalaman ini dilihat dari betapa mudahnya
pengguna untuk mendapatkan apa yang mereka
inginkan dari produk tersebut.
Dengan kata lain, user experience produk yang
Pengertian UX bagus tidak akan menyulitkan pengguna untuk
Praktikum Internet dan Bisnis ICT

mencapai tujuan mereka. Entah itu dari desain

UI yang friendly, produk yang ringan untuk
diakses, menu yang tidak berbelit-belit, dan lain
sebagainya.
6

User Interface User Interface adalah tampilan visual sebuah

produk yang menjembatani sistem dengan
pengguna (user). Tampilan UI dapat berupa
bentuk, warna, dan tulisan yang didesain
semenarik mungkin. Secara sederhana, UI adalah
Pengertian UI
bagaimana tampilan sebuah produk dilihat oleh
Praktikum Internet dan Bisnis ICT

pengguna.
Perbedaan UI & UX 7

Perbedaan User Interface (UI) User Experience (UX)

Tujuan Membuat tampilan produk lebih Memberikan kenyamanan saat

menarik memakai produk

Praktikum Internet dan Bisnis ICT

Fokus Berfokus pada tampilan yang Berfokus pada kenyamanan
bagus pengguna
Elemen Animasi, typography, warna, Usability, navigasi, struktur desain,
video, buttons dll fitur-fitur , interaction design dll
Based On Desain berdasarkan riset desain Desain berdasarkan riset pengguna
dan konsep produk
Tools Tools yang digunakan Flinto, Tools yang digunakan Sketch,
Principle, Frame X, Adobe Invasion, Figma, Adobe XD,
Illustrator & Figma Axure
Pre-Building Berupa mockup Berupa wireframe dan prototype
PERAN PENTING 8

UI/UX DESIGN
Desain UI/UX memainkan peran penting dalam pertumbuhan
bisnis dengan meningkatkan pengalaman pengguna dan
kepuasan pelanggan. Kenyamanan dan kepercayaan yang
dibangun saat menggunakan situs atau aplikasi pada akhirnya

Praktikum Internet dan Bisnis ICT

akan membantu meningkatkan jumlah pengguna.
Dengan banyaknya kompetitor yang menawarkan berbagai
pilihan dan alternatif produk, Anda harus pintar mencari
celah untuk menarik perhatian pengguna. Aplikasi UI dan
UX design yang tepat bisa membantu mendapatkan
kepercayaan pengguna dan membuat mereka menggunakan
aplikasi atau situs web Anda untuk mendapatkan apa yang
mereka cari. Jumlah pengguna yang Anda dapatkan di situs
web atau aplikasi Anda menjadi tolak ukur keberhasilan
desain UI / UX yang digunakan.
 9

Praktikum Internet dan Bisnis ICT

SCOPE UI/UX DESIGN
10

Praktikum Internet dan Bisnis ICT

Ruang Lingkup
UI/UX Design
UX DESIGNER 11

Deskripsi Kerja

Menganalisis Kompetitor Wireframing dan Prototyping

Menganalisis Costumer Research dan User Research Mengembangkan Perencanaan

Product Structure and Strategy Testing

Melakukan Content Development Bekerjasama dengan UI designer

dan developer
UI DESIGNER 12

Deskripsi Kerja

Merancang Konsep Dari Aplikasi Atau Website Melakukan UI Prototyping

Bekerja Sama Dengan UX Designer Membuat Animasi Yang Interaktif

Mekalakukan Branding Atau Graphic Development Mengadaptasi Desain Yang Cocok

Menuliskan User Guide Dan Storyline Melakukan Implementasi Bersama Developer

13

HUBUNGAN ANTARA
UI dan UX

Praktikum Internet dan Bisnis ICT

14

1 Masalah

Proses 2 Solusi

UI/UX Design
3 Brainstorming

4 Design

5 Pengujian
 15

Tools Untuk UI/UX Design

16
Adaptable

Keterampilan Research

yang Dibutuhkan
Interaction Design
Praktikum Internet dan Bisnis ICT

Information Architecture

Design Process

Visual Design
16
Persiapan Karir
• Kenali terlebih dahulu: apa itu UI danUX Designer

• Tentukan Fokus kemana? UI atau UX Designer

• Mengetahui kunci utama menjadi UI UX Designer

• Belajar Tools dan mulai desain pertamamu

• Mencari banyak sumber referensi belajar

• Mulai untuk bergabung dengan suatu komunitas

Praktikum Internet dan Bisnis ICT

Pengantar UI/UX Desain
18

TERIMA KASIH!
APAKAH ADA PERTANYAAN?

Praktikum Internet dan Bisnis ICT