Next.js ile Awwwards Tarzı Minimalist UI Tasarlamanın 3 Yöntemi

Bir hesap makinesi bileşeni oluşturun diye AI’ya basit bir komut verdiğinizde, sonuç neredeyse her zaman aynıdır: beyaz arka plan, siyah metin, varsayılan tarayıcı stillerinde girdi alanları ve mavi bir gönder butonu. Fonksiyonel olabilir, ama unutulmaya mahkûmdur. Peki, AI’dan kalıcı izlenim bırakan, Awwwards tarzı bir arayüz nasıl elde edilir?

Son üç ayımı MonuMoney.in adlı bir fintech hesap makinesi platformunu geliştirerek geçirdim. Next.js 15, Tailwind CSS ve Google AI Studio kullanarak inşa ettiğim bu proje, 14 farklı hesap makinesi, tam bir blog sistemi ve SEO altyapısını içeriyor. Tasarım için bir ajansla çalışmadım, kıdemli bir geliştirici de değildim — sadece hafta içleri sabah 9’dan akşam 5’e kadar dijital pazarlama işimi yaparken, 19.00’dan 22.00’ye kadar Next.js üzerinde çalıştım. Peki, AI’nın ürettiği sıradan UI’lardan nasıl kurtuldum? İşte AI’yı yönlendirmenin ve minimalist, premium bir arayüz yaratmanın üç temel yöntemi.

Tasarım Sistemini AI’dan Önce Kurun

AI’ya "bana bir hesap makinesi bileşeni ver" dediğinizde, sonuç ortalamaya yakın bir çıktı olur. Bunun nedeni, AI’nın istatistiksel olarak en sık gördüğü örnekleri üretmesidir. Bu sorunu çözmek için yapılması gereken, AI’nın çalışma alanını daraltmaktır. Ben, tasarım sistemini baştan tanımlayarak AI’nın varsayılan stillerden kurtulmasını sağladım.

İlk adım, global tasarım kısıtlamalarını belirlemek oldu. Her bileşen için geçerli olacak bu kuralları, Claude’a tanımlattım ve ardından Google AI Studio için üretim komutlarına dönüştürdüm. İşte kullanılan tasarım sistemi:

• Renkler: CSS değişkenleri üzerinden yönetilen karanlık mod varsayılanı ve ışık modu geçişi. Sayfa arka planı için bg-page, kartlar için bg-card, ana metinler için text-primary, ikincil metinler için text-secondary ve soluk metinler için text-muted kullanıldı. Süslemelerde yer alan renkler (accent-blue, accent-green) yalnızca veri görselleştirmesi için kullanıldı.
• Kenarlıklar: Düşük kontrastlı, ince kenarlıklar (border-border-subtle) tercih edildi. Keskin kenarlıklar yerine yumuşak geçişler kullanıldı.
• Fontlar: Başlıklarda font-serif (Lora), kullanıcı arayüzünde font-sans (Inter) ve sayısal değerlerde font-mono (JetBrains Mono) tercih edildi.
• Boyutlama: Piksel hassasiyetine sahip değerler ([24px], [32px], [48px]) kullanıldı. Tailwind’in kestirme stilleri (p-4, m-6 gibi) kullanılmadı.
• Yuvarlama: Kartlar için [20px], girdi alanları için [12px] ve butonlar için [8px] yuvarlama yarıçapı belirlendi.
• Gölgeler: Tamamen yasaklandı. Derinlik, kenarlık ve arka plan kontrastıyla sağlandı.
• Metin gradyanları: Sadece sonuç kartlarında arka plan olarak kullanıldı.

Bu kurallar sayesinde AI, beyaz arka planlı ve mavi butonlu bir arayüz üretemedi — çünkü sistemde yer almayan stilleri kullanması mümkün değildi.

Tipografi ile Sinematik Bir Etki Yaratın

Standart AI çıktılarında metin boyutları genellikle text-xl veya text-2xl olarak belirlenir. Oysa premium bir UI’da tipografi, görsel hiyerarşi ve okunabilirlik açısından çok daha özenli tasarlanır. Ben de hesap makinesinin ana sonuç sayılarını ve başlıklarını yeniden şekillendirdim.

Örneğin, ana sonucun yer aldığı sayı için şu stiller kullanıldı:

• Mobil: text-[40px] ve md:text-[48px]
• Font: font-bold ve font-serif
• Metin rengi: text-primary
• Satır yüksekliği: leading-none (satır arası boşluğu tamamen ortadan kaldırarak sayıların heykelsi bir his vermesi sağlandı)

Başlıklar içinse tracking-tight kullanılarak harf aralıkları sıklaştırıldı ve metinlerin ucuz görünmesi engellendi. Body metinlerindeyse leading-[1.7] değeriyle okunabilirliği artırırken, yardımcı metinlerde text-[12px] ve text-muted kullanılarak ikincil bilgilerin önemini vurguladım.

Gölgeleri Yasaklayın, Derinliği Kontrast ile Sağlayın

AI’nın en sık başvurduğu yöntemlerden biri, shadow-lg gibi gölgeleri kullanarak bileşenlere derinlik kazandırmaktır. Ben ise bu yaklaşımı tamamen terk ettim ve derinliği yalnızca arka plan ve kenarlık kontrastıyla oluşturmayı tercih ettim.

Kart sisteminde üç temel seviye kullanıldı:

1. Sayfa arka planı (`bg-page`): En alt seviye.
2. Standart kartlar (`bg-card`): Ortadaki seviye, ince kenarlık ve yuvarlatılmış köşelerle tanımlı.
3. Yardımcı kartlar (`bg-card-alt`): Hafifçe açılarak derinlik hissini artıran varyant.

Örneğin, sonuç kartları için hafif bir gradyan (bg-gradient-to-br from-card to-accent-green/5) kullanıldı. Bu sayede gölgelere ihtiyaç kalmadı ve bileşenler daha modern bir görünüme kavuştu. Aynı zamanda, tablo düzenleyicilerde de overflow-hidden kullanılarak kenarların düzgün bir şekilde kesilmesi sağlandı.

AI’yı Yönlendirmek için Tam Komut Mimarisi

Tüm bu kuralların ardından, AI’ya verilen komutların da yeniden tasarlanması gerekti. Örneğin, bir hesap makinesi bileşeni için kullanılan tam komut şu şekildeydi:

React istemci bileşeni olan EmiCalculatorClient.jsx için aşağıdaki kuralları uygula: - Tasarım sistemi: bg-page, bg-card, text-primary, accent-blue gibi CSS değişkenlerini kullan. Hiçbir yerde hardcode edilmiş renk (#fff, #000) kullanma. - Kartlar: bg-card, border-border-subtle, rounded-[20px] ve p-[24px] stilleriyle oluştur. - Sonuç kartı: bg-gradient-to-br from-card to-accent-blue/5 ile renklendir. - Tipografi: Ana sonuç sayısı için text-[48px], font-serif, leading-none; başlıklar için tracking-tight kullan. - Düzen: lg:grid-cols-12, lg:col-span-7 ve lg:col-span-5 gibi ızgara sistemini pixel hassasiyetinde uygula. - Kaydırıcılar: className="w-full h-[6px] bg-border-subtle rounded-lg" ile minimalist bir tasarım oluştur.

Bu şekilde, AI’nın ürettiği her bileşen, tasarım sistemine tam olarak uygun hale geldi. Sonuç olarak, sıradan bir UI’dan uzaklaşan, estetik ve işlevsel bir arayüz ortaya çıktı.

Sonuç: AI ile Premium Tasarım Mümkün mü?

AI’nın sunduğu kolaylıklar sayesinde hızlı prototipler oluşturmak mümkün. Ancak dikkat edilmesi gereken nokta, AI’nın varsayılan çıktılarının genellikle sıradan olmasıdır. Bu sorunu aşmanın en etkili yolu, AI’yı bir tasarım sistemiyle sınırlamak ve ona detaylı komutlar vermektir. MonuMoney.in’in başarısı, AI’nın gücünü doğru yönlendirmekle mümkün oldu. Gelecekte, AI’nın daha da gelişmesiyle birlikte, bu tarz tasarım kısıtlamalarıyla oluşturulan arayüzlerin standart hale gelmesi kaçınılmaz görünüyor.