Görsel İçerik Yönü Bilmeniz Gerekenler

içeriğin görsel yönü daha az tartışılan ancak yüksek dönüşüm sağlayan web tasarımının çok önemli bir yönüdür. Her ziyaretçi ilk sayfa yüklemesinde yeni bir site "emdirir" - bilinçli yapıp yapmasın.

Estetik bir rol oynamaktadır, ancak bu genel tasarım hissi. Bu duygu boşluk, tipografi, simetriden etkilenebilir ancak daha çok ilişkiler sayfa öğeleri arasında.

Tasarımcılar ziyaretçilerin gelmesini istiyor sayfada kal ve kaydırmaya devam dikkatlerini çekerek ve siteyle ilgilenmelerini sağlayarak. Tasarım ilkeleri her zaman odaklanmalı formdan önceki işlev. Bu, tasarımın yapması gerektiği anlamına gelir içeriği tamamla, bir düşünce olarak kıpırdatmak değil.

Bu yazıda, nasıl yapabileceğinize dair bazı ipuçları göstermek istiyorum. düzenlerinizi ve görsel içerik akışlarınızı iyileştirin sitenizde.

Kompozisyona Odaklanın

Bir web sitesinin her bir parçası oluşturulur genel düzende. Bu genel düzen, Gestalt teorisinin kurallarını takip eden bir kompozisyon oluşturur. bütün her zaman parçaların toplamından daha büyüktür.

Bir sayfanın tek tek alanları bir araya gelir bir bütün oluşturmak. Tasarım öğeleri inşa etmek gerekir yerçekimsel içerikte; sayfadaki her şey olmalı doğal olarak ziyaretçileri sayfanın altına ulaşana kadar daha fazla yönlendirin.

İçeriğin farklı bölümleri (görseller, metinler, düğmeler vb.) Arasındaki ilişkilerin tasarım için çok önemli olmasının nedeni budur..

Hedefiniz olmalı insanları cesaretlendirmek siteye kendi eğilimlerinden göz atmak için. Söylemesi yapmaktan daha kolay, ama çok şey öğrenebilirsin. gerçek örnekleri incelemek.

Monkop için ana sayfa görsel hiyerarşinin harika bir örneğidir. hem metin hem görsel. Öğeler arasında çok fazla alan kullanılıyor ve tipografi markalı vektör çizimlerini tamamlıyor.

Kaydırırken farkedeceksiniz düz yatay sayfa blokları renkler, kenarlıklar ve grafiklerle ayrılır. Bunlar ile inşa edilmiştir tasarım desenleri aklında teklif tutarlılığı sayfa boyunca.

Aşağı doğru, bir iki sütunlu bölünme bir tarafta görüntülerle, diğer tarafta metin. Görüntüler ayrıca tarafları değiştir sağ-sol-sağ-sol bir düzende. Bu dikkat çekiyor ve monotonluğu bozuyor hala normal sayfa doğal bir akış tutmak içerikte.

bir benzer tasarım estetiği Photoshop ve Sketch kullanıcıları için bir fotoğraf eklentisi için açılış sayfası olan Picjumbo web sitesinde bulunabilir.

Ana sayfa, logoya ve önizleme videosuna odaklanır. Kaydırdığınızda, sayfa boyunca hareket eden özel animasyonlar göreceksiniz. Bu animasyon gerçekten dikkat çeker, ve izleyici olur kaydırmaya devam etmek istiyor.

Genel olarak, sayfa hissediyor açık ve taraması kolay. İçerik yatay bloklara bölünmüş net tipografi ve temiz simgeler.

Farklı sayfa öğelerinin yolunu düşünün birlikte denge, öğeler arasındaki boşluk, renkler arasındaki kontrast ve farklı şekiller. Bütün bunlar genel kompozisyonda bir rol oynamaktadır. Her site doğal olarak içeriğe belirli bir ağırlık çeker.

Mutlak bir cevap yok, çünkü her site için farklı. Örneğin, bazı gezinti bağlantıları büyük ve büyük olduğunda daha iyi görünür. Diğerleri oldukları zaman daha uygun olur büyük harflerle küçük.

Size niş diğer web sitelerini incelemenizi öneririm. Gerçekten nasıl bir araya getirildiklerini analiz et. Hangi öğelerin nihayet tasarımı “bir araya getirdiğini” görmek için düzenleri yeniden oluşturmaya bile çalışın.

Tip Tasarım Konuları

Tipografinizi tasarlama şekliniz içerik yönünü etkiler Sitenizde. Bunun tür hiyerarşisi ve farklı sayfa elemanlarının tasarım stilleri paragraflar, başlıklar, madde imli listeler, alıntılar ve sütunlar veya tablolar gibi özel mizanpaj öğeleri gibi.

Görseller mizanpajı da etkileyebilir, bu nedenle içerik tasarlamak iyi bir fikirdir doğal bir ilerleme ile. İçeriği şöyle yaz sayfa aşağı akar, ve insanları okumaya devam ediyor her paragrafta.

Emrinizde olan en büyük araç tasarım için gözünüz. Tipografik elemanlardaki farklılıkları ve diğer sayfa elemanları ile olan ilişkilerini tanımayı öğrenin. İçerik alanlarını ayırt etmek için sayfa bölümleri arasında ilişkiler oluşturma.

Göz önünde bulundurmanız gereken bazı şeyler:

Yazı Boyutu
Font ailesi
Renk kontrastı
Sayfa bölümü ilişkileri
Satır yüksekliği ve paragraf kenar boşlukları
Harf boşluğu ve büyük / küçük harf

Örneğin, Kampanya İzleme ana sayfasına bakın. Üst gezinme bağlantıları, küçük harflerle tüm büyük harfleri kullanır. Sayfadaki diğer başlıklar bunu takip et tüm kapak tasarımı hangi tekdüzelik duygusu yaratır.

Sitedeki diğer daha büyük başlıklar çok daha belirgin, ve gerçekten sayfadan atlıyorlar. Sadece tipik bir başlık tasarımına bakarak, kolay olması gerekir farkı söyle bir başlık ile eşlenmiş gövde kopyası.

Campaign Monitor'deki tipografik tasarım stilleri mükemmeldir ve bunlar doğal olarak mizanpaja karıştırın. Böyle bir sonuç elde etmek pratik gerektirir, ancak ne kadar çok denerseniz, o kadar kolay olur.

Biraz daha fazla öğrenmek için aşağıdaki linkleri tavsiye ederim:

Tasarım Prensipleri: Görsel Ağırlık ve Yön
Tasarımlarınızda Görsel Ağırlıkla Çalışma
19 Kompozisyon Dengesini Etkileyen Faktörler

Rehber İçeriği

Anlaşıldı farklı türdeki web siteleri var farklı yöntemler ziyaretçilere site boyunca rehberlik etmek için. Örneğin, açılış sayfaları, ziyaretçileri yönlendirmek istiyor bilgi haberi, küçük ikonlar, Ekran görüntüleri, ve referansları.

Bloglar gibi diğer siteler genellikle kişileri aynı anda ana sayfaya getirmez. Çoğu insan makale sayfasında arazi, yani blog yazısı düzenleri kastedilmiştir. başlığı vurgula, ve insanları çekmek içeriğe daha fazla. İşte bu noktada kaliteli metin yazarlığı devreye giriyor, çünkü okuyucuların her kelimeyi kapatmasını istiyorsunuz.

Sosyal ağlar ve web uygulamaları gerekir kaliteli kullanıcı deneyimi, bu yüzden biraz farklı bir konu, ancak Facebook beslemesinin nasıl tasarlandığını düşünün kaydırma ve kullanıcı etkileşimi teşvik.

İnsanların siteyi taramasını sağlamak için kullandığınız tasarım yöntemleri zamanla değişim. Ama genel olarak amacınız rehber ziyaretçiler görsel içerik yönü ile.

Bir göz atalım Açılış sayfası ve bir blog tasarımı farklılıkları tespit etmek.

Kaktüs OS X için statik bir site üreticisidir. Apple'ın tasarım stilini yakından takip ediyor - çok fazla boşluk ve ince sans-serif yazı tipleri.

İçerik, basit grafiklerle sütunlara, bloklara ve metin parçalarına düzenlenir. Bu aynı estetik Apple ürünleri ile ortak, Mac kullanıcıları bu tasarım tarzının tadını çıkaracaklar.

Ürün hakkında bilgiler - özellikler ve ayarlar dahil - ana sayfada listelenmiştir. Sayfanın kendisi kaydırmayı teşvik eder benzersiz içerik, temel simgeler ve sol / sağ içerik bloklarının alternatif sütun desenini kullanarak.

Buradaki amaç bilgi sağlamaktır. var olan kullanıcılar, ve satmak Yeni kullanıcılar kaktüs fikri.

Şimdi bu tasarımı Next Web'in giriş sayfasıyla karşılaştırın. İçerik çok daha sporadik bir blog ana sayfasında, çünkü birçok farklı gönderi konusu.

Dikdörtgenler, enkapsüle olan bir ızgara sistemi oluşturur tek bir düzende birden fazla gönderi. Buradaki amaç kullanıcıların içeriği okumalarını sağlayın sitede. Ziyaretçilerin bir şey indirmeleri önemli değil, ancak fark eder. bir şeyler okumak için etrafta dolaş.

İnsanları okutmanın yolu ile harika fotoğraflar ve akılda kalıcı başlıklar. TNW bu konuda harika bir iş çıkarıyor. İnsanları gezinmeye devam etmek için oluşturuldu kenar çubuğunda ve içerik sonrası alandaki ilgili küçük resimleri içeren.

Ziyaretçileri belirli bir eyleme yönlendirmek, her sitede farklıdır. Ancak diğer başarılı sitelerin neler yaptığını inceleyerek ve nasıl kopyalanacağını öğrenerek çok şey öğrenebilirsiniz..

Gözlerine Güven

Bireysel tasarım özellikleri analitik olarak açıklanabilir, ancak uygulama her saha için değişir. "Daha fazla kaydır" bağlantısını içeren bir kahraman resmi aynı şeyi yapmıyor tüm web sitelerinde.

Tasarlamayı öğrenmek çok görsel süreç. Tasarım için gözünüz en önemli unsurdur. Gerek işleri düzgün gör bunu tanımlamak görsel hiyerarşi. Bunu başka web sitelerinde görebilirseniz, kendi sitelerinizde çoğaltabilirsiniz..

En iyi tavsiyem sadece gözlerine güven. En sevdiğiniz web sitelerinin bir listesini oluşturun ve her birine göz atarak 5 dakika geçirin. Sayfadaki en sevdiğiniz öğeleri ve tasarımı nasıl etkilediklerini yazın. Bu sana yardım edecek bu kavramları UI / UX perspektifinden içselleştirin, kullanıcının bakış açısı yerine.

Ayrıca bir şeyler denemekten korkma! Tasarımda kimse iyi olamadı sadece Tasarımla ilgili makaleleri okuyarak. Evet, yardım ederler - çok yardımcı olabilirler. Ama sen gerek için ne olduğunu öğrenmek için sıfırdan şeyler oluşturun Eserleri Ve ne değil.

Beğendiğiniz web sitesi düzenlerini inceleyerek ve onları yeniden oluşturarak gözünüzü geliştirin. Zamanla zihninizde yeni siteler tasarlamayı kolaylaştıran bir desen kütüphanesi oluşturacaksınız.

Kaydırma

Umarım, bu ipuçları sizi başlatır ve izlemeniz için temel bir yol haritası verir. Bir web tasarımcısı olmak kolay değil, ama dünyanın yeteneklere ihtiyacı var ve bu temel kavramları kendinize öğretmek hiç bu kadar kolay olmamıştı.

Ders çalışma Hoşunuza giden sayfa öğelerine sahip en iyi web sitesi örnekleri. Tren ilişkilerinizi tanımak için gözünüz ve hızlı bir şekilde geliştirmek için gerekli beceriler tekrarlamak kendi işinde bu ilişkiler.