HTML, CSS ve JavaScript: Tasarım Dosyası Çalışan Sayfaya Nasıl Dönüşür?

Bir arayüz çizimi, kullanıcının işlem yapabileceği web sayfasıyla aynı teslim değildir. HTML içeriğin yapısını, CSS görünüm ve yerleşimi, JavaScript ise birçok etkileşim davranışını kurmak için kullanılır. Bu ayrım, tasarımcıyla geliştiricinin aynı çıktıyı farklı açılardan ele aldığını gösterir.

Bir hizmet kartını birlikte düşünün

Başlık, açıklama ve bağlantının anlamlı bir sırada bulunması yapısal karardır. Kartın rengi, boşlukları ve dar ekranda nasıl yerleşeceği görsel karardır. Kart bir işlem başlatıyorsa bekleme ve sonuç davranışı da gerekir. Yalnız ilk ekranın güzel görünmesi bu kararları tamamlamaz.

Tasarım tesliminde normal görünümün yanında klavyeyle odaklanma, uzun başlık ve eksik görsel gibi durumları açıklayın. Geliştiriciden, görsel dosyadaki boşluklara bakarak bütün iş kurallarını tahmin etmesini beklemeyin.

HTML5 ve DOM ifadeleri neyi anlatır?

HTML5 adı modern HTML özellikleriyle ilgili kaynaklarda sık görülür. DOM ise belgenin programlar tarafından erişilebilen nesne yapısını ifade eder. Örneğin form sonucu gösterildiğinde sayfadaki içerik bu yapı üzerinden değişebilir. Bu kavramları bilmek için bütün kodları yazabilmek gerekmez; ekrandaki bir değişikliğin uygulanması gereken davranış olduğunu anlamak yeterli bir başlangıçtır.

Formda yalnız başarılı sonucu tasarlamayın

Bir iletişim formunda eksik alan, geçersiz bilgi, bekleme, gönderim hatası ve başarı durumları bulunabilir. Kullanıcı hata alınca yazdığı metni kaybetmeli mi? Tekrar deneyebilmeli mi? Hangi alan sorunlu olduğu anlaşılmalı mı? Bu soruları tasarım aşamasında yanıtlamak uygulama kararlarını netleştirir.

Geliştirici tesliminde ne paylaşılmalı?

• Metinler, görseller ve bileşenlerin güncel sürümü.
• Farklı genişliklerde yerleşim kuralları.
• Etkileşim durumları ve geçişlerin açıklaması.
• Boş, uzun ve hatalı içerik örnekleri.
• Onaylanan kararlar ile açık soruların ayrı listesi.

Selçuk Aker’in arayüz tasarımı hizmeti, ekranları geliştiriciyle paylaşılabilir bir yapıya dönüştürmeyi kapsar. Tasarım ile kodlama tekliflerini bu teslim listesi üzerinden karşılaştırabilirsiniz.

Editör ve yazılım dili seçimi tasarım kapsamını belirlemez

HTML, sayfanın içerik yapısını tanımlayan işaretleme dilidir; CSS sunumu, JavaScript etkileşim davranışlarını düzenlemede kullanılır. Kullanılan kod editörü veya IDE bu dosyalarla çalışmayı kolaylaştıran araçtır. Bir editörü kurmak, veri tabanı ya da web uygulamasının hazır olduğu anlamına gelmez.

Freelance grafik tasarımcıdan geliştiriciye teslimde önemli olan, hangi ekranın hangi veriyi ve durumu göstermesidir. Dil ve altyapı seçimi ise projenin gereksinimleriyle ilgili teknik karardır. Yalnız popüler bir dil adı üzerinden teklif değerlendirmeyin. Veri tabanı ve yönetim paneli tasarımı ile API durumları bu ayrımı somutlaştırır.