Desain Web CMS: Panduan untuk Aplikasi Konten Dinamis

Teknik UI/UX untuk dunia media online yang didorong oleh konten dinamis.

Sebagian besar aplikasi web dan aplikasi seluler, terutama di ruang media online, didukung oleh sistem manajemen konten (CMS) seperti WordPress, Drupal, dan lainnya. Sistem ini hadir untuk memenuhi kebutuhan era internet di mana konten adalah raja dan dinamis—berubah terus menerus dan sering.

Di masa lalu, sebagian besar situs web statis—tidak dibuat untuk berevolusi dan tumbuh dengan mulus. Sekarang mereka dianggap sebagai sistem kehidupan, dan ada cara optimal untuk merancangnya.

Berikut ini adalah panduan untuk desainer digital yang ingin memperluas repertoar mereka di luar situs web statis dan halaman arahan, dan untuk mulai mendesain secara efektif untuk aplikasi berbasis konten dinamis seperti situs berita, blog, atau bahkan jejaring sosial tempat pengguna mempublikasikan konten secara teratur. Untuk melakukan transisi ini, desainer perlu memahami bagaimana jenis aplikasi ini biasanya terstruktur serta mengadopsi pola pikir "konten-pertama" dalam proses desain.

Pola IA Desain Web CMS dalam Aplikasi berbasis CMS

Desainer harus memiliki model mental dari pola arsitektur informasi umum dalam aplikasi berbasis CMS, terutama jika bekerja pada UX (pengalaman pengguna) dan mendesainnya dari bawah ke atas. Ada beberapa jenis halaman yang umum dan integral dengan aplikasi ini, dan mereka sering terhubung bersama dengan cara yang dapat diprediksi di mana "postingan" berfungsi sebagai komponen inti. Umumnya tidak ada batasan teoretis untuk jumlah posting yang dapat ditampung oleh aplikasi.

Halaman Depan

Ini adalah titik masuk formal dan sering identik dengan halaman beranda. Ini sangat umum, terutama ketika ada banyak konten untuk diakses karena membantu menyoroti atau menonjolkan apa yang paling penting. Halaman ini biasanya menampilkan versi postingan yang disingkat tanpa mengungkapkan terlalu banyak detail.

Halaman Posting

Jika "postingan" adalah unit inti dari aplikasi berbasis CMS, maka halaman postingan adalah tempat semua detail publik tentang postingan ditampilkan. Ini mungkin satu-satunya halaman yang benar-benar penting dalam aplikasi, dan itu bisa berupa halaman artikel atau halaman informasi tentang acara, orang, grup, produk, dll. Dalam beberapa aplikasi yang lebih besar, mungkin ada beberapa jenis posting dan posting halaman yang ditunjuk.

Halaman Daftar/Kategori

Jenis halaman ini berguna untuk memungkinkan pengguna menavigasi semua posting yang tersedia, dan memfilternya berdasarkan kategori, atribut, atau kriteria lainnya. Opsi pengurutan juga umum ketika jumlah konten yang harus digulir cukup banyak.

Halaman Pencarian

Halaman khusus untuk pencarian tidak penting untuk aplikasi yang lebih kecil, tetapi selalu membantu. Terkadang, dapat digabungkan atau diintegrasikan dengan halaman kategori/daftar.

Profil Pengguna/Penulis

Halaman ini didedikasikan untuk setiap penulis atau pengguna yang membuat satu atau lebih posting. Kadang-kadang hilang di situs berita kecil dan blog penulis tunggal, tetapi sangat penting untuk situs berita multi-penulis besar, jejaring sosial berbasis konten, dan aplikasi buatan pengguna lainnya. Praktik yang umum dan bermanfaat adalah memasukkan daftar semua posting pengguna di halaman ini.

Beranda atau Dasbor Pengguna

Halaman ini menampilkan informasi (termasuk postingan) yang relevan dengan pengguna yang masuk, sering kali dalam bentuk umpan berita pribadi atau konten yang direkomendasikan, aktivitas terkini, dan status. Rumah pengguna sangat penting untuk aplikasi yang terjaga keamanannya dan aplikasi jejaring sosial, tetapi opsional atau tidak relevan untuk orang lain.

Desain UI berbasis konten untuk Konten Dinamis

Konten mendahului desain. Desain tanpa konten bukanlah desain, itu dekorasi. – Jeffrey Zeldman

Saat tiba waktunya untuk mendesain antarmuka pengguna aplikasi berbasis CMS, penting untuk diingat bahwa konten selalu mendorong desain, bukan sebaliknya. Pendekatan yang mengutamakan konten telah diadopsi oleh semakin banyak perusahaan media dalam beberapa tahun terakhir dengan hasil yang terbukti. Dengan mengingat hal ini, berikut adalah daftar rekomendasi yang harus diingat oleh desainer UI saat membuat kaki mereka basah dalam jenis proyek ini.

Pertimbangkan Konten Sebelum Menentukan Gaya

Dalam aplikasi berbasis konten, gaya visual harus mendukung konten secara keseluruhan. Meskipun sifat dari jenis aplikasi ini biasanya menyiratkan bahwa konten akan bervariasi dan tidak sepenuhnya dapat diprediksi, lebih sering daripada tidak sesuai dengan tema keseluruhan. Jadi ketika mengembangkan estetika merek, konten yang sebenarnya bisa menjadi sumber inspirasi yang bagus. Pada saat yang sama, itu juga bisa menjadi tanggung jawab jika desainer menjadi terlalu terikat pada konten tertentu dan mengembangkan gaya yang terlalu ditargetkan.

Kenali siapa yang akan membuat konten secara teratur.

Dalam aplikasi berbasis CMS, konten sangat ditentukan oleh pembuat konten, bukan desainer. Oleh karena itu, biasanya diharapkan bahwa perancang akan melepaskan sebagian kendali atas tampilan produk kepada orang-orang yang menerbitkan konten secara teratur—yaitu editor, penulis, administrator, atau bahkan pengguna acak yang memasukkan konten melalui formulir publik.

Bergantung pada proses yang disepakati, perancang dapat menetapkan beberapa standar dan pedoman untuk memilih gambar, menyiapkan dan memotongnya, dan bahkan menempatkan beberapa parameter pada penataan teks. Namun, secara keseluruhan, desainer bertanggung jawab untuk membentuk bagian depan aplikasi sedemikian rupa sehingga pekerjaan di bawah standar dari pihak pembuat konten, seperti foto yang buruk atau judul yang sangat panjang, tidak menurunkan kualitas. dari desain ke tingkat yang signifikan.

LAKUKAN desain dengan konten nyata jika memungkinkan.

Karena jenis konten dapat sangat bervariasi dalam aplikasi berbasis CMS, masuk akal untuk menghabiskan waktu melihat banyak sampelnya. Idealnya, dalam kasus situs berita atau blog, desainer akan berkolaborasi dengan pembuat konten di awal proses desain dan meminta contoh cerita, gambar produk, video, atau apa pun yang dapat membantu membuat desain mockup terasa nyata. mungkin.

Mendesain dengan konten nyata lebih disukai daripada menggunakan foto stok dan teks dummy dan bahkan dapat dilakukan secara paralel dengan wireframing atau prototyping, karena membantu membatasi kejutan yang mungkin terjadi.

Bukan hal yang aneh bagi sebuah desain untuk terlihat memukau ketika seorang desainer mengisinya dengan citra yang telah dipilih sebelumnya atau dipotret dengan hati-hati dan tajuk utama yang disesuaikan dengan sempurna, dan kemudian melihatnya turun ke dalam kelesuan begitu mulai diproduksi.

JANGAN terlalu spesifik dengan gayanya.

Saat mengatur gaya visual, jangan mengelompokkan konten dengan hanya mencerminkan satu suasana hati, genre, cerita, atau subjek. Sebaliknya, tetap sederhana dan universal sehubungan dengan seluruh rentang nada yang mungkin ikut bermain dalam konten.

Tampilan dan nuansa yang sangat spesifik kadang-kadang dapat diterima untuk aplikasi yang melayani audiens khusus, tetapi sering kali dianggap ketinggalan zaman dan kurang menarik di pasar saat ini. Lebih lanjut, ini berpotensi membatasi prospek pertumbuhan dan ekspansi ke vertikal baru di masa depan.

Untuk memastikan bahwa desain berfungsi untuk berbagai konten, biasanya merupakan ide yang baik untuk mengujinya dengan meniru satu atau dua versi tambahan dari halaman yang sama dengan materi pelajaran yang sangat berbeda masih dalam rentang tematik dari apa yang dapat diterbitkan.

Rancang Setiap Halaman sebagai Template untuk Memvariasikan Konten

Pikirkan setiap jenis halaman dalam aplikasi sebagai template atau cetak biru untuk berbagai item media (gambar, widget, video, blok teks, dll.) untuk diisi, dan ketahui item mana yang akan berubah dan mana yang dapat tetap diperbaiki .

LAKUKAN menetapkan seperangkat aturan dan konsistensi yang jelas.

Hanya karena konten dapat sangat bervariasi dari satu halaman ke halaman berikutnya tidak berarti bahwa tidak boleh ada kumpulan format yang konsisten di mana konten disajikan.

Menjaga tajuk dan ukuran gambar dapat diprediksi dan mengamati hierarki informasi logis dari atas ke bawah dalam halaman memiliki banyak manfaat, salah satunya menciptakan rasa harmoni di seluruh aplikasi dan membuat pengguna tetap berorientasi dengan benar.

Untuk mencapai ini dengan lebih mudah, kembangkan seperangkat komponen gaya yang dapat digunakan kembali dan modular untuk sebanyak mungkin bagian antarmuka, termasuk heading, pembagi, tombol, widget, dan elemen lain dalam program desain. Gunakan komponen ini berulang kali dan dalam skema logis, dengan menjaga variasi seminimal mungkin. Artikel oleh Toptal Designer Wojciech Dobry ini menyajikan panduan bagus untuk membuat perpustakaan UI di Sketch.

JANGAN memberikan perawatan desain individual untuk posting.

Cobalah untuk menghindari memberikan posting dalam bagian halaman yang sama terlalu banyak perbedaan dalam gaya dan format. Ini termasuk mengubah dimensi gambar, menambahkan tata letak teks atau font khusus, atau menambah gambar individual dengan hiasan atau grafik yang disesuaikan. Hal ini tidak hanya cenderung membunuh harmoni visual, tetapi umumnya merupakan pemborosan sumber daya dan hambatan pada kinerja dan pemeliharaan dari sudut pandang pengembang atau pengelola konten.

JANGAN berasumsi bahwa konten akan selalu muat dalam area yang ditentukan.

Salah satu hasil yang tak terhindarkan dari sifat dinamis aplikasi yang digerakkan oleh CMS adalah bahwa jumlah teks yang muncul di area tampilan tertentu dapat bervariasi panjangnya. Seringkali, batas karakter dapat ditempatkan pada teks di CMS untuk menjaga hal-hal masuk akal, tetapi perancang tidak boleh secara membabi buta berasumsi bahwa blok teks akan selalu muat pada sejumlah baris tertentu.

Tidak hanya lebar karakter individu yang bervariasi, tetapi juga tidak lazim untuk membatasi kreativitas penulis dengan menerapkan batas karakter yang sangat rendah. Inilah sebabnya mengapa selalu baik untuk menguji desain dengan konten nyata seperti yang dibahas di atas, dan memeriksa setiap area dengan sampel teks yang berbeda.

Untuk memastikan tentang skenario terburuk, masukkan sementara urutan karakter alfabet yang lebar (seperti "w" jika konten dalam bahasa Inggris) hingga batas karakter yang disepakati tercapai.

Biarkan Konten Menonjol

Dalam aplikasi berbasis konten, konten harus selalu berada di depan dan di tengah, dan elemen branding gaya umumnya harus surut.

LAKUKAN konten dinamis mengelilingi dengan warna latar belakang yang bersih, terang, dan netral.

Putih atau putih pucat biasanya lebih disukai. Ini memungkinkan berbagai jenis gambar, terang dan gelap, muncul dari halaman tanpa dibayangi.

LAKUKAN membuat gambar besar dan memerintah.

Gambar besar, terutama foto, menarik perhatian pengunjung lebih efektif daripada apa pun.

JANGAN pertahankan tajuk utama dan teks isi tetap besar dan mudah dibaca.

Untuk halaman yang banyak teks, pilih font web yang sangat mudah dibaca, dan gunakan dalam ukuran besar dan nyaman di semua perangkat—desktop, seluler, dan tablet.

JANGAN over-desain.

Seringkali, desainer digital dan cetak suka menyebarkan hiasan kreatif atau memberikan elemen branding kendali bebas dalam desain mereka. Secara umum, meskipun efek visual tertentu terkadang dapat meningkatkan desain berbasis konten, efek tersebut juga dapat dengan mudah mengalihkan perhatian dari konten, yang sangat menarik minat pengguna saat mereka mengunjungi situs berita atau blog.

Efek tersebut juga dapat membuat tampilan aplikasi kurang dapat diprediksi saat gambar berubah. Biasanya merupakan praktik terbaik untuk memberi tanda centang pada font dekoratif, pola tebal, ilustrasi, gambar yang tumpang tindih, gambar semi-transparan, dan bingkai mewah di sekitar gambar. Terakhir, pertahankan logo relatif kecil dibandingkan dengan konten unggulan.

JANGAN gunakan latar belakang berwarna di dekat gambar dinamis.

Tebal, warna-warna cerah sedang digunakan sekarang, tetapi biasanya yang terbaik adalah menghindari penerapan warna jenuh dalam jumlah besar, atau latar belakang berwarna, di sekitar gambar yang dapat berubah karena hal ini dapat menghasilkan hasil yang tidak terduga, termasuk bentrokan warna dan stimulasi berlebihan, mengalihkan perhatian dari konten.

JANGAN gunakan latar belakang gelap untuk menutupi seluruh halaman teks.

Studi menunjukkan bahwa teks terang dengan latar belakang gelap lebih membuat stres pada mata daripada teks gelap dengan latar belakang terang dalam aplikasi konten-berat. Latar belakang yang gelap dapat bekerja dengan baik untuk bagian khusus halaman atau area tampilan slide di mana terdapat teks dalam jumlah terbatas, tetapi tidak cocok untuk menutupi blok teks yang panjang.

Pahami Cara Kerja Gambar dan Media Lain di Bagian Belakang

Sistem manajemen konten dapat bervariasi dalam cara menangani media, seperti gambar, video, dan file animasi, dan terkadang pengembang dengan sengaja menetapkan batasan pada media untuk tujuan efisiensi.

Misalnya, mungkin ada batasan tentang bagaimana gambar diskalakan dan dipotong dan pada jumlah ukuran dan pemotongan yang dapat dihasilkan dan ditampilkan. Oleh karena itu, penting untuk berkonsultasi dengan pengembang aplikasi atau pengelola konten untuk menentukan apa yang praktis (dan apa yang mereka inginkan untuk memasukkan sumber daya pengembangan tambahan) sebelum melanjutkan dengan desain.

JANGAN cari tahu format media apa yang didukung.

Meskipun biasanya aplikasi akan mendukung gambar, sebaiknya konsultasikan dengan pengelola konten tentang jenis video, audio, dan file multimedia lainnya yang dapat disimpan dan ditampilkan dan sejauh mana mereka dapat dikustomisasi secara visual.

Misalnya, ini membantu untuk mengetahui apakah pemutar video khusus akan dibuat atau apakah menyematkan video YouTube atau Vimeo pada halaman adalah satu-satunya pilihan. Dalam kasus YouTube, ada standar dan batasan khusus tentang bagaimana video dapat disematkan, diskalakan, dan dikuliti.

JANGAN menunjuk banyak tanaman dan ukuran yang berbeda untuk gambar.

Meskipun sering kali secara teknis memungkinkan untuk membuat banyak tanaman terpisah untuk sebuah gambar, biasanya ada dampak negatif dalam melakukannya. Misalnya, secara default, CMS WordPress secara otomatis menghasilkan beberapa ukuran gambar yang diunggah dalam satu rasio, tetapi hanya menyediakan opsi untuk satu thumbnail yang dipotong secara terpisah untuk dibuat.

Memotong setiap gambar ke rasio tambahan tidak hanya membutuhkan plugin khusus untuk diinstal atau alat khusus untuk dikembangkan di awal, tetapi juga menempatkan tuntutan ekstra pada editor karena mengharuskan mereka melakukan pekerjaan tambahan untuk setiap gambar yang diunggah. Terkadang ini juga membuat memilih gambar yang layak menjadi lebih sulit, semakin memperlambat alur kerja.

LAKUKAN tentukan apakah konten lawas perlu didukung.

Saat mendesain ulang aplikasi lama, terkadang pilihan yang tersedia bahkan lebih sedikit daripada saat memulai aplikasi baru dari awal. Ini karena sudah ada repositori media yang ada, dan memigrasikan semuanya ke format baru seringkali bisa menjadi operasi yang mahal atau tidak praktis dari sudut pandang pengembangan.

Berikan Editor Konten Berbagai Cara untuk Memberi Gaya Teks

Konten teks adalah elemen kunci dari aplikasi berbasis CMS, dan di situs berita atau blog khususnya, orang akan menemukan bahwa editor atau penulis, ketika dibiarkan menggunakan perangkat mereka sendiri, mencari cara untuk menata dan memformat teks untuk memberikan penekanan poin tertentu, memecah konten, menambahkan kutipan, membuat daftar, menautkan ke konten lain, dan menyelesaikan sejumlah tugas lainnya.

Banyak platform CMS populer seperti WordPress menyediakan opsi pemformatan teks secara default, tetapi jika perancang gagal merencanakan bagaimana gaya ini akan disesuaikan dengan desain mereka, hasilnya akan menjadi sesuatu yang acak, polos, atau tidak diinginkan.

LAKUKAN desain untuk semua cara umum teks dapat diformat.

Khusus untuk blog dan situs berita, perlu meluangkan waktu untuk menyediakan aturan gaya bagi pengembang untuk semua cara umum agar teks dapat diformat termasuk: teks tebal dan miring, judul dan subjudul, daftar bernomor dan berpoin, kutipan blok, keterangan , dan hyperlink.

JANGAN memberi pembuat konten terlalu banyak kontrol gaya.

Biasanya bukan ide yang baik untuk membuka terlalu banyak kontrol desain kepada editor. Mengizinkan mereka melakukan hal-hal seperti membuat tata letak mereka sendiri di dalam halaman atau mewarnai teks dengan lebih dari satu cara dapat menjadi hal yang menakutkan atau memakan waktu bagi sebagian orang dan menghasilkan hasil yang jelek dan tidak konsisten di tangan orang lain.

Pola Masa Depan Desain Berbasis Konten

Dengan munculnya teknologi baru seperti augmented reality (AR), paradigma baru untuk desain berbasis konten mulai muncul. Aplikasi berbasis CMS di ruang augmented/mixed reality, yang saat ini masih dalam masa pertumbuhan, menggunakan objek dan/atau pemandangan dunia nyata sebagai bagian penting dari konten.

Lingkungan tampilan pengguna ponsel tertentu, kondisi pencahayaan, dan kedekatan fisik sehubungan dengan teks dan objek 3D yang disisipkan semuanya dapat memengaruhi hasil akhir. Ini mengubah gagasan kurasi konten secara signifikan dan menambahkan lapisan ekstra ketidakpastian yang harus diperhitungkan dalam proses desain.

Desain Web CMS Sedikit Berbeda

Mendesain untuk aplikasi berbasis CMS berarti mengutamakan konten, gaya kedua. Ini juga berarti merencanakan dan merangkul variabilitas dan ketidakpastian dalam konten yang sedang dirancang seseorang. Kemampuan untuk mengakomodasi berbagai hasil potensial akan menjadi lebih penting dalam desain web CMS karena teknologi yang muncul mengubah sifat konten itu sendiri.