Webflow ile Duyarlı Web Tasarımı

İçeriği sık değiş­kenlik gösteren Web platformları için ge­liştirilmiş olan ilgili platformdaki görsel, metinsel ve işlevsel bileşenleri tek bir or­tamdan organize etmeyi sağlayan yazılım­dır.

Duyarlı Web tasarımı konusunda bilgi ve beceri sahibi olmak, günümüz yazılım geliştirme standartları açısından iyi bir kariyeri de beraberinde getirecektir. Çünkü daha pratik yollarla birden fazla problemi çözen, platformu hedefleyen yazılımlar önemini her zaman artırmaktadır.

Yazılım geliştirmenin genel olarak görsel unsurların kullanımı ile sağlandığı, yani kod yazma sürecinin minimuma indirgendiği kodlama yaklaşımıdır.

İleri düzey Web tasarımı süreçlerinde görsel kodlamanın yetersiz kaldığı nokta­lar olabilmektedir.

Birçok hazır bileşeni, tek­nik detaylara hakim olmadan kullanıma sunduğu için uzun vadede geliştiricilerin bilgi-beceri anlamında körelmesine sebep olabilecektir.

Web tasarımı karmaşık uygulamaları içerdi­ği zaman birçok bileşenin eş güdümünü gerekli kılmaktadır. Görsel kodlama vaat eden uy­gulamalar kimi zaman bu eş güdüm ihtiyacı karşısında yetersiz kalabilmektedir.

Web sitelerinin, farklı cihazların görüntüleme alanlarına kendilerini uydurmalarını sağlayan tasarım yaklaşımıdır

Yüzdesel şekilde konumlandırılma­ları sağlanmakta, diğer tasarım bileşenlerine göreceli bir bi­çimde yerleştirilmekte, tasarımın çağrıldığını cihaz türünün ölçülerine otomatik uyum sağlayacak şekilde kodlanmakta, web sitesinin farklı cihazlarda görüntülenmesi durumunda çağrılan alternatif CSS tasarım kodları düzenlenmektedir.

A.B.D. San Francisco merkezli bir şirket olan Webflow, bulut tabanlı sunduğu görsel editörler sayesinde kullanıcıların tasarım süreçlerini kod yazmaya gerek duymadan hızlıca yapa­bilmelerini amaçlamış, bu amaç doğrultusunda etkileşimi yüksek bir platformu kullanıma sunmuştur.

Made in Webflow düğmesi, Webflow ile tasarlanmış başka Web sitelerini bulmamızı, Designers düğmesi ise diğer üye kullanıcıları aramamızı sağlamaktadır. Learn ve Resources düğmeleri ise Webflow ile ilgili eğitsel kaynaklara ulaşılmasını sağlamaktadır.

Dashboard proje sayfası

Webflow ortamındaki şablonlar Web siteni­zi doğrudan ilgili konuya dair tasarlamanızı gerektirmez. Seçmiş olduğunuz bir şablonun tasarımını kendi istekleriniz doğrultusunda yönlendirebilirsiniz.

Style Paneli, Element Settings Paneli, Style Manager Paneli, Interactions Paneli

Style Paneli

Aktif sayfadaki bütün bileşenlerin organize bir biçimde görüntülendiği bir panel açarak her bileşene ulaşmayı sağlamaktadır.

Ecommerce düğmesi

Webflow ile Web tasarımı gerçekleştirmek için en ideal yol, hazır şablonlar üzerinde çalışmaktır. Aynı amaç doğrultusunda boş şablon da kullanılabilir olsa da hazır şablonlar Webflow arayüzüne daha hızlı alışmamızı sağlamaktadır.

Home sayfası altında bir adet Navigation (gezinti menüsü) symbol bileşeni, sayfada ortak görev­deki bileşenleri gruplayan iki adet Section bileşeni, hazır iletişim kutusu özellikleri sunan Contact symbol bileşeni ve sayfanın alt etkileşimsel bölümünü temsil eden Footer symbol bileşeni bulunmaktadır

Üzerinde çalıştığımız sayfaya çeşitli bileşenler eklemek için sol alanda en üste yer alan Add Elements paneli kullanılmaktadır.

Web sitemizde görsel kullanırken en pratik yol bütün olası görselleri Assets paneli altında yüklemek (görselleri arşivlemek) ve daha sonra ihtiyaç oldukça eklemeler yapmaktır

Sol alandaki Ecommerce paneline tıkladıktan sonra Web sitesinin e-ticaret nite­liklerine ilişkin ayarlar tanımlanabilmekte, ayrıca satılacak ürünler (products), ürün kategorileri (categories) ya da indirim (discounts) ve siparişlere (orders) ilişkin tanımlamalar da bu panel altında gerçekleştirilmek­tedir (Resim 6.18).

Webflow editörü