Принципи дизайну макета веб-сайту газети

в Тра 5, 2024

Сьогодні ми поговоримо про стилі в дизайні сайтів, і акцент робимо на газетному стилі. У цій публікації ви дізнаєтеся про найбільш характерні особливості цього дизайну та отримаєте кілька корисних порад, яких слід дотримуватися, щоб отримати кращий результат у своєму проекті.

Стиль – це повне поєднання того, як ви розробляєте свій веб-сайт. Стиль – це також спосіб спілкування між вами та вашою аудиторією. Кожен стиль веб-дизайну має свій певний набір компонентів.

Основними стилями веб-дизайну є:

чистий;
шорсткий;
вінтаж/ретро;
ілюстрація;
газета/журнал.

Газетний стиль в основному використовувався для інтернет-газет і журналів, оскільки їх друковані версії мають таку структуру. Сьогодні такий дизайн підходить для будь-якого веб-сайту, особливо якщо він має бути насиченим контентом. Сайт, виконаний у газетному стилі, легко впізнати серед багатьох інших за насиченим вмістом макетом, багатоколонковою структурою, простими та контрастними кольорами.

Верстка сайту газети: характеристика

Содержание показать

1 Чорне на білому

Традиційна друкована газета біла або сіра, а текст чорний. Це поєднання кольорів ідеально підходить для наших очей. Контраст кольорів полегшує читабельність, і тому ця колірна схема найбільше підходить для веб-сайтів у газетному стилі, які зазвичай наповнені великою кількістю контенту. Ви можете відійти від цього класичного поєднання кольорів, але завжди пам’ятайте, що контраст є обов’язковим. Ви можете змінити звичайний вибір кольору, зробивши фон чорним, а шрифт білим. Але ніколи не використовуйте жовтий на чорному, зелений на синьому, рожевий на синьому тощо. Спробуйте самостійно прочитати веб-сайт, якщо після цього ваші очі почуваються добре, ви можете застосувати вибрані кольори у своєму веб-проекті.

Нейтральні світлі та темні кольори є основними, але можна використовувати більше акцентних кольорів. Наприклад, синій добре використовувати для заголовків, червоний ідеальний для кнопок. Вкладки навігаційного меню можна прикрасити більш світлим або темним відтінком основного кольору або пофарбувати в той самий колір, що й акцентні деталі. Таким чином, меню виділятиметься на полотні та надасть користувачам ідеальний візуальний досвід.

2 Мінімальна графіка

Веб-сайт із газетним макетом чистий, інформативний, структурований та має чітко та мінімалістично розроблені графічні елементи. Графічні елементи це:

лінії
форми
кольори
типографіка
текстури.

Як ми вже згадували, палітра кольорів на таких сайтах завжди проста. Текстури рідко використовуються в газетних веб-дизайнах, тому що стіна з текстом із зображеннями на дерев’яній або гранжевій текстурі відволікатиме увагу відвідувачів і погіршуватиме читабельність вмісту. Тим не менш, текстура паперу тут доречна. Це може бути фонова текстура, текстура кнопок або використовуватися лише для областей верхнього чи нижнього колонтитулів.

Звичайний дизайн на основі сітки або макет із кількома стовпцями скорочує використання форм і ліній, оскільки їх і так достатньо. Буде забагато геометрії, якщо ви розробите правильний веб-сайт форми з додатковим набором фігур.

3 Дизайн на основі сітки або макет із кількома стовпцями

Макет веб-сайту газети має ідеально організовану структуру. Це веб-сайти з багатим вмістом, які зазвичай мають такий дизайн, тому структура стає першою. Сітка або стовпці є найкориснішими типами розташування вмісту. Це правда, що «добре спроектовані системи сіток можуть зробити ваш дизайн не тільки красивішим і зрозумілішим, але й більш зручним для використання» (Марк Боултон). Розмітка на основі сітки дозволяє розбити вміст на комплексні блоки; тим самим залучайте користувачів читати ваш веб-сайт, а не переглядати його.

Подібним, але не однаковим є багатоколонковий макет. Це має бути кілька стовпців потрібної висоти, але не обов’язково однакової ширини. Чим ширші колонки, тим легше читається текст. Дві колонки можуть чудово виглядати, хоча три і більше однозначно краще. Стовпці, як сітка, допомагають диференціювати вміст, полегшують користувачам пошук цікавого розділу. Хоча, вибираючи цей стиль компонування, не варто забувати про зазор між колонками. Веб-сайт буде надзвичайно важко читати, якщо стовпці розташовані занадто щільно один до одного.

4 Заголовки та уривки

Ви хочете відкривати кожну публікацію та читати її, коли ви заходите на веб-сайт чи блог із багатьма текстами? Заголовки допомагають нам відрізнити цікаву статтю від другорядної. Отже, кожен блок вмісту повинен мати назву. Незалежно від того, чи це невеликий розділ у сітці, чи стовпець на всю висоту, він повинен мати заголовок. Заголовок має бути більшим шрифтом, надрукованим жирним шрифтом або виділеним іншим кольором. Це зрозуміло, я пропоную.

Уривки є короткими описами тексту статей. Це завжди робиться для того, щоб зацікавити читачів і дати їм зрозуміти довгий текст із кількох речень. Цей елемент корисний, якщо ви ведете блог, періодичне онлайн-видання, сайт новин тощо.

5 Основний і додатковий вміст

Намалюйте межу між частинами вашого вмісту. Визначте, що є найважливішим, а які тексти можуть зачекати на прочитання. Наприклад, ви можете оформити головну сторінку з великим розділом заголовка для нових дописів (одного чи кількох). Це спеціальна область із великими зображеннями та графікою. Інший вміст буде меншим і базуватиметься на дробах сітки. Це робить сильний акцент на останніх надходженнях і допомагає отримати більше соціальних поширень.

6 Інтуїтивно зрозуміла та послідовна навігація

Макет веб-сайту газети розроблений для вмісту, і цей вміст має бути простим для навігації. Отже, меню навігації характеризується своєю простотою та правильним розташуванням.

Найкраща позиція – верхня частина сторінки, оскільки ця зона згадується першою, і вона завжди знаходиться на одному місці – просто прокрутіть вгору, якщо ви знаходитесь унизу. Якщо ви любите вертикальну навігацію і не можете перестати її любити – зробіть своє меню вертикально орієнтованим, але зліва. Ми читаємо зліва направо, а не навпаки, тому елементи зліва потрапляють в очі раніше, ніж справа.

Веб-сайти в газетному стилі діляться безліччю текстів, і вони повинні бути доступними для користувачів.

7 Категоризація

Краще використання категорій доступне в макеті веб-сайту газети. Зокрема, це стосується блогів і будь-яких інших веб-сайтів. Більшість сайтів зазнають невдачі, тому що вони мають чисто організований вміст. Категорії необхідні, якщо ви часто дописуєте на різноманітні теми (наприклад, веб-сайти новин).

Розділіть вміст за категоріями та відобразіть його на бічній панелі або на панелі навігаційного меню.

8 Місце для реклами

Як ви збираєтеся заробляти гроші, перш ніж ваш сайт стане популярним? Багато власників веб-сайтів отримують досить великі прибутки від реклами. Рекламні банери повинні бути не просто десь розміщені, а ця позиція має бути чітко визначена. Правильними місцями є бокова панель, ліворуч і справа, верхній або нижній колонтитул. Рекламні банери часто можна побачити прямо в середині текстових статей, але цей момент викликає суперечки: це добре для вас як для людини, яка бере за це гроші, але ці елементи також можуть дратувати вашу читацьку аудиторію.

9 Функціональна бічна панель

Бічна панель може містити не лише рекламу, але й категорії вмісту, останній вміст, вікно пошуку, панель електронних листів, навігацію, кнопки публікації в соціальних мережах, знижки/спеціальні пропозиції тощо. Макет веб-сайту газети чудово підходить для застосування на бічній панелі, тому що це буде просто ще одна стовпець у рядку.

Є кілька складових успішного дизайну бічної панелі:

розмір (зріст і вага);
кольори;
шрифти;
розміщення.

Бічна панель має бути меншою або рівною звичайному стовпцю на вашому макеті, ні в якому разі не більшою. Він має бути в нейтральних кольорах, але з видимою типографікою. Розташування може бути як ліворуч, так і праворуч, але як ми вже сказали все ліворуч видно відразу.

10 Максимізація білого простору

Поки ми створюємо багатофункціональний сайт із вражаючим макетом, ми не можемо не згадати про білий простір. Це важлива складова навіть для оформлення газетного стилю. Нехай це буде простір між колонками, порожні ділянки з боків або внизу. Користувачі повинні мати можливість відвести очі від текстової стіни та подумати.

Як правило, пробіл вважається розділом, де нічого не введено. Є більш вузьке значення: пробіл між рядками тексту та літерами, навколо елементів вмісту. Це все, що робить ваш веб-сайт більш читабельним і простим, навіть якщо він наповнений надмірною кількістю елементів вмісту.

11 Часті оновлення вмісту

Верстка сайту газети зобов’язує постійно працювати над своїм проектом. Сайт з великою кількістю порожніх колонок і розділів сітки виглядатиме незграбно. Вам потрібно ретельно наповнити веб-сайт і дотримуватися тенденції регулярного оновлення вмісту, робити публікації частими та змінювати представлений вміст у заголовку (або там, де ви це робите).

Зміст і частота – це пара, як король і королева. Окрім самого зовнішнього вигляду веб-сайту, на ваші результати в пошукових системах впливає частий контент. Люди рідко відвідують ваш сайт, якщо він застарів, і Google це бачить. Отже, ваш вміст отримує гірші результати в результатах пошуку.

12 Заохочується обмін інформацією в соціальних мережах

Блоги та сайти новин найчастіше використовують газетний стиль, і ці веб-сайти не можуть існувати без інтеграції соціальних мереж. Це епоха масового шерингу, а соціальні мережі – це місце, де люди проводять більшу частину свого часу. Ви повинні використовувати круті кнопки підписки та спільного доступу для кожної мережі: Twitter, Facebook, Google+, Pinterest, LinkedIn тощо. Єдине застереження: не використовуйте облікові записи, які ви покинули, використовуйте лише ті, у яких часто публікуєте. Створіть ці кнопки найпомітнішими на веб-сайті, щоб забезпечити собі кращу візуальну видимість на медіа-платформах.

Щодо особливостей верстки сайту газети хочеться відзначити ще одну оперативність. Цей макет ніколи не залишиться незмінним на мобільних пристроях, і неможливо зробити мобільну версію, зберігаючи її в газетному стилі. Мобільний веб-сайт не повинен мати розміщення вмісту в кілька стовпців, і це є обов’язковим для веб-дизайну газети. Мобільний веб-сайт не може мати бічних панелей. І краще переглянути навігацію, тому що корисніше зробити свій мобільний сайт прокручуваним, а не клікабельним.