Arayüz Tasarımcısına Tavsiyeler — Web
Bu yazı tasarımcıların daha uygulanabilir arayüzler çıkartmasına yardımcı olmak, gelişen ön yüz teknolojileri hakkında fikir sahibi olmasını sağlamak ve ön-yüz geliştiricisine daha iyi işler teslim etmesi için naçizane tavsiyeler içerir.
👉 CSS Layout
Arayüz tasarlarken en önemli konu ilk iskeleti çıkartmak, temeli atmaktır. Ekranları daha sağlıklı tasarlayabilmek için CSS tarafındaki yeni gelen layout özelliklerini kabaca bilmeniz frontend geliştiriciler tarafından sevilmenizi ve diğer tasarımcılardan bir adım daha öne çıkmanızı sağlayacaktır. CSS Flexbox ve Grid özelliklerinin temelde neyi çözdüğünü ve ne gibi yenilikler getirdiğini bilmeniz daha uyarlanabilir ekranlar tasarlamanızı sağlayacaktır.
Kaynaklar
Mozilla’nın layout hakkında inanılmaz bilgiler paylaştığı Layout Land kanalına göz atabilirsiniz.
👉 Animation
Yapacağınız animasyonlar veya sayfa geçişleri video olmayacaksa ya CSS ya da JavaScript ile kodlanacaktır. Haliyle CSS animasyon özellikleri ve JavaScript animasyon kütüphanelerinin nelere imkan tanıdığı hakkında genel bir bilgi sahibi olmanız faydalı olacaktır.
Kaynaklar
👉 Browser Developer Tools
Kullandığınız tarayıcının geliştirici aracını basit seviyede kullanmanızı öneririm. Herhangi bir siteden görsel nasıl alınır, svg nasıl kaydedilir veya ilgili font ve tipografi bilgisine nasıl bakarım gibi konuları bilmeniz kendinize güzel bir yatırım olur. Bunun yanında network hızını düşürüp, loading ve empty-state durumlarını test etmeyi öğrenmeniz faydalı olacaktır. Sayfadaki herhangi bir öğenin rengini, yazı tipini, hatta içeriğini değiştirip canlıda nasıl durduğuna bile bakmak isteyebilirsiniz. Bu anlattıklarım gözünüzü korkutmasın tasarım aracını kullanmaktan daha basit olduğundan emin olabilirsiniz.
Kaynaklar
Tarayıcının herhangi bir yerinde sağ tıklayıp, öğeyi denetle diyerek açılan ekranı kurcalamanızı tavsiye ederim.
👉 Responsive Image
Bol bol görsel kullandınız ve her şey harika görünüyor peki ya mobilden girecek kişiyi hiç düşündün mü? Kullandığınız 1mb boyutundaki görsel için mobil optimizasyonu yaptınız mı? İşte bu gibi unutulan kısımlar sitenin açılma hızını etkileyecektir.
Mobil, retina ekran, tablet ve desktop gibi en temel ekranlar için optimizasyon ve uygun görsel kullanımlarını pas geçmemek gerekiyor.
👉 Responsive Layout
Layout’u çıkarırken akışın uygunluğunu düşünerek tasarlamak gerekiyor. Responsive mantığını tam anlamamış kişilerin tasarlayacağı ekranlar, responsive tasarımı olmayan işlerden daha fazla uğraştıracağını belirtmek isterim.
👉 Git
Ekip olarak çalışan herkesin git öğrenmesi gerektiğini düşünüyorum. Tasarımcılar için git araçlarının çıktığını hatta facebook gibi yerlerde bu araçların kullanıldığını belirtmek isterim.
Özetle
bu_son_tasarım_19243_kesin_bitti_23.sketch gibi isimlendirmeden kurtarıp düzgün bir versiyon geçmişi tutarak, aynı anda birden fazla kişiyle aynı dosya üzerinde çalışmanızı sağlayacak.
Kaynaklar
👉 Component
Grinin elli tonu, başlıklar için 7–8 farklı font boyutu, her yerde değişen line-height ve daha neler neler. Özellikle web uygulaması tasarlıyorsanız, işi teslim ederken mutlaka style-guide olmak zorunda. İkea’dan ürün aldınız ve içinden vidalarla yapılış kağıdının çıkmadığını düşünün. O an ne hissederseniz aynı şeyi hissediyoruz. Sadece buton tasarlarken bile normal, ikonlu, ikonu sağda, çift satır olduğunda, hover durumu, active durumu, disable durumu, focus durumu (tab kullananlar için) gibi 8–10 çeşit varyasyonu olması gerekirken sadece butonu yeşile boyayıp teslim etmeyin. Bunun h1, h2 elemanları var form elemanları var, dropdown’ın açık kapalı durumu vb. derken tasarladığın her componentin olabilecek bütün durumlarını düşünmeli-tasarlamalısınız. Aksi takdirde diğer durumları ya olmayacak ya da ne olursa kabul etmiş olacaksın.
👉 Svg
Svg görsel ve ikon kullanımını çok iyi anlayıp kullanmanız gerekiyor aksi takdirde svg ikonu bile bozuk göstermeyi başarabilirsiniz. Kullanacağınız ikonların mutlaka pixel-perfect ölçülerde olan versiyonları kullanın. Tasarlayan kişi 16x16, 32x32, 64x64 diye ayrı olarak paketlemesinde var bi hikmet diye düşünmek lazım. Kullanılacak yere göre uygun boydaki ikonları kullanmanız mevcut ölçüleri bozmamanız gerekmektedir. Yani 32x32 ikonu alıp 30x30 yapıp bozmayın derim.
Kaynaklar
👉 Font-face
Özel font kullanmak her ne kadar güzel görünse de performans açısından sıkıntılı olabiliyor. Birden fazla özel font kullanmak siteye yük getirecek sitenin yüklenme hızını etkileyecektir. Maksimum iki farklı özel font ve her font ailesinin üç genişliğini (light-normal-bold) kullanmanızı öneririm.
Eklenecek başlıklar
- Tahmin ettiğinizden daha fazla içerik geldiği durumları düşünmek.
- İçerik hiç olmadığında nasıl görüneceğini düşünmek (empty-state)
Eklemek istediğiniz veya yanlış olduğunu düşündüğünüz kısımları belirtirseniz sevinirim.
