Tek marka.
Tek tasarım dili.
Sınırsız hayal gücü.
INOOWA'nın her ekranında aynı kaliteyi ve hissi koruyan görsel sistem. Çocuklar için yaratıcı, ebeveynler için güvenilir, geliştiriciler için ölçülebilir.
Home
Learn
PlaygroundLet's create something.
Draw a Bus
One step at a time.
Start Drawing →
Bu bir tasarım kılavuzu, yeni bir çocuk ekranı değil. Buradaki örnekler onaylı marka görsellerini ve prototipteki bileşenleri kullanır. Yeni sistem pilot olarak 07B Dashboard, 13B Playground ve 14B Library'ye uygulanıyor; diğer ekranların migrasyonu henüz tamamlanmadı.
Renk bir dekor değil.
Bir iletişim sistemi.
Her rengin görevini belirliyoruz. Yeni bir ekranda yeni bir mavi icat etmek yerine semantic token kullanıyoruz.
#08132F#142657#71E5F1Cyan → Blue → Lavender#C4B2FF#E889D5Creative worlds.Contrast matters more than visual effects.AA contrast target
Fotoğraf üstündeki metinler karanlık gradient/scrim ile korunur. Açık cyan buton üzerinde koyu lacivert yazı kullanılır.
Renk rolleri değişmez. İllüstrasyon dünyaya karakter verir; kontrast, navigasyon ve durum renkleri sistem tarafından belirlenir.
Her metnin bir hiyerarşisi var.
Tek font ailesi, tutarlı ağırlıklar ve ekranın görevine göre seçilmiş metin seviyeleri.
64 / 7240 / 4832 / 4024 / 3216 / 2414 / 2012 / 16Çocuğa verilen temel yönergeler gövde boyutunda kalır. 12px caption yalnızca ikincil bilgiler içindir; kritik izin veya ücret metni için kullanılmaz.
Düzeni 8 piksel yönetir.
Sayfa boşlukları, kart aralıkları ve buton boyutları aynı ölçü sisteminin parçası olmalı.
Aralık: 8px · --inoowa-space-1
Bir buton. Her ekranda aynı.
Görsel stil kadar davranış da standart: primary, secondary, focus, disabled, loading ve hata durumları.
Clear forms. Clear feedback.
Content first.
Small lessons, big discoveries.
Explore World →Kart görseli değişebilir; tipografi, padding, radius ve erişim durumu değişmez.
Honest feedback.
Your creations will appear here after you save them.
Tek bir navigasyon ailesi.
6 adet onaylı, şeffaf 3D WebP ikon. Her ekranda aynı ikon, aynı etiket, aynı aktif durum.
Home
Çocuğun ana ekranı. Seçili menü durumunda bile ikon dosyası yeniden çizilmez, yalnız buton zemini değişir.
3D ikonlar ana menüde; küçük işlevsel simgeler tek tip 24px SVG stroke ailesinde. Resmî Owii ve INOOWA logosu değiştirilmez.
Premium storybook.
Çocuğun hayal gücü merkezde.
Yüzeyi 3D yapmak değil, kullanıcının çizim yolculuğunu görsel olarak anlaşılır kılmak istiyoruz.
Lacivert/mor ortam, cyan vurgular ve sıcak ışık.
Arka plan illüstrasyonlarında HTML metni için sol %45 sakin kalır.
Çizim gerçek kâğıtta yapılır; çocuk yapmadığı işi yapmış gibi gösterilmez.
Bir deneyim. Dört net mesaj.
INOOWA'nın değeri ilk saniyelerde anlaşılmalı: rehberli çizim, gerçek kâğıt, fotoğrafla kayıt ve kendi dünyasını oluşturma.
Short lessons.
Çocuk kısa adımlarla çizime başlar.
Real paper.
Ekranda değil, gerçek kâğıtta üretir.
Make it yours.
Çizimi fotoğraflayıp Library'ye kaydeder.
Build a world.
Yaratımlarını kendi dünyasında keşfeder.
Gerçek çizim, Playground ve Library deneyimi. Çocuk tarafında fiyat/checkout yok.
Hesap isteğe bağlı. Üyelik ve satın alma ebeveyn kontrolünde.
Güzel görünmek yetmez.
Her dokunuş tutarlı olmalı.
Apple HIG, Android Material 3 ve INOOWA'nın çocuk/ebeveyn sınırları.
Görünür focus, renk dışında durum işareti, hata mesajı ve ekran okuyucu etiketleri.
WCAG AA hedefiSwipe, scroll, Back ve modal davranışları sabit. Dokunma yerine görünür alternatif.
iPad & Android120–300ms UI geçişleri; Reduce Motion'a saygı. Hikâye carousel'i özel akış.
Motion tokensÇocuk tarafında ödeme baskısı yok. Adult gate; hesap oluşturmadan ücretsiz başlangıç.
Parent-managedTasarım kuralları doğrudan koda dönüşür.
Tek JSON kaynağından CSS custom properties üretilir. Aynı token, farklı ekranda farklı renk kullanılmasını engeller.
/* Semantic color */
--inoowa-color-semantic-action-primary:
#71E5F1;
/* Layout foundation */
--inoowa-size-nav-width: 144px;
--inoowa-space-3: 24px;
--inoowa-radius-lg: 24px;
/* Shared component */
.primary-action {
background:
var(--inoowa-color-semantic-action-primary);
}Define once.
Use everywhere.
Ürün koduna geçiş kontrollüdür. Mevcut pilot ekranlar yeni token'ları kullanıyor; diğer ekranlar için migrasyon planı ayrı.
Token JSON'u incele ↗Bir sonraki ekranı
yeniden icat etmeye gerek yok.
Foundation, component, icon ve UX kurallarını tek yerden yönetelim. Bu kılavuz yaşayan bir referans; ekran migrasyonu ve native cihaz testleri ayrıca onaylanacak.