Yapay zekâ kokusu olmayan bir arayüz nasıl yapılır?

Yapay zekâya "modern bir site yap" dediğinizde gelen sonuç neredeyse her seferinde aynı: mor-mavi bir arka plan gradyanı, her şeyi saran yuvarlak kartlar, 13px ve 21px gibi rastgele boşluklar. İnsanlar bunu iki saniyede fark ediyor.

Bu siteyi yeniden yaparken kendime dört kural koydum.

1. Yazı tipini bilerek seç

Varsayılan Inter veya Roboto yerine, sitenin karakterini taşıyacak bir aile seçin. Bu sitede başlıklar ve arayüz için Bricolage Grotesque, uzun okuma için Newsreader kullanıyorum. İki aile birbirinden net biçimde ayrılıyor; biri konuşuyor, diğeri anlatıyor.

2. Gradyan ve gölgeyi azalt

Süs için kullanılan gradyanlar ve her kartın altındaki aynı gri gölge, tasarımın kararsız olduğunu gösterir. Onun yerine:

• 1px ince çizgiler
• tek bir vurgu rengi
• içeriğe göre değişen boşluk ölçeği (4, 8, 12, 16, 24, 32, 48)

3. Tek bir ikon ailesi

Farklı kalınlıktaki ikonları yan yana koymak, birbirinden kopyalanmış parçalar gibi durur. Burada yalnızca Lucide kullanıyorum ve çizgi kalınlığı her yerde 1.5.

4. Hareketi az ve anlamlı kullan

Her bölümün aşağıdan kayarak gelmesi artık bir klişe. Tek bir an seçin. Bu sitede o an, sayfa açılırken ismin harf harf yerine oturması:

<motion.span
  initial={{ y: "100%" }}
  animate={{ y: 0 }}
  transition={{ type: "spring", stiffness: 300, damping: 30, delay: i * 0.03 }}
/>

Gerisi sessiz kalıyor. Hareket, kullanıcı bir şey yaptığında cevap vermek için var.