Yapay zeka, çeşitli alanlarda insan yeteneklerine yaklaştı ancak tasarım, uzun süredir AI'nın zorlandığı alanlardan biri olmaya devam ediyor. Ancak bence pek çok kişi "AI ile tasarım yapmak" kavramını biraz yanlış anlıyor.
Bu makalede, Leon Lin'in (@LexnLin) "How To Actually Design With AI" başlıklı gönderisinden yola çıkarak, AI kullanarak tasarım yapmanın pratik yollarını Türkçe olarak derledim.
Makalenin sonunda, Claude ile yüksek kaliteli tasarımlar oluşturmak için bir tasarım sistemi kiti dağıtıyorum.
Kiti makalenin alt kısmından alabilirsiniz.
Akılda Tutulması Gereken Ön Koşullar
"AI ile tasarım yapmak", her şeyi AI'ya bırakmak anlamına gelmez. Fikirler, yön, sezgi ve yaratıcılık nihayetinde sizden gelir. AI'yı, bu şeylere "şekil veren (uygulayan)" bir araç olarak düşünürseniz anlaması daha kolay olur.
Genel akış şu 3 adımdan oluşur:
- Fikirleri kendiniz geliştirin
- İlham toplayın
- Düşüncelerinizi komutlara dönüştürün ve AI'nın oluşturmasına izin verin
Cursor, Codex veya Claude gibi herhangi bir aracı veya ortamı (platform) kullanabilirsiniz. İşin özü, "düşüncelerinizi talimatlara dönüştürmekte" yatar.
AI, uygulama konusunda çok iyidir ancak henüz gerçek yaratıcılığa sahip değildir. Boşluk, tipografi, renk teorisi ve hiyerarşi gibi "tasarım kurallarını" anlar. Ancak neyin "gerçekten iyi", "özgün" veya "anlamlı" olduğunu, yani zevki anlayamaz.
En büyük fark buradadır. Bu noktada, AI'ya gerçek zevki veremezsiniz ancak var olduğunu varsayarak bu sınırlamanın etrafından dolaşabilirsiniz.
Yöntem 1: Tasarım Becerilerini Kullanma
Bu en hızlı yaklaşımdır. Zamanınız olmadığında veya küçük bir şey yapıyorken, önceden hazırlanmış "tasarım becerilerine" güvenmek etkilidir.
Örnekler:
- Impeccable (impeccable.style
- Emil Kowalski'nin UI becerileri (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
Süreç çok basittir:
- Tasarım becerilerini ekleyin
- AI'ya bağlam verin
- Bir site, uygulama veya poster oluşturması için birkaç komut gönderin
- Bariz sorunları düzeltin
- Yayınlayın
Sonuçlar genellikle "oldukça iyidir." Diğer AI tarafından oluşturulmuş tasarımlara benzeyebilirler ancak yüksek kaliteli beceriler kullanmak, en kötü başarısızlıkları ve "AI benzeri" görünümü önler. Bu, birçok kişinin gerçekten kullandığı yöntemdir.
Yöntem 2: AI ile Kendiniz Tasarım Yapma
"Gerçekten öne çıkan" bir şey yaratmak istiyorsanız, bir adım daha ileri gitmeniz gerekir. Kullanıcılarınızın, ürününüze dokunduklarında "iyice düşünülmüş" olduğunu hissetmelerini istersiniz — bunun için daha bilinçli bir süreç gerekir.
İster mobil uygulama, ister masaüstü uygulaması, web sitesi, açılış sayfası, kontrol paneli veya poster olsun, önce net bir yöne ihtiyacınız vardır. Ne yapmak istediğinizi bilmiyorsanız, AI sizin için bulamaz.
"Anlam" ile Başlayın
Her şeyden önce, temeli tanımlayın. Bu soruları yanıtlamayı deneyin:
- Bu kimin için?
- Hangi sorunu çözüyor?
- Nasıl hissettirmeli?
- Neyi temsil ediyor?
Arayüz, bir ürünün "anlamını" yansıtır. Bunları yazın. Burada da AI kullanabilirsiniz ancak püf nokta, AI'yı tasarım için değil, size soru sordurmak için kullanmaktır.
Örneğin, AI'nın size şunları sormasını sağlayın:
- Bu ürün neyle ilgili?
- Hedef kullanıcılar kimler?
- Hangi duyguları iletmek istiyorsunuz?
- Marka atmosferi nasıl olmalı?
- Hangi renkler ve yazı tipleri uygun?
- Minimalist / Eğlenceli / Premium / Teknik / Deneysel — hangi yön?
İlham Toplayın
Yön belirlendikten sonra referansları toplamaya başlayın. Güçlü bir kaynak, çeşitli kategorilerde gerçek ürün ekran görüntülerine sahip olan Mobbin'dir.
Burada önemli olan, sadece bakıp "güzel görünüyor" diye düşünmek değildir. Kendinize neden iyi olduğunu sorun.
- Düzeni mi?
- Boşluk kullanımı mı?
- Tipografisi mi?
- Yapısı mı?
- Etkileşimi mi?
Beğendiğiniz şeyleri kaydedin ve şu gibi klasörlere ayırın:
- Navigasyon
- Hero
- Fiyatlandırma
- Kartlar
- Mobil ekranlar
- Kontrol paneli
- Animasyon
- Tipografi
Kendi referans kitaplığınızı bu şekilde büyütmek için zaman ayırmak, "zevkinizi" geliştirmenin yoludur.
Diğer yararlı kaynaklar arasında Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee ve Lummi bulunur.
Not: tasarımları bütünüyle kopyalamaktan kaçının. Birden fazla fikri birleştirip ürününüze uygun hale getirerek yükseltmek önemlidir.
Yapıyı Haritalayın
Ardından, gerçekte ne oluşturmanız gerektiğini tanımlayın. Bir web sitesi için bu, navigasyon, hero, özellikler, fiyatlandırma, referanslar, harekete geçirici mesaj ve altbilgi olabilir.
Bir uygulama için ise, karşılama, ana sayfa, arama, profil, ayarlar, temel akışlar ve boş durumlar olabilir.
Her bölümün net içeriğe ihtiyacı vardır. Bir hero bölümü için bir başlık, açıklama, harekete geçirici mesaj ve görsellere ihtiyacınız vardır. AI, metin konusunda yardımcı olabilir ancak "netlik" nihayetinde sizden gelir.
Bileşen Bileşen Oluşturun
Son olarak, üretim zamanı. Referans aldığınız bireysel fikirleri alın ve ürününüze uyacak şekilde yeniden oluşturun.
"Bütün bir web sitesi yap" demek yerine, "bu stile dayanarak, markama uygun bir hero bölümü yap" demek anahtardır.
Adım adım ilerleyin: Navigasyon → Hero → Kartlar → Butonlar → Tipografi → Detaylar. AI, küçük görevlerde çok daha iyidir ve bu, kontrolü elinizde tutmanızı sağlar.
Özel Varlıklar Oluşturun
Gerektiğinde görsel oluşturmayı kullanın. Görsel oluşturma araçları artık yeterince güçlü. Püf nokta, renk, stil, kompozisyon ve amaç gibi bağlamı net bir şekilde iletmektir.
Genel stok görsellerden kaçının. Özel görseller kullanmak, genel bir bütünlük duygusu yaratır.
Genel İş Akışı
Özetle, akış şöyle görünür:
- Fikri tanımlayın
- Amacı ve kullanıcıyı netleştirin
- Marka yönüne karar verin
- Referansları toplayın
- Bunları düzenleyin
- Yapıyı haritalayın
- Bileşenleri oluşturun
- Varlıkları oluşturun
- Etkileşimleri ekleyin
- Bütünü cilalayın
Tek bir komutla oluşturmaktan çok daha iyi sonuçlar alırsınız.
Yöntem 3: İlham Panolarını Kullanma
Biraz daha hızlı bir "orta yol" da vardır. Her şeyi tek tek bir araya getirmek yerine, AI'ya seçilmiş bir referans seti sağlarsınız.
Mobbin, Awwwards, Webflow vb. yerlerden ekran görüntüleri toplayın ve şunu sorun:
Lütfen bu referansların stilini ve yönünü birleştirerek ürünüm için bir tasarım oluştur. Ancak, bunları aynen kopyalama.
Tabii ki, bu yeterli bağlamı sağladığınızı ve AI'nın önce soru sormasına izin verdiğinizi varsayar. Manuel çalışmaktan daha hızlıdır ancak genel bir tek seferlik komuttan çok daha iyi sonuçlar verir.
3 Yaklaşımın Özeti
- Yöntem 1: Tasarım Becerileri — Hızlı, iyi sonuçlar
- Yöntem 2: Bileşen Tabanlı — Daha yavaş, ancak en yüksek kalite
- Yöntem 3: İlham Panosu — Dengeli
Diğer Yararlı Araçlar
- SVG Oluşturma: Quiver gibi araçlar SVG'ler oluşturabilir. Öğeler ayrıldığından animasyon yapmaları daha kolaydır.
- Video: Google Flow gibi araçlar. Hero bölümlerini, arka planları ve ürün demolarını geliştirebilir.
- Görsel Kitaplıkları: Lummi gibi platformlar. Ancak markaya uyan görseller seçin.
- Katmanlama: Arkaplan kaldırma ve katmanlama ile derinlik, hareket ve etkileşim ekleyin. Detayların birikmesi büyük fark yaratır.
Sonuç
AI, sizin düşüncenizin yerini tutmaz.
- Ne yapılacağı
- Neden önemli olduğu
- Kimin için olduğu
- Nasıl hissettirmesi gerektiği
Bunlara her zaman siz karar verirsiniz. AI sadece daha hızlı uygular. En iyi sonuçlar, daha iyi komutlardan değil, daha iyi zevkten gelir.
*Bu makale, Leon Lin'in (@LexnLin) X gönderisi "How To Actually Design With AI" temel alınarak Türkçe olarak yeniden oluşturulmuştur.
"Claude Tasarım Sistemi Kiti"ni LINE üzerinden ücretsiz olarak dağıtıyorum.
▼ "Claude Tasarım Sistemi Kiti"ni almak için LINE'a kaydolun
https://t.co/90omRA4UQ7
Lütfen Açık Sohbet'e (LINE OpenChat) katılın, ardından notlarda belirtilen resmi LINE'dan şu mesajı gönderin:
Tasarım Sistemi
ve avantajdan yararlanabileceksiniz.
※ Lütfen Açık Sohbet'in kendi içinde anahtar kelime göndermekten kaçının.
Şablonu olduğu gibi Claude Design'a koyup sadece bir doküman yapmayı denemenizi öneririm. Bu bile size bir tasarım sistemi kullanmanın hissini verecektir.
▼ "Claude Tasarım Sistemi Kiti"ni almak için LINE'a kaydolun
