CMS Web Tasarımı: Dinamik İçerik Uygulamalarına Yönelik Bir Kılavuz

Çevrimiçi medyanın dinamik içerik odaklı dünyası için UI/UX teknikleri.

Özellikle çevrimiçi medya alanındaki web uygulamalarının ve mobil uygulamaların büyük bir çoğunluğu WordPress, Drupal ve diğerleri gibi içerik yönetim sistemleri (CMS) tarafından desteklenmektedir. Bu sistemler, içeriğin kral ve dinamik olduğu, sürekli ve sık sık değiştiği bir internet çağının ihtiyaçlarını karşılamak için ortaya çıkmıştır.

Geçmişte, çoğu web sitesi statikti - sorunsuz bir şekilde gelişmek ve büyümek için oluşturulmamıştı. Şimdi onlar yaşayan sistemler olarak kabul ediliyorlar ve onlar için tasarlamanın en uygun yolu var.

Aşağıdakiler, repertuarlarını statik web sitelerinin ve açılış sayfalarının ötesine genişletmek ve haber siteleri, bloglar ve hatta kullanıcıların düzenli olarak içerik yayınladığı sosyal ağlar gibi dinamik içerik odaklı uygulamalar için etkili bir şekilde tasarlamaya başlamak isteyen dijital tasarımcılar için bir kılavuzdur. Bu geçişi yapabilmek için tasarımcıların bu tür uygulamaların tipik olarak nasıl yapılandırıldığını anlamaları ve tasarım sürecinde “önce içerik” zihniyetini benimsemeleri gerekecektir.

CMS-güdümlü Uygulamalarda CMS Web Tasarım IA Modelleri

Tasarımcılar, özellikle UX (kullanıcı deneyimi) üzerinde çalışıyorsa ve onu sıfırdan tasarlıyorsa, CMS güdümlü bir uygulamada ortak bilgi mimarisi kalıplarının zihinsel bir modeline sahip olmalıdır. Bu uygulamalarda ortak ve ayrılmaz olan birkaç sayfa türü vardır ve bunlar genellikle "gönderinin" temel bileşen olarak işlev gördüğü öngörülebilir bir şekilde birbirine bağlanır. Bir uygulamanın içerebileceği gönderi sayısı için genellikle teorik bir sınır yoktur.

Ön Sayfa

Bu resmi giriş noktasıdır ve genellikle ana sayfa ile eş anlamlıdır. Özellikle erişilecek çok fazla içerik olduğunda oldukça yaygındır çünkü en önemli olanı vurgulamaya veya öne çıkarmaya yardımcı olur. Bu sayfa genellikle çok fazla ayrıntı vermeden gönderilerin kısaltılmış sürümlerini gösterir.

Gönderi Sayfası

"Gönderi", CMS güdümlü bir uygulamanın temel birimiyse, gönderi sayfası , bir gönderiyle ilgili tüm genel ayrıntıların görüntülendiği yerdir. Muhtemelen uygulamadaki tek gerçekten kritik sayfadır ve belirli bir olay, kişi, grup, ürün vb. hakkında bir makale sayfası veya bilgi sayfası olabilir. Bazı büyük uygulamalarda, birden fazla gönderi ve gönderi türü olabilir. sayfalar belirlendi.

Liste/Kategori Sayfası

Bu sayfa türü, kullanıcıların mevcut tüm gönderiler arasında gezinmesine ve bunları kategori, nitelikler veya diğer kriterlere göre filtrelemesine izin vermek için yararlıdır. Kaydırılacak içerik miktarı önemli olduğunda bir sıralama seçeneği de yaygındır.

Arama Sayfası

Arama için ayrılmış bir sayfa, daha küçük uygulamalar için gerekli değildir, ancak her zaman yardımcı olur. Bazen kategori/liste sayfası ile birleştirilebilir veya entegre edilebilir.

Kullanıcı/Yazar Profili

Bu sayfa, bir veya daha fazla gönderi oluşturan her yazar veya kullanıcıya ayrılmıştır. Bazen küçük haber sitelerinde ve tek yazarlı bloglarda vazgeçilir, ancak çok yazarlı büyük haber siteleri, içerik odaklı sosyal ağlar ve diğer kullanıcı tarafından oluşturulan uygulamalar için kritik öneme sahiptir. Yaygın ve faydalı bir uygulama, bu sayfaya kullanıcının tüm gönderilerinin bir listesini eklemektir.

Kullanıcı Ana Sayfası veya Gösterge Tablosu

Bu sayfa, oturum açmış kullanıcıyla ilgili bilgileri (gönderiler dahil), genellikle kişisel bir haber akışı veya önerilen içerik, son etkinlik ve durumlar biçiminde gösterir. Kullanıcı evi, kapılı uygulamalar ve sosyal ağ uygulamaları için esastır, ancak diğerleri için isteğe bağlı veya alakasız.

Dinamik İçerik için İçerik Odaklı Kullanıcı Arayüzü Tasarımı

İçerik tasarımdan önce gelir. İçeriğin yokluğunda tasarım tasarım değil, dekorasyondur. – Jeffrey Zeldman

CMS tabanlı bir uygulamanın kullanıcı arabirimini tasarlama zamanı geldiğinde, tasarımın her zaman içeriğin yönlendirdiğini, bunun tersinin olmadığını hatırlamak önemlidir. İçerik öncelikli bir yaklaşım, son yıllarda kanıtlanmış sonuçlarla giderek daha fazla medya şirketi tarafından benimsenmiştir. Bunu göz önünde bulundurarak, UI tasarımcılarının bu tür projelerde ayaklarını ıslatırken akıllarında tutmaları gereken önerilerin bir listesini burada bulabilirsiniz.

Stil Tanımlamadan Önce İçeriği Düşünün

İçerik odaklı bir uygulamada görsel stil, içeriği bir bütün olarak desteklemelidir. Bu tür uygulamaların doğası genellikle içeriğin değişken olacağını ve tamamen öngörülebilir olmayacağını ima etse de, çoğu zaman genel bir temaya sığmaz. Bu nedenle markanın estetiğini geliştirirken gerçek içerik harika bir ilham kaynağı olabilir. Aynı zamanda, tasarımcının belirli içerik parçalarına fazla bağlı kalması ve aşırı hedeflenmiş bir stil geliştirmesi de bir sorumluluk olabilir.

İçeriği düzenli olarak kimin oluşturacağını öğrenin.

CMS odaklı bir uygulamada, içerik büyük ölçüde tasarımcılar tarafından değil içerik oluşturucular tarafından belirlenir. Bu nedenle, genellikle tasarımcının, ürünün görünümü üzerindeki bazı kontrolleri, düzenli olarak içerik yayınlayan kişilere, yani editörlere, yazarlara, yöneticilere ve hatta genel formlar aracılığıyla içerik giren rastgele kullanıcılara bırakması beklenir.

Üzerinde anlaşmaya varılan sürece bağlı olarak tasarımcı, görüntüleri seçmek, hazırlamak ve kırpmak için bazı standartlar ve yönergeler belirleyebilir ve hatta metin stiline bazı parametreler koyabilir. Bununla birlikte, genel olarak, uygulamanın ön ucunu, içerik oluşturucunun kötü bir fotoğraf veya çok uzun bir başlık gibi alt düzeyde çalışmasının kaliteyi düşürmeyeceği şekilde şekillendirmek tasarımcının sorumluluğundadır. tasarımın önemli ölçüde

Mümkünse gerçek içerikle tasarım yapın.

İçerik türü, CMS güdümlü bir uygulamada büyük ölçüde değişebileceğinden, bunun büyük bir örneğine bakmak için zaman harcamak mantıklıdır. İdeal olarak, bir haber sitesi veya blog söz konusu olduğunda tasarımcı, tasarım sürecinin en başında içerik oluşturucularla işbirliği yapar ve hikaye örnekleri, ürün resimleri, videolar veya tasarım maketlerinin gerçek gibi hissettirilmesine yardımcı olabilecek başka herhangi bir şey ister. olabildiğince.

Gerçek içerikle tasarlamak, stok fotoğrafları ve yapay metin kullanmak yerine tercih edilir ve oluşabilecek sürprizleri sınırlamaya yardımcı olduğu için tel çerçeveleme veya prototip oluşturma ile paralel olarak bile yapılabilir.

Bir tasarımcı, onu dikkatlice önceden seçilmiş veya photoshoplu görüntülerle ve mükemmel bir şekilde uyarlanmış başlıklarla doldurduğunda ve ardından üretime geçtiğinde durgunluğa düştüğünü gördüğünde, bir tasarımın çarpıcı görünmesi nadir değildir.

Stil konusunda aşırı spesifik olmayın.

Görsel bir stil belirlerken, yalnızca tek bir ruh halini, türü, hikayeyi veya konuyu yansıtarak içeriği göz ardı etmeyin. Bunun yerine, içerikte devreye girebilecek tüm ton yelpazesine göre basit ve evrensel tutun.

Niş bir hedef kitleye hitap eden bir uygulama için bazen çok özel bir görünüm ve his kabul edilebilir, ancak çoğu zaman modası geçmiş ve günümüz pazarında kitlesel çekicilikten yoksun görünebilir. Ayrıca, gelecekte büyüme ve yeni dikey alanlara genişleme beklentilerini potansiyel olarak sınırlayabilir.

Bir tasarımın geniş bir içerik yelpazesi için çalıştığından emin olmak için, aynı sayfanın ek bir versiyonunu veya ikisini, hala yayınlanabilir olanın tematik aralığı içinde, belirgin şekilde farklı konu ile taklit ederek test etmek genellikle iyi bir fikirdir.

Her Sayfayı Değişken İçerik İçin Bir Şablon Olarak Tasarlayın

Uygulamadaki her sayfa türünü, doldurulacak çeşitli medya öğelerinin (resimler, widget'lar, videolar, metin blokları vb.) için bir şablon veya plan olarak düşünün ve hangi öğelerin değişebileceğini ve hangilerinin sabit kalacağını bilin. .

Açık bir dizi kural ve tutarlılık OLUŞTURUN.

İçeriğin bir sayfadan diğerine büyük ölçüde değişebilmesi, içeriğin sunulduğu tutarlı bir biçimler dizisi olmaması gerektiği anlamına gelmez.

Başlıkları ve görüntü boyutlarını tahmin edilebilir tutmanın ve bir sayfada yukarıdan aşağıya mantıksal bir bilgi hiyerarşisini gözlemlemenin birçok faydası vardır; bunlardan biri, uygulama boyunca bir uyum duygusu yaratması ve kullanıcının doğru şekilde yönlendirilmesini sağlamasıdır.

Bunu daha kolay başarmak için, bir tasarım programı içindeki başlıklar, bölücüler, düğmeler, widget'lar ve diğer öğeler dahil olmak üzere arabirimin mümkün olduğu kadar çok parçası için modüler, yeniden kullanılabilir bir stil bileşenleri seti geliştirin. Bu bileşenleri, varyasyonları minimumda tutarak tekrar tekrar ve mantıklı bir şemada kullanın. Toptal Tasarımcısı Wojciech Dobry'nin bu makalesi, Sketch'te bir UI kütüphanesi oluşturmak için güzel bir rehber sunuyor.

Gönderilere kişiselleştirilmiş tasarım uygulamaları YAPMAYIN.

Bir sayfanın aynı bölümünde çok fazla stil ve biçim farklılığı olan gönderiler vermekten kaçının. Bu, görüntü boyutlarını değiştirmeyi, özel metin düzenleri veya yazı tiplerini eklemeyi veya özelleştirilmiş süslemeler veya grafiklerle tek tek görüntüleri şişirmeyi içerir. Bu sadece görsel uyumu öldürme eğiliminde olmakla kalmaz, aynı zamanda bir geliştirici veya içerik yöneticisinin bakış açısından kaynak israfı ve performans ve bakım üzerinde bir sürüklenmedir.

İçeriğin her zaman belirlenmiş bir alana sığacağını varsaymayın.

CMS güdümlü bir uygulamanın dinamik doğasının kaçınılmaz sonuçlarından biri, belirli bir görüntüleme alanında görünen metin miktarının uzunluk olarak değişebilmesidir. Çoğu zaman, işleri makul tutmak için CMS'deki metne karakter sınırlamaları yerleştirilebilir, ancak tasarımcı asla bir metin bloğunun her zaman belirli sayıda satıra sığacağını körü körüne varsaymamalıdır.

Yalnızca bireysel karakter genişlikleri değişmekle kalmaz, aynı zamanda çok düşük bir karakter sınırı uygulayarak yazarların yaratıcılığını büyük ölçüde kısıtlamak da alışılmış değildir. Bu nedenle, yukarıda tartışıldığı gibi gerçek içerikli bir tasarımı test etmek ve her alanı farklı metin örnekleriyle incelemek her zaman iyidir.

En kötü senaryodan emin olmak için, üzerinde anlaşmaya varılan bir karakter sınırına ulaşılana kadar geçici olarak geniş alfabetik karakterler dizisi (içerik İngilizce ise “w” gibi) ekleyin.

İçeriğin Öne Çıkmasına İzin Verin

İçerik odaklı bir uygulamada, içerik her zaman önde ve merkezde tutulmalı ve stilistik markalama unsurları genellikle geri çekilmelidir.

Dinamik içeriği temiz, hafif, nötr arka plan renkleriyle çevreleyin.

Beyaz veya kirli beyaz genellikle tercih edilir. Bu, açık ve koyu birçok farklı görüntü türünün gölgelenmeden sayfadan dışarı çıkmasına olanak tanır.

Görüntüleri büyük ve etkileyici yapın.

Büyük resimler, özellikle fotoğraflar, ziyaretçinin dikkatini her şeyden daha etkili bir şekilde çeker.

Başlıkları ve gövde metnini büyük ve yüksek oranda okunabilir tutun.

Metin ağırlıklı sayfalar için, son derece okunaklı web yazı tiplerini seçin ve bunları tüm cihazlarda (masaüstü, mobil ve tablet) büyük, rahat bir boyutta dağıtın.

Aşırı tasarım YAPMAYIN.

Çoğu zaman, dijital ve baskı tasarımcıları yaratıcı süslemeler kullanmaktan veya tasarımlarında marka öğelerini serbest bırakmaktan hoşlanırlar. Genel olarak, belirli görsel efektler bazen içerik odaklı bir tasarımı iyileştirebilse de, dikkatleri içerikten kolayca uzaklaştırabilir; bu, kullanıcıların bir haber sitesini veya blogu ziyaret ettiklerinde gerçekten ilgilerini çeken şeydir.

Bu tür efektler, görüntüler değiştikçe uygulamanın görünümünü daha az tahmin edilebilir hale getirebilir. Dekoratif yazı tiplerini, kalın desenleri, illüstrasyonları, üst üste binen resimleri, yarı saydam resimleri ve resimlerin etrafındaki süslü çerçeveleri kontrol etmek genellikle en iyi uygulamadır. Son olarak, öne çıkan içeriğe kıyasla logoyu nispeten küçük tutun.

Dinamik görüntülerin yanında renkli arka planlar KULLANMAYIN.

Şu anda koyu, parlak renkler var, ancak genellikle en iyisi, renk çakışmaları ve aşırı uyarım da dahil olmak üzere öngörülemeyen sonuçlara yol açabileceğinden, değişebilecek görüntülerin etrafına çok miktarda doygun renk veya renkli bir arka plan uygulamaktan kaçınmaktır. içerikten uzaklaştırıyor.

Metnin tüm sayfalarını kaplamak için koyu arka planlar KULLANMAYIN.

Araştırmalar, içeriğin yoğun olduğu uygulamalarda koyu bir arka plana karşı açık renkli metnin, açık bir arka plan üzerindeki koyu metinden gözleri daha fazla strese soktuğunu gösteriyor. Koyu bir arka plan, bir sayfanın özel bir bölümü veya sınırlı miktarda metnin bulunduğu bir slayt gösterisi alanı için iyi çalışabilir, ancak uzun metin bloklarını kaplamak için pek uygun değildir.

Görsellerin ve Diğer Medyanın Arka Uçta Nasıl Çalıştığını Anlayın

İçerik yönetim sistemleri, resimler, videolar ve animasyon dosyaları gibi medyayı nasıl işlediklerine göre değişebilir ve bazen bir geliştirici, verimlilik amacıyla medyaya bilerek kısıtlamalar koyabilir.

Örneğin, görüntülerin nasıl ölçeklendirileceği ve kırpılacağı ve oluşturulabilecek ve görüntülenebilecek boyut ve kırpma sayısı konusunda sınırlamalar olabilir. Bu nedenle, bir tasarımla ilerlemeden önce neyin pratik olduğunu (ve neye ekstra geliştirme kaynakları koymak istediklerini) belirlemek için uygulama geliştiricisine veya içerik yöneticilerine danışmak önemlidir.

Hangi medya biçimlerinin desteklendiğini öğrenin.

Bir uygulamanın görüntüleri destekleyeceği genellikle belli olsa da, ne tür video, ses ve diğer multimedya dosyalarının saklanabileceği ve görüntülenebileceği ve bunların görsel olarak ne ölçüde özelleştirilebileceği konusunda içerik yöneticilerine danışmak iyi bir fikirdir.

Örneğin, özel bir video oynatıcının oluşturulup oluşturulmayacağını veya bir YouTube veya Vimeo videosunu bir sayfaya yerleştirmenin tek seçenek olup olmadığını öğrenmeye yardımcı olur. YouTube söz konusu olduğunda, videoların nasıl yerleştirilebileceği, ölçeklenebileceği ve dış görünümünün nasıl oluşturulabileceği konusunda belirli standartlar ve sınırlamalar vardır.

Görüntüler için pek çok farklı kırpma ve boyut belirlemeyin.

Bir görüntü için çok sayıda ayrı kırpma oluşturmak genellikle teknik olarak mümkün olsa da, bunu yapmanın genellikle olumsuz bir etkisi vardır. Örneğin, varsayılan olarak, WordPress CMS, yüklenen bir görüntünün birkaç boyutunu tek bir oranda otomatik olarak oluşturur, ancak yalnızca ayrı olarak kırpılmış bir küçük resmin oluşturulması için bir seçenek sunar.

Her görüntüyü ek oranlarda kırpmak, yalnızca özel bir eklentinin yüklenmesini veya önden özel bir aracın geliştirilmesini gerektirmez, aynı zamanda yüklenen her görüntü için ek iş yapmalarını gerektirdiğinden editörlere ekstra talepler getirir. Bazen bu, uygulanabilir bir görüntü seçmeyi daha da zorlaştırarak iş akışını daha da yavaşlatır.

Eski içeriğin desteklenmesi gerekip gerekmediğini belirleyin.

Eski bir uygulamayı yeniden tasarlarken, bazen yeni bir uygulamayı sıfırdan başlatmaktan daha az seçenek vardır. Bunun nedeni, hâlihazırda mevcut bir medya deposunun bulunması ve tamamının yeni bir formata taşınmasının, geliştirme açısından genellikle pahalı veya pratik olmayan bir işlem olabilmesidir.

İçerik Düzenleyicilerine Metne Stil Vermek İçin Çeşitli Yollar Sağlayın

Metin içeriği, CMS güdümlü bir uygulamanın önemli bir öğesidir ve özellikle bir haber sitesinde veya blogda, editörlerin veya yazarların, kendi cihazlarına bırakıldıklarında, metni biçimlendirmenin ve biçimlendirmenin yollarını aradıklarını göreceksiniz. belirli noktalar, içeriği ayırın, alıntılar ekleyin, listeler oluşturun, diğer içeriğe bağlantı verin ve bir dizi başka görevi yerine getirin.

WordPress gibi birçok popüler CMS platformu varsayılan olarak metin biçimlendirme seçenekleri sunar, ancak tasarımcı bu stillerin tasarımlarına göre nasıl özelleştirileceğini planlayamazsa, sonuç rastgele, düz veya istenmeyen bir şey olacaktır.

Metnin biçimlendirilebileceği tüm yaygın yöntemler için tasarım yapın.

Özellikle bloglar ve haber siteleri için, geliştiriciye metnin biçimlendirilebileceği tüm yaygın yöntemler için stil kuralları sağlamak için zaman ayırmaya değer. , ve köprüler.

İçerik oluşturuculara çok fazla stil kontrolü VERMEYİN.

Editörlere çok fazla tasarım kontrolü açmak genellikle iyi bir fikir değildir. Sayfalarda kendi mizanpajlarını oluşturma veya metni birden fazla şekilde renklendirme gibi şeyleri yapmalarına izin vermek, bazı insanlar için göz korkutucu veya zaman alıcı olabilir ve diğerlerinin elinde çirkin, tutarsız sonuçlar doğurabilir.

İçerik Odaklı Tasarımın Gelecekteki Modelleri

Artırılmış gerçeklik (AR) gibi yeni teknolojilerin ortaya çıkmasıyla, içerik odaklı tasarım için yeni paradigmalar ortaya çıkmaya başladı. Şu anda emekleme aşamasında olan artırılmış/karma gerçeklik alanındaki CMS güdümlü uygulamalar, içeriğin önemli bir parçası olarak gerçek dünyadaki nesneleri ve/veya sahneleri kullanır.

Belirli bir mobil kullanıcının görüntüleme ortamı, aydınlatma koşulları ve metne ve eklenen 3B nesnelere göre fiziksel yakınlığı, tümü nihai sonucu etkileyebilir. Bu, içerik iyileştirme kavramını önemli ölçüde değiştirir ve tasarım sürecinde dikkate alınması gereken fazladan bir öngörülemezlik katmanı ekler.

CMS Web Tasarımı Biraz Farklı

CMS odaklı uygulamalar için tasarım yapmak, içeriği önce, stili ikinci sırada koymak anlamına gelir. Aynı zamanda, etrafında tasarladığı içerikteki değişkenliği ve öngörülemezliği planlamak ve benimsemek anlamına gelir. Gelişmekte olan teknolojiler içeriğin doğasını değiştirdikçe, sayısız potansiyel sonucu barındırma yeteneği CMS web tasarımında daha da kritik hale gelecektir.