Web design in 2026: performance and accessibility as design constraints,

[Aior]

Web değişti; web tasarımı eşitsiz yetişti​

"Web tasarımı" eskiden düzen ve estetikle ilgiliydi. 2026'da performans ve erişilebilirlik birinci sınıf tasarım kısıtlarıdır — "sonra ekleriz" mühendislik görevleri değil.

Tasarım kısıtı olarak performans​

• LCP < 2.5 s, INP < 200 ms, CLS < 0.1 — Core Web Vitals.
• Hero görüntü, font seçimi, JavaScript ayak izi — bunlar ölçülebilir performans maliyetine sahip tasarım kararlarıdır.
• Tasarımcılar seçimlerinin maliyetini bilmeli.
• Mühendislikle anlaşılan sayfa türü başına performans bütçeleri.

Tasarım kısıtı olarak erişilebilirlik​

• Renk kontrastı — body metin için en az 4.5:1, büyük metin için 3:1.
• Otomatik üretilmeyen, tasarlanmış focus durumları.
• Touch hedef boyutu en az 44×44 px.
• Metin makul ölçeklenir (kırılmadan %200'e zoom).
• Tasarım hand-off'una gömülü görsel alt metinleri.
• Hareket prefers-reduced-motion'a saygılı.
• Form etiketleri kalıcı, sadece placeholder değil.

Responsive — çoğunlukla yerleşmiş, ara sıra garip​

• Mobile-first varsayılan.
• 2026'da container query'ler yaygın desteklenir — bileşenleri bağlamlarına göre tasarlayın.
• Akışkan tipografi (clamp + viewport units) breakpoint-driven type'ı değiştirir.
• aspect-ratio ile aspect ratio rezerve edilir.
• RTL/LTR nötrlüğü için logical properties (margin-block, padding-inline).

Dark mode​

• Token tabanlı dark mode — renkler tek paletten eşlenir.
• Görsel ve illüstrasyon işleme — bazı varlıkların dark varyantları gerekir.
• Marka rengi ayarları — birincil marka rengi sıkça dark arka planlar için ayar gerektirir.
• Sistem tercihi + kullanıcı override.

Hareket: ince, amaçlı, opsiyonel​

• Hareket durum değişimlerini iletir.
• Görevden dikkati dağıtan dekoratif hareketten kaçının.
• prefers-reduced-motion ile test edin.
• Kullanıcının dikkatini gitmesi gerekmeyen yere animasyonla çekmeyin.

Web'de tipografi​

• Google Fonts değil, @font-face ile self-hosted webfontlar (gizlilik + performans).
• Uygunsa variable fontlar.
• Dosya boyutunu azaltmak için subset.
• font-display: swap.

Görseller​

• Önce AVIF, fallback WebP, en son JPEG / PNG.
• srcset + sizes ile responsive görüntüler.
• Fold altı için lazy loading.
• Algılanan yükleme hızı için LQIP veya BlurHash.
• Image CDN (Cloudflare Images, Bunny Optimizer, ImageKit).

Formlar — dönüştüren (veya dönüştürmeyen) kısım​

• Tek sütun, üste hizalı etiketler.
• Yardımcı mesajlarla inline doğrulama.
• Gereksiz alanlardan kaçının.
• Auto-fill / autocomplete nitelikleri doğru ayarlanmış.
• Mobil klavyeler doğru tetiklenir.
• Banner'da değil, alanda hatalar.
• Başarı durumları — net sonraki adımla submit'i onayla.

Varsayılan gizlilik​

• Açık onay olmadan üçüncü taraf izleyici yok.
• DNT / GPC'ye saygılı analitik.
• Embed'ler (YouTube, Vimeo, Twitter) tıkla-yükle placeholder ile lazy-loaded.
• Çerezler minimize; mümkünse first-party.

Uyaracağımız bir desen​

Kullanıcı yerine tasarım portföyü için tasarlamak. Yılın tasarımcısı showpiece sitesi sıkça kullanılması zahmetli, yavaş yüklenir ve kırılgan olur.

Her zaman karşılığını veren bir desen​

Başarı durumu yanında boş durumu, hata durumunu ve yükleme durumunu tasarlamak.

Geçen yıl yaptığınız en yüksek etkili tasarım kararı nedir?

The web has changed; web design has caught up unevenly​

"Web design" used to be about layout and aesthetics. In 2026, performance and accessibility are first-class design constraints — not "we'll add them later" engineering tasks.

Performance as a design constraint​

• LCP < 2.5 s, INP < 200 ms, CLS < 0.1 — Core Web Vitals.
• The hero image, the font choice, the JavaScript footprint — these are design decisions with measurable performance cost.
• Designers should know the cost of their choices.
• Performance budgets per page type, agreed with engineering.

Accessibility as a design constraint​

• Colour contrast — minimum 4.5:1 for body text, 3:1 for large text.
• Focus states designed, not auto-generated.
• Touch target size minimum 44×44 px.
• Text scales reasonably (zoom to 200 % without breaking).
• Alt text for images embedded in design hand-off.
• Motion respects prefers-reduced-motion.
• Form labels persistent, not just placeholders.

Responsive — mostly settled, occasionally weird​

• Mobile-first is the default.
• Container queries widely supported in 2026 — design components by their context.
• Fluid typography (clamp + viewport units) replaces breakpoint-driven type.
• Aspect ratios reserved with aspect-ratio.
• Logical properties (margin-block, padding-inline) for RTL/LTR neutrality.

Dark mode​

• Token-based dark mode — colours mapped from a single palette.
• Image and illustration handling — some assets need dark variants.
• Brand colour adjustments — primary brand colour often needs adjustment for dark backgrounds.
• System preference + user override.

Motion: subtle, purposeful, optional​

• Motion conveys state changes.
• Avoid decorative motion that distracts from task.
• Test with prefers-reduced-motion.
• Don't animate the user's attention to where it doesn't need to go.

Type on the web​

• Self-hosted webfonts via @font-face, not Google Fonts (privacy + performance).
• Variable fonts where applicable.
• Subset to reduce file size.
• font-display: swap.

Imagery​

• AVIF first, WebP fallback, JPEG / PNG last.
• Responsive images via srcset + sizes.
• Lazy loading below the fold.
• LQIP or BlurHash for perceived load speed.
• Image CDN (Cloudflare Images, Bunny Optimizer, ImageKit).

Forms — the part that converts (or doesn't)​

• One column, top-aligned labels.
• Inline validation with helpful messages.
• Avoid unnecessary fields.
• Auto-fill / autocomplete attributes correctly set.
• Mobile keyboards triggered correctly.
• Errors at the field, not in a banner.
• Success states — confirm submission with a clear next step.

Privacy by default​

• No third-party trackers without explicit consent.
• Analytics that respects DNT / GPC.
• Embeds (YouTube, Vimeo, Twitter) lazy-loaded with click-to-load placeholder.
• Cookies minimised; first-party where possible.

One pattern we'd warn about​

Designing for the design portfolio rather than the user. The designer-of-the-year showpiece site is often impractical to use, slow to load, and brittle.

One pattern that always pays off​

Designing the empty state, the error state, and the loading state alongside the success state.

What's the highest-impact design decision you've made in the last year?