Bu yazının ilk hali Dreamweaver, FrontPage ve Flash öneriyordu. Flash 2020 sonunda kapandı, FrontPage’i Microsoft 2006’da bıraktı, Fireworks 2013’te durduruldu. Liste artık kimsenin bilgisayarındaki programları tarif etmiyordu, o yüzden baştan yazdık. Aşağısı bir web projesinde bugün gerçekten açtığımız araçlar ve her birinin hangi işi gördüğü.
1Tasarım: Figma
Arayüz tasarımının neredeyse tamamı bugün Figma’da yapılıyor. Tarayıcıda çalışıyor, kurulum istemiyor ve aynı dosyayı birden fazla kişi aynı anda açabiliyor. Bir sayfayı masaüstü, tablet ve telefon genişliğinde yan yana kurup üçünü birlikte görmek mümkün — eski araçlarda her boy ayrı dosyaydı.
Asıl faydası onay turlarında çıkıyor. Tasarım bir bağlantı olarak paylaşılır, müşteri de doğrudan ekranın üstüne not düşer. “Şu butonun rengi” diye başlayan bir yazışma yerine, notun ne demek istediği tam olarak nerede duruyorsa orada görünüyor. Ofise gelmeye gerek kalmıyor.
Sketch ve Adobe XD hâlâ var. Sketch yalnızca macOS’ta çalıştığı için karma ekiplerde sorun çıkarıyor; XD’ye ise Adobe 2023’ten beri yeni özellik eklemiyor. Yeni bir proje için ikisini de önermiyoruz.
2Görsel ve marka işleri: Photoshop, Illustrator
Bu ikisi listeden düşmedi, çünkü yaptıkları iş değişmedi. Fotoğraf düzenleme, ışık ve renk düzeltmesi, kırpma Photoshop’ta; logo, ikon ve her boyutta bozulmadan büyüyen vektörel çizimler Illustrator’da. Bir kurumsal kimlik dosyası geldiğinde neredeyse her zaman bu ikisinin formatlarında geliyor.
Web tarafında asıl iş, görseli güzelleştirmek değil küçültmek. Telefonla çekilmiş bir fotoğraf rahatlıkla 4-5 MB oluyor; onu olduğu gibi siteye koymak, sayfayı mobil veride açılmaz hale getiriyor. Aynı fotoğrafı web genişliğine indirip modern bir biçime çevirdiğinizde dosya çoğu zaman onda birine iniyor, gözle görülür bir kayıp olmadan.
- Genişliği ihtiyaç kadarına düşürün — 1400 piksel çoğu içerik görseli için fazlasıyla yeterli
- AVIF veya WebP üretin, eski tarayıcılar için JPEG’i yedekte tutun
- Logolar ve ikonlar için SVG kullanın; her ekran yoğunluğunda net kalır
- Görsele mutlaka alt metni yazın — hem erişilebilirlik hem arama görünürlüğü için
3Kod tarafı: VS Code
Dreamweaver’ın yerini alan şey daha iyi bir Dreamweaver olmadı; kod editörü oldu. Visual Studio Code ücretsiz, Windows/macOS/Linux’ta çalışıyor ve sürüm takibiyle (Git) doğrudan konuşuyor. Sürükle-bırak arayüz kurmuyor — bugünün siteleri zaten sabit kutular halinde değil, ekran genişliğine göre akan yapılar halinde kuruluyor.
Notepad++ hâlâ çalışıyor ve hızlı bir dosyaya bakmak için fena değil. Ama proje boyunca kullanılacak bir editör değil: hata yakalama, otomatik biçimlendirme ve sürüm takibi yok.
4Site neyin üstüne kurulacak
Program seçiminden önce gelen soru bu. Üç yol var ve üçü de doğru olabilir; hangisinin doğru olduğunu içeriğin ne sıklıkla değiştiği belirliyor.
- WordPress — sık yazı girilen, kendi ekibinizin güncellediği siteler için. Karşılığında düzenli güncelleme ve güvenlik bakımı istiyor
- Webflow ve benzeri platformlar — kod yazmadan hızlı sonuç. Aylık ücret ve platformun sınırlarıyla yaşamayı kabul ediyorsanız
- Kendi kodu yazılmış site — içerik seyrek değişiyorsa ya da işin özel bir mantığı varsa. En hızlı açılan ve bakımı en ucuz olan seçenek
Şu an okuduğunuz site üçüncü yolla kuruldu: sayfalar önceden hazır dosyalar olarak üretiliyor, sunucuda çalışan bir program yok. Bu yüzden hem hızlı açılıyor hem de güvenlik tarafında bakım yükü neredeyse sıfır.
5Yayına almadan önce açılacak araçlar
Tasarım bittiğinde iş bitmiyor. Sitenin gerçek koşullarda nasıl davrandığını ölçen birkaç ücretsiz araç var ve hepsi tarayıcıdan çalışıyor.
- Tarayıcının kendi geliştirici araçları (F12) — sayfayı farklı telefon boyutlarında görmek ve hataları yakalamak için
- PageSpeed Insights ya da Lighthouse — açılma hızı, erişilebilirlik ve temel SEO kontrolü
- Google Search Console — sitenin aramada nasıl göründüğünü ve hangi sayfaların indekslendiğini görmek için
- Zengin sonuç testi — sayfadaki yapılandırılmış verinin Google tarafından okunup okunmadığını doğrular
Bir ekleme: hız testini yalnızca ofis bağlantınızdan yapmayın. Kıbrıs’ta ziyaretçinin önemli bir kısmı siteye mobil veriyle giriyor ve tesis dışında hız her zaman fiber kadar olmuyor. Test araçlarındaki yavaş mobil ayarı, gerçek koşula ofis bağlantısından daha yakın.
Araç listesi her üç dört yılda bir değişiyor — bu yazının ilk hali bunun kanıtı. Değişmeyen şey sıra: önce ne anlatılacağına karar veriliyor, sonra tasarlanıyor, en son kodlanıyor. Programı doğru seçip bu sırayı atlayan proje, yanlış programla düzgün ilerleyen projeden daha kötü bitiyor.