Görsel hiyerarşi, bir tasarımın içindeki öğeleri önem sırasına göre düzenleme sanatı. İyi kurgulanmış bir görsel hiyerarşi, kullanıcının neye bakacağını söylemeden yönlendirir. Bir web sayfası ya da afiş açtığınızda gözünüz anında belirli bir yere gider. Bu rastlantı değil, tasarımcının kasıtlı kararlarının sonucu. Görsel hiyerarşi bu yönlendirmeyi boyut, kontrast, boşluk, renk ve yerleşim aracılığıyla sağlar. Boyut ve ağırlık: Büyük öğeler küçüklerden daha önce görülür. Manşet metni, içerik metninden büyük yazılır çünkü okuyucuya "buradan başla" denmek istenir. Font ağırlığı da aynı işlevi görür, bold başlık, ince gövde metni, net bir katman oluşturur. Renk ve kontrast: Görsel hiyerarşi için renk güçlü bir araç. Yüksek kontrastlı öğeler dikkat çeker, düşük kontrastlılar arka plana çekilir. Vurgu rengi (accent color) sayfada tek bir öğeye uygulandığında göz doğrudan oraya gider. Boşluk kullanımı: Etrafındaki boşluk, bir öğenin ne kadar önemli olduğunu sinyaller. Bolca beyaz alan (negative space) içinde duran bir başlık, sıkışık bir sayfadaki başlıktan daha güçlü görünür. F ve Z düzenleri: Araştırmalar, web sayfalarında okuyucuların gözünün F harfine benzer bir yol izlediğini gösteriyor: önce yatay, sonra aşağı, tekrar yatay. Görsel hiyerarşi bu doğal okuma yolunu desteklemeli. Daha az metin içeren sayfalarda ise Z paterni görülür. Görsel hiyerarşi kurarsanız kullanıcı ne yapacağını bilir. Kurmazsanız kullanıcı kaybolur, ve çoğunlukla gitmek için en kolay yolu seçer.