CSS

Tasarım Izgarasından Kurtulmanın Zamanı Geldi mi?

Bu web sitesine rastladım, ızgarasız tasarım son zamanlarda ve hemen bir akor vurdu. Bu, uzun zamandır düşündüğüm bir şey – tasarımcıların genellikle 12 sütunlu bir ızgaraya dayalı statik maketleri dağıttığı olağan tasarım sürecinin amaca uygun olmaması. Bu şekilde düşünen ilk kişiden çok uzak olduğumu biliyorum, ancak son yıllarda CSS düzenindeki gelişmelerle birlikte, tasarım ızgarası her zamankinden daha fazla baskıdan kalma gibi hissettiriyor. Web’de sahip olmadığımız bir soruna çözüm.

Flexbox ve Grid gibi CSS düzen özellikleri, içeriğe öncelik veren daha esnek düzenler oluşturmamızı sağlar. CSS’de içsel ve dışsal boyutlandırma hakkında konuşuyoruz – hem içeriğe hem de bağlama dayalı boyutlandırma. Söz verilen kapsayıcı sorguları özelliği, geliştiricilerin eline daha da fazla güç verecektir. Ama bana tasarım süreci hala geçmişte kalmış gibi geliyor.

Tasarımcılar genellikle bir öğenin (örneğin) bir masaüstü ekranındaki 12 sütundan dördünü kapsaması gerektiğini, web’deki “sütunlar” fikrinin, yerleşimin gerçekte nasıl oluşturulabileceğiyle hiçbir ilgisi olmadığını bilmeden yazacaktır. Bu, herhangi bir bireysel tasarımcıya karşı hafif değil, ancak bir bütün olarak endüstrinin yapması gereken bazı şeyler var gibi görünüyor. Bileşenleri, sabit kesme noktalarının aksine davranış açısından – mizanpajların farklı içerik türlerine ve atipik görüntü alanı boyutlarına nasıl yanıt vereceği – açısından düşünmek konusunda toplu bir başarısızlık var.

Bu, geliştiricilerin boşlukları doldurmada önemli bir rol oynadığı anlamına gelir. Kendinizi bir tasarımcı olarak görmeyen bir geliştirici olsanız bile, vardır bir tasarımcı. Bir düzenin “ara” boyutlarda, uç durumlarda veya içeriğin tasarımda sağlanandan farklı olduğu durumlarda nasıl davranacağına karar vermek bize bağlıdır. Bu, geliştiricinin hayal gücünü ve tasarım düşüncesini gerektirir.

Bir başlık, bir resim ve bir metin paragrafından oluşan aşağıdaki bileşeni göz önünde bulundurun. Bir tasarım ızgarasını takip etmemiz konusunda katı bir talimat altındaysak, ekranı yeniden boyutlandırmaya başlar başlamaz düzen daha az hoş görünmeye başlar.

Ancak daha esnek bir düzen oluşturma özgürlüğü verildiğinde, mekanın dağılımını dikte etmek için öğelerin içsel boyutlarını kullanarak içeriğe öncelik verebiliriz. Bu videoda, ilk bileşen, her bir öğeyi önceden belirlenmiş bir ızgaraya yapışmaya zorlar. Her ızgara alt öğesi orantılı olarak daraldığından, görünümü yeniden boyutlandırdıkça, düzen hemen hemen bozuk görünmeye başlar. İkinci bileşen, öğelerin genişliğini korur, ancak ekran daraldıkça aralarındaki boşluğu kapatır ve katı bir ızgaraya bağlı kalmamasına rağmen tartışmasız daha hoş (okunaklı) bir düzen ile sonuçlanır.

Kalemi Gör
Sert ve esnek ızgaraları karşılaştırma
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Benzer şekilde, Gridless Design sitesindeki bu alıntı, bir tasarımın dikte ettiği sabit sütunlar yerine bir kart düzeninin bağlama nasıl yanıt verebileceğini güzel bir şekilde özetliyor.

CSS ızgara sözdizimi, çocukların gerektiğinde yeni sütunlara yeniden akmasına izin verir. Sütunların boyutları, altlarındaki içerikten veya sınırlı bir kullanılabilir alan miktarından haberdar edilebilir. Bu teknik, kart düzenleri için çok güçlüdür, kartların belirli bir sütunun izin verdiği kadar büyük olmasına ve çok küçük olabileceği zaman bir sonraki satıra sarılmasına izin verir.

Birçok geliştirici, CSS araç takımımızda yeniliği benimsiyor. Andy Bell ve Heydon Pickering yaratıldı Her Düzen, geliştiricilerin, değişken içerik için çalışan esnek düzenler oluşturmak için web’in doğal esnekliğini ve bilinmezliğini benimsemeyi öğrenmelerine yardımcı olur. Tasarımcıları benzer şekilde düşünmeye teşvik etmek için tasarım araçlarında daha fazla yenilik görmek harika olurdu. Herkesin böyle bir lüksü olmasa da, tasarım ve geliştirme sürecindeki iyi iletişim de yardımcı olabilir.

Ancak geliştiriciler tamamen suçsuz değil. Sorunun bir parçası da CSS çerçeveleridir. Tailwind, Bootstrap ve diğerleri, basit bir ızgaraya bağlı bir düzen oluşturmayı önemsiz kılan sınıflarla birlikte gelir. Ancak esnek, sağlam, içeriğe duyarlı bir düzen oluşturmak istiyorsak, çerçevelerin ötesine bakmanız ve bazı özel CSS yazmanız gerekir. Paradoksal olarak, CSS Grid’in parladığı yer, yalnızca katı bir tasarım ızgarasına bağlı yerleşim düzenleri oluşturmada değil, aynı zamanda bileşenlerimize esneklik kazandırmadadır. Ancak, hızlı ve kolay çözümü seçmenin cazibesi, en iyi bir, direnmek zor.

Burada büyük bir endüstri sarsıntısına ihtiyacımız var gibi geliyor. Kullanıcı deneyimine zarar verecek şekilde içeriği katı bir tasarım ızgarasına zorlamamalıyız. Tasarımınızın 12 sütunlu bir ızgaraya tam olarak uymadığını kullanıcılar fark etmeyecektir. Onlar niyet oluşturduğunuz siteyi kullanamayacaklarına dikkat edin. Bu durumlarda ızgara, tasarımcının egosundan başka kimseye hizmet etmez. Bu nedenle, Gridless Design sitesinin ızgarayı tamamen terk etmeyi savunduğunu görmekten mutluyum. Bazıları için radikal bir öneri gibi gelebilir, ancak makale, gestalt uzay ilkeleri, yakınlık ve süreklilik gibi diğer cihazların ızgara olmadan nasıl iyi bir tasarım yapabileceğini açıklamakta harika bir iş çıkarıyor.

Site, burada sahip olduğumdan çok daha iyi bir açıklama sağlıyor, bu yüzden buna bir bak.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu