Bir web uygulamasına ait prototipler ve nihai ara yüzler Fireworks üzerinde oluşturulurken, ara yüzlere ait her nesnenin (Fireworks’de canvas üzerinde her unsur nesnedir.) belli bir hiyerarşi ve düzen içerisinde katman ve alt katmanlarda (layers) saklanması, web tasarımcısının yönetim kabiliyetini ve modifikasyon elini güçlendirir.

Aslında,  Fireworks’deki çalışmanın optimum bir şekilde oluşturulması ve saklanması, semboller (symbols), master-bağlı sayfalar ve katman paylaşımının birlikte kullanılmasıyla gerçekleşir. Bu çerçevede Fireworks Pages Panelinin nasıl kullanıldığını şu yazımda sizlere bahsetmiştim.

Boş Bir PNG Dosyası

Fireworks ile boş bir doküman oluşturduğunuzda, eğer Layers Panelini incelerseniz, default olarak iki katmanın oluşturulduğunu göreceksiniz. Bunlardan birincisi, ismi Web Layer olan ve Fireworks Slice (Kesim) ve Hotspot alanlarının saklandığı web katmanıdır. Onun hemen altında ise Layer 1 isminde, arayüzümüzü oluşturan nesnelerinin saklandığı ana klasör bulunmaktadır. Canvas (çalışma alanı) üzerinde oluşturulan her yeni nesne, bu Layer 1 katmanı altında son oluşturulanın en üstte olacağı şekilde sıralanır.

Konunun daha anlaşılabilir olması için örnek bir çalışma üzerinden devam edeceğim.

Yukarıdaki örnekte gördüğünüz gibi çalışmayı oluşturan nesneler yerlerine ve ilişkili oldukları alt bloklara göre, belli bir klasör yapısı içerinde saklanıyorlar. Nesnelere, onları algılamada kolaylık olsun diye bazı isimler verilmiş. Ve yine dikkat edilirse çalışma, temel olarak header, body ve footer katmanlarına bölünmüş durumda. Yine örnekte gördüğünüz üzere body katmanı, left ve content olmak üzere iki alt katmana ayrılmış. Çalışmanın detayına ve buna bağlı olarak kullanılan nesne sayısına göre bu klasör yapısı derinleştirilebilir.

Layers panelinde dikkat edilirse, en altta Master Page Layer isimli kilitlenmiş başka bir layer göreceksiniz. Bu katman oluşturulmuş olan master sayfadaki katman ve nesneleri içeriyor.

Katmanları Bu Şekilde Organize Etmek Bize Ne Kazandırır?

• Tasarımcının, çalışmanın ilgili bloklarına hızlıca ulaşmasını ve bloklar üzerinde kolayca modifikasyona gidebilmesini sağlar.
• Tasarımcı, hızlıca blokları ve içindeki nesneleri seçebilir, onları birbirlerin üzerine ve altına gelecek şekilde sıralayabilir.
• İstenilen katman, “Share to Layer” ile diğer sayfalara kolayca paylaştırılabilir.
• İstenilen katman “Share to States (eski adı frames)” ile States dediğimiz  çalışmanın farklı durumlarında paylaştırılabilir.
• Çalışma, başka bir tasarımcı için daha anlaşılır olur.

Ne Diyorsunuz?

Siz web arayüzleri hazırlarken bu tip bir organizasyon kullanıyor musunuz? Kullanıyorsanız faydalarını paylaşır mısınız?

Not
Konuların bu şekilde anlatılması bazı kopukluklara yol açıyor ve bunun farkındayım, ileride yayınlamayı düşündüğüm uygulamalı örneklerle umarım bu boşlukları birlikte doldurabiliriz.

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