10 Sistem Desain Teratas di tahun 2023

May 08 2023

Sistem desain adalah kumpulan komponen, pedoman, dan aset yang dapat digunakan kembali yang digunakan untuk membangun antarmuka pengguna yang konsisten dan kohesif di berbagai platform dan perangkat. Ini adalah kerangka kerja yang memberi desainer dan pengembang seperangkat aturan, prinsip, dan alat untuk membuat dan memelihara bahasa desain terpadu di seluruh organisasi.

Sistem desain biasanya mencakup berbagai elemen, seperti tipografi, palet warna, ikonografi, kisi, komponen UI, dan pola desain. Mereka juga sering dilengkapi dengan dokumentasi dan pedoman terperinci yang menguraikan bagaimana elemen-elemen ini harus digunakan, memastikan konsistensi dan mengurangi kemungkinan inkonsistensi atau kesalahan desain.

Tujuan utama dari sistem desain adalah untuk meningkatkan kolaborasi dan produktivitas antara desainer dan pengembang dengan menyediakan bahasa dan perangkat bersama. Dengan memiliki serangkaian elemen yang telah ditentukan sebelumnya, tim dapat bekerja lebih efisien, mengurangi pekerjaan yang berlebihan, dan membuat desain dengan kualitas lebih tinggi yang lebih mudah dipelihara dan diskalakan dari waktu ke waktu. Selain itu, sistem desain dapat membantu memastikan branding dan identitas visual perusahaan tetap konsisten di semua titik kontak dan platform.

Di bawah ini adalah beberapa sistem desain populer yang telah mendapatkan daya tarik dalam industri desain dan banyak digunakan oleh desainer dan pengembang.

1. Google — Sistem Desain Material

Sistem Desain Material Google adalah sistem desain komprehensif yang menawarkan serangkaian pedoman, komponen, dan alat untuk membuat antarmuka pengguna yang intuitif dan responsif. Desain Material diperkenalkan oleh Google pada tahun 2014, dan didasarkan pada prinsip desain material, yang menekankan penggunaan bayangan dan cahaya untuk menciptakan kesan kedalaman dan hierarki, tipografi yang berani, dan palet warna yang cerah.

Sistem Desain Material memberi desainer dan pengembang berbagai sumber daya, seperti komponen UI, ikon, dan tipografi, yang konsisten di berbagai platform dan perangkat. Ini juga mencakup pedoman dan prinsip desain yang membantu memastikan konsistensi, skalabilitas, dan kegunaan dalam proses desain.

Beberapa fitur utama Sistem Desain Material Google meliputi:

Beragam komponen UI yang dapat disesuaikan, seperti tombol, kartu, kotak dialog, dan bilah navigasi, yang mudah digunakan dan diterapkan.
Serangkaian pedoman dan prinsip desain yang komprehensif yang membantu memastikan konsistensi dan kegunaan di berbagai produk dan platform.
Serangkaian alat dan sumber daya yang tangguh, seperti plugin Sketch dan template desain, yang membantu desainer dan pengembang membuat desain berkualitas tinggi dengan cepat dan efisien.
Fokus pada aksesibilitas dan inklusivitas, dengan pedoman untuk mendesain antarmuka pengguna yang dapat digunakan oleh semua orang, termasuk penyandang disabilitas.

Situs web —https://m3.material.io/

2. Sistem Desain Atlassian

Atlassian Design System (ADS) adalah sistem desain yang dikembangkan oleh Atlassian, sebuah perusahaan perangkat lunak yang menciptakan alat bagi tim untuk berkolaborasi dan mengelola proyek. ADS dirancang untuk memberikan pengalaman yang konsisten dan kohesif di seluruh produk dan layanan Atlassian, sekaligus memungkinkan penyesuaian dan fleksibilitas.

ADS menawarkan berbagai sumber daya untuk desainer dan pengembang, termasuk komponen UI, panduan desain, dan standar aksesibilitas. Ini juga mencakup bahasa desain yang menekankan kesederhanaan, kejelasan, dan kegunaan.

Beberapa fitur utama Sistem Desain Atlassian meliputi:

Serangkaian komponen UI lengkap yang konsisten di semua produk dan layanan Atlassian, termasuk tombol, formulir, dan bilah navigasi.
Pedoman dan prinsip desain yang membantu memastikan konsistensi dan kegunaan di berbagai platform dan perangkat.
Standar dan pedoman aksesibilitas yang membantu memastikan bahwa produk dan layanan Atlassian dapat digunakan oleh semua orang, terlepas dari disabilitas atau keterbatasannya.
Dapat disesuaikan dan fleksibel, memungkinkan tim menyesuaikan sistem desain dengan kebutuhan dan persyaratan khusus mereka.
Fokus pada kolaborasi dan kerja tim, dengan sumber daya dan alat yang membantu desainer dan pengembang bekerja sama secara lebih efektif.

Situs web -https://atlassian.design/

3. Microsoft — Sistem Desain Lancar

Fluent Design System adalah sistem desain yang dikembangkan oleh Microsoft yang menyediakan serangkaian panduan, komponen, dan alat yang komprehensif untuk menciptakan pengalaman pengguna yang imersif, menarik, dan intuitif di seluruh produk dan layanan Microsoft. Fluent Design System didasarkan pada lima prinsip desain utama: cahaya, kedalaman, gerak, material, dan skala.

Beberapa fitur utama Sistem Desain Lancar meliputi:

Serangkaian komponen UI lengkap yang konsisten di semua produk dan layanan Microsoft, termasuk tombol, kartu, dan bilah navigasi.
Fokus pada cahaya, kedalaman, gerakan, material, dan skala, yang menciptakan rasa kedalaman dan hierarki, serta menghidupkan elemen melalui gerakan dan animasi.
Sistem desain yang fleksibel dan dapat disesuaikan yang memungkinkan penyesuaian dan fleksibilitas, memungkinkan tim membuat desain yang memenuhi kebutuhan dan persyaratan khusus mereka.
Fokus pada aksesibilitas dan inklusivitas, dengan pedoman untuk mendesain antarmuka pengguna yang dapat digunakan oleh semua orang, termasuk penyandang disabilitas.
Berbagai alat dan sumber daya desain, termasuk templat desain, palet warna, dan tipografi, yang membantu desainer dan pengembang membuat desain berkualitas tinggi dengan cepat dan efisien.

Situs web —https://www.microsoft.com/design/fluent/#/

4. Shopify — Sistem Desain Polaris

Shopify Polaris adalah sistem desain yang dikembangkan oleh Shopify, sebuah perusahaan e-niaga yang menyediakan alat untuk toko online. Polaris dirancang untuk memberikan pengalaman yang konsisten dan kohesif di semua produk dan layanan Shopify, sekaligus memungkinkan penyesuaian dan fleksibilitas.

Polaris menawarkan berbagai sumber daya untuk desainer dan pengembang, termasuk komponen UI, panduan desain, dan standar aksesibilitas. Ini juga mencakup bahasa desain yang menekankan kesederhanaan, kejelasan, dan kegunaan.

Beberapa fitur utama dari Shopify Polaris meliputi:

Serangkaian komponen UI lengkap yang konsisten di semua produk dan layanan Shopify, termasuk tombol, formulir, dan bilah navigasi.
Pedoman dan prinsip desain yang membantu memastikan konsistensi dan kegunaan di berbagai platform dan perangkat.
Standar dan pedoman aksesibilitas yang membantu memastikan bahwa produk dan layanan Shopify dapat digunakan oleh semua orang, terlepas dari disabilitas atau kekurangannya.
Dapat disesuaikan dan fleksibel, memungkinkan tim menyesuaikan sistem desain dengan kebutuhan dan persyaratan khusus mereka.
Fokus pada kolaborasi dan kerja tim, dengan sumber daya dan alat yang membantu desainer dan pengembang bekerja sama secara lebih efektif.

Situs web —https://polaris.shopify.com/

5. Sistem Desain Semut

Ant Design adalah sistem desain yang dikembangkan oleh Ant Group, anak perusahaan dari Alibaba Group. Ini adalah sistem desain yang komprehensif dan serbaguna yang menyediakan berbagai komponen UI, panduan desain, dan alat untuk desainer dan pengembang.

Ant Design didasarkan pada prinsip kesederhanaan, konsistensi, dan efisiensi, dan dirancang untuk membantu tim membuat desain berkualitas tinggi dengan cepat dan mudah. Ini mencakup serangkaian komponen UI, seperti tombol, formulir, dan bilah navigasi, serta pedoman dan prinsip desain yang membantu memastikan konsistensi dan kegunaan di berbagai platform dan perangkat.

Beberapa fitur utama dari Ant Design meliputi:

Serangkaian komponen UI lengkap yang mudah digunakan dan dapat disesuaikan.
Fokus pada aksesibilitas, dengan pedoman dan prinsip desain yang membantu memastikan bahwa Ant Design dapat digunakan oleh semua orang, terlepas dari disabilitas atau keterbatasannya.
Kompatibilitas lintas platform, dengan komponen UI yang berfungsi di berbagai platform dan perangkat.
Berbagai alat dan sumber daya desain, termasuk file Sketsa, kumpulan ikon, dan cuplikan kode.
Komunitas desainer dan pengembang yang bersemangat dan suportif yang berkontribusi pada sistem desain dan membantu memperbaikinya dari waktu ke waktu.

Situs web -https://ant.design/

6. IBM — Sistem Desain Karbon

IBM Carbon Design System adalah sistem desain yang dikembangkan oleh IBM, sebuah perusahaan teknologi multinasional yang menyediakan berbagai macam produk dan layanan. Carbon dirancang untuk memberikan pengalaman pengguna yang konsisten dan dapat diskalakan di semua produk dan layanan IBM, sekaligus memungkinkan penyesuaian dan fleksibilitas.

Carbon menawarkan berbagai sumber daya untuk perancang dan pengembang, termasuk komponen UI, pedoman desain, standar aksesibilitas, dan alat pengembangan. Ini juga mencakup bahasa desain yang menekankan kesederhanaan, kejelasan, dan kegunaan.

Beberapa fitur utama dari IBM Carbon Design System meliputi:

Serangkaian komponen UI komprehensif yang konsisten di seluruh produk dan layanan IBM, termasuk tombol, formulir, dan bilah navigasi.
Pedoman dan prinsip desain yang membantu memastikan konsistensi dan kegunaan di berbagai platform dan perangkat.
Standar dan pedoman aksesibilitas yang membantu memastikan bahwa produk dan layanan IBM dapat digunakan oleh semua orang, tanpa memandang cacat atau gangguan.
Dapat disesuaikan dan fleksibel, memungkinkan tim menyesuaikan sistem desain dengan kebutuhan dan persyaratan khusus mereka.
Fokus pada kolaborasi dan kerja tim, dengan sumber daya dan alat yang membantu desainer dan pengembang bekerja sama secara lebih efektif.

Situs web —https://carbondesignsystem.com/

7. AWS Memperkuat

AWS Amplify adalah sistem desain dan platform pengembangan yang dikembangkan oleh Amazon Web Services (AWS), platform komputasi awan yang menyediakan berbagai layanan untuk bisnis dan organisasi. AWS Amplify dirancang untuk membantu pengembang membangun aplikasi dan layanan yang dapat diskalakan dan didukung cloud dengan cepat dan efisien.

AWS Amplify menyertakan berbagai sumber daya dan alat untuk pengembang, termasuk pustaka, komponen UI, dan kerangka kerja pengembangan. Ini juga menawarkan seperangkat alat dan layanan pengembangan yang menyederhanakan proses membangun dan menerapkan aplikasi yang didukung cloud, seperti autentikasi, penyimpanan, dan analitik.

Beberapa fitur utama AWS Amplify meliputi:

Serangkaian pustaka dan komponen UI lengkap yang dapat digunakan untuk membangun aplikasi yang dapat diskalakan dan responsif untuk berbagai platform dan perangkat.
Kerangka kerja dan alat pengembangan yang menyederhanakan proses membangun dan menerapkan aplikasi yang didukung cloud, seperti autentikasi, penyimpanan, dan analitik.
Fokus pada keamanan dan kepatuhan, dengan sumber daya dan alat yang membantu memastikan bahwa aplikasi aman dan memenuhi persyaratan peraturan.
Berbagai opsi penyesuaian, memungkinkan pengembang untuk menyesuaikan sistem desain dengan kebutuhan dan persyaratan khusus mereka.
Integrasi dengan layanan AWS lainnya, seperti Amazon S3, Amazon Cognito, dan Amazon CloudFront, memungkinkan pengembang menggabungkan layanan ini dengan mudah ke dalam aplikasi mereka.

Situs web —https://aws.amazon.com/amplify/

8. Sistem Desain Audi

Audi Design System adalah bahasa dan sistem desain yang dikembangkan oleh pabrikan mobil Jerman Audi untuk memberikan identitas visual yang konsisten dan kohesif di seluruh produk dan platform digitalnya. Sistem desain mencakup berbagai elemen desain, termasuk tipografi, warna, tata letak, dan ikon, serta panduan untuk mendesain antarmuka dan pengalaman pengguna.

Audi Design System dirancang untuk mencerminkan nilai-nilai inti perusahaan, seperti inovasi, presisi, dan kemajuan, dan untuk menciptakan citra merek premium dan aspiratif. Sistem ini digunakan tidak hanya dalam desain mobil Audi tetapi juga dalam desain produk digitalnya, seperti situs web, aplikasi, dan antarmuka untuk hiburan dalam mobil dan sistem navigasi.

Beberapa fitur utama dari Audi Design System meliputi:

Fokus pada kesederhanaan dan minimalis, dengan garis yang bersih, tipografi yang jelas, dan palet warna yang terbatas.
Bahasa visual yang kohesif dan konsisten di semua produk dan platform, menciptakan identitas merek yang terpadu.
Penekanan kuat pada pengalaman pengguna, dengan pedoman untuk merancang antarmuka dan interaksi yang intuitif dan mudah digunakan.
Keseimbangan antara tradisi dan inovasi, yang mencerminkan sejarah keahlian dan keunggulan teknik Audi sekaligus merangkul teknologi dan tren desain baru.

Situs web —https://www.audi.com/ci/en/guides/user-interface/introduction.html

9. Spotify — Sistem Desain Belakang Panggung

Sistem Desain Backstage Spotify adalah sistem desain yang dibuat oleh platform streaming musik populer untuk menyediakan bahasa desain yang terpadu dan kohesif untuk portal pengembang internal dan alat terkait. Sistem Desain Backstage mencakup panduan untuk tipografi, warna, tata letak, dan ikonografi, serta panduan untuk mendesain antarmuka dan pengalaman pengguna.

Sistem Desain Backstage dirancang untuk menciptakan pengalaman yang konsisten dan intuitif bagi pengembang internal Spotify, memungkinkan mereka mengakses dan menggunakan alat serta sumber daya yang mereka perlukan dengan mudah untuk membangun dan memelihara platform. Sistem ini dibangun di atas kerangka kerja yang disebut Backstage, yang merupakan platform sumber terbuka yang dikembangkan oleh Spotify untuk mengelola portal pengembang.

Beberapa fitur utama dari Sistem Desain Backstage meliputi:

Fokus pada modularitas dan fleksibilitas, memungkinkan penyesuaian dan perluasan sistem desain yang mudah.
Penekanan kuat pada aksesibilitas dan kegunaan, dengan pedoman untuk mendesain antarmuka yang mudah dinavigasi dan digunakan untuk pengembang dari semua tingkat keahlian.
Bahasa visual yang terpadu dan konsisten di semua komponen dan alat Backstage.
Komitmen untuk pengembangan dan kolaborasi sumber terbuka, dengan kerangka kerja Backstage dan sistem desain tersedia untuk komunitas pengembang yang lebih luas.

Situs web —https://backstage.io/docs/dls/design/

10. Uber — Sistem Desain Dasar

Sistem Desain Dasar Uber adalah sistem desain komprehensif yang dikembangkan oleh raksasa berbagi tumpangan untuk menyediakan bahasa desain yang terpadu dan dapat diskalakan di seluruh produk dan platformnya. Sistem Desain Dasar meliputi panduan untuk tipografi, warna, tata letak, dan ikonografi, serta panduan untuk mendesain antarmuka dan pengalaman pengguna.

Sistem Desain Dasar dirancang untuk menciptakan pengalaman yang konsisten dan intuitif bagi pelanggan, pengemudi, dan pengguna Uber lainnya, sekaligus menyediakan bahasa desain yang fleksibel dan modular yang dapat disesuaikan dengan berbagai produk dan kasus penggunaan. Sistem ini dibangun di atas prinsip desain Uber, yang menekankan kesederhanaan, kejelasan, dan kegunaan.