Nasıl Neumorphism UI Tasarımı Uygulanır
Neumorphism (soft UI), modern kullanıcı arayüzü tasarımında fiziksel derinlik hissi yaratan, gölge ve ışık oyunlarıyla öne çıkan bir tasarım trendi olarak dikkat çeker. Nasıl Neumorphism UI Tasarımı Uygulanır promptu, bu tasarım prensiplerini adım adım uygulayarak erişilebilir ve modern UI bileşenleri oluşturmanızı sağlar. Düğme, kart, giriş alanı, toggle veya slider gibi farklı bileşen tipleri için HTML yapısı ve CSS/SCSS kodunu otomatik üretir.
Prompt, temel renk paletinin ve gölge değerlerinin tanımlanmasıyla başlar; açık ve koyu gölge tonları, gölge yayılma mesafesi ve bulanıklık parametreleri Neumorphism prensiplerine uygun şekilde önerilir. Ardından, bileşen tipi, boyutu ve görsel durumu (hover, aktif vb.) gibi değişkenler aracılığıyla özelleştirilmiş kod üretir. Erişilebilirlik standartlarına uygun renk kontrastı, semantik HTML etiketleri ve ARIA özellikleri otomatik olarak entegre edilir.
Görsel Tasarım ve front-end geliştirme alanlarında çalışan profesyoneller için idealdir. Cursor , Figma AI veya v0 (Vercel) gibi araçlarla birlikte kullanıldığında, tasarım-kod döngüsünü hızlandırır. Bileşenler, box-shadow özellikleriyle içe veya dışa doğru kabartma efekti oluşturur; border-radius ile yumuşak köşeler sağlar. Hover ve aktif durumlar için renk geçiş efektleri, kullanıcı etkileşimini zenginleştirir. Web ve mobil uygulamalarda modern, estetik ve işlevsel arayüzler oluşturmak, prototipleme süreçlerini optimize etmek ve tasarım sistemleri geliştirmek için kapsamlı bir çözüm sunar.
{ }Değişken Açıklamaları:
- [TEMEL RENK]: Neumorphism tasarımının arka plan rengini ve gölge tonlarının temelini oluşturan ana rengi belirtir; hex kodu veya RGB değeri. Örneğin: #e0e5ec, #f0f0f3, #d1d9e6, rgb(224, 229, 236
- [BILEŞEN TIPI]: Oluşturulacak UI bileşeninin türünü tanımlar; HTML yapısını ve stil özelliklerini belirler. Örneğin: Düğme, Kart, Giriş Alanı, Toggle, Slider
- [BILEŞEN BOYUTU]: Bileşenin genişlik ve yükseklik değerlerini piksel veya yüzde cinsinden belirtir; responsive tasarım için esneklik sağlar. Örneğin: 200px x 60px, 300px x 150px, 100% x 50px, 80px x 80px
- [GÖRSEL DURUM]: Bileşenin etkileşim durumlarını tanımlar; hover, aktif, focus gibi durumlarda uygulanacak stil değişikliklerini belirler. Örneğin: Hover, Aktif, Focus, Disabled, Normal
Değişkenleri Düzenle
Adım 1: Neumorphism için temel renk paletini ve gölge değerlerini tanımla.
* Arka plan rengi: [Temel_Renk]
* Açık gölge rengi: [Temel_Renk]'ten biraz daha açık bir ton.
* Koyu gölge rengi: [Temel_Renk]'ten biraz daha koyu bir ton.
* Gölge yayılma mesafesi ve bulanıklık değerleri için Neumorphism prensiplerine uygun başlangıç değerleri öner.
Adım 2: Belirtilen [Bileşen_Tipi] için HTML yapısını oluştur.
* Eğer [Bileşen_Tipi] "Düğme" ise, `` etiketi kullan.
* Eğer [Bileşen_Tipi] "Kart" ise, `` etiketi kullan ve içerisine örnek bir başlık ve paragraf ekle.
* Eğer [Bileşen_Tipi] "Giriş Alanı" ise, `` etiketi kullan.
* Eğer [Bileşen_Tipi] "Toggle" ise, bir checkbox ve label kullanarak erişilebilir bir toggle yapısı oluştur.
* Eğer [Bileşen_Tipi] "Slider" ise, `` etiketi kullan.
Adım 3: Oluşturulan HTML yapısına Neumorphism stilini uygulayan CSS/SCSS kodunu yaz.
* [Bileşen_Boyutu] parametresine göre bileşenin genişlik ve yüksekliğini ayarla.
* [Görsel_Durum] parametresine göre (örneğin "Hover" veya "Aktif" durumları için) farklı gölge ve renk geçiş efektleri ekle.
* Bileşenin içindeki metin veya ikonlar için uygun renk kontrastını sağla.
* `border-radius` değerini yumuşak bir görünüm için ayarla.
* `box-shadow` özelliklerini kullanarak içe veya dışa doğru bir kabartma efekti oluştur.
Adım 4: Erişilebilirlik (Accessibility) kontrolü yap.
* Oluşturulan [Bileşen_Tipi] için renk kontrast oranlarını kontrol et ve WCAG standartlarına uygunluğunu değerlendir.
* Gerekirse, kontrastı artırmak için renk önerilerinde bulun.
* Klavye ile gezinme ve odaklanma durumları için (`:focus` stili) uygun görsel ipuçları ekle.
Adım 5: Kod optimizasyonu ve en iyi uygulamalar.
* Oluşturulan CSS/SCSS kodunu daha modüler ve yeniden kullanılabilir hale getirmek için önerilerde bulun (örneğin, CSS değişkenleri kullanma).
* Performans açısından olası iyileştirmeler hakkında bilgi ver.
* Neumorphism tasarımının hangi durumlarda daha uygun olduğunu ve hangi durumlarda alternatif yaklaşımların düşünülmesi gerektiğini tartış.
Cursor, bu adımları takip ederek bana adım adım kod parçacıkları ve açıklamalar sun. Her adımda benden geri bildirim bekle ve sorular sorarak ilerleyelim.
Cursor, Neumorphism UI tasarım prensiplerini kullanarak modern ve erişilebilir bir kullanıcı arayüzü bileşeni oluşturmama yardımcı ol.
Adım 1: Neumorphism için temel renk paletini ve gölge değerlerini tanımla.
* Arka plan rengi: [Temel_Renk]
* Açık gölge rengi: [Temel_Renk]'ten biraz daha açık bir ton.
* Koyu gölge rengi: [Temel_Renk]'ten biraz daha koyu bir ton.
* Gölge yayılma mesafesi ve bulanıklık değerleri için Neumorphism prensiplerine uygun başlangıç değerleri öner.
Adım 2: Belirtilen [Bileşen_Tipi] için HTML yapısını oluştur.
* Eğer [Bileşen_Tipi] "Düğme" ise, `` etiketi kullan.
* Eğer [Bileşen_Tipi] "Kart" ise, `` etiketi kullan ve içerisine örnek bir başlık ve paragraf ekle.
* Eğer [Bileşen_Tipi] "Giriş Alanı" ise, `` etiketi kullan.
* Eğer [Bileşen_Tipi] "Toggle" ise, bir checkbox ve label kullanarak erişilebilir bir toggle yapısı oluştur.
* Eğer [Bileşen_Tipi] "Slider" ise, `` etiketi kullan.
Adım 3: Oluşturulan HTML yapısına Neumorphism stilini uygulayan CSS/SCSS kodunu yaz.
* [Bileşen_Boyutu] parametresine göre bileşenin genişlik ve yüksekliğini ayarla.
* [Görsel_Durum] parametresine göre (örneğin "Hover" veya "Aktif" durumları için) farklı gölge ve renk geçiş efektleri ekle.
* Bileşenin içindeki metin veya ikonlar için uygun renk kontrastını sağla.
* `border-radius` değerini yumuşak bir görünüm için ayarla.
* `box-shadow` özelliklerini kullanarak içe veya dışa doğru bir kabartma efekti oluştur.
Adım 4: Erişilebilirlik (Accessibility) kontrolü yap.
* Oluşturulan [Bileşen_Tipi] için renk kontrast oranlarını kontrol et ve WCAG standartlarına uygunluğunu değerlendir.
* Gerekirse, kontrastı artırmak için renk önerilerinde bulun.
* Klavye ile gezinme ve odaklanma durumları için (`:focus` stili) uygun görsel ipuçları ekle.
Adım 5: Kod optimizasyonu ve en iyi uygulamalar.
* Oluşturulan CSS/SCSS kodunu daha modüler ve yeniden kullanılabilir hale getirmek için önerilerde bulun (örneğin, CSS değişkenleri kullanma).
* Performans açısından olası iyileştirmeler hakkında bilgi ver.
* Neumorphism tasarımının hangi durumlarda daha uygun olduğunu ve hangi durumlarda alternatif yaklaşımların düşünülmesi gerektiğini tartış.
Cursor, bu adımları takip ederek bana adım adım kod parçacıkları ve açıklamalar sun. Her adımda benden geri bildirim bekle ve sorular sorarak ilerleyelim.
Bu Prompt Seni Bekliyor
Cursor için hazırlanmış bu promptu anında kopyala, kullan.
Ücretsiz üye ol, binlerce prompta eriş.
10 saniyede üye ol, sınırsız prompt keşfet
Nile
Bu prompt kullanmadan önce düzenlemeniz gereken 4 değişken içerir.
Keşfet
Alternatif Araçlar
Biliyor muydunuz?
Negatif yerine pozitif tarif et: 'insan olmasın' yerine 'tamamen doğa, ıssız bir manzara' demek daha iyi sonuç verir.
En Popüler
İlgili Etiketler
Benzer promptlar
Puan ver