Telegram, WhatsApp+380637610482
Valery Danyuk
Valery Danyukgeliştiriciİşletmeler için yapay zeka araçları geliştiriyoruz. Yüksek kalite. Uygun fiyat.Telegram'dan yaz
Duolingo — bu tarzda bir sitenin önizlemesi

Duolingo

Beyaz kağıt üzerinde neşeli sınıf maskotu

Duolingo'nun arayüzü, bir çocuk resimli kitabı gibi tasarlanmıştır: beyaz bir kağıt tuval, dolgun, yuvarlak yazı tipi ve "doğru cevabı" hemen çağrıştıran tek, zengin bir yeşil renk. Ana metin, yatıştırıcı orta gri tonlarındadır; bu da yeşil ve vurgu mavisinin tüm duygusal işi yapmasına olanak tanır—yeşil ilerleme ve başlıklar için, mavi ise tıklanabilir bağlantılar ve ek işlemler için kullanılır. Bileşenler hap şeklinde veya kalın siyah veya renkli kenarlıklı, yuvarlak köşeli olup, her düğmenin düz bir kullanıcı arayüzü kontrolünden ziyade sayfaya yapıştırılmış bir çıkartma gibi görünmesini sağlar.

Bölümler sayfanın tam genişliğini kaplar ve her biri yaklaşık 800 piksel yüksekliğinde tek bir sütun halinde dikey olarak düzenlenmiştir. Maksimum içerik genişliği, ortalanmış olarak yaklaşık 1 pikseldir. Solda metin ve sağda illüstrasyonlar dönüşümlü olarak yer alır ve bölümler arasında yeterli dikey alan (80 piksel) sağlar. Izgara kartları veya çok sütunlu düzenler yoktur; her bölüm tek bir metin bloğu ve tek bir illüstrasyondan oluşur. Gezinme, bölümler arasında sabit bir çubuk olarak görünen, logo ve dil seçici içeren minimalist bir üst çubuktur. Altbilgi, sayfanın tüm genişliğini kaplayan yeşil bir şerittir. Ritim editoryaldir: başlık, paragraf, eylem çağrısı, illüstrasyon, tekrar.

Kitabın görsel dili, yuvarlak geometrik şekillere, kalın siyah konturlara ve arayüzün kendisinde asla görünmeyen pembe, mor, sarı, turuncu ve mavi renk paletine sahip düz, iki boyutlu maskot karakterler (baykuş Duet ve çeşitli insan figürleri) içerir. Çizimler, her bölümün sağ tarafında, tamamen beyaz bir arka plana karşı, herhangi bir çerçeve veya arka plan olmadan metnin yanına yerleştirilmiştir. Fotoğraf yok; karakterler görsel içeriği oluşturuyor. İkonografi, maskotların stiliyle tutarlı olarak kalın konturlar kullanıyor. Görüntü yoğunluğu orta düzeydedir: her bölümde karakterin büyük bir çizimi yer alırken, sayfanın geri kalanı tipografi ve boş alana ayrılmıştır.

Palet

Marka

  • Eager Green #58cc02 — Yeşil, bağlantıları, etiketleri ve kısa ifadeleri vurgulamak için kullanılır. Eylem çağrıları için birincil renk olarak kullanılmamalıdır.
  • Storybook Green #d7ffb8 — Açık renkli yüzeylerde yumuşak vurgular, altbilgideki gezinme etiketlerinin arkasında ince arka plan tonları.

Doğal

  • Spark Blue #1cb0f6 — Mavi, bağlantıları, etiketleri ve kısa ifadeleri vurgulamak için kullanılır. Eylem çağrıları için birincil renk olarak kullanılmamalıdır.
  • Fresh Leaf #a5ed6e — Yeşil, bağlantıları, etiketleri ve kısa ifadeleri vurgulamak için kullanılır. Eylem çağrıları için birincil renk olarak kullanılmamalıdır.
  • Night Ink #000437 — Bağlantılar, etiketler ve kısa vurgulanmış ifadeler mor renkle vurgulanmıştır.
  • Paper White #ffffff — Sayfa tuvali, karton yüzeyler, yeşil/koyu arka plan üzerinde düğme metni.
  • Charcoal #4b4b4b — Kahraman Başlıkları ve Gövde Metni - Renkli başlıkların öne çıkmasını sağlayan evrensel koyu metin.
  • Pencil Gray #777777 — Metnin ana paragrafları göze çarpmayan harflerle vurgulanmış, ikincil açıklayıcı metin ise arka plana çekilmiş, böylece renkli unsurlar ön plana çıkmıştır.

Tipografi

13 ila 64 piksel arası · 7 adım

  • feather — yenisiyle değiştirme: Inter · ana hatlar 700 · "Ücretsiz. Eğlenceli. Etkili" ve "Duolingo İngilizce Testi" gibi bölüm başlıkları, markaya neşeli, samimi, maskot benzeri bir tarz kazandıran özel yuvarlak bir yazı tipi kullanılarak görüntülenir. Uygun kalınlıkta "Feather Bold" veya "Nunito Black" ile değiştirin. Harf aralığı: -0.0200em
  • duolingo-sans — yenisiyle değiştirme: Inter · ana hatlar 500 · Ana paragraflar ve gezinme bağlantıları 17px/500 boyutunda, okunaklılığını koruyan geometrik bir sans-serif yazı tipiyle yazılmıştır; 700 satır kalınlığı ise önemli noktaları vurgulamaya olanak tanır. Bunun yerine 'DIN Next', 'Inter' veya 'Nunito Sans' yazı tiplerini kullanabilirsiniz.
  • duolingo-sans — yenisiyle değiştirme: Inter · ana hatlar 700 · Tüm ağırlık değerleri 700 olarak belirlenmiştir: navigasyon etiketlerindeki büyük harfler 15 piksel (ls 0.0530em), alt başlıklar 19 piksel ve 32 piksel, bağlantı vurgusu ise 13 pikseldir. Ana metinle aynı yazı tipi kullanılmıştır; görsel fark yazı tipi değişikliğinde değil, ağırlıktadır. Harf aralığı: navigasyon etiketlerindeki büyük harfler için 0.0530em.

Aralıklar ve biçim

AmaçAnlam
Yoğunlukyoğun
Temel adım12px
Düğme yarıçapı12px
Kart yarıçapı12px
Gölgelerhayır - gölgeler yerine kenarlıklar
Bölümler arasında80-120px
Sayfa genişliği1200px

Yapay zeka, web sitenizi Duolingo tarzında oluşturacak ve içeriğini dolduracak.

  • Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
  • Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
  • En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
  • Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.

Benzer stiller

  • Family — Krem rengi parşömen kağıdı üzerine bir peri masalından bir sayfa.
  • Say Briefly — Krem rengi kağıda hazırlanmış yaratıcı ajans eskiz defteri.
  • Flying Papers — Cumartesi Sabahı Çizgi Filminde Bir İtiraf
  • Portrait — Krem rengi kağıda Polaroid fotoğraflarla yakalanmış bir anılar duvarı. Koyu mavi mürekkebin tek metin, tek yapı çizgisi ve tek çerçeve rengi olarak kullanıldığı, parlak krem rengi bir anı defteri; "Kayıt Ol" düğmesinde ve italik yazılmış "sonsuza dek" kelimesinde yalnızca bir kez görünen ve bir daha asla tekrarlanmayan tek bir el çizimi gökkuşağıyla.
  • Karl — Güneşli bir günde 3 boyutlu açılır kitap tarzında bir diorama.
  • Navigate — Bir panoya yapıştırılmış büyük bir çıkartma seti: büyük, grotesk bir yazı tipi, hepsi tablet şeklinde ve bir logo gibi tekrarlanan beş çok renkli simge.
  • Monte — Pas rengi tonlarıyla bezenmiş kıyı şeridinde bir sabah.
  • MotherDuck — Krem rengi kağıt üzerine renkli kalemlerle yazılmış terminal kodu.
  • Wise Design — Küresel bir caddede neon ışıklı bir pazar tezgahı; kalabalık pazar yerinde göz kamaştıran parlak yeşil bir tabela, arkasında ise zarif bir şekilde yerleştirilmiş şık bir ürün kullanıcı arayüzü.
  • Hatch — El çizimi, samizdat tarzı bir tasarım, pastel renkli şeker kaseleriyle harmanlanmış. Krem rengi kağıt üzerine nane tonları, konfeti noktaları ve hap şeklinde eylem çağrıları yerleştirilmiş; büyük, kalın serif yazı tipi eğlenceyi ima ederken, köşede mavi bir maskot göz kırpıyor.
  • Superr — Öğleden sonraki yumuşak ışıkta, sıcak bir okul defteri. Krem rengi bir sayfa, kapağı olmayan turuncu bir kalem ve soyulmayı bekleyen bir yığın lamineli isim etiketi.
  • Mews — Pembe renge bürünmüş, şafak vakti bir otel kontrol merkezi. Beyaz duvarlı, güneş ışığı alan bir çalışma alanı; cesur siyah yazı tipleri, sıcak krem rengi kartlar ve tek bir canlı pembe işlem düğmesi her ekranı tanımlıyor—kurumsal bir kısıtlama yerine neşeli bir özgüven.