Kısık ateşte pişen PSD dosyası servis edilmesi için development departmanına geldiğinde hangi kıvamda olursa daha hızlı ve kolay servis edilir? Maddeler hâlinde bunları inceleyelim isterseniz.
Front-end development sürecini etkileyen yegâne faktörlerden biri şüphesiz ki tasarım. Tasarımcıların hayal güçleri biraz developerların iş yapış şekliyle örtüşünce ortaya çok daha hızlı ve temiz işler çıkıyor.
Kısık ateşte pişen PSD dosyası servis edilmesi için development departmanına geldiğinde hangi kıvamda olursa daha hızlı ve kolay servis edilir? Maddeler hâlinde bunları inceleyelim isterseniz.
Klasörleme
Tasarımın oluşturulduğu tüm layer’lar ilgili bölüme göre gruplandırılmalı, sıralanmalı ve isimlendirilmelidir.
Katman Yapısı
Kesilecek olan bir objenin yahut imajın, fare ile seçilebilmesini engelleyecek, ilgili layerın üzerinde görünen veya görülmeyen herhangi bir layer olmamalıdır. Zira bir botunu, yaklaşık 1000 layer bulunan bir PSD dosyasında bulabilmek saatler sürebiliyor.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Son yıllarda özellikle retina ekranların hayatımıza dahil olmasıyla, PSD boyutları da önlenemez bir yükselişe geçmiş durumda. Özellikle çok imajlı sitelerin tasarım dosyaları, hatrı sayılır bir bilgisayar oyununun diskte kapladığı alana yaklaştı. Nihayetinde internet ortamına taşınacak olan bu imajları (özellikle smart objeleri) birebir alıp siteye entegre ettiğimizde modeminizden duman ve koku gelebilir. Bu normaldir. Usulca siteyi kapatın ve oradan uzaklaşın.
Yüksek çözünürlüklü PSD dosyaları, tasarımcının elinden son kez geçerken en azından imaj boyutlarını web ortamına uygun olacak şekilde değiştirmesi hem PSD dosyasını, hem PSD dosyasını barındıran sunucuyu, hem de developer arkadaşların tasarımı indirirken harcamış olduğu süreyi olumlu bir biçimde etkileyecektir.
Object Oriented Design
Object oriented dünyası, her ne kadar yazılımcılar arasında daha yaygın olsa da tasarım açısından da büyük bir önem taşır. Class mantığında tasarıma eklenen her bir imaj, metin vs tasarımın daha düzgün görünmesinin yanı sıra development sürecinde de çok büyük bir kolaylık sağlar. Örneğin; bir sitede <h1> etiketinin aldığı font-büyüklüğü, espas değerleri vs. tümüyle aynı olmalıdır.
Kullanılmayan layer’ları silin
Yazılımcı arkadaşın kafasında ne kadar az soru işareti olursa riskler bir o kadar azalmış olur, riskleri azaltın.
Bazı kısımların “tasarımlarını” yazılımcının insiyatifine bırakmayın
Yazılımcının insiyatifine kalmış tasarım bölümleri genelde “Öyle değil de şöyle mi yapsak acaba?” sonuçlandığında, yazılımcının vücut ısısında anlık bir değişme olabilir, 10 saniye kadar bekleyin, normale dönecektir.
Küçük Dokunuşlardan Kaçının
Bu maddeyi gören tasarımcı dostlarımın başlığı okuduğunda içlerinden geçen cümleyi şuan duyabiliyorum ama lütfen önce beni bir dinleyin, aceleci davranmayın.
Web tasarımı diğer tasarımlardan ayıran başlıca unsurlardan biri, bu tasarımın elektronik bir ortamda çalışacak olmasıdır. Resim çizer gibi veya bir dergiye reklam tasarımı yapar gibi bir web tasarımı yapmak hem işin doğasına aykırı hem de developer arkadaşların sancılı dönemlerinin, mide kramplarının ateşleyicidir.
Peki nedir bu kaçınılması gereken “küçük dokunuşlar”dan bazıları? 2-3 örnekle anlatmaya çalışayım.
Bir liste ekranında her bir liste maddesinin bir bölümüne farklı PNG imajlar koymaktır (hele bu liste dinamikse buyurun buradan yakın), içersinde birkaç renk bulunan gradyan arkaplan imajlarıdır (yine 1 pixellik arkaplan imaj kesemedik).
Sitenin dünya üzerinde bin çeşit ekran çözünürlüğünde açılacağı unutulup, arkaplan imajını içeriğe göre net piksellerle tasarlamaktır (Tasarımcı: Ama sol üstteki elmanın sapının ucu metne değmiş?! Yazılımcı: “MAVİ EKRAN – FATAL ERROR”).
Bunların haricinde;
Projenin hangi tarayıcılara görüntüleneceğini ve bu tarayıcının neleri desteklediğini kısmen de olsa bilin.
Eğer projede animasyon barınıyorsa, bu animasyonun bir çizgi film animasyonu değil, bir web sitesi animasyonu olacağını düşünerek tasarlayın.
