Baskı Tasarımından Web Tasarımına Neler Taşınır, Neler Taşınmaz

Baskı ve web tasarımı karşılaştırılırken konu genellikle çözünürlüğe, ölçüye ve dosya biçimine gelir. Asıl fark bunların hiçbiri değil. Baskıda düzen tasarımcının elinden çıkarken bitmiştir; webde tasarımcı düzenin kendisini değil, onu üretecek kuralları verir, son kararı tarayıcı ile ekran genişliği birlikte alır. Baskıdan gelen alışkanlıkların hangisinin işe yaradığı, hangisinin kırıldığı büyük ölçüde bu tek farktan çıkıyor.

Baskıda sayfa, webde kural kümesi

Bir broşür tasarlarken metin kolonunu 180 mm genişliğinde kurarsınız ve o kolon 180 mm kalır. Baskı makinesine giden dosya, tasarımın son hali.

Webde böyle bir son hal yok. max-width: 42rem yazdığınızda bir genişlik belirlemiş olmuyorsunuz, bir üst sınır tarif ediyorsunuz; gerçek genişliği tarayıcı hesaplıyor. Ekranınızda gördüğünüz şey tasarım değil, tasarımın bir örneği. Bu yüzden webde "baktım, iyi görünüyor" bir kontrol sayılmaz: kuralların sınırlarda ne yaptığına bakmak gerekir, yani en dar ekranda, en uzun başlıkta, kullanıcı yazı tipini büyüttüğünde.

Çözünürlük farkı artık eskimiş bir cümle

Eski karşılaştırmalar baskıyı yüksek çözünürlüğün, webi düşük çözünürlüğün alanı diye ayırır. Sayıya bakınca bu ayrım dağılıyor.

Baskıda standart 300 dpi. 10 cm genişliğinde basılacak bir görsel 10 / 2,54 = 3,94 inç eder, 300 dpi ile çarpınca yaklaşık 1181 piksel. Webde ise 400 CSS pikseli genişliğinde duran aynı görsel, 3x yoğunluklu bir telefon ekranında 1200 gerçek piksel ister. İki sayı neredeyse aynı. Modern ekranlar çözünürlük tarafındaki açığı kapattı.

Değişen şey piksel sayısı değil, pikselin maliyeti. Baskıda 8 MB'lık bir TIFF teslim anında kimseyi bekletmez. Webde aynı dosya kullanıcının bağlantısından geçmek zorunda ve beklemeyi o çekiyor. Dolayısıyla webdeki kısıt çözünürlük değil bayt bütçesi: aynı görselin birkaç boyutunu srcset ile sunmak, AVIF veya WebP'ye geçmek, ekranda 400 piksel yer kaplayan bir görsele 2000 piksellik dosya göndermemek.

Tipografide ölçü birimi değişir

Baskıda punto fiziksel bir uzunluktur: 1 pt, inçin 72'de biri. 10 punto dizdiğiniz metin her kopyada aynı büyüklükte çıkar.

Webde eşdeğer bir güvence yok. px fiziksel bir ölçü değil, rem ise kullanıcının tarayıcı kök yazı boyutuna bağlı. Tarayıcısının varsayılanını 16'dan 20 piksele çıkarmış biri bunu gözü daha iyi görsün diye yapmıştır; tipografi ölçeğinizi sabit piksellerle kurduysanız o ayarı sessizce iptal etmiş olursunuz. Baskı alışkanlığının webde en belirgin zarar verdiği yer burası.

Esnek tipografide cihaz başına breakpoint listesi yerine clamp() ile kurulmuş tek bir ölçeği daha güvenilir buluyorum. Breakpoint yaklaşımı bilinen cihaz genişliklerinde doğru, aralarda rastgele çalışır ve her yeni ekran boyutu listeye bir satır daha ekler; clamp() alt sınır, akışkan değer ve üst sınırı bir kez tanımladığı için aradaki her genişlikte tanımlı kalır. Breakpoint yine gerekir, ama düzen değişiklikleri için, yazı boyutu için değil.

Okuma sırasını baskıda siz kurarsınız

Sabit bir sayfada gözün nereden başlayıp nereye gideceğini boyut, kontrast ve boşlukla yönlendirirsiniz. Sıra tasarımcının kontrolünde.

Webde tek bir sıra değil, birden fazla sıra var: görsel sıra, kaynaktaki (DOM) sıra, klavyeyle gezerken oluşan sekme sırası, ekran okuyucunun seslendirme sırası. Varsayılan olarak bunlar örtüşür. Örtüşmeyi bozan şey genellikle düzen müdahaleleri: bir kartı grid içinde order: -1 ile öne almak onu görsel olarak başa taşır, kaynaktaki yerini değiştirmez. Sonuç olarak gözle ikinci kartı okuyan kullanıcı, klavyeyle gezdiğinde sekmenin sayfada geri atladığını görür. Görsel sırayı CSS ile yeniden dizdiğiniz her yerde Tab tuşuna basıp sonucu kontrol etmek gerekir.

Baskıdan gerçekten taşınan şeyler

Kırılanların listesi uzun ama taşınanlar daha değerli. Görsel hiyerarşi, kontrast, boşluğun ritmi, grid'in bir düşünme aracı olarak kullanılması, satır uzunluğunun okumayı belirlemesi: bunların hepsi mecra değişince geçerliliğini koruyor. Klasik tipografi literatürünün satır başına 45-75 karakter tavsiyesi ekranda da çalışır, çünkü sınırı koyan kağıt değil gözün satır sonundan satır başına dönme hareketi.

Pratikte seçim de çoğu zaman "baskı mı web mi" değil. Aynı marka ikisini birden üretiyor ve asıl risk, baskıda bitmiş bir düzeni webe olduğu gibi aktarmak: sabit genişlikler, metni görsele gömmek, sayfa gibi davranan bölümler. Baskıdan taşınacak olan düzen değil, karar verme biçimi.