Figma vs Sketch App
Her iki tasarım aracı da benzersiz avantajlarına sahip. Figma, daha fazla işbirliği özelliği sunarken Sketch, daha basit bir arayüze sahiptir. Hangi aracın sizin için daha iyi olduğunu belirlemek için özelliklerini karşılaştırıp kendinize en uygun olanını seçebilirsiniz. Umarım eğlenceli bir yazı olmuştur. ✨
Design System Ekibi içinde Roller Nasıl Belirlenir ?
Daha önceki yazımda Design System hakkında yüzeysel bir bilgi vermiştim. Şimdi ise takım içerisinde best practice içerebilecek rolleri anlatmaya çalışacağım. Tasarım sistemleri, birçok farklı tasarım elementi içerir ve bu elementlerin her birinin tasarım ve uygulamasında farklı yetkinlik setleri gereklidir. Bu nedenle, design sistemlerinde görev alacak tasarımcıların rolleri, öncelikle tasarım sistemi kapsamında nelerin yer alacağına ve hangi elementleri […]
Design System ve Development Süreçleri
Yazılımcılar için design system, uygulamanın veya web sitesinin tasarımını ve görünümünü oluşturmak için kullanabilecekleri bir rehberdir diyebiliriz. Bu rehber, tasarımın nasıl görüneceği, hangi renklerin kullanılacağı, hangi tipografiyi kullanacağını, hangi stil ve arayüz elementlerini kullanacakları ve daha fazlasını belirler. Design system, yazılımcıların tasarım sürecinde karşılaşabilecekleri sorunları ortadan kaldırarak, tasarımcıların ürettiği tasarımı kolayca kodlamalarını sağlar. Bu sayede, […]
Design System nedir?
Design system, günümüzde ürün tasarımı dünyasında popüler bir konudur. Bu sistemler, belirli bir markanın veya ürünün tasarım dilini, bileşenlerini, renklerini, tipografi, görsel öğelerini ve diğer tasarım unsurlarını belirleyen bir dizi kural ve yönergeleri içerir. Design system, bir marka veya ürünün tutarlılığını ve sürekli olarak gelişen tasarım trendlerine uyumunu sağlar. Design system oluşturmak, tasarım ekibinin işbirliğini […]
object-view-box (CSS)
object-fit ve object-position özelliklerinin kullanımını içeren bir konu olan object-view-box object-view-box özelliği, CSS object-fit ve object-position özelliklerinin birleşimi olarak düşünülebilir. Bu özellik, bir görselin veya video gibi medya öğesinin içerisinde görüntülenen alanı belirlemek için kullanılır. Özellikle, bir img etiketi içindeki bir görselin boyutu, div’in genişliği ve yüksekliği kadar olmayabilir. Bu durumda, object-fit özelliği kullanılarak, görselin boyutu div’in boyutuna uyacak şekilde ölçeklendirilebilir. object-position özelliği ise, görselin etiket içinde nereye yerleştirileceğini belirler. […]
image-set() (CSS)
Bir veya daha fazla arka plan resmi için farklı boyutlar veya çözünürlükler belirleyerek, mediaquery kullanarak sayfa yükleme hızını ve performansını artırmaya yardımcı olur. image-set() fonksiyonu, her bir resim dosyası, bir çözünürlük faktörüne sahip birim değeriyle ayrılmış bir url() ile tanımlanır. Burada, 1x, 2x ve 3x çözünürlük durumları belirtilmiştir. Tarayıcı, hangi çözünürlük durumuna uygun olduğunu belirleyerek, en uygun boyuttaki resmi seçer. Ayrıca, image-set() fonksiyonu, mediaquery ile birlikte kullanılarak, belirli bir […]
color-scheme (CSS)
color-scheme, web sitelerinin tasarımında kullanılan renk paletlerinin yönetimi için kullanılan bir özelliktir. Bu özellik, bir web sayfasının renk şemasını kolayca değiştirebilmenizi sağlar. color-scheme, web tasarımında birkaç farklı şekilde kullanılabilir; witesindeki tüm text renklerini, arka plan renklerini ve diğer öğelerin renklerini değiştirebilirsiniz. Ayrıca, farklı renk şemalarını kullanarak web sitenize farklı bir hissiyat ve stil verebilirsiniz. CSS […]