Как удачно расположить контент на странице

Первое впечатление — самое важное, поэтому необходимо захватить внимание посетителей с самого начала и сделать так, чтобы их пребывание на сайте было полезным и для вас, и для них. Чистая и аккуратная структура страниц поможет вам эффективнее общаться с вашей аудиторией через сайт. Именно детали дизайна и структуры сайта зачастую обеспечивают его успех у посетителей. Сочетания различных элементов помогает создать ту золотую комбинацию, которая вызывает ВАУ-эффект и позитивные эмоции, а также отвечает за удобство и ясность сайта. Большое количество информации, сложный дизайн и долгое время загрузки отталкивают посетителей. Мы подготовили для вас информацию об основных принципах в оформлении страниц, а также несколько примеров для вдохновения.

Разметка сайта

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

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

Хороший пример

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

Плохой пример

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

Визуальная иерархия контента

В большинстве стран люди читают слева направо и сверху вниз. Но также следует помнить и о том, что посетители сайта сперва сканируют его глазами, а потом уже начинают читать размещенные на нём тексты. Постарайтесь обязательно учитывает это свойство и стройте структуру страницы логичным и последовательным образом. Используйте логотип, заголовки, тексты и изображения, разделяя их визуально. Как правило, такие элементы размещают в виде букв F или Z. 

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

Использование заголовков

В Интернете содержится огромное количество различной информации, поэтому пользователи привыкли быстро «сканировать» сайты глазами на наличие релевантного для них контента. Используйте заголовки в начале каждой страницы вашего сайта, а также разделяйте по смыслу части контента. Это поможет посетителям вашего сайта быстрее найти именно то, что они искали. 

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

Вы можете чередовать использование средних и маленьких заголовков в тексте, а вот использование большого заголовка (H1) рекомендуется только один раз на странице. 

Тексты на страницах вашего сайта

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

Фотографии и изображения

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

Модуль Колонки

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

Использование боковой панели и подвала сайта

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

Меньше — значит больше

«Меньше значит больше» — концепция, которую в 40-е годы развивал немецкий архитектор Людвиг Мис ван дер Роэ, работая над своими предельно простыми, но эстетически красивыми шедеврами архитектуры. Именно благодаря этой идее он заставлял каждый элемент своего проекта работать на достижение сложных визуальных и функциональных целей. Это правило применяется и к современному веб-дизайну, один из самых важных канонов которого — пустое пространство.

Когда вы только начинаете работу над своим сайтом и добавляете на него один за другим различные элементы, ваш сайт может показаться немного «загруженным» и, вместе с этим, сложно читаемым. Чтобы избежать этого, используйте модуль Интервал для создания отступов и пустых областей на вашем сайте.

Идеи расположения контента на главной странице

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

Бизнес-сайт (шаблон Dubai)


Портфолио (шаблон Shanghai)


Интернет-магазин (шаблон Zurich)




Предыдущая статья:

Изображения для сайта