Web tasarımcılarının kayda değer bir kısmı günümüzde Photoshop kullanıyorlar. Photoshop’un sağladığı filtreler, genişletilebilir fırça kütüphanesi ve de en önemlisi alışkanlıklar sebebiyle tercih edildiğini düşünüyorum.  Bir Fireworks kullanıcısı olarak diyebilirim ki; Fireworks web tasarımcıları için bütün süreçleri kapsayan bir ortam sunuyor. Bu konuyu, şu yazımda sizlerle paylaşmıştım. Bu yazımda ise; web prototipleri geliştirirken sıkça kullandığım Pages Panelini ve ne işe yaradığını sizlerle paylaşacağım.

Bir Web Projesi Düşünelim

Bir web projesi üzerinde çalışıldığını düşünelim. Analiz ve planlama aşamalarından sonra gerçekleştirilmesi gereken, bu analize uygun prototip sayfa ve taslakların oluşturulmasıdır. Burada web tasarımcıları çeşitli grafik uygulamaları kullanarak ara yüzleri oluşturuyorlar.

Bir projede, web uygulamasına ait pek çok prototip geliştirmek durumundayız. En basitinden düşünürsek; kurumsal bir sitenin sadece bir anasayfası olmuyor. Web uygulamasının ihtiyaçlarına göre diğer arayüzler tasarlanıyor.

Madem kurumsal site dedik, bu örnek üzerinden gidelim. Basit düşünüyoruz. Bir kurumsal sitenin en temel hangi sayfaları olacaktır? Bir anasayfa tasarımı olmazsa olmazımızdır. Hizmet gruplarının sergileneceği ve detay sayfaları, iletişim sayfası, bir arama aparatı kullanacaksak bunun sorgu sonuç sayfası… Liste ihtiyaçlara göre derinleşir.

Çoklu Sayfaları Nasıl Oluşturacağız? Frames?

Peki bütün bu sayfaları nasıl tasarlayacağız ve nerede saklayacağız? İşte bu esnada Pages Paneli devreye giriyor. Klasik yöntem web uygulamasının anasayfasının tasarlanması ve bunun aynısı kopyalanarak diğer sayfa prototiplerinin geliştirilmesi şeklinde yürüyor.
Yanlış hatırlamıyorsam Fireworks CS3 öncesi sürümlerde Pages Paneli programda yoktu. Burada pek çok web tasarımcısının kullandığı yöntem ise, prototipleri frames paneli içerisindeki adımlarda saklamaktı.

Normal koşullarda frames paneli animated.gif geliştirmemize imkan tanıyan bir animasyonun adımlarını sakladığımız panelimizdir. Anasayfa tasarımını yaptıktan sonra, bu tasarımı frame olarak kopyalayarak, ikinci frame de projemize ait ikinci ara yüz tasarımını gerçekleştirirdik ve bu böyle devam ederdi.

Frames Paneli Sorunları ve Pages Paneli?

Frames panelinin kullanılması kendi içinde bazı sorunlar taşımaktaydı. Öncelikli olarak bir panel aslında amacı dışında kullanılmaktaydı. İkincil olarak ise bazı kullanım sorunları vardı. Mesela bir anasayfa  prototipi 800 px yüksekliğinde çalışılmışsa, diğer sayfalar da 800 px yüksekliğinde çalışılmalıydı. Ayrı frameler için ayrı canvas boyut değerleri atayamıyorduk.

Fireworks’e dahil edilen Pages Paneli ile senaryo şu şekilde yürüyor, en azından benim için. Önce genel anasayfa prototipini oluşturuyorum, sonra bu anasayfa prototipi oturduktan sonra, bütün sayfalarda bulunacak ortak blokları içeren referans bir master(ana) sayfa hazırlıyorum. Oluşturduğum her yeni sayfa otomatik olarak bu master sayfanın layout yapısını kendine dahil ediyor.

Konuyla İlgili Video

http://www.layersmagazine.com/fireworks-cs4-overview-part-8-of-10.html

Sonuç

Fireworks Pages Paneli, web sayfa prototiplerinin oluşturulmasında sağladığı imkânlar ile değerli zamanımızı kurtarıyor ve işlerimizi kolaylaştırıyor. Bu güzelliklerine rağmen sadece bir master sayfa tanımlamamıza imkan tanıması ise bence bir sorun. Pages Paneli, sembol ve katman paylaşımı ile birlikte kullanıldığında web tasarımcıları için maksimum kolaylık ve kullanışlılık sağlıyor. Bu konulara sonraki yazılarımda değinmeye gayret göstereceğim.

Soru

Siz, web tasarımcıları, web sayfa prototiplerinizi hazırlarken hangi programları kullanıyorsunuz? Fireworks kullanıcıları, Pages Panelini kullanıyor musunuz?

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.