Блискучі ідеї та тенденції для віджетів Позиція функцій
Запуск успішного інтернет-журналу вимагає твердої аудиторії та багато високоякісного письма. Але макет журналу також відіграє важливу роль у залученні відвідувачів. Одним з методів є створення a ознаками віджетів у верхній частині домашньої сторінки. Це демонструє найбільш популярні статті, які ідеально підказують читачів далі.
У цій посаді я хотів би охопити методи дизайну, які можуть бути використані для створення успішного віджета. Незважаючи на те, що цей віджет найчастіше працює краще за макетом у стилі журналу, ви також можете застосувати його до менших блогів або динамічних веб-сайтів із вмістом.
Друкарська контрастність
Більшість показів посилаються на мініатюрні зображення, щоб привернути увагу. Це часто має форму фонового зображення, прив'язаного до кожного заголовка статті.
Ця техніка виглядає фантастично, але це Важко створити помітний контраст між типографікою та динамічними фоновими картинками. Вивчаючи інші журнали, ви можете підібрати найтонші методи, які допоможуть поліпшити читабельність.
Next Web - це великий онлайн-журнал з віджетами видатних повідомлень на домашній сторінці. Кожна мініатюра змінюється за розміром, але всі вони використовуються темні градієнти для поліпшення контрасту.
Заголовки статей розміщені в нижній частині блоків ескізів поверх темних градієнтів. The легкий текст легко споживати на темному тлі, але це не охоплює ціле зображення.
Сучасні досягнення CSS3 дозволяють розробникам відтворити ці ефекти з легкістю. Фіксовані градієнти ідеальні, якщо ви можете їх змусити потік природно на верх кожної мініатюри і ще покажіть достатньо зображення захопити увагу.
Деяка інша техніка використовується на домашній сторінці Digital Trends. Цей пост віджет використовує висококонтрастні суцільні фони за текстом, щоб зробити кожний заголовок чітким і яскравим.
Різниця тут полягає в тому, що кожен колір фону є 100% твердим. Так ви не можете побачити всю фотографію ескізів невеликі порції втрачаються з поля зору. Але текст чітко розбірливий, що може бути настільки ж привабливим для відвідувачів, які першими потрапляють на домашню сторінку Digital Trends.
Знайти потрібну кількість контрасту складно. Деякі веб-сайти, такі як TechCrunch, намагаються розмістити текст біля ескізу, щоб повністю видалити цю проблему.
Але якщо вам сподобався стиль дизайну заголовка тексту у верхній частині ескізу, який ви бажаєте Розглянемо, як контрастні фактори входять до рівняння.
Спорадичні розміри зображень
Значення віджета призначеної публікації - це зміст вмісту у верхній частині сторінки. Асиметрія - відмінний спосіб привернути увагу до чогось, і в цьому випадку розміри асиметричних ескізів чудово працюють.
Візьмемо, наприклад, домашню сторінку ZDNet. У своєму відмінному віджеті найбільша стаття з лівого боку використовує найширше зображення, щоб зайняти більше місця і, сподіваюся, привернути більше уваги. Інші розміщені мініатюри мають менші розміри з меншими заголовками.
Зверніть увагу на те, як ця структура сітки природно веде ваше око навколо сторінки. Погляд кожного відвідувача має тенденцію до падіння в одній конкретній області, а потім переміщатися між кожним ескізом, поки щось не вискочить.
Також ZDNet розміщує a темний градієнт на кожному ескізі зображення побудувати друкарський контраст для більш читаного тексту. Принципово це один з кращих ознак віджетів, які я коли-небудь бачив.
Дуже схожий стиль дизайну можна знайти на домашній сторінці CNET. Найбільша ескіз займає своє місце на лівій стороні, оскільки більшість відвідувачів читають зліва направо.
При розробці власного віджету поштового відправлення не відчуваю себе зобов'язаним дотримуватися цієї ж техніки. Ви можете перейти з будь-яким розміром ескізів до тих пір, поки вони поєднуються одночасно і утворюють уніфіковану сіткову схему.
Спеціальні стилі мініатюр
Вибір дизайну значно варіюється від макета до макета, тому немає жодного ідеального рішення. Вибрані віджети для публікацій, безумовно, більш складні для проектування, тому вони потребують вивчення та терпіння, щоб вписатися в нестандартний макет.
Стиль кожної мініатюри впливає на те, як весь віджет виглядає вашій аудиторії. Візьміть для прикладу відмінний стиль віджетів, знайдений на The Verge.
Кожна мініатюра має яскравий градієнт у верхній частині фотографії. Це підвищує контрастність і покращує читабельність, але також додає певний стиль до веб-сайту.
Деяким людям цей стиль не подобається, тому що вважають його непривабливим або непривабливим. Але це також досить популярне серед читачів, а інші дизайнери імітують цей стиль.
Але кольори та фантазії не є єдиним фактором, який слід враховувати. Сітки та розміри ескізів також мають бути обережно підібрані, оскільки вони допомагають визначити загальний стиль віджетів відмінних повідомлень.
Можливо, одним з найкращих прикладів є дизайн Mashable, який пройшов багато етапів протягом багатьох років. Тепер Mashable вважається основним джерелом новин, щоб занурити велику кількість повідомлень на домашню сторінку для зручного перегляду.
Деякі повідомлення використовують невеликі квадратні мініатюри, а їх головна таблиця лідерів фіксує велику піктограму ескізу з повним розміром. Це вимагає додаткової роботи від редактора, щоб всі повідомлення мали відповідні фотографії відповідних розмірів.
Але відразу після посадки на сайт ви помітите, що це дає відчуття довіри. Цей стиль відчуває себе дуже поширеним і може бути використаний практично будь-яким типом онлайн-журналу для створення довіри з читацької бази. Єдина проблема полягає в написанні достатнього вмісту для заповнення сторінки!
Віджети з кількома повідомленнями
Деякі призначені віджети повідомлень відображають статті в статична сітка. Часто це найпопулярніший вибір, тому що він може бути зроблено чуйним і гармонійно поєднується в будь-який макет.
Інші віджети покладаються на динамічні взаємодії, як слайд-шоу. Візьміть для прикладу домашню сторінку ярмарку Vanity з їх розміщеним блоком повідомлень у верхній частині сторінки. Одночасно відображається лише одна публікація, але відображаються нові статті під час пересування над певним заголовком.
І автоматичне оновлення мініатюр і заголовків з простим взаємодією. Зауважимо, що це може заплутати користувачів Інтернету, які не знайомі з цією динамічною методикою наведення.
Але з позитивної сторони ця техніка буде економія місця на сторінці, приховуючи зайвий вміст.
Намагайтеся не думати про віджети розміщених повідомлень як про чорно-білі. Вони лише розділи сторінок, які використовуються для показу найцікавіших або популярних статей. Техніка, за допомогою якої ви виконуєте це завдання, завжди може бути відкритою для обговорення.
Журнал Complex використовує повний показ слайдів для своїх віджетів. Кожен пост має у своєму розпорядженні мініатюру, а також нижній градієнт для друкарського контрасту.
Але замість того, щоб розміщувати кожну мініатюру поруч, статті потоку динамічно через вікно слайд-шоу. Навігація може бути встановлена автоматично або керуватися стрілками. Ця конструкція заощаджує багато місця і дозволяє користувачеві більш охоче взаємодіяти зі сторінкою.
Завершення
Існує не правильний або неправильний дизайн, коли справа доходить до показів показів. Всі вони мають багато подібних рис, але кожен журнал використовує власний стиль для організації вмісту.
Я сподіваюся, що цей пост пропонує практичні поради, які можна використовувати при розробці власного віджета для показів. Якщо ви коли-небудь відчуєте себе застряглим, подивіться на інші журнали для натхнення. Знайдіть особливості, які вам подобаються, і зрозумійте, як їх тиражувати, щоб змішатися з власним дизайном журналу.
