Nevzat

Dağınık bir fikri temiz bir ilk ekrana dönüştürmek

Kaba bir notu, tamamlanmış bir sayfa gibi okunan temiz bir ilk ekrana dönüştürme süreci.

turning-a-loose-idea-into-a-clean-first-screen.md

Tarih

Temmuz 2026

Okuma

2 dk

Etiketler

süreç

Bir ilk ekran; gerçek başlığı, gerçek girişi ve okuma sırasını doğal kılan boşluklarıyla son sayfa gibi okunduğunda bitmiştir. Oraya giden en hızlı yol daha fazla alternatif denemek değil, üç adımı sabit sırayla uygulamaktır. Ekranı cümlelerle yaz, iskeleti gerçek içerikle kur ve yapının henüz gerek duymadığı hiçbir şeyi eklemeden dur.

Çizmeden önce ekranı yaz

Her ilk ekran birkaç cümleyle başlar: sayfa ne vaat ediyor, kime sesleniyor ve okuyucu sonra ne yapmalı. Cümleler net değilse hiçbir yerleşim onları düzeltemez.

Bir ilk ekran bir vaattir. Sayfanın geri kalanı, bu vaadin nasıl tutulduğunu gösterir.

Süreç notu

Pratikte bu, herhangi bir araç açılmadan önce düz metin bir dosyada üç satırdır:

first-screen.md
vaat: bu sayfa tek cümlede ne söylüyor?
kitle: buna ilk okumada kim inanmalı?
sonraki adım: okuyucu kaydırmadan önce ne yapmalı?

Bu sitenin ana sayfası tam olarak bu alıştırmadan çıktı. Vaat — aynı kişi tarafından tasarlanan ve geliştirilen sakin arayüzler — bir üst bölüm tasarlanmadan önce tek bir cümleydi. Bir müşteri brifingi belirsizse, üç satırlık bu dosya belirsizliği görünür kılmanın en ucuz yoludur: üç cümle üzerindeki anlaşmazlık bir saat sürer, bir tasarım turu değil.

Yerleşimin iskeletini gerçek içerikle kur

Yer tutucu metin ritim sorunlarını gizler. Hiyerarşiyi gerçek başlık ve girişle kurarım, sonra okuma sırası doğal görünene kadar boşlukları ayarlarım.

Gerçek içerik, lorem ipsum'un gizlediği kısıtları ortaya çıkarır. Gerçek başlık dokuz kelimedir ve mobil genişliklerde üçüncü satıra taşar. Gerçek giriş, konseptteki zarif iki satırlık paragraftan iki cümle daha uzundur. Bu sorunlarla görsel dil oturduktan sonra karşılaşmaktansa iskelet aşamasında çözmek daha iyidir — başlığı kısaltmak, girişi daraltmak ya da ölçeği değiştirmek.

İskeleti kurmak, bileşenlere erken bağlanmamak demektir. Bu aşamada ekranda bir başlık, bir paragraf ve belki tek bir aksiyon vardır: gerçek kelimeler taşıyan dikdörtgenler. Okuma sırası bu hâliyle çalışıyorsa tasarım sağlam bir temele oturur. Aynı disiplin daha sonra, boşluklama ve hiyerarşi kararları sayfayı süsler yerine taşırken de geçerlidir.

Bilerek erken dur

İlk ekran, üzerindeki hiçbir şey mesajla yarışmadığında bitmiştir. Yapı gerçekten ihtiyaç duyduğunu gösterene kadar doku, hareket ve detay bekler.

Erken durmak bir karardır, hırs eksikliği değil. Bu aşamada eklenen her öğe, sonrasındaki her kararı kısıtlar. Başlığın arkasındaki dekoratif bir şekil bugün iyi görünebilir; yarın tablet genişliklerinde, yayına almadan önceki responsive kontrolünde çözülmesi gereken bir yerleşim sorununa dönüşür. Disiplin, oturumu neredeyse fazla sade görünen bir ekranla bitirmek ve sonraki turun gerçekten neyin eklenmesi gerektiğini göstermesine izin vermektir.

Yeniden kullanılacaklar

  • Herhangi bir tasarım aracı açmadan önce vaadi, kitleyi ve sonraki adımı üç cümle olarak yaz.
  • Yerleşimin iskeletini gerçek başlık ve girişle kur; yer tutucu metin tam da görmen gereken sorunları gizler.
  • İlk geçişi dikdörtgenler ve kelimelerle sınırlı tut. Bileşenler, okuma sırası çalıştıktan sonra gelir.
  • Hiçbir şey mesajla yarışmadığında dur — doku ve hareketi ancak yapı içindeki yerlerini kazandıklarında ekle.

İletişime geç

Yönü netleşmesi gereken bir sayfanız, ürününüz ya da arayüzünüz mü var?

Fikrinizi, kısa brief'i ya da dağınık ilk sürümü gönderin. Bir sonraki adımı birlikte netleştirelim.

Konuşmaya başlayalım