Yapay Zekayla Güzel Görünümlü Bir Uygulama Nasıl Tasarlanır

Yapay zekadan iyi görünümlü bir uygulama almak için ona “güzel görünsün” demeyi bırakın ve bir tasarımcının isteyeceği şeyleri verin: beğendiğiniz iki ya da üç referans, adlandırılmış bir tasarım yönü ve yazı tipi, renk ve boşluk için somut kurallar. Sonra bir ekran yapın, doğru olana kadar düzeltin ve yapay zekanın aynı sistemi diğer her yere uygulamasını sağlayın. “Yapay zeka görünümü” denen şeyin çoğu belirsiz istemlerin ortalama cevaplar üretmesinden gelir; belirli girdi belirli bir tasarım üretir.

Yapay zeka tasarımları neden genel görünür

Yapay zekadan “modern, temiz bir SaaS paneli” isterseniz, gördüğü her panelin istatistiksel ortalamasını verir: aynı sans-serif yazı tipi, mor-maviye geçen bir gradyan, yumuşak gölgeli yuvarlak kartlar, dairelerin içinde emoji benzeri simgeler ve “İş akışınız, sadeleşti” yazan ortalanmış bir ana bölüm. Tek tek seçimlerin hiçbirinde yanlış bir şey yok. Sorun, hiçbirinin sizin ürününüz için seçilmemiş olması.

İyi tasarım büyük ölçüde kararlardır. Sizin göreviniz, uygulamaya karakter kazandıran birkaç kararı vermek ve binlerce küçük kararı yapay zekanın tutarlı biçimde almasını sağlamaktır.

Adım 1: İstemden önce referans toplayın

Ürününüze uyan görünüme sahip iki ila dört referans bulmak için yirmi dakika ayırın: uygulamalar ya da web siteleri. İyi kaynaklar, kitlenizin zaten kullandığı ürünler, tasarım galerileri ve yakın alanlardaki şirketlerin siteleridir.

Her biri için neyi beğendiğinizi sade sözlerle yazın:

“Bol beyaz alan, içerik dar bir sütunda, büyük sayıların üstünde küçük gri etiketler.”
“Ince çizgili yoğun tablolar, kart gölgesi yok, eylemler için tek bir vurgu rengi.”
“Büyük serif başlıklar, sıcak kırık beyaz arka plan, çizim yerine fotoğraf.”

Bu açıklamaları yapay zekaya verin ve aracınız görsel kabul ediyorsa ekran görüntüleri ekleyin. İlham alırken ürünü değil niteliklerini alın: başka bir şirketin yerleşimini, markasını ya da metnini olduğu gibi kopyalamak hem hukuki hem de itibar açısından risklidir.

Adım 2: Bir tasarım yönü seçin ve adlandırın

Tasarım yönü, hissin kısa bir tanımıdır. Yapay zekaya aldığı her karar için bir filtre verir. İyi çalışan birkaç tanesi:

Yön	Tipik tercihler	Uygun olduğu alan
Sakin ve minimal	Nötr palet, geniş boşluk, tek vurgu, ince kenarlıklar	Üretkenlik araçları, finans, sağlık
Editoryal	Serif başlıklar, güçlü yazı kontrastı, büyük görseller, dar metin sütunları	Portföyler, yayınlar, premium hizmetler
Yoğun ve işlevsel	Sıkı satırlar, küçük yazı, tablolar, klavye dostu	İç araçlar, paneller, yönetim ekranları
Sıcak ve samimi	Yuvarlak şekiller, yumuşak renkler, çizimler, daha büyük dokunma alanları	Tüketici uygulamaları, topluluk, eğitim
Cesur ve grafik	Yüksek kontrast, büyük yazı, düz renk blokları	Etkinlikler, lansmanlar, yaratıcı markalar

Bunu, uygulamanın kimler için olduğuyla birlikte ilk isteminize koyun:

Bağımsız bir yoga stüdyosu için bir randevu uygulaması yap. Tasarım yönü: basılı bir stüdyo programı gibi sakin ve minimal. Sıcak kırık beyaz arka plan, koyu siyaha yakın metin, düğmeler ve seçili durumlar için tek bir sönük adaçayı yeşili vurgu. Başlıklar için serif, metin için temiz bir sans-serif. Geniş boşluk, gradyan yok, gölge yok, emoji yok. Önce mobil.

Adım 3: Kuralları koyun: yazı, renk ve boşluk

Bu üç unsur görsel kalitenin büyük kısmını taşır. Bunlar hakkında açık olmak, yapabileceğiniz en büyük tek iyileştirmedir.

Tipografi

Bir ya da iki yazı tipi. Bir başlık yazısı ve bir metin yazısı ya da birkaç kalınlıkta tek bir aile.
Bir yazı ölçeği. Her bileşenin rastgele seçmesi yerine, tutarlı biçimde kullanılan birkaç boyut; örneğin 14, 16, 20, 28 ve 40 px.
Okunabilir metin. Webde yaklaşık 16 px, yaklaşık 1,5 satır yüksekliği ve uzun metinler için yaklaşık 60–75 karakterlik satır uzunluğu.
Hiyerarşi rengle değil, kalınlık ve boyutla. Başlıklar daha kalın ve büyük; ikincil metin daha küçük ve daha yumuşak gri.

Renk

Çoğunlukla nötrler. Arka planlar, yüzeyler, kenarlıklar ve metin grileri işin büyük kısmını yapar.
Bir vurgu rengi eylemler ve seçili durumlar için. İkincisi ancak net bir işlevi varsa.
Anlamsal renkler başarı, uyarı ve hata için; yalnızca bu amaçlarla kullanılır.
Kontrast. WCAG 2, normal metinler için en az 4,5:1, büyük metinler için 3:1 kontrast oranı ister. Beyaz üzerine açık gri metin çoğu zaman yetersiz kalır; yapay zekadan kontrol etmesini isteyin.
Karanlık mod, istiyorsanız, ters çevrilmiş değil bilinçli olarak tasarlanmış olmalı.

Boşluk ve yerleşim

Bir boşluk ölçeği, örneğin 4, 8, 12, 16, 24, 32, 48, 64 px. Her şey bu ölçeğe oturur.
Hizalama. Kenarlar birbirine denk gelir; içerik bir ızgarada ya da tutarlı bir maksimum genişlikte sütunda durur.
Yakınlık. İlgili şeyler birbirine yakın, ilgisiz şeyler daha uzakta. Bu tek kural çoğu karmaşık ekranı düzeltir.
Daha az kapsayıcı. Her şeyin kart olması gerekmez. Kenarlıklar, ayırıcılar ve boş alan içeriği daha sessizce gruplayabilir.

Sistemi bir kez kuran bir istem:

Daha fazla ekran yapmadan önce küçük bir tasarım sistemi kur ve her yerde kullan: 14/16/20/28/40 px yazı ölçeği, gövde satır yüksekliği 1,5, 4/8/12/16/24/32/48 px boşluk ölçeği, neredeyse beyazdan neredeyse siyaha nötrler, birincil eylemler için yalnızca tek bir vurgu rengi (#3F6B5A) ve hatalar için yalnızca kırmızı. Düğmeler, girdiler ve kartlar aynı köşe yuvarlaklığını paylaşsın. Tüm metinlerin WCAG AA kontrastına uyduğunu kontrol et.

Kod odaklı bir oluşturucuyla çalışıyorsanız, bu genellikle tasarım belirteçlerine dönüşür: CSS değişkenleri ya da bir Tailwind teması. Yani sonraki değişiklikler tek bir yerden yapılır.

Adım 4: Önce tek bir ekranı düzgünce yapın

On iki ekran üretip sonra hepsini düzeltmeye çalışmayın. Kullanıcıların en çok gördüğü ekranı seçin, çoğu zaman panel ya da ana liste, ve doğru olana kadar üzerinde çalışın. Sonra:

Diğer tüm sayfalar için paneli referans al: aynı üst bölüm, boşluk, yazı boyutları, düğme stilleri ve tablo stili. Ayarlar ve Rezervasyonlar sayfalarını buna uyacak şekilde güncelle.

Bitmiş bir referans ekran, zevkinizi herhangi bir sıfattan çok daha iyi anlatır.

Adım 5: Küçük ve belirli isteklerle iterasyon yapın

Yapay zekaya geri bildirim, kıdemli olmayan bir tasarımcıya verilen geri bildirim gibi çalışır: belirli, her seferinde bir alan ve neyin korunacağı konusunda net.

Belirsiz	Belirli
“Daha güzel yap.”	“Bölümler arasındaki boşluğu 64 px’e çıkar, sayfa başlığını 40 px yap ve ikincil metni orta griye yumuşat.”
“Karışık görünüyor.”	“İstatistik satırındaki kart kenarlıklarını kaldır, sayıları sola hizala ve etiketleri küçük harflerle üstüne koy.”
“Dikkat çeksin.”	“Vurgu rengini yalnızca birincil düğmede kullan. İkincil düğmeleri çerçeveli yap.”
“Mobil görünümü iyileştir.”	“Telefon genişliklerinde filtreleri bir Filtreler düğmesinden açılan bir panelde topla ve tablo satırlarını kartlara dönüştür.”

Her zaman neyin korunacağını da ekleyin: “tüm rotaları, metinleri ve özellikleri aynı tut”. Böylece görsel bir düzenleme sessizce işlevsellik kaldırmaz. Bir sonrakine geçmeden önce her değişikliği telefon boyutundaki ekranda kontrol edin; küçük ekranlarda neyin iyi göründüğü için mobil uyumlu bir web uygulaması nasıl yapılır rehberine bakın.

Adım 6: İyiyi genelden ayıran ayrıntılar

Yapı doğru olduğunda, şu küçük şeyler bir uygulamayı bitmiş hissettirir:

Boş durumlar. Yeni bir kullanıcının veri yokken gördükleri: kısa bir açıklama ve tek bir net eylem, boş bir tablo değil.
Yükleme durumları. Her yerde dönen simgeler değil, içeriğin şeklindeki iskeletler.
Hata durumları. Hatanın kaynağı olan alanın yanında sade dilde mesajlar.
Her etkileşimli öğede üzerine gelme, odak ve basılı durumlar. Odak halkaları klavye kullanıcıları için önemlidir.
Gerçek içerik. “Lorem ipsum” ve “Ahmet Yılmaz” gibi yer tutucuları gerçekçi metin ve verilerle değiştirin; yer tutucu içerik yerleşim sorunlarını gizler.
Tek bir setten simgeler, bir ya da iki boyutta ve tutarlı çizgi kalınlığıyla.
Amaçlı görseller. Ürününüzün, mekanınızın ya da insanlarınızın gerçek fotoğrafları genel stok görsellerden daha iyidir. Stok ya da üretilmiş görseller kullanıyorsanız tutarlı bir stil koruyun.
Metin. Kısa, belirli etiketler (“Dersi rezerve et”, “Gönder” yerine) algılanan kaliteye her renk seçimi kadar katkı sağlar.

Sık yapılan hatalar

Tek bir istemde her şeyi yeniden tasarlamak. Büyük yeniden yazımlar gerilemelere yol açar. Sayfa sayfa ilerleyin.
Çok fazla vurgu rengi. Her şey öne çıkarılmışsa hiçbir şey öne çıkmaz.
Her şeyi ortalamak. Ortalanmış metin, başlık dışında taranması zordur; içeriğin çoğunu sola hizalayın.
Küçük, düşük kontrastlı metin. Büyük bir monitörde zarif görünür, güneş altında bir telefonda okunamaz.
Hiyerarşi yerine süsleme. En önemli eylemin belli olmadığı bir ekranı gradyanlar ve gölgeler düzeltemez.
Açılış sayfasını görmezden gelmek. Birçok ürün için ilk izlenim budur; dönüşüm sağlayan bir açılış sayfası nasıl yapılır rehberine bakın.

Tasarımın ötesinde daha fazla istem kalıbı için yapay zeka uygulama oluşturucuları için istem nasıl yazılır rehberini okuyun. Ürününüz bir tasarım ya da fotoğraf portföyüyse, portföy sitesi nasıl yapılır sunum konusunda daha derine iner.

Mythex ile tasarlamak

Mythex’te tasarımı sohbette tarif edersiniz, canlı önizlemede görürsünüz ve bir sonraki değişiklikten önce telefon boyutundaki çerçeveyi kontrol edersiniz. Dokümanlarda bunun için kısa kalıplar var: neyin değişeceğini ve neyin korunacağını adlandırmaya yönelik tasarım ve arayüz istemleri ve özellik kaybetmeden her seferinde bir sayfayı yenilemek için arayüzünüzü yeniden tasarlayın. Mythex ayrıca sohbette stok fotoğraf arayabilir ya da bir görsel üretebilir — bir ana görsel, bir arka plan, bir paylaşım görseli — ve istediğinizde uygulamaya yerleştirebilir. Bir deneme ters giderse, o denemeden önceki kontrol noktasına dönün. Mevcut bir tasarımla başlayıp uyarlamayı tercih ederseniz şablonlara göz atın.

Sorular

Yapay zekayla tasarlanan uygulamalar neden hep birbirine benziyor?

Çünkü belirsiz bir istem en ortalama cevabı üretir: aynı yazı tipleri, geçişli renkler, yuvarlak kartlar ve ortalanmış ana bölüm. Yapay zekaya referanslar, adlandırılmış bir tasarım yönü ve yazı tipi, renk ve boşluk için somut kurallar verdiğinizde, çıktı genel görünümden çıkar.

Bir stili kopyalatmak için yapay zekaya ekran görüntüsü verebilir miyim?

Birçok yapay zeka oluşturucu görsel eklerini kabul eder ve ekran görüntüsü bir stili göstermenin en net yollarından biridir. Başka bir ürünün kopyasını istemek yerine, hoşunuza giden şeyleri anlatın: boşluğu, yazı tipini, renk kullanımını.

Yapay zekayla uygulama yapıyorsam tasarımcıya ihtiyacım var mı?

İlk sürüm için gerekmez. Bir tasarımcı en çok, korunması gereken bir markanız varsa ya da yerleşim kararlarının insanların ürünü ne kadar iyi kullanabildiğini etkilediği karmaşık bir ürününüz varsa katkı sağlar. O zamana kadar net referanslar ve küçük iterasyonlar sizi temiz ve kullanışlı bir arayüze ulaştırır.

Bir uygulamayı profesyonel gösteren nedir?

Süslemeden çok tutarlılık: tek bir yazı ölçeği, amacına uygun kullanılan küçük bir renk paleti, sabit bir ölçeğe oturan boşluklar, hizalı kenarlar ve her ekranda en önemli şeyin açıkça görünmesini sağlayan net bir hiyerarşi.