Принципы дизайна макета сайта газеты

Последнее обновление Ноя 19, 2024

Сегодня мы поговорим о стилях в дизайне веб-сайтов, и акцент сделаем на газетном стиле. В этом посте вы узнаете о наиболее отличительных чертах этого дизайна и получите несколько полезных советов, которым следует следовать, чтобы добиться лучших результатов в своем проекте.

Стиль — это общая комбинация того, как вы разрабатываете свой веб-сайт. Стиль также является способом общения между вами и вашей аудиторией. Каждый стиль веб-дизайна имеет свой определенный набор компонентов.

Основные стили в веб-дизайне:

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

Газетный стиль в основном использовался для интернет-газет и журналов, так как их печатные версии имеют такую структуру. Сегодня этот дизайн подходит для любого веб-сайта, особенно если он должен быть насыщенным контентом. Веб-сайт, выполненный в газетном стиле, легко узнать среди множества других по богатому содержанию макету, многоколоночной структуре, простым и контрастным цветам.

Макет сайта газеты: характеристики

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

Традиционная печатная газета белая или серая, а текст черный. Эта цветовая комбинация идеально подходит для наших глаз. Контрастность цветов облегчает читаемость, поэтому эта цветовая схема больше всего подходит для веб-сайтов в газетном стиле, которые обычно наполнены большим количеством контента. Вы можете отойти в сторону от этого классического сочетания цветов, но всегда помните, что контраст обязателен. Вы можете изменить обычный выбор цвета, сделав фон черным, а шрифт белым. Но никогда не используйте желтый на черном, зеленый на синем, розовый на синем и т. д. Попробуйте сами прочитать веб-сайт, если после этого ваши глаза чувствуют себя хорошо, вы можете использовать выбранные цвета в своем веб-проекте.

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

2 Минимальная графика

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

линии
формы
цвета
типография
текстуры.

Как мы уже упоминали, цветовая палитра на таких сайтах всегда проста. Текстуры редко используются в газетном веб-дизайне, потому что стена текста с изображениями на дереве или гранжевой текстуре будет отвлекать ваших посетителей и ухудшать читабельность контента. Тем не менее, текстура бумаги здесь как раз кстати. Это может быть текстура фона, текстура кнопок или использоваться только для областей верхнего или нижнего колонтитула.

Обычный дизайн на основе сетки или макет с несколькими столбцами сокращает использование фигур и линий, потому что их и так достаточно. Будет слишком много геометрии, если вы создадите свой веб-сайт правильной формы с дополнительным набором фигур.

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

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

Похоже, но не то же самое, многоколоночный макет. Это должны быть несколько столбцов нужной высоты, но не обязательно одинаковой ширины. Чем шире столбцы, тем читабельнее текст. Две колонки могут выглядеть великолепно, хотя три и больше определенно лучше. Колонки, как сетка, помогают дифференцировать контент, облегчают пользователям поиск интересующего раздела. При этом, выбирая этот стиль верстки, не стоит забывать о промежутке между столбцами. Сайт будет крайне тяжело читать, если столбцы будут слишком плотно прилегать друг к другу.

4 Заголовки и выдержки

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

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

5 Первичный и вторичный контент

Нарисуйте границу между частями вашего контента. Определите, что является наиболее важным, а какие тексты могут подождать, чтобы их прочитали. Например, вы можете создать главную страницу с большим заголовком для новых сообщений (одного или нескольких). Это избранная область с большими изображениями и графикой. Другой контент будет меньше и основан на фракциях сетки. Это делает сильный акцент на последних поступлениях и помогает получить больше социальных репостов.

6 Интуитивная и последовательная навигация

Макет веб-сайта газеты предназначен для контента, и этот контент должен быть удобным для навигации. Следовательно, меню навигации отличается простотой и правильным расположением.

Лучшая позиция — верхняя область страницы, потому что эта зона упоминается первой и всегда на одном и том же месте — просто прокрутите вверх, если вы находитесь внизу. В случае, если вы любите вертикальную навигацию и не можете перестать любить ее, сделайте свое меню вертикальным, но сделайте это слева. Мы читаем слева направо, а не наоборот, поэтому элементы слева попадают в глаза раньше, чем справа.

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

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

Лучшее использование категорий доступно в макете веб-сайта газеты. В частности, это относится к блогам, а также к любым другим веб-сайтам. Большинство сайтов терпят неудачу, потому что их контент чисто организован. Категории необходимы, если вы публикуете сообщения часто и на разные темы (например, новостные сайты).

Разделите свой контент на категории и отобразите их либо на боковой панели, либо в строке меню навигации.

8 Место для рекламы

Как вы собираетесь зарабатывать деньги до того, как ваш сайт станет популярным? Реклама – это то, на чем владельцы сайтов получают немаленькую прибыль. Рекламные баннеры нужно размещать не просто где-то, а точно определить эту позицию. Правильные места — боковая панель, как левая, так и правая, верхний или нижний колонтитулы. Промо-баннеры часто можно увидеть прямо посреди текстовых статей, но этот момент спорный: это хорошо для вас как человека, который берет за это деньги, но эти элементы также могут раздражать вашу читательскую аудиторию.

9 Функциональная боковая панель

Боковая панель может содержать не только рекламные объявления, но и категории контента, недавний контент, окно поиска, панель новостной рассылки по электронной почте, навигацию, кнопки обмена в социальных сетях, скидки/специальные предложения и т. д. столбец в строке.

Есть несколько составляющих успешного дизайна боковой панели:

размер (рост и вес);
цвета;
шрифты;
размещение.

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

10 Максимизация белого пространства

Поскольку мы создаем многофункциональный сайт с впечатляющей версткой, нельзя не вспомнить о пробелах. Это важный компонент даже для дизайна газетного стиля. Пусть это будет пространство между колонками, пустые участки по бокам или внизу. У пользователей должна быть возможность отвести взгляд от текстовой стены и подумать.

Как правило, пробелом считается раздел, в котором ничего не печатается. Есть и более узкое значение: белое пространство между строками текста и буквами, вокруг элементов контента. Это все, что делает ваш сайт более читабельным и простым, даже если он наполнен чрезмерным количеством элементов контента.

11 частых обновлений контента

Макет сайта газеты обязывает вас постоянно работать над своим проектом. Сайт с множеством пустых колонок и разделов сетки будет выглядеть неуклюже. Вам нужно тщательно наполнять веб-сайт и придерживаться тенденции регулярно обновлять контент, делать публикации частыми и менять рекомендуемый контент в шапке (или где бы вы это ни делали).

Содержание и частота — это пара, как король и королева. Помимо самого внешнего вида сайта, на его результаты в поисковых системах влияет частый контент. Люди редко посещают ваш сайт, если он устарел, и Google его видит. Таким образом, ваш контент получает худшие оценки в результатах поиска.

12 Социальный обмен поощряется

Блоги и новостные сайты чаще всего используют газетный стиль, и эти сайты не могут существовать без интеграции с социальными сетями. Это эпоха массового обмена, и социальные сети — это место, где люди проводят большую часть своего времени. Вы должны использовать крутые кнопки «Подписаться» и «Поделиться» для каждой сети: Twitter, Facebook, Google+, Pinterest, LinkedIn и т. д. Единственное предостережение: не используйте учетные записи, от которых вы отказались, используйте только те, которые вы часто публикуете. Сделайте эти кнопки наиболее заметными на веб-сайте, чтобы обеспечить себе лучшее визуальное присутствие на медиа-платформах.

Еще одна вещь, которую мы хотели бы отметить об особенностях верстки сайта газеты, это отзывчивость. Этот макет никогда не останется прежним на мобильных устройствах, и нет возможности сделать мобильную версию, сохранив ее в газетном стиле. Мобильный веб-сайт не должен иметь многоколоночного размещения контента, и это обязательно для веб-дизайна газеты. Мобильный сайт не может иметь боковые панели. И лучше пересмотреть навигацию, потому что полезнее сделать ваш мобильный сайт прокручиваемым, а не кликабельным.