School of Information Systems

Design System Guides Populer yang Wajib Diketahui

Dalam suatu perusahaan, biasanya mereka memiliki ciri khas mereka sendiri dalam design. Oleh sebab itu, perusahaan pun membuat design system mereka sendiri sehingga seluruh tim yang mengerjakan design memiliki sumber untuk design yang sama. Hal tersebut tentu dilakukan dengan maksud untuk menjaga kekonsistenan dari design yang dibuat dan mempermudah tim untuk membuat design tersebut. Dalam artikel in, kita akan membahas beberapa design system guides dari perusahaan-perusahaan yang wajin kalian ketahui agar dapat menginspirasi design system yang kalian buat sendiri.

  1. Google Material Design System

Sudah jelas sekali bahwa design system satu ini adalah milik perusahaan Google yang merupakan perusahaan tekonologi yang besar, bahkan dianggap sebagai salah satu dari Big Four perusahaan teknologi. Google membagikan design system mereka kepada publik sehingga orang-orang dapat mengikutinya. Design system yang dibuat oleh Google ini benar-benar sangat memperhatikan kepada setiap detail yang ada.

Google Material Design System memiliki beberapa fitur, antara lain adalah layout, color, typography, components, material theming, design source files, mobile guidelines, dan starter kits. Untuk dapat menggunakan Google Material Design System, kita dapat men-download-nya melalui software design seperti Figma ataupun Sketch. Disana mereka juga melampirkan cara untuk dapat menggunakan komponen dan tema yang ada dalam design system tersebut untuk membuat suatu aplikasi.

  1. Apple Human Interface Guidelines

Siapa yang tidak tahu dengan tampilan elegan dari Apple? Design system milik Apple ini memberikan sumber design yang sangat banyak dan berharga untuk diterapkan dalam design kita sendiri. Apple membuat design system ini dengan mengikuti prinsip-prinsip design Steve Jobs, yaitu:

  • Craft, Above All

Dimana menunjukkan bahwa mereka cermat dan teliti terhadap detail dan juga presisi

  • Empathy

Merupakan proses untuk menekankan empati dengan kebutuhan pengguna dan hubungan yang erat dengan perasaan dari pengguna

  • Focus

Fokus dengan apa yang benar-benar penting dan menghilangkan semua peluan yang tidak penting

  • Impute

Menghasilkan opini tentang perusahaan ataupun produk berdasarkan bahasa dan juga praktik design khusus

  • Friendliness

Mengenali bahwa perangkat teknologi bisa ramah, mudah didekati, dan hal ini dapat menarik bagi pengguna yang pemula maupun yang sudah mahir

  • Finding simplicity for the future in metaphors from the past

Membuat semuanya menjadi lebih sederhana

Dalam design system Apple memiliki beberapa fitur juga, yaitu theme, visual index, app architecture, user interaction, system capabilities, visual design, icons and images, window and view, menus, buttons, fields and labels, selectors, indicators, touch bar dan extensions.

  1. Atlassian Design System

Atlassian memanfaatkan pengalaman digital untuk dapat meningkatkan produktivitas dan potensi dalam tim. Dimana design system milik Atlassian ini dapat membantu orang dan juga tim untuk menjadi lebih efektif dengan cara sebagai berikut:

  • Membangun kepercayaan dalam setiap interaksi
  • Menghubungkan seluruh orang untuk berkolaborasi dengan lebih baik
  • Menyesuaikan tujuan dan kefamiliaran
  • Mendorong momentum dari ujung ke ujung
  • Memandu penguasaan untuk nilai yang lebih besar

Terdapat beberapa fitur yang ada di dalam Atlassian Design System, seperti brand guidelines, design principles, illustration, product, personality, prototyping, dan marketing. Jika kita ingin menggunakan Atlassian Design System, kita dapat menggunakannya dengan cara men-download melalui Figma Community.

  1. Uber Design System

Uber merupakan perusahaan yang menawarkan layanan seperti ridesharing peer-to-peer, layanan ride hailing, pengiriman makanan, dan sistem mikromobilitas dengan sepeda listrik dan skuter. Agar jenis layanan ini dapat bekerja dengan lancar, tentu Uber membutuhkan design system yang efektif yang dibagikan perusahaan dengan seluruh dunia. Uber Design System memiliki fitur utama yang antara lain adalah:

  • Logo
  • Brand Architecture
  • Color
  • Composition
  • Iconography
  • Illustration
  • Motion
  • Photography
  • Tone of Voice
  • Typography
  1. Shopify Design System Polaris

Perusahaan Shopify merupakan platform e-commerce global yang memiliki tujuan untuk membantu orang mencapai kemandirian dengan mempermudah memulai, menjalankan, dan mengembangkan bisnis. Tidak heran jika design system mereka memiliki prinsip yang berfokus untuk menciptakan pengalaman perdagangan yang lebih baik dan lebih mudah untuk diakses. Design system Shopify yang disebut dengan Polaris ini memiliki nilai-nilai inti perusahaan, seperti:

  • Considerate

Menunjukan kepedulian dan perhatian terhadap orang-orang yang menggunakan alat dan produknya

  • Empowering

Menyediakan alat yang tepat untuk dapat mencapai apapun yang orang-orang ingin lakukan

  • Crafted

Merasa seperti dibuat dengan tingkat keahlian yang tertinggi

  • Efficient

Membantu orang mencapai tujuan mereka dengan cepat, akurat, dan dengan usaha yang tidak terlalu banyak

  • Trustworthy

Selalu membangun kepercayaan orang-orang

  • Familiar

Membuat orang-orang merasa nyaman untuk menggunakan produknya, baik itu pertama kalianya atau sudah kesekian kalinya

Seperti design system lainnya, Polaris ini juga memiliki fitur-fitur dalam design systemnya yaitu colors, accessibility, resources, typography, illustrations, sounds, icons, interaction states, spacing, dan data visualizations. Kita dapat menggunakan design system Polaris ini untuk menghasilkan pengalaman produk yang lebih baik untuk setiap proyek terkait dengan e-commerce dengan cara menggunakan bahasa, konten dalam design, elemen visual, serta komponen UI. Kita dapat menggunakan design system ini dengan men-donwloadnya melalui Figma Community.

Sumber:

https://designerup.co/blog/10-best-design-systems-and-how-to-learn-and-steal-from-them/

https://www.uxpin.com/studio/blog/best-design-system-examples/

Anastasya Anirudha

    Deprecated: Function get_option was called with an argument that is deprecated since version 5.5.0! The "comment_whitelist" option key has been renamed to "comment_previously_approved". in /var/www/html/public_html/sis.binus.ac.id/wp-includes/functions.php on line 6031