Merhaba, ben r0ine.
Web siteleri, Minecraft eklentileri ve Discord botları geliştiriyorum. Uzun zamandır üzerinde çalıştığım bir web sitesi tasarım kütüphanesini bugün ücretsiz paylaşıyorum. Adı Creative Web Intelligence, kısaca CWI.
Projeyi neden burada paylaşıyorum?
1) Sizden geri dönüş almak istiyorum. Ne işe yarıyor, neresi eksik, neresi anlaşılmıyor, bunları sizden duymak istiyorum.
2) Sunucu sahiplerinin kendi sunucularına özel web siteleri yapabilmesini istiyorum. Birçok sunucu sitesi aynı şablondan çıkmış gibi görünüyor: üç eş kart, mor-mavi geçiş, "Join Now" butonu. Kütüphane, "benim sunucuma özel nasıl olur" sorusuna cevap vermek için hazırlandı.
CWI nedir?
Hazır bir tema ya da site yapıcı değil. Bir web sitesi yaparken hangi kararı neden verdiğinizi anlatan bir kural ve kaynak arşivi. Tasarımcı olmayan biri de, tasarımcı olan biri de kullanabilir. Temayı sizin için yapmaz, kendi temanızı yaparken size yol gösterir.
Nerede işinize yarar?
LeaderOS, Minexon, Zonely gibi altyapılar için kendi sunucunuza özel site tasarlarken kullanabilirsiniz. Kütüphane bu altyapıların içine girmez, yalnızca tasarım kararlarına odaklanır: sitenin rengi, yazı tipi, yerleşimi, hareketi, hangi bölümün nasıl görüneceği. Mağaza, giriş ya da oy sistemi gibi şeyleri o altyapılar zaten yapıyor.
İçinde neler var?
- 700 tasarım kuralı: renk, yazı tipi, yerleşim, hareket, 3D, erişilebilirlik, performans.
- "Her sitede aynı görünen" kalıpların listesi ve bunların yerine ne yapılabileceği.
- 89 tasarım kaynağından oluşan bir atlas (Three.js, shadcn/ui, Radix, Lucide gibi). Her biri için ilk ekran görüntüsü (masaüstü ve mobil), kısa bir not ve lisans durumu var. Hangi kaynaktan ne alınır, ne alınmaz yazıyor.
- Sürüm sürüm örnekler: v3'ten v8'e her sürümün ne çözdüğü ve aynı konunun o sürümün kurallarıyla nasıl bir site çıkardığı. Aynı seramik atölyesi konusu, v3'te koyu zeminli ve cam kartlı, v5'te sade ve kâğıt zeminli, v8'de zemin rengi kaydırdıkça akan bir site oluyor (görsel 6).
- Scroll ile hareket eden 3D sahneler ve renk geçişi için çalışan modüller.
Nasıl görürsünüz?
Hiçbir şey indirmeniz gerekmiyor, hepsi tarayıcıda açılıyor. Site Türkçe ve İngilizce:
Atlas (kaynaklar):
Sürüm sürüm örnek siteler:
Beğendiğim en son örnek, kurgusal bir yazılımcı portföyü
GitHub:
Kütüphanenin tamamı açık ve MIT lisanslı:
Profilim:
Depoda .exe, .jar, .dll, .zip gibi çalıştırılabilir ya da arşiv dosyası yok; yalnızca metin, JSON, Python ve JavaScript dosyaları var. Kodu çalıştırmadan önce okuyabilirsiniz. Kurulum için Git, Node.js 22+ ve Python 3.11+ yetiyor, API anahtarı gerekmiyor.
Sizden bir ricam var:
Bu kütüphaneyle kendi sunucunuza bir site yaparsanız, lütfen yaptığınız siteyi bu konuya yazın. Ne kullandığınızı, nerede takıldığınızı, neyi beğenmediğinizi de yazarsanız çok işime yarar. Kütüphaneyi bu geri dönüşlere göre geliştireceğim. Bir şey yapmasanız bile atlası ve örnekleri gezip fikrinizi yazmanız yeter.
Kaynaklar ve telif:
Atlastaki projeler (Three.js, shadcn/ui, Radix, Nuxt UI, Lucide ve diğerleri) kendi sahiplerine aittir. Ben yalnızca onlara bakıp inceleme notu yazdım, kodlarını kütüphaneye koymadım ve her birinin lisansını kendi sayfalarında belirttim. Bir kaynaktan kod almadan önce o deponun kendi lisansını mutlaka okuyun; bazıları ticari kullanıma kapalı ya da lisanssız. Sitede kullanılan yazı tipleri (Instrument Serif, Hanken Grotesk, Fraunces, Bricolage Grotesque) SIL Open Font License altındadır.
Dürüst olayım: Kütüphane bitmiş değil. Bazı kaynaklara görsel olarak yeterince bakamadım ve onları atlasta "incelenmedi" diye bıraktım. Bu yüzden görüşleriniz benim için gerçekten değerli.
Size sorularım:
- Sunucu siteniz için en çok hangi bölümde takıldınız?
- Atlas sayfası anlaşılır mı, yoksa karışık mı?
- Örnek sitelerden hangisi hoşunuza gitti, hangisi gitmedi?
Yorumlarınızı bekliyorum.
Web siteleri, Minecraft eklentileri ve Discord botları geliştiriyorum. Uzun zamandır üzerinde çalıştığım bir web sitesi tasarım kütüphanesini bugün ücretsiz paylaşıyorum. Adı Creative Web Intelligence, kısaca CWI.
Projeyi neden burada paylaşıyorum?
1) Sizden geri dönüş almak istiyorum. Ne işe yarıyor, neresi eksik, neresi anlaşılmıyor, bunları sizden duymak istiyorum.
2) Sunucu sahiplerinin kendi sunucularına özel web siteleri yapabilmesini istiyorum. Birçok sunucu sitesi aynı şablondan çıkmış gibi görünüyor: üç eş kart, mor-mavi geçiş, "Join Now" butonu. Kütüphane, "benim sunucuma özel nasıl olur" sorusuna cevap vermek için hazırlandı.
CWI nedir?
Hazır bir tema ya da site yapıcı değil. Bir web sitesi yaparken hangi kararı neden verdiğinizi anlatan bir kural ve kaynak arşivi. Tasarımcı olmayan biri de, tasarımcı olan biri de kullanabilir. Temayı sizin için yapmaz, kendi temanızı yaparken size yol gösterir.
Nerede işinize yarar?
LeaderOS, Minexon, Zonely gibi altyapılar için kendi sunucunuza özel site tasarlarken kullanabilirsiniz. Kütüphane bu altyapıların içine girmez, yalnızca tasarım kararlarına odaklanır: sitenin rengi, yazı tipi, yerleşimi, hareketi, hangi bölümün nasıl görüneceği. Mağaza, giriş ya da oy sistemi gibi şeyleri o altyapılar zaten yapıyor.
İçinde neler var?
- 700 tasarım kuralı: renk, yazı tipi, yerleşim, hareket, 3D, erişilebilirlik, performans.
- "Her sitede aynı görünen" kalıpların listesi ve bunların yerine ne yapılabileceği.
- 89 tasarım kaynağından oluşan bir atlas (Three.js, shadcn/ui, Radix, Lucide gibi). Her biri için ilk ekran görüntüsü (masaüstü ve mobil), kısa bir not ve lisans durumu var. Hangi kaynaktan ne alınır, ne alınmaz yazıyor.
- Sürüm sürüm örnekler: v3'ten v8'e her sürümün ne çözdüğü ve aynı konunun o sürümün kurallarıyla nasıl bir site çıkardığı. Aynı seramik atölyesi konusu, v3'te koyu zeminli ve cam kartlı, v5'te sade ve kâğıt zeminli, v8'de zemin rengi kaydırdıkça akan bir site oluyor (görsel 6).
- Scroll ile hareket eden 3D sahneler ve renk geçişi için çalışan modüller.
Nasıl görürsünüz?
Hiçbir şey indirmeniz gerekmiyor, hepsi tarayıcıda açılıyor. Site Türkçe ve İngilizce:
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
Atlas (kaynaklar):
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
Sürüm sürüm örnek siteler:
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
Beğendiğim en son örnek, kurgusal bir yazılımcı portföyü
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
GitHub:
Kütüphanenin tamamı açık ve MIT lisanslı:
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
Profilim:
Değerli ziyaretçimiz, içeriği görebilmek için
şimdi giriş yapın veya kayıt olun.
Depoda .exe, .jar, .dll, .zip gibi çalıştırılabilir ya da arşiv dosyası yok; yalnızca metin, JSON, Python ve JavaScript dosyaları var. Kodu çalıştırmadan önce okuyabilirsiniz. Kurulum için Git, Node.js 22+ ve Python 3.11+ yetiyor, API anahtarı gerekmiyor.
Sizden bir ricam var:
Bu kütüphaneyle kendi sunucunuza bir site yaparsanız, lütfen yaptığınız siteyi bu konuya yazın. Ne kullandığınızı, nerede takıldığınızı, neyi beğenmediğinizi de yazarsanız çok işime yarar. Kütüphaneyi bu geri dönüşlere göre geliştireceğim. Bir şey yapmasanız bile atlası ve örnekleri gezip fikrinizi yazmanız yeter.
Kaynaklar ve telif:
Atlastaki projeler (Three.js, shadcn/ui, Radix, Nuxt UI, Lucide ve diğerleri) kendi sahiplerine aittir. Ben yalnızca onlara bakıp inceleme notu yazdım, kodlarını kütüphaneye koymadım ve her birinin lisansını kendi sayfalarında belirttim. Bir kaynaktan kod almadan önce o deponun kendi lisansını mutlaka okuyun; bazıları ticari kullanıma kapalı ya da lisanssız. Sitede kullanılan yazı tipleri (Instrument Serif, Hanken Grotesk, Fraunces, Bricolage Grotesque) SIL Open Font License altındadır.
Dürüst olayım: Kütüphane bitmiş değil. Bazı kaynaklara görsel olarak yeterince bakamadım ve onları atlasta "incelenmedi" diye bıraktım. Bu yüzden görüşleriniz benim için gerçekten değerli.
Size sorularım:
- Sunucu siteniz için en çok hangi bölümde takıldınız?
- Atlas sayfası anlaşılır mı, yoksa karışık mı?
- Örnek sitelerden hangisi hoşunuza gitti, hangisi gitmedi?
Yorumlarınızı bekliyorum.