Beş saniyede okunan tasarım

Bir yabancı sayfaya geldikten sonraki beş saniye içinde kim olduğunuzu, ne sunduğunuzu ve sırada ne yapacağını bilmelidir. Bu işi boyut ve kontrast yapar: ekrandaki en büyük şey başlıktır, ikincisi giriş görseli ya da alt başlık, üçüncüsü ana düğme. Ekran başına tek bir odak noktası; eşit ağırlıkta iki düğme dikkati böler ve hiçbirine basılmaz.

Serbest bir tuvalde hiçbir şey kendiliğinden dizilmez; bu hem bir özgürlük hem de bir sorumluluktur. Öğeleri hizalamak için hizalama kılavuzlarını ve cetvelleri, sırayı okunur tutmak için katmanlar panelini kullanın. Ardından sayfaya gözlerinizi yarı kapatarak bakın: ilk gördüğünüz şey başlık değilse yeterince büyük değildir.

On bir temanın her biri bir başlık yazı tipini bir gövde yazı tipiyle eşler. Bu çiftin içinde kalın. Gövde metni on altı ila on sekiz pikselde, satır yüksekliği bir buçuk civarında ve satırlar yaklaşık altmış beş karakterden uzun değil; bu bir dizüstü bilgisayarda rahat bir sütun ve bir telefonun tam genişliğidir, bu yüzden paragrafları geniş bir ekranın kenarına kadar genişletmeyin.

Başlıklar sırayla aşağı iner (H1, ardından H2, ardından H3) ve küçüğü daha güzel göründü diye asla bir düzeyi atlamaz; ekran okuyucular da arama motorları da sırayı okur. Büyük harfle yazılmış paragraflardan kaçının ve kalın yazıyı bir pasajda önemli olan tek ifadeye saklayın.

Tema size bir palet verir; vurgu rengi bir ziyaretçinin basması gereken şeyler içindir, nötrler ise geri kalan her şey için. Her öğe vurgu rengini taşırsa hiçbir şey öne çıkmaz. Gövde metnini arka planına karşı en az 4,5'e 1 kontrastta tutun; bu erişilebilirliğin tabanıdır. Bunu beyaz bölümlerin yanı sıra renkli bölümlerde de kontrol edin.

Kırık beyaz bir zemin üzerinde neredeyse siyah metin, saf beyaz üzerinde saf siyahtan daha özenli okunur ve temaların varsayılan olarak yaptığı da budur. Paleti tuvalde öğeleri tek tek boyamak yerine bilerek, bir kez, temada değiştirin.

Boşluk boş değildir; birbirine ait olanları gruplar, ait olmayanları ayırır. Bölümler arasındaki iç boşluğu tutarlı tutun ve öğeleri sekiz ya da on iki piksellik bir ızgaraya hizalayın. Bir sırada eşit yükseklikteki kartlar tasarlanmış görünür; kademeli bir sıra kazara görünür.

Telefon düzeni masaüstü sayfanızdan türetilir: öğeler okuma sırasıyla bir sütuna akar ve o sütunu elle ayarlayabilirsiniz. Yayınlamadan önce editörü telefon görünümüne geçirin ve üç şeyi kontrol edin: okuma sırası hâlâ anlamlı mı, hiçbir şey başka bir şeyin altında kalmıyor mu ve her düğme bir başparmağın basabileceği şekilde en az 44 piksel yüksekliğinde mi.

İşinizin, mekânınızın ya da ekibinizin gerçek bir fotoğrafı, biraz daha kötü olsa bile her zaman bir stok görseli geçer. Bir ızgara içinde tek bir en boy oranına kırpın ve sayfanın ihtiyaç duyduğu boyutta dışa aktarın; kutusundan üç kat geniş bir fotoğraf sayfayı boşuna yavaşlatır. Simgeleri tek bir stilde ve tek bir çizgi kalınlığında tutun.

Editör bir bölüme ya da öğeye giriş animasyonu verebilir. Birini giriş bölümünde kullanın ya da hiç kullanmayın. Her bölümün farklı bir yönden kaydığı bir sayfa slayt gösterisi gibi okunur; sistemine hareketi azaltmasını söylemiş bir ziyaretçi sayfayı hareketsiz görmelidir ve yayınlanan site buna uyar.

Her görselde alternatif metin (alan editörde), her form alanında bir etiket, her düğmede görünür bir odak durumu. Anlamı yalnızca renkle taşımayın: bir hata kırmızının yanında bir sözcüğe ya da simgeye de ihtiyaç duyar. Videodaki altyazılar yalnızca duyamayanlara değil, herkese yardım eder.

Erişilebilir sayfalar daha sade olma eğilimindedir; daha sade sayfalar daha hızlı yüklenir ve daha iyi sıralanır. İlk taslaktan en geniş kitle için tasarlayın; sonradan eklemek, bir kez yapmaktan daha pahalıya mal olur. Sayfanın tamamını yalnızca klavyeyle, sekme sekme deneyin ve ulaşamadığınız her şeyi düzeltin.