Blog Home
Table of Content

Mengenal Ant Design System Pada React

By : Sapto 28 February 2022

Mengenal Ant Design System Pada React

UI sistem adalah sekumpulan komponen design yang diatur oleh sebuah UI standar untuk kumpulan tema, style, dan filosofi design yang kemudian dipergunakan oleh designer ketika mengembangkan sebuah aplikasi. Salah satunya adalah Ant Design System.

Apa itu Ant Design System

Ant Design System adalah kode open-source untuk library React UI untuk enterprise-level. Ant Design dibuat oleh Alibaba, dan saat ini digunakan oleh nama-nama besar seperti Alibaba, Tencent, Baidu, Lenovo, dan lain lain. Ant Design adalah library yang berisikan komponen yang digunakan untuk membuat UI interaktif, yang disebut-sebut mudah digunakan serta mudah diintegrasikan. 

Ant Design adalah salah satu UI library paling populer di Github dengan lebih dari 56 ribu rating/star di 2021, atau tumbuh dari sekitar 40 ribu di tahun 2018, serta lebih dari 340 ribu kali download di npm. Library Ant Design terdiri atas beberapa code, yakni 43.7% TypeScript, 31.1% JavaScript, 24.9% Less, and 0.3% lainnya. 


Npm trend Ant Design dibandingkan dengan MUI dan react-bootstrap
Contoh ikon yang dipakai di library Ant Design

Design Value dari Ant Design

Design value dari Ant Design memberikan internal standar untuk evaluasi dan inspirasi bagi para designer, serta memberikan panduan dan solusi untuk permasalahan desain yang spesifik. Ada empat design value dari Ant Design :

Natural

Iterasi di dunia digital membuat produk semakin kompleks, tetapi di saat yang sama ada batasan pada kesadaran manusia dan perhatian manusia. Oleh karena itu Ant Design mengedepankan natural interaction sebagai arah pengembangan Ant Design. 

Menurut psikologi kognitif, 80% dari informasi eksternal didapatkan secara visual. Oleh karenanya visual element yang ada pada design interface harus mengadopsi law of nature, sehingga mengurangi kendala kognitif dan memberikan kesan smooth dan otentik. 

Natural user behaviour. Kaitannya dengan interaksi pengguna dengan sistem yang kita bangun, seorang desainer harus benar-benar memahami hubungan antara user, peran-peran sistem, task objective, serta mampu mengorganisasi fungsi-fungsi dari sistem yang ada dengan servis yang diberikan kepada user

Certain

Interface adalah tempat terjadinya interaksi antara user dan sistem. Oleh karena kenaturalan menjadi prioritas, maka sebuah interface produk yang dibuat dengan menggunakan Ant Design sudah seharusnya pasti, terprediksi, dan tidak ada ketidakteraturan didalamnya. Semuanya sudah dapat diprediksi demi menciptakan familiaritas untuk user. 

Familiaritas ini akan mengurangi waktu user untuk mempelajari sistem, mengurangi biaya operasional, serta meningkatkan efisiensi kerja. Hal ini akan diterapkan di semua produk, terminal, dan sistem.

Meaningful

Sebuah produk tidak dibuat untuk memenuhi kebutuhan designer, tetapi untuk memenuhi kebutuhan user. Design sebuah produk sudah seharusnya berfokus pada user (user-centric), untuk memudahkan setiap user mencapai goals-nya. Dengan berdasar pada value natural dan certainty sebelumnya, Ant Design berusaha menawarkan sistem yang dapat membuat interaksi antara manusia dengan sistem dapat berjalan secara meaningful

Artinya, tiap objektif dapat dengan mudah diketahui dan diselesaikan. Design yang berfokus pada penyelesaian sebuah misi, tidak banyak distraksi bagi user. 

Growing

Kemampuan pertumbuhan bagi sebuah produk enterprise diiringi dengan evolusi peranan user. Designer diharapkan dapat membuat design dengan visi akan development serta mempertimbangkan pertumbuhan dari sisi manusia dan juga komputer. 

Source

Ant.design
Betterprogramming.pub
Sitepoint