Bugün Photoshop'ta bir butona box-shadow verirken ya da Illustrator'da bir logoya gradient eklerken durup hiç düşündünüz mü? Bu gölge neden orada? Işık nereden geliyor? Çoğu genç meslektaşım bu kararları "göz kararı" ya da trendlere uyarak veriyor. Ancak benim için bu süreç, yıllar önce o soğuk atölyelerde elime aldığım pleksi levhalarla ve folyo kesim makinesinin (plotter) cızırtısıyla başladı.

ℹ️ Fiziksel dünyada malzemenin bir ağırlığı, dokusu ve ışığı kırma biçimi vardır. Bu bilgiyi dijitale aktarmak, tasarımlarınızı "yassı" olmaktan kurtarır.

Atölyeden Ekrana: Malzemenin Hafızası

Eskiden bir tabela yaparken harfleri dekota (forex) malzemeden elle keserdik. O harfi elinize aldığınızda, yan yüzeyinin dokusunu, ışığın o 10mm'lik kalınlıkta nasıl kırıldığını görürdünüz. Bugün bir web arayüzünde "Card" yapısı tasarlarken kullandığım o hafif gölge, aslında benim zihnimde o dekota harfin duvara düşürdüğü gerçek gölgedir.

Neden Malzeme Bilmeliyiz?

Malzeme bilgisi, bir tasarımcıya şu üç temel yetiyi kazandırır:

  • Işık ve Gölge Mantığı: Bir nesnenin derinliği, ışığın açısıyla değişir. Mat bir folyo ile parlak bir pleksinin ışık yansıması aynı değildir.
  • Ölçek Algısı: Tasarladığınız logonun bir kartvizitteki 2 cm'lik haliyle, bir binadaki 3 metrelik hali arasındaki farkı "fiziksel" olarak hayal edebilirsiniz.[1]
  • Üretilebilirlik: Tasarladığınız her şeyin bir gün fiziksel bir karşılığı olabilir. Lazer kesime gitmeyecek bir tasarımı dijitalde "kusursuz" sanmak büyük bir yanılgıdır.

Fiziksel Materyallerin Dijital Karşılıkları

Aşağıdaki tabloda, atölyede kullandığımız bazı malzemelerin dijital tasarımdaki estetik karşılıklarını özetledim:

Malzeme Dijital Tasarım Karşılığı Etki
Pleksi (Akrilik) Glassmorphism (Cam efekti) Yarı saydamlık ve derinlik hissi
Folyo Kesim Flat Design & Vektör Keskin hatlar ve net okunabilirlik
Kumlu Folyo Grain & Noise Efektleri Doku ve sofistike bir matlık
Kabartma Harf Inner Shadow & Bevel Hacim ve dokunma isteği
💡 Bir arayüz tasarlarken kendinize şunu sorun: "Eğer bu ekranı elimle tutabilseydim, butonlar ne kadar çıkıntılı olurdu?" Bu soru, border-radius ve shadow değerlerinizi daha gerçekçi yapacaktır.

Tabela Üreticisinden UI Tasarımcısına Tavsiyeler

Meslek hayatımın başında serigrafi tezgahında mürekkep karıştırırken, renklerin birbirine karışma mantığını (CMYK vs RGB farkı ötesinde) bizzat yaşayarak öğrendim. Eğer dijitalde bir gradient (renk geçişi) yapıyorsanız, o geçişin "kirli" durmaması için iki rengin ortasında neler olduğunu hayal etmeniz gerekir. Tıpkı iki farklı boyayı bir kapta karıştırmak gibi...

⚠️ Unutmayın: Dijital tasarım sadece pikselleri dizmek değil, bir dünya inşa etmektir. Fiziksel dünyayı ne kadar iyi tanırsanız, dijitalde kurduğunuz dünya o kadar inandırıcı olur. 

/* Malzeme hissi veren modern bir kart gölgesi /
.card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px); / Pleksi etkisi */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}

"Tasarım, malzemenin ruhunu teknolojiyle buluşturma sanatıdır."

Kaynakça

[1] Tabela ve Üretim Teknikleri: Signs of the Times Magazine [2] Material Design Felsefesi: Google Material Design Guidelines