Rehber

Bir prototip için iki referans siteyi tek tasarımda birleştir

“Notion ile Stripe karışımı gibi hissettirsin.” Müşteriler prototip brief'lerini sürekli böyle verir. Her site için bir DESIGN.md ile bu cümleyi somut bir spesifikasyona dönüştürebilirsin: token'ları yan yana karşılaştır, hangi dosyanın öne çıkacağına karar ver ve birleştir.

Design Extractor sana iki dosyayı verir. Birleştirmeyi sen yaparsın, elle ya da kodlama ajanınla; bu rehber ikisini de gösterir.

prototip hazırlayan tasarımcılar ve ajanslar için yazıldı. Güncellenme: .

Ne elde edeceksin

  • Token token karşılaştırılmış iki DESIGN.md dosyası; böylece farklar somutlaşır.
  • Bir birleştirme planı: temel olarak bir dosya, diğerinden adı belirlenmiş token grupları.
  • Elle ya da aşağıdaki prompt'la ajanının oluşturduğu birleşik DESIGN.md.
  • Karışımın hâlâ rahat okunduğundan emin olmak için bir kontrast kontrolü.

Birleştirme nasıl işler

Karışım bir ortalama değildir. Bir paletin yarısını diğerinin yarısıyla karıştırmak, ikisine de benzemeyen bir site verir. İşe yarayan, bir temel dosya ile diğerinden adı belirlenmiş birkaç parçadır:

  • Temel yapıyı verir: yazı ölçeği, boşluklar, köşe yarıçapları ve bileşen tarifleri.
  • Vurgu dosyası, ana renk ailesi veya başlık fontu gibi grupları bütün olarak ödünç verir, asla tek tük değerleri değil.

İki dosya da Google'ın DESIGN.md spesifikasyonunu izler, bu yüzden gruplar örtüşür: colors, typography, rounded, spacing ve components. Yapının tamamı için DESIGN.md'nin neler içerdiğine bak.

Adımlar

  1. İki dosyayı da al

    Galerideyseler galeriden kopyala ya da her URL'yi Design Extractor ana sayfasına yapıştırıp her biri için bir Pro çıkarma çalıştır.

  2. Yan yana koy

    Aşağıdaki tablodaki gibi ana renkleri, arka planları, fontları, yazı boyutlarını ve köşe yarıçaplarını karşılaştır.

  3. Temeli seç

    Düzeni ve yoğunluğu prototiple örtüşen siteyi seç.

  4. Vurgunun ne ödünç verdiğini belirle

    Bunu token grupları olarak yaz; örneğin “ana renk ailesi”.

  5. Elle ya da ajanınla birleştir

    İki yol da aşağıda. Sonucu prototip reposuna DESIGN.md olarak kaydet.

  6. Kontrastı ve yapıyı kontrol et

    Birleşik dosyayı ücretsiz DESIGN.md doğrulayıcıya yapıştır.

Uygulamalı örnek: Notion ile Stripe buluşuyor

Galeriden iki gerçek dosya: Notion DESIGN.md ve Stripe DESIGN.md. İkisi de markaların herkese açık web sitelerinden çıkarılmıştır ve resmi marka yönergeleri değildir.

NotionStripe
Ana renk#0075DE#533AFD
Arka plan#FFFFFF#FFFFFF
Metin#000000#061B31
FontlarNotion Inter, Lyon TextSohne
En büyük yazıhero-display, 96px, ağırlık 600hero-display, 56px, ağırlık 500
Gövde metnibody, 16px, ağırlık 400body-lg, 18px, ağırlık 300
Buton köşe yarıçapı8px4px
Renk token'ları2021
Bileşen tarifleri1471

Onları birleştirmenin bir yolu

Tipografisi, boşlukları, köşe yarıçapları ve bileşenleri için Notion temel olsun, Stripe da ana renk ailesini (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) ödünç versin. Bu, klasik “bizim düzenimiz, onların enerjisi” brief'idir.

Karar vermeden önce sayıları kontrol et. Stripe ana renginin Notion arka planı üzerindeki kontrastı 6.1:1. Notion on-primary metninin yeni ana renk üzerindeki kontrastı 6.1:1. WCAG AA'ya göre gövde metni en az 4.5:1 gerektirir; büyük metin ve ikonlar 3:1 gerektirir.

Bir tuzak: Notion sitesinin kendi ana rengi #0075DE, dosyasında 65 kez geçiyor, çoğunlukla bileşen tariflerinin içinde. En üstteki token'ı değiştirmek yetmez; her kopyanın değişmesi gerekir.

Yukarıda anlatılan elle birleştirmenin illüstrasyonu; bu sayfa tarafından iki galeri dosyasından derlendi: Notion token'ları ile Stripe ana renk ailesi, kısaltılmış. Bir Design Extractor özelliği değildir ve ajan çıktısı değildir.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Elle birleştir

  1. Temel dosyayı DESIGN.md olarak kopyala ve name değerini değiştir.
  2. colors içinde temelin ana renk ailesini vurgunun değerleriyle değiştir.
  3. Dosyanın tamamında her eski hex değerini ara ve değiştir. Bileşen tarifleri renkleri CSS kodlarında tekrar eder, bu yüzden yalnızca token listesi yetmez.
  4. Overview ve Colors metinlerini, iki markadan birini değil karışımı anlatacak şekilde yeniden yaz.
  5. Dosyayı doğrulayıcıda kontrol et ve kontrast uyarılarını düzelt.

Ajanınla birleştir

İki dosyayı da prototip reposuna, örneğin design/ altına kaydet ve ajanına temeli, alınacak grupları ve çalıştırılacak kontrolleri belirten bir prompt ver. Bu prompt bu rehber için gerçek dosya ve token adlarıyla yazıldı.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Dönen sonucu diğer her değişiklik gibi incele: diff'i oku, sonra dosyayı doğrulayıcıya yapıştır. Yazma işini ajan yapar; prompt'taki kararlar yine senindir.

SSS

İki web sitesi tasarımını tek tasarımda birleştir: sorular

Bunu denemeden önce en çok sorulanlara kısa yanıtlar.

Hayır, birleştirme özelliği yok. Her çıkarma tek bir sitenin DESIGN.md dosyasını döndürür. İki dosyayı elle birleştirirsin ya da bu rehberdekine benzer bir prompt'la kodlama ajanından bunu yapmasını istersin, sonra sonucu incelersin.

İki, bazen üç. Bir dosya temeldir ve yapıyı verir: yazı ölçeği, boşluklar, köşe yarıçapları ve bileşenler. Diğerleri bir renk ailesi veya bir başlık fontu gibi adı belirlenmiş bir parça ödünç verir. Daha fazla dosyadan değer karıştırmak sonucun yamalı görünmesine yol açar.

Düzeni ve yoğunluğu prototiple örtüşen dosya. Müşteri, bir sitenin renkleriyle sakin, doküman benzeri bir ürün istiyorsa sakin site temeldir ve diğeri renklerini ödünç verir; tersi değil.

Birleşik dosyayı ücretsiz DESIGN.md doğrulayıcıya yapıştır. Yapıyı kontrol eder ve kontrastı yetersiz metin renklerini işaretler. Ardından müşteriye göstermeden önce onunla gerçek bir ekran oluştur.

Brief'in için iki dosyayı al

Her referans sitenin URL'sini yapıştır ve DESIGN.md dosyasını karşılaştırmaya ve birleştirmeye hazır al.

Herhangi bir web sitesinden DESIGN.md al

İlgili rehberler

Tüm DESIGN.md rehberlerini gör