Web Üzerindeki Tutarlı Tasarımların İncelenmesi

Bir web sitesinin görsel dili , ilk bakışlarının çok ötesinde bir ziyaretçiyi etkilemektedir.

Aslında, en iyi web sitelerini incelerken, küçük ayrıntıların sizin için bilinçaltında konuştuğunu ve tutarlılığın web sitesi deneyiminizi geliştirdiğini ve sonuç olarak geri dönme olasılığınızın daha yüksek olduğunu fark ettiniz.

Bu makalede, tasarımın tutarlılığını nelerin ortaya çıkardığını keşfedeceğiz ve orada en tutarlı web sitesi tasarımlarından bazılarını sergileyeceğiz.

Lütfen yazının sonunda bu sitelerin tutarlılığı hakkında yorum yapın ve bu ilkeyi takip eden diğer kişilere bağlantı eklemekten çekinmeyin.

Tasarımda tutarlılık ile ne demek istiyoruz? Göre bu tanım tutarlılık şu şekilde tanımlanabilir: “Bir şeyler veya parçalar arasında uyumlu bir bütünlük veya anlaşma.”

Bir tasarımcı olarak amaç, kullanıcıların aradıkları bilgileri bulmasını kolaylaştırmak için sipariş oluşturmaktır. Tutarlılık bu hedefe ulaşmanıza yardımcı olabilir.

Ayrıntılar Kontrol Listesi

Öncelikle, burada incelediğimiz web sitelerinin tutarlı olup olmadığını belirleyeceğimiz kriterleri tanımlayalım. Kendiniz için kriterleri ayarlamak, kendi günlük tasarım çalışmalarınız için de faydalı olacaktır. Söylemek istediğim gibi, iyi tasarım ilk olarak iyi bir gözlemle yaratılır . İşte kriterlerimiz:

Tipografik tutarlılık:

Tutarlı bir dikey ritim var mı?
Tipografik hizalama tutarlı mı?
Yazı tipi seçenekleri tutarlı mı?
Tipografik gezinme sayfalarda öngörülebilir mi?

Grafik tutarlılığı:

Web sitesinin görüntüleri tutarlı bir ruh hali taşır mı?
Görüntülerdeki renkler uyuyor mu?
Görüntülerin dokuları tutarlı mı?
Resimlerin boyutları web sitesinin genel yapısı ve birbiriyle tutarlı mı?

Renk tutarlılığı:

Renkler sayfalar boyunca tutarlı mı kullanılıyor?

Simge ve tuş tutarlılığı:

Web sitesinin aynı ailenin simgeleri var mı?
Simgeler büyüklükte mi uyuyor?

Bir web sitesi bu kriterleri noktaya getirmek zorunda değildir, ancak liste kendi tasarımlarınızı tutarlı ve uyumlu hale getirmeye yardımcı olmak için iyi bir başlangıç noktasıdır.

Tamam, şimdi oynamak için güzel bir kontrol listesi var. Web sitelerimizi gözden geçirelim, onlardan öğrenelim ve ilham alın!

UX 52 Haftaları

Bu web sitesinin öne çıkan bazı özellikleri nelerdir?

Başlıktaki beyaz boşluk eşit olarak bölünmüştür.
Tipografi sürekli olarak hizalanmış, düzensiz bir sağa sola sıyrılmıştır.
Zirvede sürekli paginated navigasyon hem akıllı hem de tanıdık.
Mesajlar için görüntüler her zaman siyah ve beyazdır.

Şimdi, bu makale ayrıntılarla ilgili olduğu için, hem altyazıdaki hem de bu web sitesiyle ilgili iki küçük sorunu belirtmek istiyorum: Birincisi, “Git” arama düğmesinin bir yansıması olduğunu ve web sitesindeki diğer öğelerin bir yansıması olmadığını fark etmeliyim. (örneğin, üst kısımdaki RSS düğmesini karşılaştırın).

İkincisi, başlıklar ve metin arasındaki boşluğun, web sitesinin geri kalanıyla karşılaştırıldığında altbilgide daha sıkı olduğuna dikkat edin.

Kırmızı kurdela

İlk olarak, web sitesinin en önemli unsuru: kırmızı! Güzel ve sürekli olarak logodan başlıklara bağlantı düğmeleri için kullanılır.
Ardından, düğme grafiklerinin dokusu, logo için kullanılanla aynıdır.
Ayrıca, düğmelerin görsel olarak aynı ailenin, alt taraftaki sosyal simgelerin bile olduğunu fark edin.
Ekran tipi, yine logodan başlıkları düğmelere kadar tutarlı bir şekilde kullanılan güzel bir levha serifidir.
Son olarak, web sitesi içindeki metin öğeleri sürekli olarak hizalanmış, sola yaslanmış ve düzensiz şekilde hizalanmıştır.

Yaron Schoen

Göze çarpan ilk şey, başlıktaki çizimin derinlikle nasıl oynadığıdır. Aşağıdaki dört grafik eleman bile kendi konteynerlerinden çıkar ve aynı şekilde derinlikle oynar.
Tipografi bir ızgarada mükemmel hizalanmış.
Yazı karakteri iyi seçilmiş ve uygulanmıştır. Ana sayfa ve diğer sayfalar da devamlılık gösterir.
Renkler de çok tutarlı, mavimsi yeşile koyu mavi ile güzelce oynuyor, üstbilgiden altbilgiye kadar.

Fuzzco

Üst navigasyondaki dokuya bakın; Alt kısımdaki görüntülerde de kullanılır.
Sayfalardaki başlıktaki yazı tipini kontrol edin; Özel Flash ile güzel bir şekilde yapılmış, yaratıcı bir his veriyor.
Serif, ana sayfa boyunca tutarlıdır, ancak dahili sayfalarda biraz kırılır.
Üstteki gezinme alanındaki renkler altbilgiye uygun, içeriği uyumlu hale getiriyor ve çerçevelendiriyor.

Styleboost

Bu sitenin boyutu kesinlikle tutarlı: büyük . Büyük düğmeler, büyük görüntüler (hepsi tutarlı boyutta), büyük tip, büyük beyaz boşluk.
Renk minimumda tutulur ve iyi kullanılır. Açık mavi, armoniyi korur ve ikincil gri, derinlik ve hiyerarşi ile oynar.
Düğmeler büyük ve tekdüze. Ayrıca, arama kutusuyla eşleşen hafifçe yuvarlak.
Izgara yapısı basittir ve sırada ne olduğunu söyler. Altbilgi bile orantılıdır, ki bu da altın oranına yakın gibi gözüküyor.

Lezzetli Canavar

Bu web sitesi yeni değil, ancak yıllar boyunca tutarlı kaldığı ve biraz da yaşlanmadığı kadar güzel. Detaylara verilen önem yardımcı oldu.

Dokular dikkat edin. Web sitesi, şirket tarafından sunulan yazılımın temasına bağlanan bir ahşap raf ile çerçevelenmiştir.
Çim ve bitki gibi grafik unsurları ahengi koruyor.
Her bölüm yuvarlak köşeler, slayt gösterisi düğmeleri bile vardır.
Yeşilimsi sarı, bu hayali ve unutulmaz dünyaya girmeye sizi davet ediyor.

Richard Meier ve Ortakları Mimarları.

Tarafından tasarlandı Massimo Vignelli Şebekeye hakim ve modern, tutarlı ve mantıksal tasarımlar ürettiği biliniyor.

Grafik elemanların hizalanması dikkat edin. Menüdeki floş-sol tipi aşağıdaki resimlerle hizalanır.
Alt navigasyonun altındaki yatay kural kalıcıdır ve kullanıcıların web sitesinde kendilerini yönlendirmelerine yardımcı olur.
Gezinme ile vücut içeriği arasındaki alan tutarlı olup, göze net bir yol izler.
Ve tipografi basit, sifon sol ve sans-serif, sürekli olarak ızgaraya düşüyor.

Takımın arkasındaki Bilgi Mimarileri ayrıca sadelik, ızgara tasarımı ve tutarlılık konusunda uzmanlaşmıştır.

Üstteki gezinmenin aşağıdaki gövde içeriğiyle nasıl uyumlu olduğuna dikkat edin.
Renk paleti basit ve tutarlı: kırmızı, beyaz ve siyah.
Metinsel öğeler eşit olarak hizalanır. Yatay kurallar arasındaki boşluğun sayfaya göre nasıl tutarlı olduğuna dikkat edin.

Wilson Miner

Tarihler ve meta içerikler ilk sütunda, ardından gövde içeriğiyle hizalanır.
Üstteki gezinmenin, aşağıdaki içerikle hizalandığı şekilde ızgaraya nasıl düştüğüne dikkat edin.
Tipografi basit bir beyaz ve siyahtır: gövde kopyaları için siyah, bölüm başlıkları için beyaz.

Tapbots

Gözüme çarpan ilk şey, beyaz alanın mükemmel kullanımı, özellikle üstte ve altta logo ve navigasyon arasındaki eşit aralık.
Simgelerin hepsi aynı aileden geliyor, uyum yaratıyor.
Üstteki grafikten altbilgi çizimlerine kadar derinlik kullanımı da tutarlıdır.
Renkler sayfa boyunca eşleşir: üstteki siyah altbilgi ile eşleşir; Üstteki kırmızı düğme aşağıdaki arama butonuyla eşleşir; ve gri gezinme altbilgideki gri çubukla eşleşir.

Sarma

Tutarlı tasarım birçok araç gerektirir ve elde edilmesi zor olabilir.

Sunabileceğim bir ipucu güzel bir ızgarayla başlamak ve bunun üzerine bir tel kafes inşa etmektir. Bu size grafik öğelerin bir kuş bakışı ve birbirleriyle nasıl bağlantılı olduklarını gösterir.

Yukarıdaki örnekler, tasarımınızı yürütmekle ilgili düşünce için size yiyecek vermelidir. Tutarlılık, hepsi süreçte gerekli olan çok sayıda parçadan oluşur.

Brooklyn, New York'ta bir web tasarımcısı olan Noam Almosnino tarafından Webdesigner Deposu için özel olarak yazılmıştır. Noam izleyin Twitter'dan veya web sitesini ziyaret edin hellonoam.com .

Bizimle paylaşmak için diğer tutarlı web sitelerini biliyor musunuz? Lütfen bunları yorumlarınıza gönderin!

dizayn web tasarımı tutarlılık