10 Harika Tasarım Sistemi ve Kullanımı – Bilişim & Programlama
Grafik Animasyon Web Tasarım

10 Harika Tasarım Sistemi ve Kullanımı

Tasarım sistemleri çok popüler ve çoğu makale ne olduklarından ve bunları oluşturmak için en iyi uygulamalardan bahsederken, DesignerUp’ta bunları, felsefeleri daha iyi anlamalarına, keşfetmelerine ve öğrenmelerine yardımcı olmak için ürün tasarımı öğrencilerimizle birlikte bir öğretim aracı olarak çerçevelendiriyoruz. UI tasarımı, UX ve Ürün Tasarımının en iyi uygulamaları ve ilkeleri.

Tasarım sistemlerini iş akışınıza uygulamanın yanı sıra, tasarım sistemleri, sadece onları inceleyerek nasıl daha iyi kullanıcı deneyimleri ve arayüzleri oluşturacağınızı öğrenmek için muazzam bir kullanılmamış kaynaktır! Bir e-ticaret kullanıcı akışının nasıl tasarlanacağını anlamanın Shopify’dan daha iyi bir yolu var mı?!? Bunlara Tasarım Kalıpları diyoruz ve akıllı tasarımcılar bunları kendi tasarımlarıyla aldıkları kararları bilgilendirmek için nasıl kullandıklarını biliyorlar. Dünyanın en iyi şirketleri zaten yolu açtığında, onları gerçek kullanıcılarla test ettiğinde ve UI / UX ve ürün tasarım metodolojilerini çevrimiçi yayınladığında, UX tekerleğini yeniden icat etmeye gerek yok!

“Bazen çizdiğim her şeyin sadece gördüğüm milyonlarca ve milyonlarca çizimin bir birleşimi olduğunu düşünüyorum.”

Jean-Luc Godard

Tasarım sistemi nedir?

Özetle, bir tasarım sistemi, bir ürün tasarım şirketi için belgeler, makaleler, örnekler, kod parçacıkları, ekran görüntüleri, tasarım yönergeleri, bileşenler, felsefeler ve diğer dijital varlıklardan oluşan bir koleksiyondur. Genellikle bir web sitesi olarak (genel veya dahili) çevrimiçi olarak barındırılır. Parça UI seti, talimatlarla birlikte parça dokümantasyonu, dil ve kodlama yönergeleri olan büyük bir bilgi tabanı olarak düşünün.

Shopify Design System

Şirketler Neden Onları Yaptı?

Bir tasarım sistemi, tüm ürün ekibiyle (programcılar, mühendisler, tasarımcılar, ürün yöneticileri, C-suite ekibi vb.) Birlikte oluşturulur. İdeal olarak, üzerinde çalışmak için bir komite olarak bir araya gelirler; tüm mevcut dijital ürün varlıklarının (renkler, logolar, başlıklar, altbilgiler, formlar, kodlar vb.) envanterini almak ve nesnelerin nasıl tasarlanması, kodlanması, sunulması ve hakkında konuşulması gerektiği konusunda fikir birliğine varmaya çalışın.

Bu onların ana planı, tüm gerçeğin kaynağı ve ürünleri üzerinde çalışan herkesin her zaman aynı sayfada, tutarlı ve işlerin olması gerektiği gibi olmasını sağlamaya yönelik bir referanstır.

Uygulama düzeyinde, bir kodlayıcının yeni bir sayfada bir kod snippet’ini tekrar etmesi gerektiğinde, yeniden kullanılabilir bileşen kopyalayıp yapıştırmak için tam oradadır. Bir tasarımcının yeni bir açılış sayfası hazırlaması gerektiğinde, önceden tasarlanmış tüm UI sembolü öğeleri girmeye hazırdır ve tahribatsız bir şekilde düzenlenebilir. Bir pazarlamacının bir haber bülteni göndermesi gerektiğinde, kopyanın ne tür bir tonda yazılması gerektiği veya başlık resminin ne olması gerektiği konusunda hiçbir soru yoktur. Her şey orada, açıkça belirlenmiş ve herkes tartıştığı, katkıda bulunduğu ve üzerinde anlaştığı için neyin ve nasıl yapılması gerektiğine dair hiçbir soru yok.

Bunlardan Ne Öğrenilir?

Bu makalenin amaçları doğrultusunda, bir tasarım sisteminin nasıl oluşturulacağından bahsetmek yerine, tasarım sistemlerine başka bir açıdan bakacağız ve bunları nasıl kullanabileceğinizi ve UI / UX ve ürün tasarım uygulamalarını anlamak için bir çalışma kılavuzu olarak göstereceğiz. Ve uygulama.
Çoğu tasarım sistemi aynı şekilde kurulur; sistemin ana kategorilerini gösteren üst düzey bir gezinme; genellikle Marka, Tasarım, Bileşenler, Kod vb. gibi bir şey. Bu kategorilerin her birinde, genellikle bu kategorileri Renk, Tipografi, Bileşenler, Formlar, Yönergeler vb. gibi alanlara ayıran bir alt gezinme veya yan çubuk gezinme vardır. Tasarımda ustalık kursu gibi!

Atlassian Design System

Peki bundan nasıl öğrenebilirsin? Bir e-ticaret sitesi tasarladığınızı ve menünün kategoriler için bir açılır menüye ihtiyacı olduğunu varsayalım. Açılır menüde okunuzun hangi boyutta olması gerektiğinden veya yerleştirmek için metinden ne kadar uzakta olması gerektiğinden ya da tamamen genişletildiğinde nasıl görünmesi gerektiğinden emin değil misiniz? Nasıl yaptıklarını görmek için Shopify gibi bir alışveriş sistemi öncüsüne bakabilirsiniz!

İşte en iyilerin en iyilerini, tasarım sistemlerinin neler içerdiğini ve bunları kendi tasarımlarınızdan öğrenmek ve onlara ilham vermek için nasıl kullanabileceğinizi içeren ilk 10 listemiz (belirli bir sırayla değil).

1. Google Material Design System

https://material.io/

Kim Yaptı:

Hepimizin bildiği ve kullandığı Google, internetle ilgili hizmetler ve ürünler konusunda uzmanlaşmış bir Amerikan teknoloji şirketinin devidir; çevrimiçi reklamcılık teknolojileri, bir arama motoru, bulut bilişim, yazılım ve donanım dahil. Amazon, Apple ve Microsoft ile birlikte Büyük Dört teknoloji şirketinden biri olarak kabul edilir.

Tasarım felsefeleri:

Tasarım açısından, Google’ın herkese açık olarak paylaşılan “Materyal Tasarım” sistemi, pek çok kişinin izlemesinin yolunu açtı. Tasarım dünyasının daha önce hiç bu kadar özlü bir şekilde görmediği bir şekilde, kategorize edilmiş ve kataloglanmış bileşenlere kesinlikle çılgınca dikkat. Hatalar yaptılar, bu yüzden sizin yapmanıza gerek kalmadı ve bugün tüm tasarım sistemlerinin üzerine inşa edildiği atomik tasarım ilkelerine düzen ve anlam verdiler. Tasarım sistemleri için hedefleri:
İyi tasarımın klasik ilkelerini, teknoloji ve bilimin yenilik ve imkânlarıyla sentezleyen görsel bir dil oluşturun.
Kullanıcı deneyimini platformlar, cihazlar ve giriş yöntemleri arasında birleştiren tek bir temel sistem geliştirin.
Materyal’in görsel dilini genişletin ve yenilik ve marka ifadesi için esnek bir temel sağlayın.

Tasarım sistemi özellikleri:

  • Layout
  • Color
  • Typography
  • Components
  • Material Theming
  • Design Source Files
  • Mobile Guidelines
  • Starter Kits

Bunu işinize nasıl uygulayabilirsiniz:

Materyal tasarım sistemi, en popüler tasarım yazılımı (Sketch ve Figma gibi) için tasarım bileşeni kaynak dosyalarını doğrudan indirmenize olanak tanır. Ayrıca, bileşenlerin ve temaların güzel ve kullanışlı uygulamalar oluşturmak için nasıl kullanılabileceğini gösteren Materyal çalışmalarını da içerir.

2. Apple Human Interface Guidelines

https://developer.apple.com/design/

Kim Yaptı:
Giriş gerektirmeyen, zarif ve kasıtlı tasarım Apple’ın DNA’sındadır. Apple’ın İnsan Arayüzü Yönergeleri yalnızca bir tasarım sistemi değil, aynı zamanda kendi projelerinizde kullanabileceğiniz indirilebilir şablonlar ve diğer yönergelerle dolu inanılmaz bir kaynaktır.

Tasarım felsefeleri

Ünlü, Steve Job’un Tasarım felsefesi 6 temelden oluşur:

Zanaat, Her Şeyden Önce – Detaylara ve hassasiyete büyük özen

Empati – Kullanıcı ihtiyaçlarıyla empatiyi ve müşterinin duygularıyla yakın bir bağlantıyı vurgulayan bir süreç

Odaklanma – Önemsiz tüm fırsatları ortadan kaldırın

İfade – İnsanlar, ilettikleri sinyallere dayanarak bir şirket veya ürün hakkında fikir oluşturur

Dostluk – yüksek teknolojili cihazların dost canlısı ve ulaşılabilir olabileceğini ve hem acemi hem de ileri düzey kullanıcılar için ilgi çekici olabileceğini kabul edin

Geçmişten gelen metaforlarda gelecek için basitlik bulmak – Tasarım basitliği, ürünleri bizim için kolaylaştırmakla ilişkilendirilmelidir

Tasarım sistemi özellikleri:

Apple’ın dışa bakan tasarım sistemi, macOS, iOS, watchOS, vOS için geliştiriciler, tasarımcılar ve dağıtımcılar için en iyi uygulamaları, yönergeleri ve kaynakları içerir.

  • Themes
  • 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
  • Extensions

Bunu işinize nasıl uygulayabilirsiniz:

Çalışmanızda çeşitli geliştirici ve tasarımcı kaynaklarını ve araçlarını (tasarım dosyaları, cihaz modelleri, Swift kodu gibi) indirebilir ve doğrudan kullanabilir, ayrıca en iyi uygulamalar ve dijital vizyonlarınızı hayata nasıl getireceğiniz konusunda onların yönergelerine başvurabilirsiniz.

3. Microsoft Fluent Design System

https://www.microsoft.com/design/fluent/#/‌

Kim Yaptı:

Sevdiğimiz ve sevdiğimiz Microsoft’ta nefret edilmeyi sevenlerin yapımcılarından, hepimiz onları her yerde bulunan bilgisayar işletim sistemleri Windows, bilgisayar yazılımı Office ve internet tarayıcısı Internet Explorer ile tanıyoruz.

Tasarım felsefeleri:

Microsoft’un Kapsayıcı Tasarım metodolojisi dijital ortamlardan doğmuştur. İnsan çeşitliliğinin tamamını mümkün kılar ve bunlardan yararlanır. En önemlisi, bu, çeşitli bakış açılarına sahip insanları dahil etmek ve onlardan öğrenmek anlamına gelir. Kendi önyargılarımızı kullanarak sorunları çözdüğümüzde dışlanmanın gerçekleştiğine inanıyorlar. Microsoft tasarımcıları olarak, bu istisnaları ararlar ve bunları yeni fikirler ve kapsayıcı tasarımlar yaratmak için fırsatlar olarak kullanırlar:

  • Hariç tutmayı tanıma
  • Biri için çözün, çoğuna genişletin
  • Çeşitlilikten öğrenin

Tasarım sistemi özellikleri:

  • Colors
  • Elevation
  • Iconography
  • Layout
  • Motion
  • Typography
  • Localization
  • Theming

Bunu işinize nasıl uygulayabilirsiniz:

Microsoft’un tasarım araçları ve açık kaynaklı bileşenler ekosistemi, ürünleriyle aynı görünümü hızlı ve kolay bir şekilde elde etmenize yardımcı olabilir, böylece Web, Windows, iOS ve Android platformlarında tutarlı bir vizyon oluşturabilir ve Microsoft ürünlerinin mantığını ve görünümünü anlayabilirsiniz. Ayrıca, kendi UI / UX tasarımlarınızı olabildiğince kapsayıcı hale getirmek için harika bir örnek olay referansıdır.

4. Atlassian Design System

https://atlassian.design/

Kim Yaptı:

Bir zamanlar en sevdiğim tasarım sistemlerinden biri olan Atlassian, dünya çapında binlerce ekip tarafından kullanılan Jira ve Trello gibi işbirliği araçları yapıyor. Odak noktaları, ürünleri planlarken, geliştirirken ve teslim ederken yolda kalmalarına yardımcı olarak Agile ekipleri için çevik araçlara odaklanmaktır.

Tasarım felsefeleri

Atlassian’ın tasarım felsefesi, dijital deneyimlerin herhangi bir ekipteki potansiyeli nasıl ortaya çıkarabileceğini yansıtır ve temelini oluşturur. İnançları, insanların ve ekiplerin daha etkili olmasına yardımcı olmayı amaçlamaktadır.

  • Her etkileşimde güven inşa edin
  • İnsanları daha iyi işbirliği yapmaları için bağlayın
  • Amacı eşleştirin ve tanıdık hissedin
  • Uçtan uca ivme kazanın
  • Daha fazla değer için ustalığa rehberlik edin

Tasarım sistemi özellikleri:

  • Brand guidelines
  • Design Principles
  • Illustration
  • Product
  • Personality
  • Prototyping
  • Marketing

Bunu işinize nasıl uygulayabilirsiniz:

Bu tasarım sisteminin tarzı, ekip işbirliği, ürün yönetimi araçları, proje yönetimi araçları, ekip sohbetleri, yardım masaları, bilgi tabanları gibi üzerinde çalıştığınız diğer benzer işbirliği ve yönetim araçlarına ilham verebilir.

5. Uber Design System

https://brand.uber.com/guide

Kim Yaptı:

Uber, Gig-Economy’nin (hem yolculara hem de serbest çalışanlara hizmet veren) bir parçası olan, eşler arası yolculuk paylaşımı, yolculuk hizmeti selamlama, yiyecek dağıtımı (Uber Eats) ve aşağıdakileri içeren bir mikro hareketlilik sistemi içeren hizmetler sunan bir araç çağırma hizmetidir. elektrikli bisikletler ve scooterlar.

Tasarım felsefeleri

Uber, alt markalardan dahili ekiplere ve ürünlerden programlara kadar insanları olmak istedikleri yere taşımakla ilgilidir. Günlerinde, hayatlarında, anlarında – Hareketin fırsatları ateşlediğine inanıyorlar.

Tasarım sistemi özellikleri:

  • Logo
  • Brand Architecture
  • Color
  • Composition
  • Iconography
  • Illustration
  • Motion
  • Photography
  • Tone of voice
  • Typography

Bunu işinize nasıl uygulayabilirsiniz:

Seyahat veya ulaşım, iş ekonomisi veya uzay alanında çalışıyorsanız; İster scooter, ister kariyer güvercini veya hızlı tren yoluyla olsun, Uber, nereye gitmek isterseniz isteyin, A noktasından bir noktaya gitmeyle ilgili sorunları nasıl çözeceğinizin harika bir örneğidir.

6. Shopify Design System

https://polaris.shopify.com/

Kim Yaptı:

Shopify, bir işi başlatmak, yürütmek ve büyütmek için hepsi bir arada bir e-ticaret platformudur. Dünya çapında 1.000.000’den fazla işletmeye güç sağlar.

Tasarım felsefeleri

Shopify, ticaretin herkes için daha iyi ve herkes için daha erişilebilir hale getirilebileceğine inanıyor. Amaçları, bir işi başlatmayı, yürütmeyi ve büyütmeyi kolaylaştırarak insanların bağımsızlığını kazanmalarına yardımcı olmaktır. Shopify’ın ortak değerleri, oluşturdukları deneyimlerin merkezinde yer alır:

Considerate – Her şeyden önce, araçlarımızı ve ürünlerimizi kullanan insanlara özen gösteriyoruz
Empowering – İnsanların yapmaya çalıştıkları her şeyi başarabileceklerini hissetmelerini istiyoruz.
Crafted – Shopify deneyimleri, en üst düzey işçilikle oluşturulmuş gibi hissetmelidir
Efficient – Shopify deneyimleri, insanların hedeflerine hızlı, doğru ve daha az çabayla ulaşmalarına yardımcı olmalıdır
Trustworthy – Kullanıcılarımızın güven pillerini şarj etmek için sürekli çalışıyoruz.
Familiar – İnsanların ürünlerimizi ilk kez kullanıyor olsalar da, yüzüncü kullanımlarında da kendilerini rahat hissetmelerini istiyoruz.

Tasarım sistemi özellikleri:

  • Colors
  • Accessibility
  • Resources
  • Typography
  • Illustrations
  • Sounds
  • Icons
  • Interaction states
  • Spacing
  • Data visualizations

Bunu işinize nasıl uygulayabilirsiniz:

Shopify’ın tasarım sistemini kullanmanın daha açık yolu, Shopify platformu için nasıl tasarım yapacağınızı anlamanıza yardımcı olacak pratik bir kılavuzdur. Başka bir düzeyde, e-ticaretle ilgili herhangi bir proje için daha iyi ürün deneyimleri oluşturmak için dilin, tasarımdaki içeriğin, görsel öğelerin ve UI bileşenlerinin nasıl kullanılacağına dair zengin bir bilgi ve ilham kaynağı sağlar. Bu tasarım sisteminin kendisi güzelce tasarlanmıştır… not alın.

7. IBM Carbon Design System

https://www.carbondesignsystem.com/

Kim Yaptı:

IBM, bir zamanlar Apple ve Microsoft ile kişisel bilgi işlem oyununa girmiş olsa da, o zamandan beri odak noktasını büyük kurumsal BT ihtiyaçlarına kaydırdı. İş danışmanlığından yazılım geliştirme hizmetlerine, BT barındırma ve yönetime, yazılım ürünlerine, donanıma (sunucular, ana bilgisayarlar, depolama) ve hatta finansmana kadar her şeyi sunarlar.

Tasarım felsefeleri

IBMers, ilerlemeye inanıyor – zeka, mantık ve bilimi uygulayarak işi, toplumu ve insani durumu iyileştirebileceklerine. Ölçekleri ve kapsamları göz önüne alındığında, iyi tasarımın sadece bir gereklilik olmadığına, hizmet ettikleri insanlara ve kurdukları ilişkilere karşı daha derin bir sorumluluk olduğuna inanırlar.

Tasarım sistemi özellikleri:

Carbon araçları ve kaynakları arasında Sketch, Axure ve Adobe XD için tasarım dosyaları ile geliştiriciler için kaynaklar bulunur.

  • utorials
  • Guidelines
  • Components
  • Patterns
  • Data Visualization

Bunu işinize nasıl uygulayabilirsiniz:

Kurumsal sistemler veya büyük ölçekli kurumsal ürünler (dahili veya harici) üzerinde çalışıyorsanız, Carbon bunun nasıl başarılı bir şekilde yapılacağına dair büyük bir örnektir. Bunu, ağır verileri zarif ve anlaşılır şekillerde nasıl işleyeceğiniz ve etkileyici görselleştirmelerle sunma konusunda bir kılavuz olarak kullanabilirsiniz.

8. Mailchimp Design System

https://ux.mailchimp.com/patterns/color

Kim Yaptı:

Kısa süre önce markasını ve kimlik sistemini güncelleyen Mailchimp, kullanıcı dostu e-posta pazarlamasında uzun süredir lider olmuştur ve e-postanın ötesinde küçük işletmeler için hepsi bir arada bir pazarlama platformuna dönüşmüştür.

Tasarım felsefeleri

Mailchimp, işletmelerin kendilerine sadık kalarak büyümelerini sağlar. Markaları, Mailchimp ekibi için önemli olanı temsil ediyor – zanaatkarlık, yaratıcı ifade sevgisi ve kalite takıntısı.

Tasarım sistemi özellikleri:

  • Color
  • Data Visualization
  • Grid System
  • Typography
  • Components

Bunu işinize nasıl uygulayabilirsiniz:

E-posta, pazarlama, işletme, strateji veya reklamlar alanında bir proje üzerinde çalışıyorsanız, Mailchimp, ifade ve yaratıcılığın sınırlarını zorlarken bunu nasıl doğru yapacağınıza dair bazı yararlı ipuçları ve örnekler sağlayabilir. Karmaşık görevler (otomatik e-posta kampanyaları ve haber bültenleri oluşturmak gibi) yapmak için birçok yenilikçi tasarım fikri ve yolları vardır; Normalde güçlü kullanıcılar, pazarlama uzmanları veya teknoloji meraklısı bireylerle sınırlandırılmış, yaklaşılabilir ve sezgisel UX aracılığıyla daha erişilebilir.

9. Salesforce Lightning Design System

https://www.lightningdesignsystem.com/

Onlar kim:

Salesforce, bulut tabanlı CRM yazılımına öncülük etti ve 150.000’den fazla şirketin daha verimli çalışmasına yardımcı oldu ve pazarlama, satış, ticaret, hizmet, BT ve daha fazlasını geliştiren entegre CRM aracılığıyla müşterilerinize kişiselleştirilmiş deneyimler sunmalarını sağladı.

Tasarım felsefeleri

Ohana, kasıtlı aile için Hawai dilinde bir kelimedir ve şirket kültürlerini yönlendiren şeydir. Kararlarının, eylemlerinin ve iletişimlerinin temelini oluşturan 4 temel değerleri şunlardır:

  • Güven
  • Müşteri Başarısı
  • Yenilikçilik
  • Eşitlik

Tasarım sistemi özellikleri:

  • Platforms
  • Design Guidelines
  • Accessibility
  • Components

Bunu işinize nasıl uygulayabilirsiniz:

Yoğun bir şekilde kullanıcı deneyimine, etkileşimlere ve akışlara odaklanan içerik yönetim sistemleri, yapay zeka, satış, ticaret veya analiz platformları üzerinde çalışıyorsanız, ilham verici ve yol gösterici ilkeler için öncülerin kendilerine bakmanız akıllıca olacaktır.

10. Helpscout Design System

https://style.helpscout.com/

Onlar kim:

Help Scout, en iyi haliyle çevrimiçi destek biletidir. Harika bir müşteri deneyimi için özenle hazırlanmış, tipik yardım masası engellerinin hiçbiri yoktur. Tüm çabaları, ekiplere bir yardım masasının ölçeğini ve verimliliğini sağlayan, ancak kusursuz müşteri deneyimi sağlayan bir yazılım üretmeye gider.

Tasarım felsefeleri

Marka değerleri
Faydalı
Güvenilir
İnsan ve Organik
Enerjik
Meraklı

Tasarım sistemi özellikleri:

Daha küçük ancak güzel tasarlanmış sistemlerden biri olan HelpScout, 3 ana bölüme ayrılmıştır:

  • Visual Elements
  • Content Style
  • Product Design

Bunu işinize nasıl uygulayabilirsiniz:

Yardım masaları, çağrı gönderme sistemleri, bilgi tabanları, SSS’ler, wiki’ler ve destek forumlarını içeren çalışmanız için harika.

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d blogcu bunu beğendi: