Pendekatan Desain ke Situs Web Penerbit

Apa itu "situs web penerbit digital?" Ini adalah situs web yang berfokus pada menerbitkan banyak artikel setiap hari. Ini tingkat di atas "blog". Ini pada dasarnya adalah situs berita atau platform penerbitan viral seperti BuzzFeed.

Ada perbedaan dalam pendekatan desain untuk situs web semacam itu dibandingkan dengan penjualan produk, bisnis, blog pribadi, atau jenis situs web lainnya. Tata letaknya sering dikenal sebagai gaya "Majalah", yang juga merupakan kategori yang cukup tersaturasi di pasar tema.

Apa yang Membuat Situs Web Penerbit Berbeda?

Ada dua perbedaan utama antara situs web penerbit dan situs web biasa.

Yang pertama jelas adalah jumlah konten. Sekarang, tentu saja, ada situs web besar, terutama yang e-commerce seperti Amazon atau eBay yang kemungkinan besar memiliki lebih banyak konten, tetapi mereka adalah platform yang mendapatkan konten dari pengguna situs. Penerbit memiliki tim editorial yang bekerja penuh waktu untuk menghasilkan konten sesuai jadwal. Seperti surat kabar.

Perbedaan utama lainnya adalah sumber pendapatan. Situs web perusahaan seperti Coca Cola tidak menghasilkan pendapatan dari situs tersebut , melainkan berasal dari produknya. Sebagian besar situs web perusahaan melayani tujuan hanya sebagai kehadiran digital.

Mengetahui hal ini, mungkin sudah jelas bahwa pendapatan situs web penerbit berasal dari situs itu sendiri. Bagaimana? Iklan! Begitulah cara Google atau Facebook menghasilkan sebagian besar pendapatan mereka.

Iklan, yang paling pasti, menjalankan web dan merupakan prioritas utama banyak situs web. Konten mereka difokuskan untuk menghadirkan pembaca sebanyak mungkin sehingga mereka dapat melihat iklan di tata letak mereka.

Dari segi desain, inilah prioritas utama situs web penerbit dan majalah.

Merancang Situs Web Dengan Banyak Konten

Mari kita lihat beberapa penerbit besar seperti Variety:

Hal pertama yang dilihat orang adalah iklan besar di bagian atas. Kami akan melihat lebih dalam satu detik, sebelum itu - tata letak konten. Header besar dengan banyak link - hamburger di atas, pencarian, ajakan bertindak, dan bahkan lebih banyak item menu. Tujuannya untuk memberikan akses mudah ke semua kategori konten. Ini sangat kontras dengan banyak situs bisnis yang memiliki kurang dari 10 halaman (tidak termasuk halaman blog).

Setelah itu - kotak besar untuk artikel utama. Ini adalah keputusan desain yang bagus. Ini memudahkan pengunjung Anda untuk memutuskan apa yang harus dilakukan. Jika ada 10 elemen yang sama pentingnya, ketegangan mental karena memilih satu sama lain dapat membuat beberapa pengguna terpental dari halaman. Dengan hierarki visual yang jelas dari item penting hingga yang kurang penting, seorang desainer dapat membuat pengguna bertahan lebih lama di halaman web.

Di sebelah kanan - iklan lain dan widget "Paling Populer", yang ingin dilihat sebagian besar pengguna. Untuk memasukkan begitu banyak konten, Variety telah memutuskan untuk membuatnya menjadi area yang dapat digulir.

Ini adalah jenis tata letak yang sebagian besar akan Anda kejar dengan penerbit yang lebih besar.

BuzzFeed adalah contoh tata letak lain yang dibuat untuk bekerja dengan jumlah teks yang lebih besar. Di sini desainnya lebih menyenangkan dengan warna-warna cerah dan bentuk yang menarik perhatian (seperti tiga tombol di sudut kanan atas).

Ada lebih banyak "peringkat" sebagai 1, 2, 3 di Trending di sebelah kanan, label merah terang untuk "Breaking news", dan seterusnya. Salah satu tren utama dalam desain serupa adalah menarik perhatian pengguna. Perhatian itu harus diarahkan dengan baik karena Anda tidak ingin membaginya antara dua item yang sama pentingnya.

Berikut adalah contoh pendekatan yang salah di mana segala sesuatu berusaha untuk menjadi yang teratas:

Kami sangat menyadari bahwa tujuannya sama sekali berbeda dan situs di atas sebenarnya mungkin menghasilkan keuntungan yang besar, tetapi ini menggambarkan dengan baik prinsip "segala sesuatu yang mencoba untuk mendapatkan perhatian Anda"

Penerbit dan Iklan Digital

Mendesain seputar iklan adalah topik utama lainnya bagi penerbit. Mengingat itu adalah sumber pendapatan utama, itu juga menjadi prioritas utama. Ada beberapa hal yang harus dipertimbangkan oleh seorang desainer di sini, yang pertama adalah mendapatkan masukan atau informasi yang baik dari tim AdOps yang sangat memahami persyaratan dan fungsi iklan tersebut.

Contohnya adalah ukuran iklan. Ada 300 × 250, 300 × 600, ada 728 × 90 serta 300 × 50.

• Beberapa mungkin menempel di satu sisi layar tempat Anda dapat menggulir melewati berbagai titik
• Beberapa mungkin tetap berada di sudut kecil mereka sendiri, beberapa akan selalu menempel di atas halaman.
• Yang lain akan muncul berpasangan dua 300 × 250 atau satu 720x90px.

Bagaimana Anda mengetahui tentang semua ini dan apa saja persyaratannya?

Jadi ya, langkah pertama adalah mengumpulkan semua informasi itu. Cara yang lebih mudah untuk melihatnya adalah dari segi Tata Letak. Satu posting dapat memiliki beberapa tata letak tergantung pada tujuan penerbitnya. Terkadang ada lebih sedikit iklan, terkadang lebih banyak. Terkadang iklan berubah ukuran untuk muatan yang berbeda, terkadang iklan tetap konstan. Itu semua bisa berubah dengan cepat meskipun tren dan aturan baru keluar. Seringkali setiap hari!

Beberapa hal penting yang perlu diingat adalah:

• Iklan dengan tinggi mungkin dimuat. Artinya, konten akan didorong ke bawah dan desain yang dibuat agar sesuai dengan widget tertentu di paro atas akan gagal.
• Iklan mungkin membutuhkan latar belakang. Ini bisa berupa latar belakang abu-abu terang yang mengelilingi iklan, menyentuh sudut layar.
• Iklan sering kali membutuhkan spasi di sekelilingnya untuk menghindari sentuhan yang tidak disengaja. 20-30 piksel adalah jarak yang baik di antara iklan.
• Anda ingin menambahkan label "Iklan" sebelum / sesudah dengan tujuan lebih menarik bagi penyedia iklan.
• Seharusnya tidak terlalu banyak iklan! Titik manis untuk ini adalah apa yang tim AdOps akan kerjakan untuk mencari penerbit tertentu, halaman tertentu dan bahkan lalu lintas tertentu (seperti Facebook, Snapchat, dll)

Kinerja Situs Web Penerbit

Kontributor utama kinerja buruk adalah pengaturan dengan 8+ iklan yang mencoba memuat dengan banyak skrip lain di sekitarnya. Mengapa ini menjadi perhatian desainer ketika semuanya ada dalam kode? Tidak bisakah para pengembang mengoptimalkannya? Ya, tapi itu hampir merupakan pekerjaan penuh waktu, dan salah satu yang bisa dibantu oleh desainer. Untuk memahami semua ini, pertama-tama Anda perlu memahami sedikit tentang browser

Sumber

Browser dapat menggunakan CPU atau GPU mesin tergantung pada cara elemen tertentu dikodekan dari pengembang front-end. Terkadang, tindakan seperti animasi dan interaksi saat mengarahkan kursor, tekan akan menggunakan CPU atau GPU. Jika animasi misalnya menggunakan CPU, kemungkinan besar akan ada lag, jika itu adalah GPU, maka mungkin untuk mendapatkan kinerja yang lebih baik. Persyaratan perancang mungkin menjadi perbedaan antara keduanya.

Berikut beberapa tip umum:

• Gunakan sedikit atau tanpa bayangan. Bayangan sangat mahal untuk dirender, terutama pada perangkat seluler dan laptop kelas bawah.
• Jangan gunakan filter latar belakang atau blur (atau filter apa pun) karena harganya juga sangat mahal.
• Buat bentuk sesederhana mungkin untuk mengurangi komputasi tambahan.
• Jangan meminta animasi elemen yang memengaruhi tata letak (elemen lain). Rancang sesering mungkin. Apa pun yang tumpang tindih atau popup adalah pilihan yang lebih baik.
• Pertahankan gambar relatif kecil. Ini akan memungkinkan pengembang untuk memuat gambar berukuran lebih kecil yang akan menghemat berat di situs.
• Minimalkan animasi secara umum, terutama saat memuat situs. Hal yang sama berlaku untuk perubahan tata letak. Pemuatan pertama adalah waktu yang paling intensif menggunakan CPU untuk sebuah situs web ketika semua JavaScript diterapkan.

Sumber

Prioritas Desain

Mayoritas lalu lintas di situs penayang berasal dari Seluler. Jadi waktu yang paling banyak dihabiskan untuk memoles semua detail harus pergi ke sana. Di seluler juga adalah tempat sebagian besar pengoptimalan juga diperlukan karena sebagian besar perangkat bukanlah flagships kelas atas tetapi smartphone seharga $ 200- $ 300.

Di Seluler, fokus Anda adalah membuat konten tetap terbaca sambil menampilkan iklan dengan jelas. Jaga jarak antara elemen yang dapat diklik dan iklan tetap besar untuk menghilangkan klik yang tidak disengaja pada iklan. Jika memungkinkan, kurangi animasi dan overlay yang mungkin membuat situs terasa kurang tajam.

Ringkasan

Penayang fokus pada banyak konten dan banyak iklan. Secara umum, halaman arahan dan arsip kurang diprioritaskan daripada tampilan tunggal karena lalu lintas sering kali datang langsung ke artikel dari iklan lain. Sebagai seorang desainer, fokus Anda adalah menemukan cara paling optimal untuk memasang iklan, menambahkan spasi yang tepat, dan memisahkannya dengan baik dari konten utama agar semuanya dapat dibaca dan digunakan.

Menjaga elemen UI yang kompleks seminimal mungkin untuk meningkatkan kinerja kecepatan serta meminta animasi sesedikit mungkin. Untuk menyelesaikan semuanya dengan baik, penerbit sering kali perlu bekerja dengan agensi pengembangan yang memiliki pengalaman yang baik dengan AdOps, mengikuti tren terbaru, dan tumpukan teknologi dalam bisnis seperti DevriX.