Все новости 13 февраля 2025 Все теги

Секреты дизайна в Nethouse. Часть 8.

Рекомендации по оформлению сайтов на нашей платформе предоставляет Григорий Левин, руководитель студии дизайна "Интегра", первый агент Nethouse:

"В новой главе "Секретов" мы расскажем о тех блоках конструкторов сайта Nethouse, которые используем в своей работе каждый день, и о возможностях, которые они предоставляют. Пункты обзора, как и прежде, мы проиллюстрируем примерами работ.

Главный экран

Первый блок, который традиционно используется на сайте — это главный экран. Он задает тон всему проекту и формирует первое впечатление. Чаще всего мы используем три его варианта: "Возможности", "Карусель" и "Слайдер". В каждом из этих блоков можно разместить тематическое изображение и ключевой текст, который поможет пользователю сразу понять, о чем сайт и какие услуги или товары он предлагает. Заголовок должен быть ярким, крупным и понятным. Для лучшей индексации в поисковых системах его следует оформлять с использованием SEO-тега H1, что ускорит попадание сайта в поисковую выдачу.

Также рекомендуем размещать под заголовком краткий пояснительный текст, который подробнее раскрывает суть бизнеса, и одну-две кнопки для навигации или призыва к действию:

если у вас интернет-магазин, первая кнопка обычно ведет в каталог товаров, а вторая — на быстрый звонок или онлайн-консультацию;
если сайт представляет компанию, первая кнопка направляет пользователя либо в каталог услуг ("Наши услуги", "Услуги компании"), либо на форму обратной связи ("Оформить заказ", "Вызвать мастера", "Получить консультацию"). Вторая кнопка — это либо номер телефона, либо удобный способ связи через Telegram, WhatsApp и другие мессенджеры.

Возможности

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

Слайдер

Слайдер — полноформатный слайдер, изображения (слайды) в котором занимают всю ширину независимо от размера экрана.

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

Ранее высота слайдера была фиксированной, но теперь она регулируется, что позволяет сделать слайдер чуть более аккуратным. Важно учитывать, что в слайдере можно использовать только одну кнопку, тогда как в "Карусели" и "Возможностях" предусмотрены две.

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

Карусель

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

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

Призыв к действию (CTA)

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

Стоит отметить, что этот блок отлично дополняет главный экран. Например, в основном блоке можно разместить фоновое изображение, а в "Призыв к действию" — заголовок H1, краткий пояснительный текст и две кнопки с ключевыми действиями.

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

Бургер-меню

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

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

Карточки

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

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

делать превью категорий товаров или услуг для главной страницы;

разместить преимущества компании;

оформить блок "Наши партнеры" или "Ключевые клиенты";

подготовить стильный блок с отзывами

...или даже такой.

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

Горизонтальные карточки

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

Этот блок также можно использовать гибко:

для размещения превью услуг и категорий товаров;

преимуществ компании;

а так может выглядеть сочетание блоков "Карточки" и "Горизонтальные карточки".

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

Возможности

Хотелось бы снова вернуться к блоку "Возможности", так как ранее мы рассматривали его только в контексте главного экрана. Однако его применение этим не ограничивается — этот блок можно использовать в самых разных разделах сайта. Он отлично подходит для размещения услуг, где можно комбинировать изображение, текст и кнопки. Кроме того, этот блок можно использовать для раздела "О компании", для представления ключевых преимуществ или других информационных блоков. Благодаря гибким настройкам, можно менять фон, добавлять подложки, скруглять углы и адаптировать его под любые задачи.

Товары с тегом

Еще один полезный блок на Nethouse — "Товары с тегом". Он предназначен для интернет-магазинов и позволяет гибко управлять подборками товаров на сайте. Если у вас уже заполнен каталог, вы можете отметить товары определенными тегами и вывести их в нужных местах. Даже если каталог еще в процессе наполнения, достаточно загрузить 5–6 товаров, чтобы протестировать, как работает этот инструмент.

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

Блок "Товары с тегом" поддерживает функцию слайдера, позволяя отображать до 20 товаров в одном блоке. Если на странице размещены три блока, общее количество отображаемых товаров может достигать 60. Такой формат помогает экономить место и делает страницу более компактной и удобной, особенно на мобильных устройствах. Важно помнить, что пользователи не всегда готовы долго листать сайт, поэтому ключевую информацию лучше размещать выше и делать ее лаконичнее.

Карусель

Вернемся еще раз к возможностям блока "Карусель". Его также можно применять не только в качестве главного экрана, но и в ряде других случаев.

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

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

Еще одно интересное применение "Карусели" — оформление отзывов. Особенно эффектно это смотрится, если у отзыва есть фотография клиента, но можно использовать и просто текстовые отзывы.

Видеоролик

Блок "Видеоролик" позволяет вставлять видео с популярных ресурсов, например, YouTube, VK Видео и других. В настройках можно задать ширину видео, скругление углов и другие параметры, что дает возможность адаптировать его под стиль сайта.

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

Форма заявки

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

Вопрос-ответ

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

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

Карта

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

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

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

Сквозной подвал/Колонки

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

Блок "Колонки" позволяет размещать текст в несколько столбцов в любом месте сайта. Это удобно, если нужно структурировать список услуг, категорий или другой контент, а также добавить ссылки для удобной навигации.

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

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

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

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

В заключение

На этом мы подводим итог очередной части "Секретов дизайна". В следующих подробно расскажем, с чего начать создание сайта на Nethouse в 2025 году, а также рассмотрим все новые блоки, их расположение, дизайн и настройки. Постараемся помочь вам разобраться во всех нюансах, чтобы вы могли максимально эффективно использовать возможности платформы.

Если у вас еще нет сайта, попробуйте создать его самостоятельно и поэкспериментировать с возможностями Nethouse прямо сейчас. Получите 1 месяц тарифа "Сайт" в подарок, зарегистрировавшись с промокодом: integra_invite

Если у вас возникнут вопросы, связанные с разработкой сайта на Nethouse, вы можете связаться с нами следующими способами:

Григорий Левин: +7 (921) 228-25-55 | Whatsapp | Telegram | Вконтакте

Сайт студии дизайна "Интегра""

Поделиться новостью

Секреты дизайна в Nethouse. Часть 8.

Последние новости

Интервью с пользователем: Денис и Ирина Окорочковы

Новый сбор за распространение рекламы: кого коснутся изменения с 1 апреля

Новая корзина на вашем сайте

Перенесите домены .RU и .РФ к нам за 0 рублей