Fundamental UI/UX

Timeline Perkembangan UI/UX

1990-an: Awal Mula GUI

Graphical User Interface (GUI) diperkenalkan melalui Windows 3.0 dan Mac OS. Desain sederhana dengan palet warna terbatas (16-256 warna) dan ikon pixelated.

Contoh: Windows 3.1, Macintosh System 7

Pengembangan: Dibuat dengan C/C++, fokus pada efisiensi karena keterbatasan hardware (RAM 1-4 MB, CPU 16 MHz).

Sumber: ToastyTech

Sumber: Archive.org

2000-an: Web 1.0 ke Web 2.0

Web bertransisi dari statis ke interaktif dengan CSS, JavaScript, dan AJAX. Fokus pada usability dan tata letak grid-based.

Contoh: MySpace, Early Google

Pengembangan: HTML4, CSS2, JavaScript, dan PHP untuk server-side scripting.

Sumber: Capital Commerce

Sumber: Web Design Museum

2010-an: Era Mobile dan Modern Design

Smartphone mempopulerkan desain responsif. Desain modern dengan fokus pada estetika dan fungsionalitas mendominasi.

Contoh: Apple 2010, SEGA 2013

Pengembangan: HTML5, CSS3, framework seperti Bootstrap dan React.js.

Sumber: Web Design Museum

Sumber: Web Design Museum

2020-an: Neumorphism dan AI

Desain menggabungkan neumorphism, animasi mikro, dan personalisasi berbasis AI. AR/VR meningkatkan pengalaman imersif.

Contoh: Apple, Gojek, Neumorphism UI, Figma, Uizard

Pengembangan: Next.js, integrasi AI untuk analitik pengguna.

Sumber: Themesberg

Sumber: Figma

Tentang UI/UX

Apa Itu UI Design?

User Interface (UI) Design adalah proses merancang tampilan visual produk, seperti website atau aplikasi. UI berfokus pada estetika, seperti warna, tipografi, dan tombol, untuk menciptakan antarmuka yang menarik dan mudah digunakan.

Apa Itu UX Design?

User Experience (UX) Design adalah proses memastikan produk nyaman dan intuitif digunakan. UX mencakup riset pengguna, navigasi, dan struktur desain untuk memberikan pengalaman yang memuaskan.

Perbedaan UI dan UX

Sumber: Medium

Elemen UI Penting

Konsistensi: Menggunakan palet warna biru-ungu, font Inter, dan efek glassmorphism untuk tampilan seragam.

Ketanggapan: Tombol dan gambar memberikan umpan balik visual seperti hover untuk interaksi aktif.

Kata-kata Familiar: Istilah seperti "Beranda" dan "Timeline" memudahkan navigasi.

Komponen UX Penting

Struktur Desain: Tata letak vertikal pada timeline dan roadmap memandu alur informasi.

Navigasi: Bottom menu mobile dan progress bar memastikan navigasi intuitif.

Aspek Visual: UX mendukung UI untuk tampilan estetis dan fungsional.

Interaksi: Efek hover dan tooltips meningkatkan keterlibatan pengguna.

UX: Branding, Content, dan Copywriting

UX mencakup branding untuk identitas visual konsisten, content yang relevan, dan copywriting yang jelas untuk pengalaman berkesan.

Tujuan UX Design

UX menjembatani tampilan dan sistem, menciptakan pengalaman intuitif dan memuaskan melalui user-centered design dan usability.

Latar Belakang UI/UX

UI/UX berkembang dari antarmuka sederhana di 1980-an hingga desain modern berbasis AI. UI fokus pada visual, UX pada pengalaman pengguna.

Peran UI/UX di Perusahaan

Perusahaan Besar: UX Designer (riset), UI Designer (visual), dan UX Copywriter (teks).

Perusahaan Kecil: UI/UX Designer menangani semua aspek untuk efisiensi.

Roadmap UI/UX

Fahami Fundamental UI/UX

Pelajari dasar-dasar UI seperti warna, tipografi, dan layout (Bootstrap), serta UX seperti riset pengguna & usability (UX Tools) dan visual pembelajaran singkat (YouTube) untuk membangun fondasi desain.

Perbanyak Praktik

Buat wireframe, prototype, atau antarmuka sederhana dengan alat seperti Figma, lalu uji dan perbaiki berdasarkan masukan pengguna.

Explore Trend

Ikuti tren desain seperti neumorphism, animasi mikro, atau AI untuk menciptakan antarmuka modern dan relevan.

Sumber: Faruq1997