WTK212U-WEB GRAFİK TASARIMI
Ünite 6: Webflow ile Duyarlı Web Tasarımı
Giriş
Web tasarımı duyarlı bir yaklaşım neticesinde ilerleyişini sürdürüyor olsa da artan cihaz çeşitliliği ve kullanıcı ihtiyaçları, daha önce ifade ettiğimiz türden çözümlerin gerekliliğini gözler önüne sermektedir. Bu tür çözümlerde madalyonun diğer yüzü kolay kullanılabilirlik ile bağlantılıdır. Özellikle Web tasarımı boyutunda düşünüldüğünde tasarımın pratik bir şekilde yapılmasını sağlayan yaklaşımlar da zamanla geliştirilmiştir. Görsel kodlama yaklaşımı bu anlamda detaylı kodlama gerektirmeden, basit araçlarla tasarımın oluşturulmasını sağlayan bir çözüm olarak bilinmektedir. Görsel kodlama yaklaşımını ve duyarlı tasarımı sağlayan, kullanıcıların beğenisine sunulmuş çok sayıda farklı çözüm bulunmaktadır. Bu çözümlerin kimisi ücretsizken kimisi farklı ödeme planları ile benzerlerine göre üstünlükleri olan ek tasarım araçları da sunabilmektedir. Ancak ücretsiz çözümler her zaman için daha fazla ilgi çekme potansiyeli barındırmaktadır. Bu tür çözümlerden olan Webflow, görsel kodlama ile duyarlı Web tasarımını sunması bakımından yaygın kullanım imkânı bulan bir platformdur. Webflow’un kullanımını daha iyi anlamak için öncelikli olarak görsel kodlama yaklaşımı ve duyarlı tasarım konularını irdelemek gerekmektedir.
Görsel Kodlama Yaklaşımı
Yazılım geliştirmek teknik bir konu olarak bilinmektedir. Esasında yazılım geliştirme kullanıcı yönlü dinamikler nedeniyle sosyal boyutta bilimsel araştırmaların da konu kapsamına girmektedir. Ancak doğrudan kodlama eylemi düşünüldüğünde, yazılımı geliştirme süreci çeşitli teknik bilgi-beceri bütünleriyle karşılanmaktadır. Bu açıdan düşünüldüğünde kodlama kolay bir beceri olmamakla birlikte, karmaşık yazılım sistemleri düşünüldüğünde sürekli odaklanma gerektiren ve vakit alan bir yönteme dönüşmektedir. Yazılım dünyasındaki gelişmeler Web tasarımı noktasında kodlama işlemlerinin daha pratik yaklaşımlarla desteklenmesini sağlamıştır. Görsel kodlama bu anlamda Web tasarımının en az kod yazımı gereksinimleri içerisinde uygulanmasını sağlamaktadır.
Kodlamanın Görselleştirilmesi
Görsel kodlama (visual coding) yaklaşımı, teknik yeterlilikler gerektiren ve zaman alabilen kodlama süreçleri için verimli bir çözüm olarak bilinmektedir. Programlama dillerinin gelişimi görsel programlama dilleri sayesinde yazılım geliştirmeyi hızlandırmış olsa da günümüz koşulları altında basit uygulamaların geliştirilmesi için çeşitli görsel unsurların konumlandırmasına dayanan tasarımlar da gerçekleştirilebilmektedir. Görsel kodlama başlangıç düzeyindeki yazılım geliştiricilere hitap ediyor görünme bile, ileri düzey geliştiriciler için de zaman kazandırıcı olabilmektedir.
Görsel Kodlamanın Web Tasarımındaki Avantajları ve Dezavantajları
Görsel kodlama zaman boyutunda düşünüldüğünde birçok avantajı beraberinde getirmektedir. Ancak her teknolojik
çözüm gibi bu yaklaşımın da çeşitli dezavantajları pekâlâ olabilmektedir. Bu durum Web tasarımı açısından düşünüldüğünde daha spesifik bir hâl alabilmektedir. Öncelikli olarak görsel kodlamanın avantajlarını şu şekilde açıklayabiliriz:
• Kullanıcılar metin tabanlı bileşenlere göre görsel unsurları daha iyi algılayabilmekte, dolayısıyla görsel kodlama ile daha etkili Web tasarımı sonuçları elde edilebilmektedir. • Görsel kodlama Web tasarımı sürecinin oldukça verimli gerçekleştirilmesini; zamandan kazanılmasını sağlamaktadır. • Aynı anda kullanılan Web tasarımı teknolojileri, görsel kodlama platformlarında uyumlu bir biçimde bir araya getirilebilmekte, böylelikle geliştirici (kullanıcı) karmaşık işlemlerden soyutlanabilmektedir. • Görsel kodlama Web tasarımını öğrenme konusunda etkili bir eğitim aracı olarak kullanılabilmekte, Web tasarımı bu sayede kolayca öğrenilebilmektedir. • Görsel kodlama yeri geldiğinde detaylı kodlara erişimi de sağlamakta, dolayısıyla Web tasarımında esneklik de sunmaktadır. • Görsel kodlama sayesinde kullanıcı ihtiyaçlarına göre hızlı bir biçimde güncellenen Web tasarımları yapılabilmektedir.
Görsel kodlamanın Web tasarımı çerçevesi de dikkate alınmak suretiyle şu dezavantajları içerdiğini söyleyebiliriz:
• Her ne kadar görsel kodlama platformunun yeteneklerine bağlı olsa da genel olarak ileri düzey Web tasarımı süreçlerinde görsel kodlamanın yetersiz kaldığı noktalar olabilmektedir. • Görsel kodlama birçok hazır bileşeni, teknik detaylara hakim olmadan kullanıma sunduğu için uzun vadede geliştiricilerin bilgi-beceri anlamında körelmesine sebep olabilecektir. Dolayısıyla zamandan kazanma ve teknik beceri elde etme ihtiyaçlarını iyi dengede tutmak gerekmektedir. • Web tasarımı karmaşık uygulamaları içerdiği zaman veritabanı yönetim sisteminden, tasarım altyapısına ve bulut yapılarına kadar birçok bileşenin eş güdümünü gerekli kılmaktadır. Görsel kodlama vaat eden uygulamalar kimi zaman bu eş güdüm ihtiyacı karşısında yetersiz kalabilmektedir.
Duyarlı Tasarım
Web siteleri artık sadece kişisel bilgisayarlarda (PC) değil, laptoplarda, akıllı telefonlarda, tabletlerde ve hatta akıllı TV, akıllı saat gibi birçok farklı cihazda kullanılmaktadır. Dolayısıyla uygulamaları görüntülediğimiz ekranlar ve cihazları kullanmamızı sağlayan bileşenler (düğmeler, dokunmatik arayüzler...vs.) değişiklik göstermektedir. Söz konusu değişiklik aynı türden cihazlarda bile (farklı ekran
boyutlarına sahip akıllı telefonları düşünebilirsiniz) görülmektedir.
Çeşitliliği artan cihazlardaki farklı ölçülere ve donanımlara uyum sağlamak için Web tasarımı konusunda etkin çözümler geliştirilmeye çalışılmıştır. Bu çözümler arasında varlığını koruyan duyarlı tasarım (responsive design), günümüz Web tasarım araçlarının olmazsa olmazları arasında yer almaktadır. Kısaca ifade etmek gerekirse duyarlı tasarım, Web sitelerinin kullanılabilirlik ve kullanıcı memnuniyeti sağlamak adına farklı cihazlarda uyumlu kullanılmasını amaçlamaktadır.
Duyarlı Tasarımın Temel İlkeleri
Web tasarımını kolay hâle getirmek adına birçok farklı kodlama altyapısı kullanılmaktadır. İçeriği dinamik değişen Web siteleri genellikle PHP ya da ASP gibi kodlama dilleri ile geliştirilirken, standart Web sitesi tasarım dili olan HTML ise beşinci versiyonu (HTML5) ile birlikte etkileşimi yüksek Web sayfalarının tasarlanmasını sağlamaktadır. Bununla birlikte daha canlı işlevler için JavaScript tabanlı eklenti kodları (örneğin, JQuery), Web tasarımı noktasında oldukça popülerdir. Diğer yandan Web sitelerinin işlevsel kodlarının dışına çıkarak, sadece tasarım detaylarının kodlanmasını sağlayan CSS kodlama standardı da Web tasarımında işlev ve tasarım ayrımını sağlaması açısından oldukça kullanışlıdır. Duyarlı tasarım temelleri saydığımız bu bileşenlerden özellikle HTML ve CSS çerçevesinde oluşturulmuştur.
Genel olarak izlenen temel ilkeleri şöyle özetleyebiliriz:
1. Tasarım içerisindeki bileşenlerin görüntülendikleri ortama göre yüzdesel şekilde konumlandırılmaları sağlanmaktadır. 2. Şekiller ya da benzeri görseller içerisinde bulundukları diğer tasarım bileşenlerine göreceli bir biçimde yerleştirilmektedir. 3. Web sitesinin yerleştirildiği ana bileşenler, tasarımın çağrıldığını cihaz türünün ölçülerine otomatik uyum sağlayacak şekilde kodlanmaktadır. 4. Web sitesinin farklı cihazlarda görüntülenmesi durumunda çağrılan alternatif CSS tasarım kodları düzenlenmektedir.
Webflow Platformunun Temelleri
Webflow platformu görsel kodlama ve duyarlı tasarım yaklaşımlarını harmanlayarak, Web tasarımını kolaylaştıran bir araçtır. 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 yapabilmelerini amaçlamış, bu amaç doğrultusunda etkileşimi yüksek bir platformu kullanıma sunmuştur. Webflow aslında HTML, CSS ve JavaScript kodlarını tasarım esnasında kendisi oluşturmaktadır. Ücretsiz sürümü oluşturulan kaynak kodların alınmasını kısıtlamış olsa da ücretli üyeliğe sahip olan kullanıcılar bu kodlara da erişim sağlayabilmekte,
böylece Webflow ile oluşturulmuş Web siteleri başka ortamlara da taşınabilmektedir.
Webflow’a üye olduktan sonra platform kullanıcıyı birkaç kısa soru (kullanıcının Web tasarım deneyim düzeyi, Webflow’u kullanma amacı...vs.) ile karşılamaktadır. Ardından Web site tasarımlarımızı oluşturmaya başlayacağımız Dashboard proje sayfası görüntülenmektedir. Aynı sayfada yer alan 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.
Webflow Platformunda Tasarıma Başlamak
Dashboard proje sayfası platforma her giriş (login) yaptığımızda görüntülenen giriş sayfası konumundadır. Burada çalışmalarımızı birbirinden bağımsız değerlendirebileceğimiz Workspace ortamları tanımlanabilmektedir. Bunun için standart olarak tanımlanan My Workspaces kısmındaki seçenekleri kullanmak gerekmektedir. Seçenekler yardımıyla çalışma ortamlarımızı en iyi tanımlayan isimlerle yeni workspace tanımlamaları yapmamız mümkündür. Tanımlanan workspace ortamlarında yapılan çalışmalara ilişkin bildirimler üst sağ alandaki çan simgesi üzerinden görüntülenebilmektedir. Yine aynı sayfada All sites bölümü altında tasarladığımız Web siteleri listelenmekte, Tutorials bölümünden ise etkileşimli derslere ulaşılabilmektedir. Yeni bir web sitesi tasarımına başlamak için All sites bölümü altında yer alan New site düğmesine tıklamak gerekmektedir.
Webflow editörü ekrana geldiğinde, yedi bölümden oluşan bir etkileşimli bir öğretici (tutorial) ekrana gelmektedir. Ekranda görüntülenen ufak pencereleri ve açıklamaları adım adım geçmek suretiyle editörün kullanımı konusunda ihtiyaç duyulan bütün bilgi kullanıcıya aktarılmaktadır. Elbette dilerseniz bu öğreticiyi kapatarak doğrudan editör kullanımına da geçebilirsiniz.
Webflow Tasarım Bileşenleri
Webflow editörü kullanımı oldukça kolay çeşitli bileşenlerden oluşmaktadır. Web sitemizi oluşturduktan sonra karşılaşacağımız editör ortamı, ana sayfanın orta alanda görüntülendiği, sol tarafta farklı bileşen düğmelerinin yerleştirildiği, sağ tarafta ise seçili bileşenlere ilişkin ayarları yapabileceğimiz düzenleme seçeneklerinin sunulduğu bir arayüze tekabül etmektedir.
Aktif sayfadaki herhangi bir bileşeni seçtiğimiz zaman editörün sağ alanındaki panelleri kullanmak suretiyle düzenlemeler yapabiliriz. Bu amaçla hem seçilen bileşenleri hem de genel Web sitesini ilgilendiren dört panel bulunmaktadır.
• Style Paneli: Seçili bileşenin sayfadaki konumunu, kullandığı font tipini/stilini/boyutunu, çerçeve stillerini, kullandığı renkleri ve hatta ileri düzey tasarım düzenlemelerini (üç boyutlu
efektler, gölgelendirmeler, saydamlık...vs.) düzenleyebildiğimiz paneldir. • Element Settings Paneli: Eğer seçili bileşenin işlevsel özellikleri (örneğin link içermesi, başka sayfalara bağlantılı olması...vs.) var ise bu tür özelliklerin düzenlenebildiği paneldir. • Style Manager Paneli: Gerek seçili bileşen gerekse genel Web sitesi üzerindeki CSS tabanlı tasarım özelliklerinin düzenlenebildiği paneldir. Bu sayede örneğin Web sitemizdeki bütün metinlerin aynı renk ve font stilinde olmasını tek bir ayarlama yapmak suretiyle sağlayabiliriz. • Interactions Paneli: Seçili bileşenin kullanıcıyla etkileşim hâlinde çeşitli animasyonlar ya da etkileşim şekilleri göstermesini sağlayabildiğimiz paneldir.
Webflow ile Web Tasarımı Süreci
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. Tasarım sürecine geçmek için öncelikli olarak Dashboard arayüzünde New site düğmesine tıklayıp, şablon seçimi akabinde Webflow editörüne geçiş yapılır. Bu noktada editör ortamında görüntülenen Web sitesi, seçilen şablondaki bileşenleri içerecektir. Örneğin Portfolio Starter şablonu seçilerek editör görüntülenir.
Portfolio Starter şablonunun açılışında aktif durumda olan sayfa Home sayfasıdır. O anda aktif olan sayfanın ismi, sol üstteki Page ibaresi yanında görüntülenmektedir. Bununla birlikte Navigator paneli altında açık sayfadaki bütün bileşenler hiyerarşilerine uygun biçimde listelenmektedir. Listelenen bileşen isimlerinin yanında küçük ok simgesi var ise, ilgili bileşenin altında başka bileşenler olduğu anlamına gelmektedir. Home sayfası altında bir adet Navigation (gezinti menüsü) symbol bileşeni, sayfada ortak görevdeki 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. Section bileşenlerine bağlı ok simgeleri tıklandığında ise çeşitli metin bileşenleri ve hatta sayfadaki bölümleri tanımlamak için kullanılan div bileşenleri görülebilmektedir. Burada sayfada yer alan metinleri düzenlemek için Navigator panelinden (1) ilgili bileşenleri seçerek ya da (2) metinleri imleç yardımıyla işaretleyerek, (3) sağ alanda aktif hâle gelen Style paneli kullanılabilmektedir. Benzer şekilde metinlere çift tıklayıp düzenleme yapılabilmekte ve hatta mavi kutuları sürüklemek suretiyle konumlandırmalar ayarlanabilmektedir. Örneğin, Home sayfasında üst alanda yer alan metinleri düzenleyip birinci metnin kırmızı renk olması sağlanabilir. Aynı panel üzerinde farklı birçok stil özelliği, metinlerin kutucuklar içerisinde konumlandırmaları (sola yaslı, ortalı, sağa yaslı...vs.) ve sayfanın farklı noktalarına olan uzaklıkları ayarlanabilmektedir.
Home sayfasında alt kısımlara doğru ilerledikçe, çeşitli görseller ve linkler görüntülenmektedir. Örneğin bir image bileşeni seçildikten sonra mavi kutu etrafında çıkan ismin yanındaki (1) dişli simgesine ya da sağ alandaki (2) Element Settings düğmesine (dişli simgesi) tıklayarak link ayarları görüntülenebilmektedir. İlgili panelde doğrudan bir Web adresine link verilebildiği gibi Web sitesi içerisindeki herhangi bir sayfaya, aynı sayfadaki bir bölüme (div), e- Posta adresine ve telefon numarasına link verilebilmektedir.
Ü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. İlgili düğmeye tıklandığı zaman hazır bileşenlerin listelendiği bir panel ekrana gelmektedir. Her bir bileşen simgelerle listelendiği için gerek isimlerinden gerekse simgelerinden farklı bileşenlerin sayfa ortamındaki görevlerini tanımak kolaylaşmaktadır. Örneğin, Home sayfamıza bilgisayardan bir görsel eklemek için Image adlı bileşeni sürükle bırak ile sayfamıza bırakmamız gerekmektedir. Sürükle bırak yapıldıktan sonra her bileşen için ufak pencereler (pop-up) açılmaktadır. Bu pencereler bizden bileşene ait çeşitli bilgileri (örneğin, image için dosya seçimi, linkler için link metni...vs.) girmemizi istemektedir. Benzeri işlem ilgili pencereler kapatıldıktan sonra sağ alandaki Style ve Element Settings gibi paneller üzerinden de yapılabilir. Image adlı bileşeni eklerken Webflow editörü görsel seçimi için Assets panelini açar. İlgili panelde bulut simgeli düğme yardımıyla görseli yükledikten sonra yüklenmiş görsel otomatik olarak sayfaya eklenir.
Webflow platformunun sunduğu pratik çözüm bileşenlerinden olan symbol bileşenleri, sol alandaki Symbols paneli altından eklenebilmektedir. Benzer şekilde, herhangi bir sayfaya eklenen her bir symbol bileşeni Symbols paneli altında listelenmektedir. Düzenleme aşamasında bu panel kullanılabileceği gibi symbol üzerine çift tıklamak suretiyle düzenleme moduna geçiş yapılabilmektedir. Örneğin, Home sayfasında en üstte yer alan Navigation bileşenine çift tıklayıp düzenleme modu açılır ve sağdaki Navigation Item bileşenlerinin metinleri Türkçe ifadelerle değiştirilip, en solda yer alan image bileşeni de istediğimiz bir görsel ile değiştirilir.
Web sitemizdeki sayfaları düzenlemek ve yeni sayfalar eklemek için sol alandaki Pages paneli kullanılmaktadır. Yeni bir sayfa eklemek için ilgili paneldeki Create New Page düğmesine tıklanmaktadır. Web sitesinde yer alan farklı bir sayfayı düzenlemek için yine aynı panelden düzenlenecek sayfa seçilmek suretiyle geçiş yapılır. Web sitemizde sayfalar tarafından ortak kullanılan Navigation symbol bileşeni geçiş yapılan farklı sayfada düzenlenmiş hâliyle görüntülenmektedir.
Aynı Pages paneli altında, dinamik içerik yönetimi özellikleri eklendiğinde görüntülenen CMS koleksiyon sayfaları (CMS Collection pages) ve e-Ticaret sayfaları da (Ecommerce pages) listelenmektedir. Web sitesine dinamik içerik yönetimi olan sayfalar eklemek için sol alandaki
CMS paneli açılır ve Create New Collection düğmesi ile sayfa tanımlama sayfası açılır.
Web sitesine Ecommerce özellikleri eklemek CMS için gerçekleştirilen koleksiyon unsurlarının oluşturulmasına benzemektedir. Sol alandaki Ecommerce paneline tıkladıktan sonra Web sitesinin e-Ticaret niteliklerine 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ştirilmektedir.
Web Sitesinin Yayınlanması
Üzerinde çalıştığımız Web sitesini düzenleme modundan çıkarıp ön izleme moduna almak için sol üst alandaki göz simgesi kullanılabilmektedir. Bununla birlikte orta alanda yer alan alternatif cihaz simgelerine tıklamak suretiyle Web sitemizin farklı ekranlarda nasıl görüneceğine dair ön izlemeler yapılabilmektedir. Duyarlı tasarım yaklaşımı sayesinde sayfaların farklı ekranlara kendilerini uyarladıkları görülebilmektedir. Ön izleme aktif olduğunda sayfa düzenlemeleri yapılamazken, düzenleme modu açıkken farklı ekran görüntüleme modlarında bile düzeltmeler uygulanabilmektedir.
Webflow editörü sayesinde Web sitesini salt-okunur ya da düzenlenebilir şekilde başka geliştiricilerle paylaşabilirsiniz. Özellikle düzenlenebilir paylaşım proje üzerinde birden fazla geliştiricinin çalışması adına oldukça etkili bir çözümdür. Bunun için sağ üst alanda sağa yönlenmiş bir ok simgesiyle temsil edilen Share project düğmesi kullanılır. Yine Web sitesinin nihai hâlini Web ortamında yayınlamak için aynı alandaki Publish düğmesinden faydalanılır. Düğmeye tıkladıktan sonra ekrana gelen küçük panelde;
web-sitesi-proje-ismi.webflow.io
adresinden yayınlama yapılabileceği gibi bağımsız bir domain (web adresi) üzerinden de yayınlama yapılabilmektedir (Resim 6.20). Web sitesine ilişkin ileri düzey seçenekler de aynı panel altında kullanıma sunulmuş durumdadır.