Sosyal ve topluluk tasarım sistemleri

Sosyal ağlardan, topluluk platformlarından ve kişisel web sitelerinden çıkarılmış tasarım sistemleri. Onları akışlar, profiller, avatarlar ve paylaşım kontrolleri tanımlar; çoğu zaman tek bir oyuncu marka rengi ve yuvarlak, samimi bileşenlerle.

Bu kategoride 2 DESIGN.md örneği var. Kaynaklar: Dribbble ve Snapchat. Her sitenin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Bu formatı ilk kez mi duyuyorsun? DESIGN.md'nin ne olduğunu oku.

Dribbble web sitesi önizlemesi
Topluluk, Sosyal ve Kişisel · Community & Forum

Dribbble

Dribbble'ın tasarım sistemi, saf beyaza yakın bir yüzey üzerinde derin, neredeyse siyah bir lacivert (#0d0c22) ile kurulmuştur; editoryal vurgu ve etkileşimli öne çıkarmalar için ölçülü kullanılan imza niteliğindeki sıcak pembe (#ea4c89) vurgu rengiyle noktalanır. Tüm tipografik sistem, tüm ağırlıklarda yalnızca Mona Sans'a dayanır ve hiyerarşiyi yalnızca ağırlık ve boyutla kurar. Hap biçimindeki düğmeler (border-radius: 1e+07px) ve yuvarlatılmış kartlar (12px köşe yarıçapı) geometri dilini belirler. Yerleşim, 8px temel ızgarayla ferah bir düzendedir ve yükseklik, ağır katmanlar yerine ince gölgelerle ifade edilir.

Snapchat web sitesi önizlemesi
Topluluk, Sosyal ve Kişisel · Social Network

Snapchat

Snapchat'in web varlığı, ikonik #FFFC00 marka sarısıyla dengelenmiş yüksek kontrastlı bir açık tema kullanır; bunun yanında #121314 tonunda neredeyse siyah birincil yüzeyler ve temiz beyaz bir sayfa arka planı yer alır. Tasarım, dostça ama yapılandırılmış bir tipografik hiyerarşi için birincil olarak Avenir Next'i, ikincil olarak Graphik'i eşleştirir. Düğme, hap biçimli etiket ve etiketler gibi etkileşim öğeleri tamamen yuvarlak (100px) köşe yarıçapı kullanırken, giriş alanları 5px'lik ince bir yarıçapa sahiptir. Gezinme, yumuşak bir gölgeye sahip yüzen bir hap biçimindedir. İçerik, üzerine beyaz metin yerleştirilmiş büyük medya kartlarında sunulur; bu da sürükleyici, uygulama önizlemesini öne çıkaran bir yerleşim oluşturur. Genel yoğunluk orta düzeydedir; geniş boşluklar ve net bir görsel hiyerarşi, pazarlama ve ürün arayüzü geleneklerini birbirine bağlar.

Kendin dene

İhtiyacın olan siteyi göremiyor musun?

Herhangi bir URL yapıştır, her web sitesinden DESIGN.md al. Renkler, tipografi, boşluklar ve token'lar, AI iş akışına hazır.